ブログカテゴリなどの【アイコン】はどうしたらつけられる？方法を紹介
こんにちは、kuriです。
今回は珍しくブログ向上について、
よくカテゴリーなんかで見かけるアイコンの導入方法を紹介します。
前回ブログレイアウトをいじった時、ブログテーマのすぐ下にカテゴリーを追加しました。
そして他の人のブログを参考にしていると、それぞれアイコンが付いていたんですね。
私もつけたくて調べて、サイトまで突き止めたのは良かったのですが。 コードを指定の場所にコピペしても、反映されないのです。
そこで、私のブログの先輩であり同期である
ケンキブログに助けを求めたところ、ちゃちゃっと教えてくれました。
以外と情報が無かったので、同じくブログ初心者の方の為に、方法をここに書きたいと思います。
サイト
このサイトに行くと、キーワードでアイコンを検索できるようになっています。ヒットすると、該当するアイコン一覧が出てきます。
欲しいアイコンをクリックすると、上の部分にそのアイコンを表すコードが。こちらをコピペすればOK。
ちなみに英語のサイトです。ですがキーワードを英語入力するだけなので、問題ありません。
また、課金しないとゲットできないものも混ざっていますので、無料で使えるものを選びましょう。
貼り付けるべきコード
このコピーしたアイコンのコードを表示したい場所に貼り付けただけでは、ブログはアイコンを認識してくれません。
以下のコードを、設定→詳細設定→「headに要素を追加」に貼り付けると、アイコンコードを認識してくれるようになります。
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
例えばカテゴリー「海外経験談」のアイコンはここに貼り付けています。
デザイン→カスタマイズ→ヘッダ→「タイトル下」にカテゴリー表示のためのコードを貼っていたため、文字の前にアイコンコードを貼り付けました。
<div class="menu"><a href="https://kurikuri421.hatenablog.com/archive/category/%E6%B5%B7%E5%A4%96%E7%B5%8C%E9%A8%93%E8%AB%87?_ga=2.210869843.779696128.1535857217-451876738.1533206307"><i class="fas fa-plane-departure"></i> 海外経験談</a></div>
さあ、これでアイコンが表示されるようになりました！アイコンを使ってデザイン性のあるページにしましょう。
ここでは1番手軽にできる操作を紹介しましたが、詳しく知りたい方はこちらのページを。
アイコンでおしゃれにデザインしましょう！
↓自己紹介
