こんにちは、キジトラのコムギです。
このブログではTHE THORのカスタマイズ方法やプログラミングについてまとめています。
THE THORは標準機能で、サイトロゴを30px〜70pxに変更することが可能です。
ただ、そこの数値を変更してもサイズが小さいままだったり、思うような大きさにならない場合もあると思います。
サイトロゴのサイズを変更しても大きさが変わらない
先ほども言ったとおり、THE THORではサイトロゴの大きさを30px〜70pxに変更することが可能です。
デフォルトでは30pxなので、小さいと感じる場合は以下の手順で大きさを変更します。
ダッシュボードの『外観』から『サイトロゴの設定』へ
自分のサイトのダッシュボードの左のリストから以下の手順でクリックしましょう。
『ヘッダー表示時のロゴの高さ設定』の数値を変更
スマホ表示時とPC表示時でそれぞれサイトロゴの大きさを変更することが可能です。
変更が反映されない場合の対処法
サイトロゴの大きさを変更しても、サイトに反映されない場合があります。
そのときは以下の手順でwebのキャッシュをクリアしましょう。
サイトロゴがヘッダーからはみ出る場合の対処法
サイトロゴを大きくすると、ヘッダーから縦幅がはみ出してしまう場合があります。
そんなときは以下のコードをコピペで貼り付けてみてください。
CSSを貼り付ける場所は２箇所ありますが、基本的に以下の場所でOKです。
/* —– ヘッダー高さ変更 plomateblog —– */
/* — スマホのヘッダー高さ変更 — */
@media screen and (max-width:480px) {
.siteTitle{
height: 50px;
}
}
/* — PCのヘッダー高さ変更 — */
@media only screen and (min-width: 500px){
.siteTitle {
height: 80px;
}
}
/* —–（終） ヘッダー高さ変更 plomateblog —– */
70pxよりも大きく表示したい
70pxでも十分な大きさになるとは思いますが、サイトロゴをより大きくしたい人はこれから紹介するコードをコピペで貼り付けてみてください。
サイトロゴをPC表示のみ・モバイル表示のみ・どちらも大きくしたい場合の３パターンで、それぞれ貼り付けるコードが変わります。
どの端末で見ても不自然にならないようにしておくと、サイトのクオリティがアップします。
PC表示でのサイトロゴを大きくする場合
PC表示でのサイトロゴの大きさを変更します。
前提として、『ヘッダー表示時のロゴの高さ設定』のPC表示時の数値をmaxの『70px』に設定しておきます。
/* — PCでの高さ変更 — */
@media screen and (min-width:500px) {
.t-logoPc70 .siteTitle__logo {
height: 90px;
}
}
/* —–（終） サイトロゴ大きさ変更 plomateblog —– */
モバイル表示でのサイトロゴを大きくする場合
次はモバイル表示でのサイトロゴの大きさを変更する場合のコードです。
前提として、『ヘッダー表示時のロゴの高さ設定』のモバイル表示時の数値をmaxの『40px』に設定しておきます。
/* — モバイルでの高さ変更 — */
@media screen and (max-width:480px) {
.t-logoSp40 .siteTitle__logo {
height: 60px;
}
}
/* —–（終） サイトロゴ大きさ変更 plomateblog —– */
PC・モバイル表示どちらも大きくする場合
どちらのサイトロゴも大きくしたい場合は、以下のコードを貼り付けてください。
/* —– サイトロゴ大きさ変更 plomateblog —– */
/* — モバイルでの高さ変更 — */
@media screen and (max-width:480px) {
.t-logoSp40 .siteTitle__logo {
height: 60px;
}
}
/* — PCでの高さ変更 — */
@media screen and (min-width:500px) {
.t-logoPc70 .siteTitle__logo {
height: 90px;
}
}
/* —–（終） サイトロゴ大きさ変更 plomateblog —– */
サイトロゴはブログの顔です
サイトロゴはいわばブログの顔です。
訪れた人にサイトの名前を覚えてもらうきっかけになります。
枠からはみ出ていたり小さくて文字が読めないと、それだけでサイトの印象が下がります。
コードを一から調べると時間がかかりますが、ここで紹介しているコードをコピペして、サイトロゴをサクっと大きく表示してしまいましょう。
分かりにくい部分やその他カスタマイズの要望など、コメント大歓迎です♩