こんにちは。ギガログ管理者のはらちゃんです。
今回はWordPressテーマSTORKでリストマーク、箇条書きの点が消えないときの対処法をご説明します。
サイトを作成する上でリストタグ(箇条書き)を使用される方は多いと思います。
ワードプレスを使用していれば、番号なしリスト、番号付きリストを投稿記事にボタン1つで簡単に挿入できます。
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の使い方は下記の記事にまとめていますので、是非ご参考ください。
以上、リストマーク、箇条書きの点を消す方法をご説明いたしました。
ご覧頂きありがとうございました!!
はじめまして。ハミングバードで、リストが消せなくて困っていました。
コチラの方法で、消去できました。とても、助かりました。有益な情報をありがとうございました。
初めまして!コメント頂きありがとうございます!
提供元が同じなのでいけるようですね。
私も違うテーマでも同じやり方なのだなと参考になりました!
はじめまして。テーマ「ストーク」を使ってブログ運営しています。
リストをアイコンマークに変更する際に、重なってしまい、非常に困っておりました。
noneで何度も指定していましたが、width+heightと打ち込んだらあっさり消えてくれました^^
応用にも使えたので、早速カスタマイズしようと思います。
本当に助かりました。ありがとうございました!
はじめまして(^ω^)
コメント頂きまして、ありがとうございます!
私も最初は手こずりました(笑)
本記事がお役に立ったとのことで、大変嬉しく思います!