【THE THOR】サイトロゴの設定方法。サイズが小さい時の対処方法もご紹介!

おかぴーおかぴー

こんにちは、WEBデザイナーのおかぴーです!

プロフィールはこちら。ブログデザインと組み合わせて効果的な収益化が目指せるこちらの記事もおすすめです^^

 

今回の記事は、「THE THOR」のヘッダー部分にあるロゴ設定についてカスタマイズ方法をご紹介します。

具体的にはこの赤枠の部分↓

THE THOR サイトロゴ
「パソコン表示」
THE THOR サイトロゴ
「スマホ表示」

 

設定は以下の項目からできます。

  • カスタマイズ>基本設定[THE]>サイトロゴの設定

 

サイトロゴ内の設定は2つ。

THE THOR サイトロゴ

  1. ロゴ画像を選択できます。
  2. ロゴ画像の、スマホ・パソコン表示の高さ設定ができます。

 

『カスタマイズする前に』 カスタマイズをするときは、子テーマを使って、バックアップをとってから行ってください。カスタマイズについては必ず自己責任でお願いいたします。

ー ブログで伸び悩んでいる方へ ー

無料動画

サイトロゴのメリット

サイトロゴを設定するメリットは、記事の文章のようなテキストではなく画像でサイトの特徴を表現できる点。

ちなみに、ロゴ設定がない場合はテキストでサイトタイトルが表示されるのみです。

↓↓↓

THE THOR サイトロゴ
「パソコン表示」
THE THOR サイトロゴ
「スマホ表示」

 

みみこみみこ
画像があった方が、視覚的な情報が増えて「どんなブログか?」がイメージしやすくなりますね(*^ω^*)

 

ロゴのサイズ調整

ロゴのサイズは、パソコンとスマホで分けて設定することができます。

デフォルトでは以下の高さになっています。

  • スマホ:20px
  • パソコン:30px

この数字は、先ほどの赤枠の縦の部分の高さ設定です。

あなたが作ったロゴ画像に合わせて調整してみてください。

 

ただ、僕のブログではロゴのサイズを大きくしたかったので以下のコードを使ってカスタマイズしています。

 CSSソースコード
.siteTitle__logo {
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に調整

 CSSコード
.siteTitle__logo {
height: 220px;
}

→ロゴに文字を多めに入れたかったので、小さいと見えにくくなってしまいます。それを避けるため大きくしたかったため。

 

 

パソコンでブラウザを縮めた場合(横幅が641px〜768pxまでの場合):高さ180pxに調整

 CSSコード
@media screen and (max-width:768px) {
.siteTitle__logo {
height: 180px;
}
}

→ブラウザを縮めていく時に調整がかかるように。

 

 

iPhone8や、ブラウザを縮めた場合(横幅が375px〜640pxまでの場合):高さ100pxに調整

 CSSコード
@media screen and (max-width:640px) {
.siteTitle__logo {
height: 100px;
}
}

→ほとんどのユーザーがiPhone8(横幅375px)が多いので、なるべく大きく見えるように調整。

ちなみに、あなたのブログに訪問している人がどんなデバイスを使っているのかを、Googleアナリティクスで確認することができますよ^^↓

関連記事

おかぴー こんにちは、WEBデザイナーのおかぴーです! プロフィールはこちら。ブログデザインと組み合わせて効果的な収益化が目指せるこちらの記事もおすすめです^^ この記事は、Googleアナリティクスの分析[…]

Googleアナリティクス ページレポート モバイルのサマリー

 

 

iPhoneSE(旧世代)の場合(横幅320px〜374pxまでの場合):高さ80pxに調整

 CSSコード
@media screen and (max-width:320px) {
.siteTitle__logo {
height:80px;
}
}
このように、各デバイスで大きさを調整しています。

ロゴ画像について

ちなみに僕のロゴ画像は、以下で作成しています。
  • 横幅768px・高さ272px
  • pngデータ
pngデータにしているのは、背景の緑と青色のグラデーションを透過させるためです。
jpgデータは背景を透過して作ることはできないです
もし背景が白なら、jpgで背景色を白で作成した場合は背景と同じ色になるので、jpgで作っても良いと思います^^
僕のブログのように背景を透過させたい場合はpngデータを使いましょう。
背景のグラデーションはCSSでカスタマイズしています。

まとめ

まとめ

THE THORでサイトロゴは、

  • 画像の幅と高さ
  • 基本設定[THE]>サイトロゴの設定>ヘッダー表示時のロゴの高さ設定

が作用して表示されます。

ロゴを設定する場合、高さがうまくイメージしたものにならない時があるので、最初は画像作成→サイトロゴの設定でうまく表示されるかやってみて、

もし自分がイメージしたものより小さい場合は、この記事にあるCSSのコードを「カスタマイズ>追加CSS」にコピペして調整してみてください^^

 

あなたのブログを表現できる、ステキなサイトロゴができますように。

頑張ってくださいね!^^

デザイン効果と組み合わせて、最適な収益化方法を見つけよう

あなたに最適な収益化方法を見つけてみませんか?

「ある程度ブログのデザインも納得したものができてきたなぁ」

「次はこのブログを、稼げるブログにしたい!」

と思っている方へ。

 

ブログ収益化において、

デザイン効果と組み合わせることで反応率が高まる効果的な方法があるのですが、

僕が勤めている会社では、とても言えない(というか教えたくないw)内容を、

ここだけの話で公開しようと思います。

 

どんな話かと言うと、

「発信するテーマ(内容)に合わせた最適な収益化方法が分かる」というものです。

 

100人いれば、100個のブログがあり、コンセプトがあります。

それによって収益化の方法も様々です。

 

デザインは視覚的に注目を集める力がありますが、その先の収益化へ進むには間違いなく発信内容に合わせてブログを構築していく必要があります。

 

あなたは最適な収益化方法を選択できていますか?

きっと、今ブログで伸び悩んでいる人には新しい発見になるはず^^

興味がある方は、ぜひ以下からご覧ください〜

 

↓↓↓

 

 

ストレスフリーなブロガーライフを送ろう ブログデザインお悩み解決室WPテーマ「THE THOR」でリニューアル!" width="1280" height="479" >

WPテーマ「THE THOR」でリニューアル!

2年近く「STORK」を愛用してきた当ブログは、これから「THE THOR」でデザインも新たに生まれ変わりました。(STORK、今までありがとう!)

これからも当ブログではブログ作りに役立つ情報を発信していきます。よろしくお願いします(o^^o)

CTR IMG