WordPressテーマ「スワロー」のメニューにアイコン追加するカスタマイズ♪【 CSSのみ】

ねぇ、みんなぁ～、ブログのメニューにアイコンが付いてるサイトってあるじゃない？私も追加してみたいのよね♪

うんうん、アイコンが付いてると分かりやすいしちょっとリッチだね……♪

あれはCSSの擬似要素で追加できるって、かがみが言ってたよ！（ボヨンボヨン

ぼよんぼよん

こんにちは、かがみ（@cony_tas）です！

WordPressテーマ「スワロー」のメニューにアイコンを追加してリッチな見た目にしてみたいと思ったことはありませんか？

例えば当ブログのメニューに当てはめてみると、こんなイメージです。

各メニューテキストの左に「Font Awesome」から読み込んだアイコンが追加されていますね♪

このアイコン、CSSの擬似要素を使えばCSSを追加するだけでカスタマイズできるので、本記事ではそのやり方をご紹介しようと思います！

記事でわかること

・スワローのメニューにアイコンを追加するカスタマイズ方法

記事の信頼性

筆者のかがみ（@cony_tas）はブログ立ち上げ時からスワローをカスタマイズして使用しています。

CONTENTS［ hide ］

01｜ WordPressテーマ「スワロー」のメニューにアイコン追加するカスタマイズ♪
・CSSのみでアイコンを追加する方法とは
・CSS擬似要素でアイコンを追加する
・テーマエディターでカスタマイズする
02｜最後に：WordPressテーマ「スワロー」のメニューにアイコン追加するカスタマイズ♪

WordPressテーマ「スワロー」のメニューにアイコン追加するカスタマイズ♪

WordPressテーマ「スワロー」は、シンプルで美しく、無駄なものをそぎ落とした洗練されたWordPressテーマです。

今回はメニューにアイコンを追加してちょっとリッチにしてみましょう♪

CSSのみでアイコンを追加する方法とは

HTMLに手を加えず、なぜCSSのみでアイコンを追加できるのかというと、「CSS擬似要素」によって「指定のタグ内の前後にコンテンツを追加」することができるからです。

具体的には下のようなイメージでコンテンツを追加します。

CSSってこんなこともできるんだぁ～♪ 早くやってみたい！

では、:before擬似要素を使ってメニューテキストの左横にアイコンを追加してみましょう！

CSS擬似要素でアイコンを追加する

手始めに、当ブログのメニュー「Web/UI・デザイン」の横にアイコンを追加してみますね。

まず擬似要素を追加するタグとCSSで指定するためのIDやクラス名を調べないといけません。

GoogleChromeブラウザでブログのトップページを開いて、キーボードの「F12」を押してください。
そして下の画像のように、メニューテキスト周りのタグを調べます。

1.①のアイコンをクリックして要素を選択できる状態にする
2.カーソルをメニューテキストに合わせてクリックする
3.メニューテキスト周りのタグとID・クラス名を調べる

メニューテキストが入っている<li>タグにID・クラス名が設定されているので、今回はクラス名「.menu-item-105」に対して:before擬似要素を追加してみようと思います。
このクラス名は当サイトの場合なので、必ずあなたのブログで<li>タグに設定されているクラス名を確認してください。
クラス名を調べて正しく設定しないと本記事のコードをコピペしてもアイコンが表示されないので注意です。

それではクラス名を調べることができたのでCSSを追加していきますが、カスタマイズする前にスワローの子テーマはインストールしていますか？

親テーマに直接CSSを追加してしまうと、テーマのアップデートがあった際にカスタマイズ内容がリセットされてしまうので、まだ子テーマをインストールしていなければ「OPENCAGE公式サイト」からダウンロードしてきましょう！

>> 子テーマのダウンロード・導入方法

テーマエディターでカスタマイズする

子テーマをインストールできたら、テーマエディターでCSSを追加します。
WordPressの管理画面を開き、下の画像のように「style.css」編集画面に移動してください。

子テーマをインストール・有効化していれば、「編集するテーマを選択」の部分が「swallow_custom」になっているので、スタイルシート（style.css）を選択します。

ここに下記のCSSを追加すると、メニューテキストの左横にアイコンが表示されます！

.menu-item-105::before {
    display: block;
    position: absolute;
    top: 14px;
    left: -22px;
    bottom: 0;
    font-family: "fontawesome";
    content: "\f03e"; ←これがアイコンのコード
}

わぁー、本当にCSSだけでアイコン追加できた……♪

アイコンかわいい！！他のメニューのアイコンも選んでくるね♪

「Web/UI・デザイン」テキストの横にアイコンを追加できました♪

あ、使用するアイコンは下記のサイトが素早く検索できるのでおすすめです。
>> アイコンを検索する

ちなみにこれはPCで見る分には問題ないんですが、スマホやタブレットで確認するとメニューとメニューの間のマージンが詰まって見えてしまうので、最終的に調整します。

では続けて、すべてのメニューテキストにアイコンを追加していきますね。
各クラス名はあなたのブログのものに変更するのを忘れずに！

.menu-item-105::before {
    display: block;
    position: absolute;
    top: 14px;
    left: -22px;
    bottom: 0;
    font-family: "fontawesome";
    content: "\f03e";
}
.menu-item-136::before {
    display: block;
    position: absolute;
    top: 12px;
    left: -20px;
    bottom: 0;
    font-family: "fontawesome";
    font-size: 110%;
    content: "\f121";
}
.menu-item-208::before {
    display: block;
    position: absolute;
    top: 13px;
    left: -18px;
    bottom: 0;
    font-family: "fontawesome";
    font-size: 110%;
    content: "\f044";
}
.menu-item-209::before {
    display: block;
    position: absolute;
    top: 12px;
    left: -13px;
    bottom: 0;
    font-family: "fontawesome";
    font-size: 110%;
    content: "\f0eb";
}
.menu-item-109::before {
    display: block;
    position: absolute;
    top: 12px;
    left: -15px;
    bottom: 0;
    font-family: "fontawesome";
    font-size: 110%;
    content: "\f007";
}
.menu-item-157::before {
    display: block;
    position: absolute;
    top: 12px;
    left: -20px;
    bottom: 0;
    font-family: "fontawesome";
    font-size: 110%;
    content: "\f003";
}
@media only screen and (min-width: 980px) {
    #g_nav .nav > li {
        margin: 0 1.5em !important;
    }
}
@media only screen and (min-width: 768px) {
    #g_nav .nav > li {
        margin: 0 1.5em !important;
    }
}
@media only screen and (max-width: 767px) {
    .menu-sp .top-nav li {
        position: relative;
        padding-right: 1.8em !important;
    }
    .menu-item-105 {
        margin-left: 20px;
    }
    .menu-item-105::before {
        top: 8.5px;
        left: -13px;
    }
    .menu-item-136::before {
        top: 8px;
        left: -11px;
    }
    .menu-item-208::before {
        top: 8.8px;
        left: -10px;
    }
    .menu-item-209::before {
        top: 8px;
        left: -6px;
    }
    .menu-item-109::before {
        top: 8px;
        left: -7px;
    }
    .menu-item-157::before {
        top: 8px;
        left: -12px;
    }
}