OPENCAGEさん販売のWordpressテーマ、ハミングバードとアルバトロスでは三本線のナビゲーションアイコン（通称ハンバーガーアイコン）が使われています。しかし、前記事「WordPressでFont Awesomeの三本線メニューをやめてみた」で書いたように今や訪問者目線で考えるとハンバーガーメニューはメニューと認識されていないので、もっとクリックしてもらえるようにアイコンをかえることにしました。
ナビゲーションアイコンが記載されている位置
テーマ：ハミングバードの場合
本家は子テーマを推奨していますが残念ながら本テーマのcssをいじらなければいけません。どこかにcss改造メモをとっておきましょう…。
今回は、透過画像で、横長のMENUと書いてある画像を使用します。今回、この画像は綺麗にみえるように75％に縮小して表示するつもりです。ハミングバードのナビゲーションアイコンの高さを逆算して、132*75で作成しました。実際は横幅は100pxくらいでみえるはずです。画像はハミングバードのlibrary/images/の中にアップしておきます。
 |
nav_btn で検索し、width を50から100px;に、leftの下に以下を付け加えます。
付け加え部分
background: url(library/images/●●●●.png) center no-repeat;
background-size: 75%;
background-position: center;
そして、.nav_btn:beforeの部分を取り除きます。
取り除く前
.nav_btn:before{
font-family: “fontawesome”;
content: ‘●●●’;
width: 100%;
height: 100%;
}取り除いた後
（なにもなし）
さらに、.open .nav_btn:beforeを置き換えます。
置き換え前
.open .nav_btn:before{
content: ‘\f00d’;}置き換え後
.open .nav_btn:before{
font-family: “fontawesome”;
content: ‘\f00d’;
width: 100%;
height: 100%;}※さっきfontawesomeの指定箇所を取り除いたので、ここを置き換えておかないとグローバルメニューのバツ印が出なくなります。
テーマ：アルバトロスの場合
こちらも本テーマなので保存はしっかり（略
こっちでは、横長のメニューではなく、ハンバーガーメニューにMENUという文字を足したアイコンを使ってみます。
 |
style.cssで.mean-container a.meanmenu-revealを検索し、例えばそれをこんな風にします。
/* ハンバーガーメニュー変更 */
.mean-container a.meanmenu-reveal {
width: 22px;
height: 22px;
padding: 15px 15px 15px 15px;
position: absolute;
top: 0;
right: 0;
cursor: pointer;
color: #fff;
background: rgba(21, 21, 21, 0.2) url(library/images/●●●●.png) center no-repeat;
background-size: 75%;
background-position: center;
text-decoration: none;
font-size: 16px;
text-indent: -9999em;
line-height: 22px;
font-size: 1px;
display: block;
font-family: Arial, Helvetica, sans-serif;
font-weight: 700;
}
.mean-container a.meanmenu-reveal span {
display: block;
}
これで完成です。
アルバトロスのほうはもとから三本線にfontawesomeを使っていないので比較的理解しやすいと思います。