スポンサーリンク

AFFINGERのメニューをドロップダウンメニューにカスタマイズ

アフィンガーaffinger, カスタマイズ, ドロップダウンメニュー, メニュー

AFFINGERのメニューは、デフォルトではドロップダウンメニューになっ
ていません。なので今回はメニューをドロップダウンメニューに、カス
タマイズしたやり方を備忘録として残しておきます。

 

ただそれだけなのに出来ない!!という方、必見です。

 

 

スポンサーリンク

完成画像

 

 
PC完成画像1

 
AF ナビ001

 

PC完成画像2

 
AF ナビ002

 

PC完成画像1のようにしたい時

親テーマのスタイルシート(style.css)を開いて、下記コードの箇所に
コメントアウトを記述する。

 

 
コメントアウトする方法は、実行してほしくないコードの直前に

「/* ここからコメントアウト —-」を記述する。

 

次に実行してほしくないコードの直後に

「 —– コメントアウトここまで */」を記述する。

 

 

PC完成画像2のようにしたい時

親テーマCSS内にはコメントアウトを記述する必要なし。

スタイルシート(style.css)に追記する。

 

より下に
下記コードを追記

 

 

まとめ

今回のドロップダウンメニューのカスタマイズは、デフォルトの背景を
残したままその上からドロップダウンメニュー(PC完成画像2)が気
に入ってます。

 

AFFINGERのメニューをドロップダウンメニューにカスタマイズしてみた
が、あまり派手さがなくシンプルに出来たと思います。

 

やっぱりメニューは、同じ分類の中にちがうカテゴリーはあるので、ド
ロップダウンメニューはあった方が良いと思う。

 
そのうちテキスト色や背景色を変えて見たいと思っています。

 

尚 参考に文献 クリエイターチェック 様の
【STINGER5】ドロップダウンメニューをお洒落にカスタマイズ!・・・

を参考させていただきました。アリガトウございます。

スポンサーリンク