WordPress(テーマはCocoon)のカスタマイズ方法。どんなサイトでも使える万能型カスタマイズを、コピペで作る方法。
今回は、「グローバルメニュー」のアイコン入れ・直感的で見易いデザインの作り方について。
グローバルメニューの作り方
作り方
次に、グローバルメニューに入れたいページを選択する。
メニュー構造 は以下の様になる。
ライブプレビューにすると、こんな感じ。
メニューの仕上がりを確認して、OKなら 「メニューを保存」する。
マウスホバー時にサブメニューを開く方法
グローバルメニューにマウスホバー(クリック可能位置にマウスする事)した時、更にサブメニューが開く方法。
こうすると、「胃がん」をホバー(クリック可能位置にマウスする事)したとき、サブメニューの「具体的業務と工夫」が開く。
これでも十分だが、さらに分かりやすいようにカスタマイズを加えていく。
グローバルメニューのデザイン(見やすくする)
グローバルメニューにイラストを挿入する方法(非採用)
/* ************ *
* PCnaviに画像 *
* ************ */
@media screen and (min-width : 769px) {
/* メニューの余白・幅・高さ指定 */
.navi-in > ul > li {
line-height: 1.2;
margin: 1em 1em; /* 上下1em 左右1em→0.6emで余白が狭く */
width: 100px;
height: 130px;
}
/* ナビ領域下余白 */
.navi-in .menu-header {
padding-bottom: 1em;
}
/* 背景画像の領域：リンク */
#navi-in > ul > li > a {
width: 100px;
height: 100px;
display: inline-block;
font-size: 0.75em; /* 文字サイズ変更時：子カテゴリがあれば要調整 */
position: relative;
background-size: cover; /* 画像サイズ調整 */
background-position: 50%;
}
/* 子カテゴリがある時のマーク */
.navi-in > ul > .menu-item-has-children > a::after {
top: 7.5em; /* 文字サイズ変更時：要調整 */
right: -0.9em;
}
/* 1つ目 */
.navi-in > ul > li:nth-child(1) > a {
background: url(画像のURL) no-repeat;
}
/* 2つ目 */
.navi-in > ul > li:nth-child(2) > a {
background: url(画像のURL) no-repeat;
}
/* 3つ目 */
.navi-in > ul > li:nth-child(3) > a {
background: url(画像のURL) no-repeat;
}
/* 4つ目 */
.navi-in > ul > li:nth-child(4) > a {
background: url(画像のURL) no-repeat;
}
/* 5つ目 */
.navi-in > ul > li:nth-child(5) > a {
background: url(画像URL) no-repeat;
}
/* 6つ目 */
.navi-in > ul > li:nth-child(6) > a {
background: url(画像URL) no-repeat;
}
/* 7つ目 */
.navi-in > ul > li:nth-child(7) > a {
background: url(画像URL) no-repeat;
}
/* 8つ目 */
.navi-in > ul > li:nth-child(8) > a {
background: url(画像URL) no-repeat;
}
/* 9つ目 */
.navi-in > ul > li:nth-child(9) > a {
background: url(画像URL) no-repeat;
}
/* メニュー名 */
#navi-in > ul > li > a .item-label {
position: absolute;
bottom: 0%; /* 位置調整 */
font-weight: bold;
/*text-shadow: 1px 1px 0 #fff;*/
left: 0;
right: 0;
}上記CSSコードを追記する。
【更に必要な事】
挿入画像のURLを取得する
(メディアライブラリ＞挿入したい画像を選択＞ファイルのURLをコピー)
挿入画像のURLを、上記CSSコードの「 background: url(画像のURL) no-repeat;」
この赤字部分にペーストする。
これで、グローバルメニューに画像が挿入できる。
これでグローバルメニューの縦幅がでることで選択しやすくなるうえ、イラストにより目の止まる場所ができる。
なお追記の場所はこちら。
CSSコードの追加 やり方
グローバルメニューにアイコンを入れる方法
まず、Cocoon設定 ＞ 全体 ＞ サイトアイコンフォトで、Font Awesome５を指定する。変更をまとめて保存する。
※Font Awesome4でもいいが、使えるアイコンの質が違う。
アイコン探しは、こちらのサイト(外部リンク)から。
リンク開いて、ほしいアイコン名で検索＞黒いアイコンを選択できる。
アイコン選択すると、コードを取得できる。
コード取得方法は、<i class>~</i>で囲まれた部分をクリックするのみ。
このコードを、メニューに貼り付ける。
・・・すると、この通りアイコン付きメニューが表示される。
【さらに工夫】
<i class>fas fa coins</i> ➡ <i class>fas fa coins lg</i>
アイコンサイズが大きくなり、目立つ。
グローバルメニューのヨコの仕切り線を入れる方法
/* グローバルメニューの横仕切り線を入れる*/
#navi .navi-in > ul > li{
border-left: 1px solid #eee;
}
#navi .navi-in > ul > li:last-child{
border-right: 1px solid #eee;
}
.navi-in > ul > .menu-item-has-children > a::after{
right: 10px;
} 上記CSSコードを追記する。これにより、グローバルメニューの区切りがどこなのか解りやすくなる。
グローバルメニューの文字を太文字化&影付ける方法
/* グローバルメニュー 文字*/
#navi {
font-weight: bold; /* 太文字 */
text-shadow: 0 2px 4px rgba(0,0,0,0.3); /* 影 */
}上記CSSコードを追記する。これによりグローバルメニューが目立つ。
ホバー時に背景色・文字色変更&浮かび上がる方法
※ホバー＝クリック可能位置にマウスすること
メニューのどこをホバーしているか一目瞭然にする。ホバーした時、「背景色変更」「文字色変更」「文字の浮き上がり」ができる方法。
/*グローバルメニューのホバー時(クリック可能位置にマウスした時)*/
#navi .navi-in a:hover {
background-color: #0000b0; /*背景色*/
-webkit-transform: translateY(-2px);
-ms-transform: translateY(-2px);
transform: translateY(-2px);
box-shadow: -2px -2px 1px 0px #000080; /*影の色・上下左右のずれ*/
color: #000000; /*文字色*/
}
上記CSSコードを追記する。これで自分がどこにカーソルしているのか解る。
【さらに工夫】
●box-shadow: -2px -2px 1px 0px #dce0b1;
水平方向のオフセット距離(+で下へ、－で上へずれる)
左右方向のオフセット距離(＋で右へ、－で左へずれる)
ぼかし距離(－できない。＋大きいほどぼかし強くなる)
影の広がり(＋で拡大、－で縮小)
影の色(下記カラーコード参照)
【色の指定】
こちらのサイト(外部リンク)を参照
※この場合は、ホバー時に背景はグレー(background-color; #808080:)、文字色は真っ白(color; #fff:)となるよう指定している。
表示中のメニューの色を変える
いま表示中のページが、どのメニューに該当するか解る。
/*カレントメニュー*/
.menu-header .current-menu-item,
.menu-header .current-post-item,
.menu-header .current-menu-ancestor,
.menu-header .current-post-ancestor,
.menu-header .menu-item:hover {
border-bottom: 3px solid #bcfa89; /*下線色*/
background: #5d5855; /*背景色*/
}
.menu-header .current-menu-item .item-label,
.menu-header .current-post-item .item-label,
.menu-header .current-menu-ancestor .item-label,
.menu-header .current-post-ancestor .item-label,
.menu-header .menu-item .item-label:hover {
color:#fff; /*文字色*/
}上記CSSコードを追記する。これで自分がどこにカーソルしているのか解る。
完成図：グローバルメニュー
【このグローバルメニューのメリット】
●グローバルメニューが目立ち、目に留まる
●グローバルメニューのどこに該当するページか解る
●グローバルメニューのどこをクリックしようとしているか解る
●サブメニュー(グローバルメニューの子メニュー)もでてくる
➡ブログではなく、サイトらしくできる
コメント