『THE THOR』でロゴ画像の大きさをカスタマイズ！

こんにちは！ イイ感じのトップページになったネイネイ(@NEYNEYx2)です。

この記事では、WordPressテーマ『THE THOR（ザ・トール）』のロゴ画像の大きさをカスタマイズする方法のご紹介していきます。

サイトのロゴ画像のサイズを調整する時の参考にしてください。

カスタマイズ内容

下記が、サイトのロゴ画像の大きさをカスタマイズした画像になります。

ロゴ画像の高さをPC表示のときは40pxから100pxに変更、スマホ表示のときは25pxから45pxに変更しています。

カスタマイズ事前準備

カスタマイズをする前に事前準備をする項目があります。

事前準備

THE THOR（ザ・トール）のサイトロゴ設定を確認

サイトロゴの設定でロゴ画像の高さが、スマホ表示：25px(default)、PC表示：40px(default)になっているか確認します。

以上で、サイトロゴ設定の確認は完了です。

ヘッダーエリア設定の確認

グローバルメニューを表示している場合には、ヘッダーエリア設定でヘッダーのレイアウトを「ダイナミック」に選択することをおすすめします。

以上で、ヘッダーエリア設定の確認は完了です。

THE THOR（ザ・トール）のロゴ画像の大きさをカスタマイズ

ここでは、説明したカスタマイズ内容をCSSファイルにコピペしていきます。 CSSファイルへのコピペは下記のどちらか、お好みな方で編集ください。

それでは、準備が整いましたら下記のCSSコードを、CSSファイルにコピペしてください。

/* ------------------------------------- */
/* ----------- ロゴ画像の調整 ----------- */
/* ------------------------------------- */

/* ------- スマホ表示のロゴ高さ ------- */
.siteTitle__logo {
    height: 45px;
}

/* --------- PC表示のロゴ高さ --------- */
@media only screen and (min-width: 500px){
.siteTitle__logo {
    height: 100px;
}}

以上で、ロゴ画像の大きさカスタマイズは完了です。

キャッシュの削除

カスタマイズをして、内容がうまく反映されない場合はキャッシュの削除をしてみましょう。

実際はカスタマイズ内容が反映されているのに、古いキャッシュを見てしまっている場合に有効な方法です。

まとめ

どうですか？　THE THOR（ザ・トール）のロゴ画像の大きさを調整することができましたか。

これでまた、あなたのWebサイトがまた一つレベルアップしましたね。

それでは、まったです。　(‘◇’)ゞ