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

こんにちは、keiです。

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

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

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

AFFINGER5公式ページ

AFFINGER5を無料でみる

AFFINGER5ナビゲーションの基本設定
- 「外観 → メニュー」からヘッダーメニューの設定
- 「外観 → カスタマイズ → [＋]メニューのカラー設定」でカスタマイズ
AFFINGER5のナビゲーションを更にカスタマイズする方法
AFFINGER5ナビゲーションを色々とカスタマイズ一覧：まとめ

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

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

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

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

グローバルメニューの設定方法は、「外観 → メニュー」からできます。

具体的に、以下の設定ができる感じです。

メニュー項目の追加
メニュー項目の削除
ドロップダウンメニューの設定

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

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

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

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

・背景色

・文字色

・センター寄せ

・ドロップダウンの背景色

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

ただ、もっとカスタマイズをするには、CSSを使用してあげる必要があります。

KEI

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

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

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

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

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

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

悩む人 UpdraftPlusプラグインでバックアップできると聞いたけど、使い方やバックアップのやり方を知りたい。こんな悩みに答えます。こんな方におすすめ ...

続きを見る

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

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

以下、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の隙間」を選択しても隙間を作ることができます。

お好みでメニュー下の隙間を調整してみてください。

KEI

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

メニューをページ上に固定させ追従させる方法です。

CSSだけではなくJavaScriptも使用しますが、図解で解説するのでご安心ください。

KEI

まずは、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デベロッパーツールの使い方

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

最後に、グローバルナビの前にアイコンを入れるやり方です。

AFFINGER5の公式サイトのように、ナビゲーションの前にアイコンを入れる感じです。

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

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

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

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

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

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

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

僕の場合、ヘッダーメニュー名を「グローバルメニュー１」で登録しているのでこちらを選択します。

KEI

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

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

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

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

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

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

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

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