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での作成や設定は通常パソコンで行っていますが、モバイル端末の事も考えて作る必要が有ります。
特にモバイル端末からの閲覧が急増しているので、抜かりなくチェックしたいと思います。
コメント