リストの頭にFont Awesomeを使いたい!CSSにliタグの編集をコピペしたらレイアウトが崩れてしまったけど『.content』にしてみたら上手くいった話|LION MEDIA

リストの頭にFont Awesomeを使いたい!CSSにliタグの編集をコピペしたらレイアウトが崩れてしまったけど『.content』にしてみたら上手くいった話|LION MEDIA

何でもかんでもコピペで解決!とはいかない

コンピューター言語なんて何にも分からずブログを始めて、CSSやhtmlはほとんどコピペです。ありがとうみなさん。

仕事は調理師なので、パソコンは畑違いな婿どのmmukodono)。

でも色々調べるのが好きなので、興味からブログを始めて少しずつ楽しくなってきました!

今回は、
リスト(li)の頭文字をフォントオーサムの絵文字にしたいなぁとやってみたら、なかなか大変だったという記事です。

婿どのが使用している『Lion Media』というテーマ特有の問題かもなので、注意です。

結論から言うとCSSに『.content』を付けたら上手くいきましたよ(・∀・)♪

Advertisement

Font Awesome(フォントオーサム)とな?

フォントオーサムとは、
様々なアイコンを表示できるウェブフォントです。

例えば、『婿どの』のこれ 』もフォントオーサム先生の仕業です。

アイコンですが画像ではなく、あくまでフォントなので、文字をイジるのと同様に大きさや色などを変えることができます。


アイコンの種類はたくさん

Twitterアイコンの他にも、などの企業ロゴ。

顔文字( )とか、

飛行機( )とか、

ペン( )とか、

肉球 もありましたよ(´ω`)

フォントオーサムを箇条書きリストのマーカーに

で、
このフォントオーサムのアイコンを、リストタグ(li)で囲った時に出来る箇条書きの『・』黒ポチ部分に使いたいのです。

こちらのサルワカさんの記事 を参考にしました!


まずはフォントオーサムを表示できるようにする

フォントオーサムをブログに表示できるようにするためには、テーマの<head>部分にフォントオーサムを読み込む為の魔法をかけなければいけません。

婿どのの<head>にはこのように記述してあります。

<link href=”https://use.fontawesome.com/releases/v5.6.1/css/all.css” rel=”stylesheet”>

これでブログに
 <i class=”fab fa-twitter”></i>
のように記述すると、アイコンが表示されます。

アイコンは【Font Awesome】の一覧からどうぞ。

LION MEDIAの<head>編集

LION MEDIAで<head>内を編集する時は、ダッシュボードの『外観』から、『高度な設定』を選択すれば出来ますよ。

その他のテーマの場合は『テーマの編集』から、『テーマヘッダー(header.php)』を探します。

LION MEDIAのhead編集は『高度な設定』の中にある

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!important;
}

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の上を遡ってみると、こういった記述を見つけました

リストの文字サイズを変更するために.contentと記述していた

過去に、
リスト内の文字の大きさを、もっと大きくするようCSSで指定した跡でした。

もちろんこれも、大先輩方の情報をググってコピペしただけなので、細かい事はよく分からず記述したものです(・д・`*)

この時は『ul li』の前に【.content】と記述してあります。

そこで、
試しにさっき記述したCSSの前に【.content】を付けてみました。

.contentを追加してマーカーにフォントオーサムを指定したhtmlをCSSに書き込んでみたら

ダメ元で.contentを付けてみた

すると…

.contentを前につけた状態でCSSに書き込んだところ上手くいきました

おぉ!

黄色い線とか、矢印のマーカーとかが無くなってる!!

どうやら道が見えてきたようです( •̀ .̫ •́ )✧

好みのアイコンを選んでマーカーに指定

先ほどのサルワカさんの記事 では、リストをオシャレな枠で囲うデザインでした。

それも良いのですが、リストをいつも枠で囲いたい訳ではないので、今回はリストの『・』黒ポチを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】の一覧から好みのアイコンのコードに変えてください。

Font Awesomeの一覧から選んでコードを変えれば好きなアイコンを指定できます

基本はサルワカさんの記事で完結するはずですので、婿どのの記事を参考にする人はほとんどいないと思いますが 笑

htmlに詳しい方には鼻で笑われると思いますので、正しいやり方をご存じの方がいらっしゃれば教えて頂きたいです(>_<.)

フォントオーサムをリストのマーカーにする

リストがこんな感じになりました!

今回は、
婿どののような方の参考になればと思い、投稿しましたよ( ´_ゝ`)

ブログランキング・ブログ村

ブログとアプリと私カテゴリの最新記事