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

スワローのメニューにアイコン追加カスタマイズ♪ WordPress
さくらもち
ねぇ、みんなぁ~、ブログのメニューにアイコンが付いてるサイトってあるじゃない? 私も追加してみたいのよね♪
ウサギさん
うんうん、アイコンが付いてると分かりやすいしちょっとリッチだね……♪
モチ
あれはCSSの擬似要素で追加できるって、かがみが言ってたよ! (ボヨンボヨン
ウサギさん
ぼよんぼよん

こんにちは、かがみ(@cony_tas)です!

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

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

スワローのメニューにアイコンを追加したイメージ

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

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

 記事でわかること

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

 記事の信頼性

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

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

スワロー紹介画像

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

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

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

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

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

CSS擬似要素のイメージ
さくらもち
CSSってこんなこともできるんだぁ~♪ 早くやってみたい!

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

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

アイコンを追加する前のメニュー

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

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

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

Chromeのデベロッパーツールでメニューテキスト周りのタグを検索
  • 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; } }
スワローのメニューにアイコンを追加したイメージ
さくらもち
えへへ、これでブログにもっと愛着沸いちゃうね♪

すべてのメニューテキストにアイコンを追加できました!

選んだアイコンによっては微妙にサイズが異なるので、「font-size」「top」「left」のプロパティでサイズと位置を調整して良い感じに配置してみてくださいね。

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

今回は、WordPressテーマ「スワロー」のメニューにアイコンを追加するカスタマイズ方法をご紹介しました。

このようにテーマをカスタマイズすればブログにもっと愛着が沸くので、記事を書くことと並行してブログデザインも凝っていきましょう♪

それでは、今回はこの辺で!

モチ
いつも読んでいただいてありがとうございますっ (ボヨンボヨン