WordPressテーマ Cocoonのヘッダーロゴ
WordPressテーマ Cocoonでのヘッダーロゴに関してまとめてみました。
テーマCocoonのヘッダーロゴ設定
WordPressテーマ Cocoonでのヘッダーロゴの設定は、「Cocoon 設定」の「ヘッダー」から行う事が出来ます。
この設定ページでヘッダーレイアウト、ヘッダーの高さ、ヘッダーロゴ、ヘッダーロゴサイズなどを設定することが出来ます。
MASAa.netのヘッダーロゴ作成について
MASAa.netのヘッダーロゴは、365×76pxのサイズで作成しました。
ヘッダーの高さは120px（モバイル環境含む）で設定しています。
このヘッダーロゴをパソコンで確認すると、問題無く表示することが出来ています（※ヘッダー部分参照）
しかし、モバイル端末で見ると、あまり綺麗に表示することが出来ていません。
実際自分のスマートフォン(Fujitsu arrows NX F-01J)で確認すると、次の様に表示されてしまいます。
（※スマートフォン Fujitsu arrows NX F-01Jの解像度は 1080×1920px）
スマートフォン(Fujitsu arrows NX F-01J)を横に表示した場合、このような表示となります。
と言う事で、モバイル端末でも綺麗に見ることが出来るようにMASAa.netのヘッダーロゴ表示についてカスタマイズします。
カスタマイズ内容
モバイル端末でヘッダーロゴを綺麗に表示するカスタマイズは、下記の通りです。
このカスタマイズ内容を「スタイルシート(style.css)」に追記します。
/************************************
** ■スマホ時のタイトルロゴのサイズ設定
************************************/
@media screen and (max-width: 1240px){
.logo img {
width: 237px !important; /*ロゴ横サイズ*/
height: 49px !important; /*ロゴ縦サイズ*/
}
}
カスタマイズ後のヘッダーロゴ（モバイル端末時）
今回のカスタマイズによって、自分のスマートフォン(Fujitsu arrows NX F-01J)でのヘッダーロゴの表示は次の様になりました。
スマートフォン（Fujitsu arrows NX F-01J）を横にした場合のヘッダーロゴ表示は次の様になりました。
最後に
今回のカスタマイズによって、パソコンでもモバイル端末でもヘッダーロゴを綺麗に表示出来るようになりました。
WordPressでの作成や設定は通常パソコンで行っていますが、モバイル端末の事も考えて作る必要が有ります。
特にモバイル端末からの閲覧が急増しているので、抜かりなくチェックしたいと思います。
コメント