WordPressCocoon

【Cocoon】ヘッダーロゴ設定について

アイキャッチ画像 Cocoon
スポンサーリンク

WordPressテーマ Cocoonのヘッダーロゴ

WordPressテーマ Cocoonでのヘッダーロゴに関してまとめてみました。

テーマCocoonのヘッダーロゴ設定

WordPressテーマ Cocoonでのヘッダーロゴの設定は、「Cocoon 設定」の「ヘッダー」から行う事が出来ます。

この設定ページでヘッダーレイアウト、ヘッダーの高さ、ヘッダーロゴ、ヘッダーロゴサイズなどを設定することが出来ます。

MASAa.netのヘッダーロゴ作成について

MASAa.netのヘッダーロゴは、365×76pxのサイズで作成しました。

【WordPress】ヘッダーロゴ設定について

ヘッダーの高さは120px(モバイル環境含む)で設定しています。

このヘッダーロゴをパソコンで確認すると、問題無く表示することが出来ています(※ヘッダー部分参照)

しかし、モバイル端末で見ると、あまり綺麗に表示することが出来ていません。

実際自分のスマートフォン(Fujitsu arrows NX F-01J)で確認すると、次の様に表示されてしまいます。

(※スマートフォン Fujitsu arrows NX F-01Jの解像度は 1080×1920px)

【WordPress】ヘッダーロゴ設定について

スマートフォン(Fujitsu arrows NX F-01J)を横に表示した場合、このような表示となります。

【WordPress】ヘッダーロゴ設定について

と言う事で、モバイル端末でも綺麗に見ることが出来るように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)

スマートフォン(Fujitsu arrows NX F-01J)を横にした場合のヘッダーロゴ表示は次の様になりました。

スマートフォン(Fujitsu arrows NX F-01J)

最後に

今回のカスタマイズによって、パソコンでもモバイル端末でもヘッダーロゴを綺麗に表示出来るようになりました。

WordPressでの作成や設定は通常パソコンで行っていますが、モバイル端末の事も考えて作る必要が有ります。

特にモバイル端末からの閲覧が急増しているので、抜かりなくチェックしたいと思います。

コメント