今回の記事は、「THE THOR」のヘッダー部分にあるロゴ設定についてカスタマイズ方法をご紹介します。
具体的にはこの赤枠の部分↓
設定は以下の項目からできます。
- カスタマイズ＞基本設定[THE]＞サイトロゴの設定
サイトロゴ内の設定は２つ。
- ロゴ画像を選択できます。
- ロゴ画像の、スマホ・パソコン表示の高さ設定ができます。
ー ブログで伸び悩んでいる方へ ー
サイトロゴのメリット
サイトロゴを設定するメリットは、記事の文章のようなテキストではなく画像でサイトの特徴を表現できる点。
ちなみに、ロゴ設定がない場合はテキストでサイトタイトルが表示されるのみです。
↓↓↓
みみこ
ロゴのサイズ調整
ロゴのサイズは、パソコンとスマホで分けて設定することができます。
デフォルトでは以下の高さになっています。
- スマホ：20px
- パソコン：30px
この数字は、先ほどの赤枠の縦の部分の高さ設定です。
あなたが作ったロゴ画像に合わせて調整してみてください。
ただ、僕のブログではロゴのサイズを大きくしたかったので以下のコードを使ってカスタマイズしています。
height: 220px;
}
@media screen and (max-width:768px) {
.siteTitle__logo {
height: 180px;
}
}
@media screen and (max-width:640px) {
.siteTitle__logo {
height: 100px;
}
}
@media screen and (max-width:320px) {
.siteTitle__logo {
height:80px;
}
}
各コードの意味
それぞれ表示された感じはこちらです↓
デフォルトのパソコン表示：高さ220pxに調整
height: 220px;
}
→ロゴに文字を多めに入れたかったので、小さいと見えにくくなってしまいます。それを避けるため大きくしたかったため。
パソコンでブラウザを縮めた場合（横幅が641px〜768pxまでの場合）：高さ180pxに調整
.siteTitle__logo {
height: 180px;
}
}
→ブラウザを縮めていく時に調整がかかるように。
iPhone8や、ブラウザを縮めた場合（横幅が375px〜640pxまでの場合）：高さ100pxに調整
.siteTitle__logo {
height: 100px;
}
}
→ほとんどのユーザーがiPhone8（横幅375px）が多いので、なるべく大きく見えるように調整。
ちなみに、あなたのブログに訪問している人がどんなデバイスを使っているのかを、Googleアナリティクスで確認することができますよ^^↓
おかぴー こんにちは、WEBデザイナーのおかぴーです！ プロフィールはこちら。ブログデザインと組み合わせて効果的な収益化が目指せるこちらの記事もおすすめです^^ この記事は、Googleアナリティクスの分析[…]
iPhoneSE（旧世代）の場合（横幅320px〜374pxまでの場合）：高さ80pxに調整
.siteTitle__logo {
height:80px;
}
}
ロゴ画像について
- 横幅768px・高さ272px
- pngデータ
まとめ
THE THORでサイトロゴは、
- 画像の幅と高さ
- 基本設定[THE]＞サイトロゴの設定＞ヘッダー表示時のロゴの高さ設定
が作用して表示されます。
ロゴを設定する場合、高さがうまくイメージしたものにならない時があるので、最初は画像作成→サイトロゴの設定でうまく表示されるかやってみて、
もし自分がイメージしたものより小さい場合は、この記事にあるCSSのコードを「カスタマイズ＞追加CSS」にコピペして調整してみてください^^
あなたのブログを表現できる、ステキなサイトロゴができますように。
頑張ってくださいね！^^
