STINGER5のカスタマイズ【ドロップダウンメニュー】

投稿日:2016年4月23日 更新日:

【釣りのネタ帳】では、管理人が行ったFC2からWordPressへ引越し(移転)方法と、ブログサイトのカスタマイズ方法について、順次紹介しています。

過去の紹介内容はコチラからどうぞ

 icon-book FC2からWordPressへのブログ移転(引越し)方法のまとめサイト

 

今回は管理人も使用しているテーマSTINGER5に、親・子・孫までの3階層を持たせたドロップダウンメニューを設置する手順について紹介します。

PC画面のみの表示になりますが、シンプル過ぎるSTINGER5のメニューを、スタイリッシュな見栄えに替えるカスタマイズです。

 

スポンサーリンク

STINGER5にドロップダウンメニューを設置する方法

ここで紹介する方法は、WordPressのカスタムメニューに対応させていますので、別途『liタグ』などのコードを記述する必要はありません。

メニューの変更については、WordPress管理画面の『外観』→『メニュー』で設定したものが反映されるようになっています。

それでは、具体的な手順を紹介します。

 

【STINGER5】のheader.phpへの記述

header.phpのファイルは、STINGER5のテーマフォルダ(管理人の場合は、『stinger5ver20150505b』)中にあります。

本ファイルの記述の最後</header>の直前に、 以下の様な<!--メニュー-->の部分があります。

こちらを、以下に示した記述に書き替えます。

以上で、header.phpへの記述は終了です。

次に、base.jsへの記述について記載します。

 

【STINGER5】のbase.jsへの記述

base.jsファイルは、STINGER5のテーマフォルダ内にある『js』というフォルダ内にあります。

本ファイルの最下部には、以下の様な記述がされています。

更にこの下部へ、以下の様な記述を行います。

以上で、base.jsへの記述は終了です。

最後に、style.cssへの記述について記載します。

 

【STINGER5】のstyle.cssへの記述

style.cssファイルは、STINGER5のテーマフォルダ内にあります。

このファイルは子テーマ作成して、その中にファイルを入れて記述を行っている方も多いと思います。

管理人も子テーマを使っていますが、本カスタマイズがうまく機能しませんでしたので、元ファイルに直接書き込みました。

まずは、style.cssの中で以下の記述を探します。

このメニューの部分の記述を、丸ごと以下のものに書き替えます。

以上で、style.cssへの記述は終了です。

それでは、メニューのスタイルがどのように変わったのか確認してみましょう。

 

【STINGER5】に設置したドロップダウンメニューの調整

まずはWordPress管理画面の『外観』→『メニュー』で、一例として幾つかのメニューを設定してみます。

 

メニュー設定画面

 

この設定を反映させたメニュー画面は、STINGER5のデフォルトでは以下のように表示されます。

 

STINGER5メニュー画面

 

非常にシンプルで、白ベースの画面であるとドロップダウンがほとんど目立ちません。

今回設定したドロップダウンメニューでは、以下のように表示されます。

 

ドロップダウンメニューのカスタマイズ(1)

 

黒ベースの灰色文字と白抜きで、良い感じに表示されていますが、管理人の画面では、余白の調整が必要のようです。

ついでにシャープさを出すために、メニューの縦幅も短くしようと思います。

先ほどメニューの記述を丸ごと書き替えた、style.css中の記述の一部を修正して調整を行います。

まず、#menuのmarginを、60pxから1pxに修正しました。

次に、#menu aのpaddingを、12px 30pxから6px 27.9pxに修正しました。

 

ドロップダウンメニューのカスタマイズ(2)

 

一応メニューに3階層目を追加して、表示に問題がないことを確認しました。

因みに、上記のpaddingで横幅の調整も行ったのは、次の図でに示すように必要なメニューを全て加え、横幅丁度に調整したためです。

 

ドロップダウンメニューのカスタマイズ(4)

 

こちらが最終的な、メニュー表示の完成形です。

上記のメニューのうち、右の3種については、ドロップが発生しないように、子メニューと孫メニューがないもの(管理人の場合は、未分類、サイトマップ、お問い合わせ)を設定しました。

理由はSTINGER5では、万一アドセンス広告を設定する際に、サイドバーの最上段に広告がくるように自動設定が可能になっているためです。(アドセンス広告では、ドロップなどで広告が隠れるサイト構成はポリシー違反になります

 

以上で、ドロップダウンメニューを設置する方法の紹介を終わります。

なお、ここで紹介したドロップダウンメニューは、CSS3 animated dropdown menuというサイトで紹介されているものです。

ここで紹介したカスタマイズは、あくまで自己責任で行って頂きますようにお願いします。

可能な限り、カスタマイズ前にファイルのバックアップを取ったり、子テーマを作成してから記述を行うなど、十分に注意を払って行うことをお勧めします。

 

【ブログ移転のまとめサイト】

 icon-book FC2からWordPressへのブログ移転(引越し)方法のまとめサイト

 

サイトの新規開設や移転を検討されている方は、ドメイン無料キャンペーンを行っているタイミングでのエックスサーバー(XSERVER)がお薦めです。

内容確認のうえ、サーバーレンタルの検討をされてはいかがでしょうか。

ドメインの取得(追加取得)を考えている方はコチラ icon-arrow-circle-down

 

A釣りネタPC記事下ダブル-336-280-default

スポンサーリンク




A釣りネタPC記事下ダブル-336-280-default

スポンサーリンク




その他の人気コンテンツ

コチラの関連記事も読まれています

-STINGER5
-, ,

Copyright© 釣りのネタ帳 , 2017 AllRights Reserved.