THE THOR(ザ・トール)でサイトロゴを設定する方法|初心者向けマニュアル
THE THOR(ザ・トール)でサイトロゴを設定する方法|初心者向けマニュアル

サイトロゴとは、サイトの一番上に小さく表示されるシンボルマークのような画像の事です。

クリックするとトップページに戻ることができます。

今回は、THE THOR(ザ・トール)でこのサイトロゴを設定する方法を解説します。

サイトロゴの設定方法

WordPressの管理画面を開きます。

サイドメニューから『外観カスタマイズ』という順にクリックして進みましょう。

サイドメニューから『外観→カスタマイズ』という順にクリックして進む

サイドメニューから『外観→カスタマイズ』という順にクリックして進む

「THORカスタマイズ」画面が表示されるので、『基本設定[THE]』をクリックします。

『基本設定[THE]』をクリック

『基本設定[THE]』をクリック

サイトロゴの設定』をクリックして早速設定していきましょう。

『サイトロゴの設定』をクリック

『サイトロゴの設定』をクリック

「ロゴ画像の設定」をしていきます。

メディアライブラリから画像を選択するか、新たにアップロードしましょう。

「ヘッダー表示時のロゴの高さ設定」はとりあえずデフォルトのままで設定してみます。

THE THOR サイトロゴの設定画面

THE THOR サイトロゴの設定画面

設定が終わったら、一番上の『公開』ボタンをクリックします。

『公開』ボタンをクリック

『公開』ボタンをクリック

これで、サイトロゴ画像の設定は完了です。

THE THOR サイトロゴ

THE THOR サイトロゴ

サイトロゴの高さを調整する

「ヘッダー表示時のロゴの高さ設定」がデフォルトの30pxだと小さすぎると感じたので50pxに変更してみます。

ヘッダー表示時のロゴの高さ設定

ヘッダー表示時のロゴの高さ設定

少し見やすくなりました。

高さ調整後のサイトロゴ

高さ調整後のサイトロゴ

ロゴ画像の高さは一番大きい設定でもスマホ表示で30px、PC表示で50pxに縮小されるので、小さくても見やすいように修正しておきます。

少しでも大きく表示したい場合は横長の画像を選ぶと良いでしょう。

サイトロゴ周りをカスタマイズする

サイトロゴが表示されているヘッダー部分の色やロゴの位置を変更したい場合は、
「THORカスタマイズ」画面の『共通エリア設定[THE]』をクリックします。

『共通エリア設定[THE]』をクリック

『共通エリア設定[THE]』をクリック

ヘッダーエリア設定』をクリックすると、ヘッダー部分のカスタマイズができます。

『ヘッダーエリア設定』をクリック

『ヘッダーエリア設定』をクリック

カスタマイズ画面の右側には、常にプレビュー画面が表示されています。

プレビュー画面

プレビュー画面

カスタマイズするとすぐにプレビュー画面に反映されるので、1つ1つ確認しながら進めていくことができます。

プレビュー画面

プレビュー画面

設定の変更やカスタマイズが完了したら、必ず一番上の『公開』ボタンをクリックしましょう。

『公開』ボタンをクリック

『公開』ボタンをクリック

まとめ

今回は、THE THOR(ザ・トール)でサイトロゴを設定する方法を解説しました。

THE THORでは、サイトロゴの高さ調整やサイトロゴ周りのカスタマイズが簡単にできるので、より良いデザインを目指して、納得いくまでカスタマイズしてみましょう。

スポンサーリンク

スポンサーリンク

おすすめの記事