ここあです。
私が今、使っているWordPressテーマ
「THE THOR（ザ・トール）」も
かなり利用者が増えてきています。
なので、そろそろ本気でカスタマイズしたいですよね。
ということで、今回はサイトの顔ともいうべき
サイトのロゴサイズをカスタマイズする方法について
解説させていただきますので、
ロゴ画像の設定をしてるんだけど、
「どうもサイズがしっくりこない」と不満を持っているあなたは、
ぜひ私の記事でストレスを解消してくださいね。
コピペと微調整で簡単にできますので＾＾
THE THORにおけるサイトロゴの設定方法
まずはTHE THORのサイトロゴを設定する
基本的な方法からご説明いたします。
そもそもサイトロゴを設定していなければ
サイズを調整する必要がありませんので（笑）
なので、もうすでに「設定してるよ〜」というあなたは
読み飛ばしてくださいね。
THE THORのサイトロゴを設定する時は、
ダッシュボードメニューから外観 → カスタマイズをクリックし
そこから、基本設定［THE］をクリック
さらに、サイトロゴの設定をクリックすると、
以下の部分でサイトロゴの設定ができます。
なので、サイトロゴの設定ができたら
そのすぐ下にある「ヘッダー表示時のロゴの高さ設定」で
ひとまずサイトロゴのサイズ調整をしてみてください。
あなたが設定するサイトロゴの画像サイズによっては
この調整だけで済むこともありますヨ。
ロゴサイズのカスタマイズはCSSで
続いて、上記の方法で、サイトロゴのサイズが
しっくりこなかった時の調整方法について解説します。
THE THORの基本設定で、サイトロゴのサイズが
うまく調整できなかった場合は
CSSを使ってロゴサイズを調整します。
なので、サイトロゴをCSSで調整する場合は
ダッシュボードメニューから、
外観 → カスタマイズ → 追加CSSをクリックし
この部分にCSSコードを記入するようにしてくださいね。
ロゴサイズをカスタマイズする前に
今回、私があなたにお伝えするサイトロゴのカスタマイズ方法は
基本的に、今、私のサイトでしているような
サイトロゴをヘッダー部分の中心にレイアウトする
「ダイナミック」レイアウトをしているあなたにのみ推奨します。
なぜなら、サイトロゴのレイアウトが
「シンプル（default）」になっていると
サイトロゴとグローバルメニューがこのように
重なって悲惨なことになるからです（笑）
ということで、今
「シンプル（default）レイアウト」にしているあなたは
必ずサイトロゴのレイアウトを
「ダイナミック」に切り替えるようにしてくださいね。
サイトロゴをダイナミックレイアウトに切り替える場合は
ダッシュボードメニューから外観 → カスタマイズをクリックし
基本設定［THE］のすぐ下にある「共通エリア設定［THE］」をクリック
さらにヘッダーエリア設定をクリックすると
以下の画面でヘッダーのレイアウトが選択できます。
THE THORのサイトロゴのサイズをカスタマイズする方法
それでは、ここからが本番です。
とは言っても、すぐに終わります（笑）
なぜなら、ただコピペするだけだから＾＾
サイトロゴを調整するCSSは以下のコードをコピーして
先ほど説明した「追加CSS」に貼り付けてください。
- 追加CSSにコピペ
- @media only screen and (min-width: 896px){
.t-logoPc70 .siteTitle__logo {
height: 100px;
}
}
CSSコードをコピペしたら、あとは簡単。
この部分の数字を、あなたのお好みのサイズに変更するだけ！
ちなみに、私が紹介しているサイトロゴのサイズを変えるCSSは
iPad以上の画面サイズにのみ適用されるようにしてあります。
なので、スマホ用のサイズ、ipad用のサイズ、パソコン用のサイズ
それぞれ分けて個別に設定したい場合は、以下のように
●896px以上で表示（PC用）
.t-logoPc70 .siteTitle__logo {
height: 100px;
}
}
※height: 100px; をあなたの好きな数字に
● 895px以下で表示（タブレット用）
@media only screen and (max-width:895px) {
.t-logoPc70 .siteTitle__logo {
height: 80px;
}
}
※height: 80px; をあなたの好きな数字に
● 480px以下で表示（スマホ用）
.t-logoPc70 .siteTitle__logo {
height: 50px;
}
}
※height: 50px; をあなたの好きな数字に
これら３つのコードを追記して、それぞれサイトロゴのサイズを
あなたのロゴサイズの幅に応じて調整してみてください。
なお、ロゴサイズを調整する際には、あなたのパソコン画面で
Chromeなどのブラウザの表示画面の左右を縮めれば、
画面を見ながら、直接サイトロゴの調整ができます。
サイトロゴの設定方法と調整方法は以上です。
THE THORのロゴサイズをカスタマイズする方法まとめ
今回は、THE THORにおける
サイトロゴのロゴサイズをカスタマイズする方法について
解説させていただきました。
サイトロゴというのは、そもそも画面を切り換えても
必ず表示される、言わば「あなたの顔のようなもの」。
なので、あなたのサイト名をネットユーザーに
きちんと覚えてもらうためには
サイトロゴをきちんと見やすく、適正なサイズで
表示させておくことが大事です。
特にサイトロゴを作る場合には、ネットユーザーに
- 覚えてもらいやすいサイトタイトル
- どんな情報を発信しているのか、分かりやすいキャッチフレーズ
など
しっかりと表示させておくことで
初めてあなたのサイトを訪れたネットユーザーには
あなたのサイトがどんなサイトなのかが
非常に分かりやすくなります。
なので、サイトロゴに関しては
あなたが考える以上に重要な役目を果たしますので
本気でビジネスとしてオウンドメディアを運営するなら
「自分にはサイトロゴなんか作れない！」と思うのではなく
プロに頼んででも作りましょう。
その方が、あなたの信用に繋がりやすくなりますので。
ということで、最後までお読みいただき
ありがとうござました！
