こんにちは！ イイ感じのトップページになったネイネイ(@NEYNEYx2)です。
この記事では、WordPressテーマ『THE THOR（ザ・トール）』のロゴ画像の大きさをカスタマイズする方法のご紹介していきます。
サイトのロゴ画像のサイズを調整する時の参考にしてください。
カスタマイズ内容
下記が、サイトのロゴ画像の大きさをカスタマイズした画像になります。
ロゴ画像の高さをPC表示のときは40pxから100pxに変更、スマホ表示のときは25pxから45pxに変更しています。
カスタマイズ事前準備
カスタマイズをする前に事前準備をする項目があります。
事前準備
- サイトロゴの設定で、スマホ表示：25px(default)、PC表示：40px(default)に高さを設定
- グローバルメニューを表示している場合には、ヘッダーエリア設定でヘッダーのレイアウトを「ダイナミック」に選択することをおすすめします。
THE THOR（ザ・トール）のサイトロゴ設定を確認
サイトロゴの設定でロゴ画像の高さが、スマホ表示：25px(default)、PC表示：40px(default)になっているか確認します。
ロゴ画像の設定確認
- WordPressのダッシュボードから外観＞カスタマイズとクリックします。
- 基本設定[THE]とクリックします。
- サイトロゴの設定をクリックします。
ロゴ画像の高さ確認
- スマホ表示時のロゴ画像の高さが「20px(default)」になっているか確認します。
- PC表示時のロゴ画像の高さが「30px(default)」になっているか確認します。
- 内容を変更した場合は、「公開」ボタンをクリックします。
以上で、サイトロゴ設定の確認は完了です。
ヘッダーエリア設定の確認
グローバルメニューを表示している場合には、ヘッダーエリア設定でヘッダーのレイアウトを「ダイナミック」に選択することをおすすめします。
MEMO
ヘッダーエリア設定でヘッダーのレイアウトを「シンプル(default)」になっていると、ロゴ画像とグローバルメニューが重なってしまうことがあります。
ヘッダーエリア設定確認
- WordPressのダッシュボードから外観＞カスタマイズとクリックします。
- 共通エリア設定[THE]とクリックします。
- ヘッダーエリア設定をクリックします。
ロゴ画像の高さ確認
- ヘッダーのレイアウトが「ダイナミック」になっているか確認します。
- 内容を変更した場合は、「公開」ボタンをクリックします。
以上で、ヘッダーエリア設定の確認は完了です。
THE THOR（ザ・トール）のロゴ画像の大きさをカスタマイズ
ここでは、説明したカスタマイズ内容をCSSファイルにコピペしていきます。 CSSファイルへのコピペは下記のどちらか、お好みな方で編集ください。
- 子テーマの「style-user.css」を編集する。(外観/テーマの編集から変更できます)
- 追加CSSを編集する。(外観/カスタマイズ/追加CSSから変更できます)
それでは、準備が整いましたら下記のCSSコードを、CSSファイルにコピペしてください。
/* ------------------------------------- */
/* ----------- ロゴ画像の調整 ----------- */
/* ------------------------------------- */
/* ------- スマホ表示のロゴ高さ ------- */
.siteTitle__logo {
height: 45px;
}
/* --------- PC表示のロゴ高さ --------- */
@media only screen and (min-width: 500px){
.siteTitle__logo {
height: 100px;
}}
注意
ご使用のロゴ画像によっては、ロゴ画像が見切れてしまったり、メニューパネルに近づきすぎる場合もありますので必ず問題ないか確認してください。特にスマホ表示の場合に注意してください。
以上で、ロゴ画像の大きさカスタマイズは完了です。
キャッシュの削除
カスタマイズをして、内容がうまく反映されない場合はキャッシュの削除をしてみましょう。
実際はカスタマイズ内容が反映されているのに、古いキャッシュを見てしまっている場合に有効な方法です。
まとめ
どうですか？ THE THOR（ザ・トール）のロゴ画像の大きさを調整することができましたか。
これでまた、あなたのWebサイトがまた一つレベルアップしましたね。
それでは、まったです。 (‘◇’)ゞ