こんにちは、ikuzo(いくぞう)です。
前回はCocoonのヘッダーモバイルボタンの設定、およびカスタマイズについて書きました。
ヘッダーモバイルボタンのロゴは、PCと同じロゴが表示されますが、
今回はパソコンとモバイル（スマホ）で別々のロゴを表示させる方法、
つまり、ヘッダーモバイルボタン専用のロゴを表示させる方法を紹介します。
ちなみにikuzoは、今回のやり方を見つけるのに約半日も費やしました。
モバイル専用のロゴを用意する
まずはモバイル用のロゴを用意しましょう。
当ブログのモバイル用のロゴがこちらです。
※本物のロゴは背景が無色透明ですが、見やすいように色をつけてます。
本物の大きさは600px×162pxで、モバイル用にしては少し大きめに作りました。
大きめに作っておくと高解像度のディスプレイでもロゴが綺麗に見えますし、ロゴを設定する際に大きさの調整もしやすいです（ロゴは表示させる大きさの2倍くらいあればいいと思います）。
今回の設定でパソコンとモバイルでは、ロゴがこんなふうに変わります。
気がつきましたか？
そうです。
ヘッダーモバイルボタンではイラストを表示させないようにしました。
ただそれだけの、ほんの小さな小さな拘りです。
男はもっと大きく生きた方がいいぞ。
モバイル用のロゴをアップロード
モバイル用のロゴは、WordPressの「メディア」→「新しいメディアファイルを追加」を押してアップロードします。
アップロードしたらロゴのURLをそのままコピーするか、
もしくは「メディア」→「ライブラリ」を押してロゴを選択すると「ファイルのURL」が出てきます。
あとでこのURLを使うよ。
モバイル用のロゴを表示させるCSS
今回のやり方として
❶ 画面の幅が1023px以下で通常のロゴを消す
❷ 同じく1023px以下でモバイル用のロゴを表示させる
という設定にしました。
ヘッダーモバイルボタンが1023px以下になると出現するので、それに合わせてロゴも切り替えよう
という作戦です。
そして、半日かかったCSSがこちらです！
/*1023px以下でロゴを消す*/
@media screen and (max-width: 1023px){
img.site-logo-image{
visibility: hidden;
}
}
/*1023px以下でモバイル用のロゴ表示*/
@media screen and (max-width: 1023px){
.logo-menu-button.menu-button{
background-image: url(ここにロゴのURLを入れる);
background-size: auto 40px;
background-position: center;
background-repeat: no-repeat;
}
}
たったこれだけのCSSに半日かかったのか、おっさん……
「ここにロゴのURLを入れる」の部分に先ほどのURLをコピペして下さい。こんな感じです。
ロゴを切り替えるタイミングは、2つある「1023px」の部分で変えることができます。
あとは、ロゴの大きさ「auto 40px」の部分ですね。
「横方向 縦方向」の順番なので、横方向を指定する場合は「140px auto」、
縦方向を指定するなら「auto 40px」のように、片方を「auto」にすることによって縦横比を維持します。
「140px」や「40px」の数字を変えて、ロゴの大きさを調整して下さい。
最後に
いかがだったでしょうか。
無事に設定できましたでしょうか。
スキルが足りないもので時間はかかりましたが、半日かけてできあがったヘッダーモバイルボタンを見ながら飲むビールは格別でした。
もっと他のモノ見て飲めよ、って話ですけどね（笑）
本日は最後まで読んでいただき、ありがとうございました。
またねー
コメント