WordPressテーマ【STORK】でリストマークが消えないときの対処法

こんにちは。ギガログ管理者のはらちゃんです。

今回はWordPressテーマSTORKでリストマーク、箇条書きの点が消えないときの対処法をご説明します。

サイトを作成する上でリストタグ（箇条書き）を使用される方は多いと思います。

ワードプレスを使用していれば、番号なしリスト、番号付きリストを投稿記事にボタン１つで簡単に挿入できます。

STORKで番号なしリストを表示するとこのようになります。

リストマークの代わりにおしゃれなアイコンを表示されたい方もいますよね。

例えば、リストマークをチェックマークにしてみます。

標準のリストマークより、少しおしゃれになりますね。

こちらはリストの点を消し、アイコンを挿入することで実現できます。

しかし、STORKは通常の消し方では点を消せないのです。

例えば、STORKで番号付きリストを表示してみると・・・

何故か丸数字になってますね。

見方によってはおしゃれに見えますが、通常では丸は入らず、下のようになります。

STORKではリストを使用した際、丸が挿入されてしまうようです。

この丸を消すことにたどり着くまで相当苦労しました。

まず、HTMLでリストマークを消すのを試みてみます。

消すにはlist-style:none;を指定します。

<ul style="list-style:none;">
	<li>アルバトロス</li>
	<li>ハミングバード</li>
	<li>ストーク</li>
	<li>スワロー</li>
</ul>

リストマークが消えてませんね・・・

次にCSSで消すのを試みてみます。

CSSなのでHTMLの構文にクラスを指定します。

<ul class"list_test">
	<li>アルバトロス</li>
	<li>ハミングバード</li>
	<li>ストーク</li>
	<li>スワロー</li>
</ul>

CSSでは!importantを加え、list-style-type:none !important;を指定してリストマークを消してみます。

なお、投稿記事に対してCSSを有効とするために、.entry-contentをつけます。

.entry-content ul.list_test{
	list-style-type:none !important;
}

今度こそ！！

またしても消えませんでした・・・

さらにリストマークをアイコンにしようとしてみると、

こちらも丸は消えず、丸とチェックアイコンが両方表示されています。

ネットで調べてみるとリストマークの消し方としてはこの2パターンがよく載っています。

ですが、両者STORKの前に撃沈。

様々な方法を試し、最終的に辿り着いた方法はこちら！！

.entry-content ul li:before{
	width: 0;
	height: 0;
}

擬似要素:beforeを使用し、リストマークを隠します！！

こちらを使用し、まず番号なしリストを表示してみます。

<ul class="list_num_none">
	<li>アルバトロス</li>
	<li>ハミングバード</li>
	<li>ストーク</li>
	<li>スワロー</li>
</ul>

.entry-content ul.list_num_none li:before{
	width: 0;
	height: 0;
}

結果はこちら！

遂に点が消えてくれました。

この勢いで番号付きリストの点も消してみます。

<ol class="list_num">
	<li>アルバトロス</li>
	<li>ハミングバード</li>
	<li>ストーク</li>
	<li>スワロー</li>
</ol>

.entry-content ol.list_num li:before{
	width: 0;
	height: 0;
	color: black; /*数字の色*/
}

色を指定しなければ数字が表示されないので、ここでは黒色を指定します。

こちらも無事表示されました！！

さて、点も消すことができましたので、点をアイコンにしてみましょう。

<ul class="list_check">
	<li>アルバトロス</li>
	<li>ハミングバード</li>
	<li>ストーク</li>
	<li>スワロー</li>
</ul>

こちらは少しCSSが複雑になりますが、おしゃれなリストを紹介しているサイトは多くありますので、検索してみてください。

.entry-content ul.list_check{
	padding: 0.5em 1em 0.5em 2.3em;
	position: relative;
}

.entry-content ul.list_check li{
	padding: 0.5em 0;
}
.entry-content ul.list_check li:before{
	width: 0; /*リストマークを消す*/
	height: 0; /*リストマークを消す*/
	font-family: FontAwesome; /*アイコンを使用するおまじない*/
	content:“\f00c”; /*アイコンを使用するおまじない*/
	position: absolute;
	left: -1.5em; /*左端からのアイコンまで*/
	color: #ffb03f; /*アイコンの色*/
}

表示してみると、

いい感じに表示されましたね。

ここではチェックマークにしていますが、アイコンは様々なものに変更することができます。

FontAwesomeを使用していますので、お好きなアイコンに変更してみてください。

FontAwesomeの使い方は下記の記事にまとめていますので、是非ご参考ください。

【Web知識不要】Font Awesome 5の使い方とカスタマイズ方法を解析！！

2018年2月17日

以上、リストマーク、箇条書きの点を消す方法をご説明いたしました。

ご覧頂きありがとうございました！！