当ブログでも使用している、Wordpressの無料テーマCocoon。
簡単な操作で、とてもおしゃれなブログを作ることが出来るため、人気の無料テーマです。
ブログ初心者の私が作っても、見れるサイトになっているのは、Cocoonのお陰。
そんな簡単でオシャレなCocoonですが、使用していて分からなかったことや、疑問に思ったことについて、私なりに調べ、解決したことを備忘録的に書いていきたいと思います。
今回はヘッダーメニュー（グローバルナビ）について
ヘッダーメニューとは？
タイトル下の赤枠の部分です。
よく見かけますよね？
えー？設定するのは簡単だよ。とおっしゃる方が大部分かもしれませんが、
私自身は少し苦戦したので、ここでご紹介しておきたいと思います。
大まかな流れでいうと、
- メニューを作る。（大きな枠）
- 項目を作る。（枠に入る項目）
私の場合、ここのイメージをあまり上手くつかめずに、苦戦しました。
ですので、ぼんやりとでも、このイメージをつかんで頂ければスムーズだと思います。
では、さっそく実際の画面を見ていきます。
メニューを作る
外観 → メニュー 新規作成
新規メニューを作成 → メニュー名を入力 → メニューを保存
ここでは、メニュー名は「ヘッダーメニュー」としましょう。
これで大枠のメニューが出来ました。
次は中身の項目を作りましょう。
項目を作る
ここでは、実際によく見る。ホームを作っていきます。
編集するメニューを選択：
先ほど作成した「ヘッダーメニュー」を選択します。
カスタムリンクを選び、URLにブログのURLを
当ブログでしたら、https://jim-log.comです。
リンク文字列に 「ホーム」と入力して、メニューに追加。
メニュー設定はヘッダーメニューにチェックを入れてメニューを保存です。
「ホーム」が出来ました。
このようにカスタムリンクのほか、カテゴリーなどでも項目を作成することが出来ます。
最終的に当ブログではこのように設定しています。
見た目を変える
今までの手順で、ヘッダーメニューは完成し、機能する状態なんですが
余りにシンプルすぎて味気ないのも事実。
見た目をもう少しカラフルにしたいところです。
一番簡単な方法は、スキンを設定すること。Cocoonには多くのおしゃれなスキンがあり
それを設定するだけで、ブログ全体の見た目を変更することができます。
私自身は、この白をベースとしたオリジナルの配色が好みだったこともあり、
スキンを使用せず、オリジナルのものに少し手を加えて使用しています。
以下でその方法をご紹介します。
コードをそのままコピーをして頂いても構いませんし、参考にして自分なりに改造して頂くのもOKです。
メニュー部分に色を付ける
当ブログを見ていただくと、メニュー部分にうっすらと色がついている
のが分かると思います。
これは、
cocoon設定
の
ヘッダータグ
グローバルナビメニュー色
で
設定します。
じむろぐは以下の色で設定しています。
グローバルナビ色 #F7F7F7
グローバルナビ文字色 #333333
メニューの上下に線を入れる
当ブログはメニューの上下に線を入れています。
これから先はCSSという言語を用いて、ブログの見た目を
整えていきます。
CSSって何？知らないなぁという方も、当ブログのコードを
載せておきますので、コピー＆ペーストしてご利用下さい。
外観
の
カスタマイズ
から
追加CSSにコードを記述する。
コードは以下です。
nav#navi, .menu-header .sub-menu{
border-bottom:1px solid;
border-top:1px solid;
}マウスオーバーすると色が変わるようにする
当ブログのメニューにマウスをあててみてください。
すると色が変わります。
これも上記と同じくCSSで記述していきます。
外観
の
カスタマイズ
から
追加CSSにコードを記述する。
コードは以下の通りです。
#navi .navi-in a:hover {
background-color: #dfdfdf;
border-radius:5px;
}このように追加CSSに記述することによって
ブログの見た目を変化させることが出来ます。
ブログを運営していく上では、HTMLとCSSを知っていると
できることが増えてきます。
興味が出てきたら、勉強してみるのも良いかもしれませんね。
まとめ
ナビメニューを設置することでユーザビリティの向上が見込めます。
初めて作る際は、少し戸惑うかもしれませんが、一度作成してみると、仕組みも分かって簡単です。
ぜひチャレンジしてみて下さい。
読者様のブログ運営の一助となれば幸いです。
コメント