THE THORをカスタマイズするにあたって、初期設定後の順番として、次はトップページになるのではないでしょうか?
ブログの顔ともいえる部分なので、ここはとくに力を入れてみたいところですが、トップページと一言でいっても、ヘッダーやフッターなどその中の項目は意外と細かいですよね。
わたしもはじめの頃は、ブログの専門用語を並べられても、まさにちんぷんかんぷんだったので、ホント適当にいじっていましたから。
トップページの中でも、「どこから始めようか迷っている」そんなあなたへ、結論としては特にヘッダーのメインエリアであるサイトロゴを設置するところから始めてみましょう。
今回の記事では、サイトロゴを設置する際の方法について、初心者さん向けにわかりやすく説明していきますよ。
THE THORをカスタマイズしよう!サイトロゴの設置手順
THE THORをカスタマイズしよう!と題して、今回はヘッダーの最もメインエリアである、サイトロゴを設置していきます。
まず最初に、肝心のサイトロゴを準備する必要がありますが、もちろん自分で作れるならそれでOKです。
そんなスキルや時間がない場合は、ココナラなどのプラットフォームを利用すれば、ワンコイン〜数千円(おおよそ目安の料金)で作成が可能ですよ。
また、定期的に割引クーポンもあり、今後ロゴ以外にもアバター作成など必要になってくるので、今のうちに登録するのがおすすめです。
⇒ ココナラの無料会員登録はこちら
- サイズ:縦220px×縦50px →大きなサイズで作っても、カスタマイズ設定で勝手にリサイズされます。
- データ形式:png →背景を透過させたいときはpngを使いましょう。
ロゴの準備ができたら、次に説明する順番に沿って設置していきましょう。
①「外観」→「カスタマイズ」→「基本設定[THE]」へすすむ
②「サイトロゴの設定」を選択する
③「ロゴ画像を選択」をクリック
④ロゴをアップロードしてサイズ調整する
上画像のロゴ画像(赤枠)が反映されたら、その下にあるロゴの高さ設定(青枠)を変更します。
ここは基本的にお好みで、スマホ表示とPC表示に分けることができますが、THE THORのサイトロゴはデフォルトのままだと、かなり小さくなりませんでしたか?
せっかく作成したのに、設置したら思った以上に小さいなんて悲しいよね〜
サイトロゴはブログの顔!最初にしっかり設置しておこう!
「THE THOR無料サポート」受付中!質問、疑問etc…どんな些細なことでもOK!お問い合わせはこちらからお気軽にどうぞ!
ロゴサイズをカスタマイズする場合に一言
THE THORのロゴサイズをカスタマイズする場合、その前に一つやっておきたい設定があります。
それは何かというと、ヘッダー設定でレイアウトを選択する際、「シンプル(default)」ではなく「ダイナミック」に設定することです。
わたしのサイトのように、サイトロゴをヘッダースペースの中心にレイアウトする場合、「ダイナミック」レイアウトにしている方がバランスよく反映されますよ。
ヘッダーのレイアウトが「シンプル(default)」になっていると、サイトロゴとグローバルメニューが下画像のようになってしまいます。
かなりカッコわるいよね…
ということで、もし今あなたが「シンプル(default)レイアウト」にしていたら、必ずヘッダーのレイアウトを「ダイナミック」に切り替えるようにしてくださいね。
ヘッダーのレイアウトを「ダイナミック」に切り替える手順
「外観」 → 「カスタマイズ」→「共通エリア設定[THE]」→「ヘッダーエリア設定」へすすみます。
下の画面で、ヘッダーのレイアウトを選択して切り替えることができます。
まとめ
THE THORをカスタマイズするにあたって、今回は初めてサイトロゴを設置する際の方法を、わかりやすくシンプルに解説させていただきました。
お伝えしてきたように、サイトロゴはブログの顔ともいえる重要な部分ですから、あなたのブログ名を読者さんにしっかりと覚えてもらうためには、サイトロゴを適切なサイズで見やすく表示させておくことがポイントです。
また、何も装飾されていないサイトロゴだと殺風景な雰囲気ですが、少し手を加えるだけで見栄えよくなるものなので、きっと気分もあがっちゃいますよ!
今回の記事でなにかわからないことはありませんでしたか?質問や相談、感想や雑談などなんでも受け付けているので、どうぞお気軽にメールくださいね↓