HTMLとCSSのコピペで簡単にグローバルメニューを追加する
使いやすいようにブログデザインをあれこれとカスタマイズしているのですが
ヘッダーのグローバルメニュー(タイトルの下にあるメニューボタン)を
設置しようとした際に好みのものがなく。
アイコン付きで自由にいじれるものがなかったので自作しました。
私が作ったグローバルメニューは
- 背景が透明
- マウスがホバーした際に背景色・文字色が変化する
- 背景色・文字色・変化時間を自分で決められる
- 好みのアイコンをつけられる となっています。
需要があるかどうかはわかりませんが、
それなりにまとまったので書き残しておこうと思います。
コピペするだけで使えるようにしたので初心者の方でも設置できると思いますが、
使用する際は自己責任でお願い致します。
HTML
HTMLコードを貼り付ける場所は
デザイン > カスタマイズ > ヘッダ > タイトル下 です。
HTMLコード
◆◆◆の部分には表示したいURL
(当ブログでは各カテゴリのTop画面)
▲▲▲の部分には表示したい文字
(当ブログでは”ホーム画面へ"、"筆者について"など)
■■■はアイコンフォント(blogicon)のクラス名
(例:blogicon-homeなら“home”)
をそれぞれ入力してください。
※下記をコピーしてご使用ください
ーーーーーーーーーーーーーーーーーーーーーーーーーーー
<nav class="nav">
<ul id="g-nav">
<li class="nav-item"><a href="◆◆◆" aria-hidden="true"></i> ▲▲▲</a></li>
<li class="nav-item"><a href="◆◆◆"><i class="blogicon-■■■ lg" aria-hidden="true"></i> ▲▲▲</a></li>
<li class="nav-item"><a href="◆◆◆"><i class="blogicon-■■■ lg" aria-hidden="true"></i>▲▲▲</a></li>
<li class="nav-item"><a href="◆◆◆"><i class="blogicon-■■■ lg" aria-hidden="true"></i> ▲▲▲</a></li>
<li class="nav-item"><a href="◆◆◆"><i class="blogicon-■■■ lg" aria-hidden="true"></i> ▲▲▲</a></li>
<li class="nav-item"><a href="◆◆◆"><i class="blogicon-■■■ lg" aria-hidden="true"></i> ▲▲▲</a></li>
</ul>
</nav>
CSS
CSSコード貼り付ける場所は
デザイン > カスタマイズ > {}デザインCSS です。
CSSコード
※下記をコピーしてご使用ください
ーーーーーーーーーーーーーーーーーーーーーーーーーーー
#g-nav {
display: table;
width: 100%;
font-weight: bold;
background-color: transparent;/* 背景色 */
}
.nav-item {
display: table-cell;
list-style-type: none;
text-align: center;
}
.nav-item a {
display: block;
color: #fff;/* 文字色 */
padding: 10px 0;
text-decoration: none;
transition: 0.2s;/* 変化時間 */
}
.nav-item a:hover {
background-color: #EEEEEE;/* マウスホバー時の背景色 */
color: #000000;/* マウスホバー時の文字色 */
}
レスポンシブデザイン対応CSS
レスポンシブデザインにしたい場合はこちらもコピーしてCSSに追加してください。
ーーーーーーーーーーーーーーーーーーーーーーーーーーー
.nav {
display: block;
background-color: transparent;/* #g-navと同じ色を指定する*/
}
#g-nav {
width: 100%;/* ナビゲーション幅 */
margin: 0 auto;
}
ーーーーーーーーーーーーーーーーーーーーーーーーーーー
以上で背景が透けた小洒落たグローバルメニューの完成です。
以下は自作の際に私が参考にした記事一覧です。
- wagashi様 https://dezanari.com/gnav-hatena/
- カラーコード一覧表 http://www.netyasun.com/home/color.html
念の為に最後にもう一度書きますが、
こちらの記事をお読みになりコピペでグローバルメニューを作成したことによって生じたいかなることに関しましても筆者は責任を取りかねます。
くれぐれも実行の際は自己責任でお願い致します。