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

THE THOR サイトロゴ
おかぴーおかぴー

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

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

 

▼2022/4/7更新

コメントで頂いたのですが、ブログ内のコードでロゴがうまく大きくならなかったためコードを追記しました^^

 

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

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

THE THOR サイトロゴ

「パソコン表示」

THE THOR サイトロゴ

「スマホ表示」

 

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

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

 

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

THE THOR サイトロゴ

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

 

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

サイトロゴのメリット

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

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

↓↓↓

THE THOR サイトロゴ

「パソコン表示」

THE THOR サイトロゴ

「スマホ表示」

 

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

 

ロゴのサイズ調整

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

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

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

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

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

 

 CSSサンプルソースコード(2022/4/7更新しました)

▼ロゴの大きさ変更

/*スマホサイズ*/
.t-logoSp40 .siteTitle__logo{
height:43px;
}
/*パソコンサイズ*/
@media screen and (min-width:767px){
.t-logoPc70 .siteTitle__logo{
height:100px;
}
}

 

▼ロゴを背景透過したい場合

・ロゴ画像は、png形式でアップします。
・背景色の指定方法①
「共通エリア設定>ヘッダーエリア設定>ヘッダーの背景色を指定」でお好きな色を指定すれば透過されます。
・背景色の指定方法②
CSSのコードでやりたい場合は、↓の「#eeee22」をお好きなカラーコードにして貼り付けてください^^

.t-headerColor .l-header{
background: #eeee22;
}

 

 

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

2022/4/7時点でうまく反映されないようです↓

 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アナリティクスで確認することができますよ^^↓

あわせて読みたい
【ポイントは6つ】Googleアナリティクス分析で見るべき数字まとめ③ Googleアナリティクスの分析記事の第3弾(最終章)。ページレポートでは、PV数や滞在時間など、「全ての記事の細かい数字」が分かります。モバイルサマリーでは、閲覧されてる「デバイス(パソコン・スマホ・タブレットなど)の割合」が分かります。

 

 

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」にコピペして調整してみてください^^

 

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

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

よかったらシェアしてね!
  • URLをコピーしました!

コメント

コメント一覧 (12件)

  • 先ほどは文書足らずの物を送信してすいませんでした。
    はじめてTHE THORを使ってサイトを作っています。
    サイトロゴが小さい為、大きくしたいのですが
    こちらのをコピペしましたがサイトロゴが大きく変化しませんでした。
    何故か分かりますでしょうか

    • はじめまして!

      もしよろしければ、当ページのお問い合わせフォームからお使いのサイトのURLをいただければ確認できると思いますので、よければご連絡ください^^

  • ちょうど同じテーマで小さく表示されて困っていました!
    参考にさせていただき無事解決しました!
    ありがとうございます。

  • おかぴーさん
    はじめまして、ムラマサと申します。
    記事を拝見させていただき、追加CSSにコードを入力したのですが、ロゴが大きくなりませんでした。
    修正点をお教えいただければありがたいです。
    また、ロゴを透過させて、背景になじませたいのですが、その場合のコードもご教示いただければありがたいです。
    よろしくお願いいたします。

    • ムラマサさん
      はじめまして!コメントありがとうございます。

      僕も今記事内のコードを改めてコピペしてみたのですが確かにうまく反映されませんでした。
      失礼しました^^;

      記事内にも追記したのですが、こちらのコードだといかがでしょうか?
      ↓↓↓
      ーーーーーーーーー
      /*スマホサイズ*/
      .t-logoSp40 .siteTitle__logo{
      height:43px;
      }
      /*パソコンサイズ*/
      @media screen and (min-width:767px){
      .t-logoPc70 .siteTitle__logo{
      height:100px;
      }
      }
      ーーーーーーーーー

      また、ロゴはpng画像でアップします。
      そして「共通エリア設定>ヘッダーエリア設定>ヘッダーの背景色を指定」でお好きな色を指定すれば透過されるかと思います。

      CSSのコードでやりたい場合は、↓の「#eeee22」をお好きなカラーコードにするとなると思いますよ^^
      ーーーーーーーーー
      .t-headerColor .l-header{
      background: #eeee22;
      }
      ーーーーーーーーー

      うまくいかない場合は、また教えてください!

  • おかぴーさん、まさか今日中に返信がいただけるなんて思ってもいなくて、びっくりしました!
    ありがとうございます!
    おかげさまで、サイトロゴのサイズを変えることができました。
    ロゴの透過のほうは上手くいかなったのですが、何か理由はわかりますでしょうか?
    画像はCanvaで作ったpng画像ですが、ロゴ自体のもともとの背景色が白だから透過できないのですかね
    もし可能でしたら、ご教示いただければ幸いです。

    • よかったです^^
      ロゴのサイズ、うまくいったようで自分も嬉しいです!

      ロゴの透過は、ブログを拝見しましたがpngデータではありました。
      ただ、おっしゃる通り背景色を白で指定したデータなので透過されないです。

      あと、canvaは僕も使ったことがありますが、無料プランですと透過できない仕様なので、
      有料にするか、
      テクニカルでいくなら背景色をヘッダーに指定した色「#5ddae2」で書き出ししたら、同じ色なので見分けがつかないようにできるんじゃないかなと思いました!

      一度後者でトライしてみていただくのがいいかと(*^^*)

      • おかぴーさん

        背景色に合わせたロゴに作り直して、上手くマッチしました!
        丁寧なご説明、本当にありがとうございます。

        おかぴーさんは、プログラミングにもお詳しいのですね(^^)
        自分で調べても解決できなかったので、本当に助かりました。
        ありがとうございます!

        • ブログ拝見しました。
          うまくいって良かったですね♪

          コーディングもまんべんなくやってる感じなので(*´︶`*)

          また何かありましたら気軽にコメントください^^
          ブログ応援してます!

          • ありがとうございます(^^)
            おかぴーさんのおかげです!
            今後とも、よろしくお願いいたします。

コメントする

CAPTCHA

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

目次