何でもかんでもコピペで解決！とはいかない
コンピューター言語なんて何にも分からずブログを始めて、CSSやhtmlはほとんどコピペです。ありがとうみなさん。
仕事は調理師なので、パソコンは畑違いな婿どの（immukodono）。
でも色々調べるのが好きなので、興味からブログを始めて少しずつ楽しくなってきました！
今回は、
リスト（li）の頭文字をフォントオーサムの絵文字にしたいなぁとやってみたら、なかなか大変だったという記事です。
婿どのが使用している『Lion Media』というテーマ特有の問題かもなので、注意です。
結論から言うとCSSに『.content』を付けたら上手くいきましたよ(・∀・)♪
Font Awesome（フォントオーサム）とな？
フォントオーサムとは、
様々なアイコンを表示できるウェブフォントです。
例えば、『婿どの』のこれ 『』もフォントオーサム先生の仕業です。
アイコンですが画像ではなく、あくまでフォントなので、文字をイジるのと同様に大きさや色などを変えることができます。
アイコンの種類はたくさん
Twitterアイコンの他にも、などの企業ロゴ。
顔文字（ ）とか、
飛行機（ ）とか、
ペン（ ）とか、
肉球 もありましたよ（´ω｀）
フォントオーサムを箇条書きリストのマーカーに
で、
このフォントオーサムのアイコンを、リストタグ（li）で囲った時に出来る箇条書きの『・』黒ポチ部分に使いたいのです。
こちらのサルワカさんの記事 を参考にしました！
コピペで使えるリストデザイン34選：CSSで箇条書きをおしゃれに - サルワカ | サルでも分かる図解説明マガジン |
まずはフォントオーサムを表示できるようにする
フォントオーサムをブログに表示できるようにするためには、テーマの<head>部分にフォントオーサムを読み込む為の魔法をかけなければいけません。
婿どのの<head>にはこのように記述してあります。
これでブログに
<i class=”fab fa-twitter”></i>
のように記述すると、アイコンが表示されます。
アイコンは【Font Awesome】の一覧からどうぞ。
LION MEDIAの<head>編集
LION MEDIAで<head>内を編集する時は、ダッシュボードの『外観』から、『高度な設定』を選択すれば出来ますよ。
その他のテーマの場合は『テーマの編集』から、『テーマヘッダー（header.php）』を探します。
LION MEDIAの場合
実際にCSSをコピペしてみた
フォントオーサムが表示される状態になったので、先ほどの記事通りにCSSへコピペしてみました。
選んだデザインはこちら
ul {
border: solid 2px #ffb03f;
padding: 0 0.5em;
position: relative;
}
ul li {
line-height: 1.5;
padding: 0.5em 0 0.5em 1.4em;
border-bottom: dashed 1px silver;
list-style-type: none;
}
ul li:before {
font-family: "Font Awesome 5 Free";
content: "f138";/*アイコン種類*/ position: absolute;
left : 0.5em; /*左端からのアイコンまで*/ color: #ffb03f; /*アイコン色*/}
ul li:last-of-type{
border-bottom: none;
}
実際にどうなったか
右側にプレビューが表示されるのですが、
とても斬新な感じでレイアウトが崩れました(゜_゜)
いたる所にリストデザインが採用されてる
婿どのは『LION MEDIA』というとっても素晴らしいテーマを使っているのですが、レイアウトにもliタグって使われているんですね。
敏感な子。
いろんな部分に、先ほどCSSに指定したデザインが反映されてまくってます。
いや、こりゃ参った！
解決策はあるのか…
ここから数時間、ネット上をさまよって解決を探しましたが見つからず。
諦めかけたその時、ダメ元である事をやってみたところ、レイアウト崩れが直りました！
.content で解決！
先ほど入力したCSSの上を遡ってみると、こういった記述を見つけました
過去に、
リスト内の文字の大きさを、もっと大きくするようCSSで指定した跡でした。
もちろんこれも、大先輩方の情報をググってコピペしただけなので、細かい事はよく分からず記述したものです(･д･`*)
この時は『ul li』の前に【.content】と記述してあります。
そこで、
試しにさっき記述したCSSの前に【.content】を付けてみました。
ダメ元で.contentを付けてみた
すると…
おぉ！
黄色い線とか、矢印のマーカーとかが無くなってる！！
どうやら道が見えてきたようです( •̀ .̫ •́ )✧
好みのアイコンを選んでマーカーに指定
先ほどのサルワカさんの記事 では、リストをオシャレな枠で囲うデザインでした。
それも良いのですが、リストをいつも枠で囲いたい訳ではないので、今回はリストの『・』黒ポチをFont Awesomeに変更するだけにしました(˘ω˘)
使いたいアイコンは…
こちらのスマイルちゃん
以下のように記述しました
.content ul li:before {
font-family: "Font Awesome 5 Free";
content: "f4da";/*アイコンのコード*/ position: absolute;
display: block;
padding: 0.5em;
width: 1.2em;
color: #028760; /*アイコン色*/ font-weight: normal;/*アイコンは太字にしない*/ text-align: center;
left : -0.5em; /*左端からのアイコンまでの距離*/ top : -0.4px
} アイコンを変更したい場合は、
【Font Awesome】の一覧から好みのアイコンのコードに変えてください。
基本はサルワカさんの記事で完結するはずですので、婿どのの記事を参考にする人はほとんどいないと思いますが 笑
htmlに詳しい方には鼻で笑われると思いますので、正しいやり方をご存じの方がいらっしゃれば教えて頂きたいです(>_<.)
リストがこんな感じになりました！
今回は、
婿どののような方の参考になればと思い、投稿しましたよ( ´_ゝ`)