THE THORをカスタマイズしよう!サイトロゴを設置する方法

THE THORをカスタマイズするにあたって、初期設定後の順番として、次はトップページになるのではないでしょうか?

 

ブログの顔ともいえる部分なので、ここはとくに力を入れてみたいところですが、トップページと一言でいっても、ヘッダーやフッターなどその中の項目は意外と細かいですよね。

 

わたしもはじめの頃は、ブログの専門用語を並べられても、まさにちんぷんかんぷんだったので、ホント適当にいじっていましたから。

 

トップページの中でも、「どこから始めようか迷っている」そんなあなたへ、結論としては特にヘッダーのメインエリアであるサイトロゴを設置するところから始めてみましょう。

 

今回の記事では、サイトロゴを設置する際の方法について、初心者さん向けにわかりやすく説明していきますよ。

THE THORをカスタマイズしよう!サイトロゴの設置手順

THE THORをカスタマイズしよう!と題して、今回はヘッダーの最もメインエリアである、サイトロゴを設置していきます。

 

まず最初に、肝心のサイトロゴを準備する必要がありますが、もちろん自分で作れるならそれでOKです。

 

むすめ
たかがロゴ、されどロゴ…こだりたいけど、時間をかけすぎるのはいかがなものか?

 

てんかな
ちなみにこの記事、実はサイトロゴを作りながら書いたのですが、トータルで5時間かかってます(汗)

 

そんなスキルや時間がない場合は、ココナラなどのプラットフォームを利用すれば、ワンコイン〜数千円(おおよそ目安の料金)で作成が可能ですよ。

 

また、定期的に割引クーポンもあり、今後ロゴ以外にもアバター作成など必要になってくるので、今のうちに登録するのがおすすめです。

 

  • サイズ:縦220px×縦50px →大きなサイズで作っても、カスタマイズ設定で勝手にリサイズされます。
  • データ形式:png →背景を透過させたいときはpngを使いましょう。

 

ロゴの準備ができたら、次に説明する順番に沿って設置していきましょう。

「外観」→「カスタマイズ」「基本設定[THE]」へすすむ

 

②「サイトロゴの設定」を選択する

 

③「ロゴ画像を選択」をクリック

 

④ロゴをアップロードしてサイズ調整する

 

上画像のロゴ画像(赤枠)が反映されたら、その下にあるロゴの高さ設定(青枠)を変更します。

 

ここは基本的にお好みで、スマホ表示とPC表示に分けることができますが、THE THORのサイトロゴはデフォルトのままだと、かなり小さくなりませんでしたか?

 

むすめ

せっかく作成したのに、設置したら思った以上に小さいなんて悲しいよね〜

 

てんかな
わたしも案の定、「え?なんかちっちゃい!」となったうちの一人ですが、なんとか色々調べて好みの大きさまでたどり着きました

 

その時どうしたのかというと、サイズを大きくするCSSカスタマイズを、サイトロゴ設定後にしてみたのです!実にたくさんの方法がありますので、「THE THOR サイトロゴ 小さい」などとググってみましょう。

 

ロゴサイズが変更できたか確認するには、サイズ変更したらその都度「公開」を押して、反映させてから確認しましょう。

 

むすめ
これで、サイトロゴのアップロードは完了だよ♪
てんかな

サイトロゴはブログの顔!最初にしっかり設置しておこう!

 

ロゴサイズをカスタマイズする場合に一言

THE THORのロゴサイズをカスタマイズする場合、その前に一つやっておきたい設定があります。

 

それは何かというと、ヘッダー設定でレイアウトを選択する際、「シンプル(default)」ではなく「ダイナミック」に設定することです。

 

例えば、サイトロゴをヘッダースペースの中心にレイアウトする場合、「ダイナミック」レイアウトにしている方がバランスよく反映されますよ。

 

ヘッダーのレイアウトが「シンプル(default)」になっていると、サイトロゴとグローバルメニューが下画像のようになってしまいます。

 

てんかな
かぶったり窮屈になってしまいました
むすめ

かなりカッコわるいよね…

 

ということで、もし今あなたが「シンプル(default)レイアウト」にしていたら、必ずヘッダーのレイアウトを「ダイナミック」に切り替えるようにしてくださいね。

ヘッダーのレイアウトを「ダイナミック」に切り替える手順

外観」 → 「カスタマイズ」→「共通エリア設定[THE]」→「ヘッダーエリア設定」へすすみます。

 

下の画面で、ヘッダーのレイアウトを選択して切り替えることができます。

 

まとめ

THE THORをカスタマイズするにあたって、今回は初めてサイトロゴを設置する際の方法を、わかりやすくシンプルに解説させていただきました。

 

お伝えしてきたように、サイトロゴはブログの顔ともいえる重要な部分ですから、あなたのブログ名を読者さんにしっかりと覚えてもらうためには、サイトロゴを適切なサイズで見やすく表示させておくことがポイントです。

 

また、何も装飾されていないサイトロゴだと殺風景な雰囲気ですが、少し手を加えるだけで見栄えよくなるものなので、きっと気分もあがっちゃいますよ!