Audible 2ヶ月無料キャンペーン【10月12日まで】

『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ギフト券 チャージタイプ

2022年9月27日(火)までの期間限定で、キャンペーンが復活しています。

 

Amazonギフト券 チャージタイプ【9月27日まで】

Amazonでお買い物するなら、Amazonギフト券 チャージタイプの利用がおすすめ!

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

\ TRY NOW!! /

 

よかったらシェアしてね!
  • URLをコピーしました!

この記事を書いた人

自由な働き方で生活していけるように、日々の『喜び・怒り・悲しみ・楽しみ』を書きつづったブログです。

コメント

コメント一覧 (2件)

  • 始めまして。
    質問宜しくお願いします。

    クリエイター様に依頼してヘッダー画像を作成しました。

    WordPressのTHORでヘッダー画像を設定したのですが
    PCでみると高さが大きく、スマホではPC表示になってしまいます。

    理想は、ネイネイさまのブログのヘッダーサイズほどにしたいのですがうまく設定ができません。

    お忙しいところすみませんがアドバイスしていただけたらたすかります。

    宜しくお願いします。

    • かぷーのさん、はじめまして!
      コメント頂き、ありがとうございます(‘◇’)ゞ

      追加CSSの height: 〇〇px;の部分を編集すれば大きさを変更できると思うのですが、それでも理想の大きさにならないということでしょうか?

      もしそうなのであれば、元々の画像の縦横比の問題になってくるので、そちらを変更する必要があると思われます。

      自分の画像は、width=”1500″ height=”300″になっているのですが、かぷーのさんの画像はホームページを確認させて頂いたかぎりwidth=”1000″ height=”500″ですので、heightの高さをもう少し低くすることで自分のブログと同じような設定にできるのではないかと思われます。

      以上ご確認ください。また、なにかご不明な点があればお気軽にどうぞ。

コメントする

コメントは日本語で入力してください。(スパム対策)

CAPTCHA

目次(タップできます)