【Stinger5】メニューをグローバルメニューに変える方法を試してみたー見た目が変わると印象も変わる気がするー

“ブログのメニュー表示変えたいな”

ずっと前からブログのメニュー表示をもう少し変えて、すっきりと印象を良くしたいと考えていました。

記事を更新する頻度も下げないようにしつつ、仕事もバタバタしている中で、WordpressやStinger5のカスタマイズをゴリゴリしていく気力も中々保てなかったのですが、先日ようやく重い腰を上げて、メニュー表示を変更してみました。

備忘録も兼ねて記事にまとめておきます。

参考にしたサイト

メニュー構成のカスタマイズをする上で、いくつかのサイトを参考にしたのですが、説明も含めてこちらのサイトがわかりやすかったので、こちらを見ながら変更をかけてみました。

【メモ帳　Wordpressサイト構築の覚書】「Stinger5のカスタマイズ　メニューをグローバルメニュー風にしてみました」

今回のカスタマイズはヘッダー部分に表示されるメニューの見た目を変えることができるもののようですが、テーマによってはフッター部分の変更がかけられるものもあるようですね。

JetpackのカスタムCSSを活用

「Jetpack」というプラグインをインストールすると、「カスタムCSS」が使用できるようになります。僕は、もともとブログへの検索流入等のアクセス確認用にインストールしていましたので、これはクリア。

まだインストールしていない方は、Wordpressのダッシューボード左側のメニューから【プラグイン＞新規追加＞検索＞Jetpack】と進んで、インストールできます。

Jetpackのインストールが完了していたら、【Jetpack＞設定＞カスタムCSSにチェック】をします。

最初の設定はこれだけ。

カスタムCSSにコードを追記

先ほど設定したJetpackのカスタムCSS「CSS編集」に進んだら、一番下に以下のコードを追加します。

/* メニューをドロップダウンリストのグローバルメニューに変更 */
.menu li {
    float: left;
    width: 【任意の幅】px;
    height: 40px;
    padding: 0;
}

.menu li a {
    text-align: center;
    display: block;
    padding: 10px 0;
    width: 100%;
    background: #3686cd;
    color: white !important;
}

.menu li:hover > a {
    background: #9ccdf4;
}

.menu li ul li {
    overflow: hidden;
    height: 0;
    padding: 0;
}

.menu li ul li a {
    background: #9ccdf4;
    padding: 10px 0;
}

.menu li:hover ul li {
    overflow: visible;
    height: 30px;
    z-index: 1;
}

コードの貼り付けが完了したら、

    width: 【任意の幅】px;

この【任意の幅】を削除して、横幅に設定したい大きさを入力します。僕の場合、Stinger5の横幅を少し広げていますので、150pxほどでぴったり収まりました。

加えて、僕の場合はメニューの色をオレンジに変えました。。

色を変える場合は、

}

.menu li a {
    text-align: center;
    display: block;
    padding: 10px 0;
    width: 100%;
    background: #3686cd;
    color: white !important;
}

このコードの【background: #3686cd;】部分を別のカラーコードに置き換えればOKです。

オレンジの場合は、【background: #ff6600;】としてみてください。

ちなみに、カスタムCSS部分はテーマ変更時に消えてしまうようです。もし一時的にテーマの変更などをしようと考えている場合は、必ずメモ帳などにカスタマイズ結果のコードを保存しておきましょう。

もしくはこの記事をブックマークしておくといつでも確認できます。

カスタマイズしていくと自分独自のブログにして変えていけるのがWordpressの面白いところですね。

とはいえ、まだまだ勉強していかないといけなそうです。