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

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

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

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

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

 

\ 次世代のWordPressテーマ /

デザインに優れ、集客を後押しする機能が標準装備

 

カスタマイズ内容

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

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

PC表示

ロゴ画像カスタマイズのPC表示

スマホ表示

ロゴ画像カスタマイズのスマホ表示

 

カスタマイズ事前準備

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

事前準備

  • サイトロゴの設定で、スマホ表示:25px(default)、PC表示:40px(default)に高さを設定
  • グローバルメニューを表示している場合には、ヘッダーエリア設定でヘッダーのレイアウトを「ダイナミック」に選択することをおすすめします。

 

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

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

01

 

ロゴ画像の設定確認

  1. WordPressのダッシュボードから外観カスタマイズとクリックします。
  2. 基本設定[THE]とクリックします。
  3. サイトロゴの設定をクリックします。

ロゴ画像の設定手順

02

 

ロゴ画像の高さ確認

  1. スマホ表示時のロゴ画像の高さが「20px(default)」になっているか確認します。
  2. PC表示時のロゴ画像の高さが「30px(default)」になっているか確認します。
  3. 内容を変更した場合は、「公開」ボタンをクリックします。

ロゴ画像の高さ確認

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

 

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

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

MEMO

ヘッダーエリア設定でヘッダーのレイアウトを「シンプル(default)」になっていると、ロゴ画像とグローバルメニューが重なってしまうことがあります。

ロゴ画像とグローバルメニューが重なる

01

 

ヘッダーエリア設定確認

  1. WordPressのダッシュボードから外観カスタマイズとクリックします。
  2. 共通エリア設定[THE]とクリックします。
  3. ヘッダーエリア設定をクリックします。

ヘッダーエリア設定手順

02

 

ロゴ画像の高さ確認

  1. ヘッダーのレイアウトが「ダイナミック」になっているか確認します。
  2. 内容を変更した場合は、「公開」ボタンをクリックします。

ヘッダーのレイアウト確認

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

 

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

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

  1. 子テーマの「style-user.css」を編集する。(外観/テーマの編集から変更できます)
  2. 追加CSSを編集する。(外観/カスタマイズ/追加CSSから変更できます)

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

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

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

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

注意

ご使用のロゴ画像によっては、ロゴ画像が見切れてしまったり、メニューパネルに近づきすぎる場合もありますので必ず問題ないか確認してください。特にスマホ表示の場合に注意してください。

ロゴ画像がメニューパネルに近づきすぎる

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

 

キャッシュの削除

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

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

まとめ

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

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

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

 

\ 次世代のWordPressテーマ /

デザインに優れ、集客を後押しする機能が標準装備

ポチして頂くことで、ランキングの順位が上がります

人気ブログランキングへ
にほんブログ村 本ブログ 書評・レビューへ
Amazonでお得にお買い物
amazonギフト券

Amazonでお買い物するなら、Amazonギフト券の利用がおすすめ!

チャージするたびに、プライム会員なら最大2.5%分通常会員なら最大2.0%分のAmazonポイントが貯まる。

\ TRY NOW!! /

\ こちらも読まれています! /