【THE THOR】ロゴをカスタマイズ!ヘッダーエリアを自分好みに

ヘッダーに表示されているロゴ画像。自分好みにカスタマイズしちゃいましょう!

この記事ではTHE THOR(ザ・トール)ロゴ画像の変更方法とカスタマイズについてを紹介します。

 

 
sora
このサイトはテキストで表示させています。

本記事の内容

  1. THE THOR(ザ・トール)ロゴ画像の設定
  2. THE THOR(ザ・トール)ロゴ画像を文字に
  3. THE THOR(ザ・トール)のロゴの表示設定

 

ロゴ画像を準備していない方は下の記事を参考に作成してみてください。

>>>初心者でも簡単!魅力的なアイキャッチ画像が作成できるサイト紹介♪

 

そらのまなびぶろぐのロゴは「adobe Express」で作成しました。
THE THORのロゴ画像の最大の高さは70pxなので、210×70PXで作成してあります

 

ロゴ画像にwebpファイルは使用できません。
 
 

THE THOR(ザ・トール)ロゴ画像の設定場所

 

刷毛マークの「外観」→「カスタマイズ」をクリックしてください。

 

THE THOR(ザ・トール)をカスタマイズしよう

 

 

「基本設定」をクリック → 「サイトロゴの設定」をクリックします

 

 

THE THOR(ザ・トール)の基本設定の「サイトロゴの設定」を紹介

 

 

「ロゴ画像の設定」にある「サイトのロゴ画像を登録」にTHE THOR(ザ・トール)のテーマに元から設定してあったロゴ画像が登録されています。

「画像を変更」ボタンをクリックしてください。

THE THOR(ザ・トール)ロゴ画像を変更

 

「画像を変更」をクリックするとメディアが表示されますので、変更したい画像を選択してください。

THE THOR(ザ・トール)ロゴの表示サイズを変更

 

THE THORではロゴ画像の大きさも「ヘッダー表示時のロゴの高さ設定」で変更することができます。

スマホの高さは20px〜40px、PCの高さは30〜70pxから選択することができます。

THE THOR(ザ・トール)私のサイトロゴ画像の表示設定

 

・スマホ表示時のロゴの高さをカスタマイズ

「スマホ表示時のロゴの高さを選択」は40pxに設定してあります。

 

・PC表示時のロゴの高さをカスタマイズ

「PC表示時のロゴの高さを選択』は70pxに設定してあります。

 

 
sora
私はどちらも最大に設定してあります。

THE THOR(ザ・トール)ロゴ画像は使わない!文字表示

 

ロゴ画像・・・作成するのに時間がかかるので、とりあえずは文字でいく!という方。

 

 

「削除」をクリックしてください。

「外観」→「カスタマイズ」→「サイト基本情報」の順にクリックしてください。

サイトのタイトルに「ブログのタイトル」を記入して「公開」をクリックしてください。

 

ロゴの文字色を変更

 

「外観」→「共通エリア設定[THE]」→「ヘッダーエリア設定」の順にクリックしてください。

 

■ヘッダーのテキストカラーを選択

 

白文字、黒文字の2色から選択します。

 

 
sora
それ以外の色を使用したい場合はCSSを使って変更します。

 

THE THOR(ザ・トール)ロゴの表示場所

 

 

 

THE THORのロゴは中央が左側から選択します。

「外観」→「共通エリア設定[THE]」→「ヘッダーエリア設定」の順にクリックしてください。

 

ロゴ画像を中央に表示

 

 

 

■ヘッダーのレイアウトを選択で「ダイナミック」を選択してください。

 

ロゴ画像を左側に表示

 

■ヘッダーのレイアウトを選択で「シンプル」を選択してください。

 

【THE THOR】ヘッダーエリアに色をつけいたい

 

ヘッダーエリア設定の「■ヘッダーの背景色を指定」で背景の色を指定します。

【THE THOR】ヘッダーを固定したい

 

ヘッダーエリア設定の「■ヘッダーを固定表示するか選択」で「固定表示をする」を選択。

 

 
sora
スクロールしてもヘッダーは動きません。

 

 

【THE THOR】サイトロゴのサイズを設定♪ヘッダーエリアをカスタマイズ♪ まとめ

 

今回は、ヘッダーエリアのロゴの設定でできるカスタマイズについて解説しました。

ロゴの配置やサイズ、ヘッダー全体のデザインを調整することで、サイトの印象は大きく変わります。

この記事が、あなたのサイト作りのお役に立てれば嬉しいです。