AFFINGERのグローバルナビゲーションをカスタマイズ一覧

 

こんにちは、keiです。

 

本記事の執筆者

 

AFFINGERは、CSSを使用しなくてもすでに搭載されている機能を使うことで簡単に色を変えたりすることができるので、優秀なワードプレステーマの１つです。

 

今回は、AFFINGERのナビゲーションをCSSを使って更にかっこよくカスタマイズする方法について一覧で紹介していきます。

 

ナビゲーションをお洒落にするのに参考にしてみてください。

 

 

[toc]

 

AFFINGER5ナビゲーションの基本設定

AFFINGER5ナビゲーションの基本設定

 

AFFINGERでナビゲーションをカスタマイズする前に、ヘッダメニューの基本的な設定方法について簡単に紹介します。

グローバルメニューの基本設定ができている方は「AFFINGERのナビゲーションを更にカスタマイズする方法」から飛べます。

 

「外観 → メニュー」からヘッダーメニューの設定

 

グローバルメニューの設定方法は、「外観 → メニュー」からできます。具体的に以下の設定ができる感じです。

 

 

他にもできますが、「外観 → メニュー」ではグローバルナビゲーションの項目が設定できます。

 

「外観 → カスタマイズ → [＋]メニューのカラー設定」でカスタマイズ

 

AFFINGERのナビゲーションの背景・テキスト色など基本的な設定は、『外観 → カスタマイズ → [＋]メニューのカラー設定 → PCヘッダメニュー』からカスタマイズできます。

 

具体的にできることは以下です。

 

 

先述した通りAFFINGERは、CSSなど複雑な機能を使用しなくても管理画面から色の設定などが簡単にできるので運用が楽ですね！

 

 

続いて、ナビゲーションをよりお洒落にするカスタマイズについて紹介していきます。

 

AFFINGERのナビゲーションを更にカスタマイズする方法

AFFINGER5のナビゲーションをカスタマイズする方法

 

それでは、AFFINGERのナビゲーションのカスタマイズ方法を紹介します。

※CSS,JSを編集するので、事前にバックアップしておきましょう。

 

関連記事

【便利！】UpdraftPlusプラグインを使ってバックアップする方法【2021年版】

続きを見る

 

その①：背景に影をつける方法

 

まずは、ナビゲーションの背景に影をつける方法です。

 

以下、CSSをコピーして「外観 → カスタマイズ → 追加CSS」に貼ります。

 

 command
#st-menuwide{
box-shadow: 0px 3px 15px rgba(0,0,0,0.2);
margin: 0 -20px 30px !important;
}

 

「外観 → カスタマイズ → 追加CSS」

 

貼り付けができましたら「公開」をクリックします。なお、ヘッダーメニュー後ろの影がついていることが分かるように、メニュー下に隙間を作る指定をしています。

 

 command
margin: 0 -20px 30px !important;

 

※「外観 → カスタマイズ → [＋]メニューのカラー設定 → PCヘッダメニュー → メニューの上下に隙間を作る」で、「下に10pxの隙間」を選択しても隙間を作ることができます。

 

 

その②：ヘッダーを固定させて表示

 

メニューをページ上に固定させ追従させる方法です。CSSだけではなくJavaScriptも使用しますが、画像を使って解説するのでご安心ください。

 

まずは、CSSからです。以下のコードをコピーします。

 

 command
.fixed{
position:fixed;
width:100%;
top:0;
z-index:1000;
}

参考サイト：https://www.design-memo.com/coding/navigation-fixed

 

コピーができましたら、「外観 → カスタマイズ → 追加CSS」にペースとして「公開済み」をクリックします。

 

「外観 → カスタマイズ → 追加CSS」

 

続いて以下のJSコードをコピーします。

 

 command
<script>
$(function() {
var offset = jQuery('#gazou-wide').offset();
$(window).scroll(function () {
if (jQuery(window).scrollTop() > offset.top) {
jQuery('#gazou-wide').addClass('fixed');
} else {
jQuery('#gazou-wide').removeClass('fixed');
}
});
});
</script>

 

コピーできましたら、サイドバーメニューの「①AFFINGER5管理 → ②その他 」をクリックします。

 

 

「その他」の中に「上級者向け → コードの出力」という項目があるので、head内にコードを貼ります。

 

 

後はページ下の「保存」をクリックして完了です。スクロールするとページ上のナビゲーションが固定されているはずなので、念のため確認してみましょう。

 

その③：オンマウス時に色が反転

 

オンマウス時に色が反転するやり方です。

※ヘッダーメニュー以外に他の要素でオンマウス時に色が反転する箇所がありますのでご了承ください。例）SNSアイコンなど

 

以下のCSSをコピーします。

 

 command
a:hover {
color:#5bc8ac!important;
}

 

こちらのCSSを適応することでオンマウス時に色が反転します。今はオンマウス時の色に緑色で指定していますが、[color:;]の色指定を変えることで、好きな色に変えることができます。

 

ちなみに、好きな色を指定する際には、Googleのデベロッパーツールを使うと便利でして使用方法について以下記事を参考にしてみてください。

 

>>Googleデベロッパーツールの使い方

 

その④：文字の前にアイコンを入れる

 

最後にグローバルナビの前にアイコンを入れるやり方です。AFFINGERの公式サイトのようにナビゲーションの前にアイコンを入れる感じです。

 

>>参考元：【公式】WordPressテーマAFFINGER（アフィンガー）

 

まずは、「Font Awesome Icons」にアクセスしてアイコンを探します。

※クリック後、外部サイトに飛びます

 

アクセスできましたら、使用したいアイコンを探しクリックします。

 

 

選択できましたら、以下の画面になるので「<i class=”○○○” aria-hidden=”true”></i>」のコードをコピーします。

 

 

続いて、ワードプレスの管理画面にログインしてサイドバーメニュー「外観 → メニュー」をクリックします。

 

クリックしたら、編集するメニューを選択からヘッダーメニュー（PC）を選択します。

 

 

 

後は、メニュー名の前に、先ほどコピーしたコードをナビゲーションラベル内の文字の前に貼り付けます。

 

 

最後に「メニューを保存」をクリックして完了です。

 

後は、問題なく表示されているか確認してみてください！

 

AFFINGERナビゲーションを色々とカスタマイズ一覧：まとめ

AFFINGER5ナビゲーションを色々とカスタマイズ一覧：まとめ

 

今回は、AFFINGERグローバルナビゲーションのデザイン変更について紹介しました。

 

ナビゲーション周りをカスタマイズして、ブログ運用のモチベになると思いますので是非参考にしてみてください！

 

本記事が参考になりましたら幸いです。

 

ここまで読んでいただきありがとうございました。