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

WordPressテーマ【STORK】でリストマークが消えないときの対処法のアイキャッチ画像

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

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



 

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

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

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

  • アルバトロス
  • ハミングバード
  • ストーク
  • スワロー

 

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

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

  • アルバトロス
  • ハミングバード
  • ストーク
  • スワロー

 

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

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

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

 

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

  1. アルバトロス
  2. ハミングバード
  3. ストーク
  4. スワロー

 

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

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

  1. アルバトロス
  2. ハミングバード
  3. ストーク
  4. スワロー

 

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; /*数字の色*/
}

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

  1. アルバトロス
  2. ハミングバード
  3. ストーク
  4. スワロー

 

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

 

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

<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の使い方とカスタマイズ方法を解析!!のアイキャッチ画像

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

2018年2月17日

 

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

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






2 件のコメント

  • はじめまして。ハミングバードで、リストが消せなくて困っていました。

    コチラの方法で、消去できました。とても、助かりました。有益な情報をありがとうございました。

    • 初めまして!コメント頂きありがとうございます!
      提供元が同じなのでいけるようですね。
      私も違うテーマでも同じやり方なのだなと参考になりました!

  • コメントを残す

    メールアドレスが公開されることはありません。 * が付いている欄は必須項目です