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

WordPressの有料テーマ　THE THOR（ザ・トール）のデモサイトからスタイルを選んでダウンロードをした後。

開いたらデモサイトのロゴ画像が表示されています(￣▽￣;)。

私はでかっと驚きました(笑)

THE THOR（ザ・トール）で使うサイトロゴ画像を準備しよう

THE THOR（ザ・トール）で記事を書く前に、ブログの名刺ともいえるロゴ画像を作成しましょう！

もし自分のブログのロゴ画像をまだ作成していない&ロゴ画像の作り方がわからない方は、下の記事を参考にしていただけたらと思います。

>>>【初心者専用】ブログで使いたいオリジナルのロゴ画像を作る説明

自分でロゴ画像作るの無理っと思ったらサイトの力を借りましょう(^^♪

私が使っているサイトは「CANVA」です。

もちろん無料です♪

会員登録は必要になりますが、必要になるのは、名前とメールアドレス位です。

アイキャッチも簡単に作れちゃうので、おすすめです。

＞＞＞CANVA公式ホームページ

THE THOR（ザ・トール）のサイトロゴ画像を変更しよう

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

THE THOR（ザ・トール）サイトロゴの設定

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

「サイトロゴの設定画面」になります。

THE THOR（ザ・トール）サイトロゴ画像を変更

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

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

THE THOR（ザ・トール）自作サイトロゴ画像を選択

画像を選択　の「メディアライブラリ」が表示されていると思います。

もしサイトロゴ画像をまだ「メディア」に登録していないときは、

「ファイルをアップロード」タブをクリックして下さい

次にPCの画面下にファイルのアイコンがありましたらクリックしてください。

自分が保存した場所にあるサイトロゴ画像ファイルをクリックしたまま、画面に移動させてください。

移動すると「メディアライブラリ」の画面になります。

先ほど移動した画像にはすでにチェックが入っています。

下へスクロールさせ画面右下にあるサイズを選択したら「画像を選択」ボタンをクリックします。

「画像を選択」ボタンをクリックした後は上に表示されている「公開」をクリックして下さい。

THE THOR（ザ・トール）サイトロゴ画像の表示サイズをカスタマイズ

これでブログに自作のロゴ画像が表示されるようになりました。

でも表示されたロゴが小さい気がしませんか？

又は反対に大きい気がしませんか？

そんな時は上の画像にある「ヘッダー表示時のロゴの高さを設定」で変更できます。

例として私の設定をのせておきます

THE THOR（ザ・トール）私のサイトロゴ画像のサイズ

昔使用していたロゴ画像になります。
350×52　で作成してあります。
字だけのロゴ画像にしたので、細長いです。

現在は、ロゴは画像ではなく文字をCSSで装飾して使用しています(￣▽￣;)

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

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

「スマホ表示時のロゴの高さを選択」　　25ｐｘ　→　40ｐｘ

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

「PC表示時のロゴの高さを選択」　　50ｐｘ　→　70ｐｘ

プレビューを見ながら自分好みの高さに設定してください。

THE THOR（ザ・トール）デモサイトのサイトロゴ入り画像をカスタマイズ

私のブログを見てもらえばわかるように、メインビジュアルの画像も表示されています。

その説明もここでしておこうと思います。

スタイルをインストールしたままだと、表示されている写真にはデモサイトのロゴが入っています。

変更するか、表示しないようにしないと困りますものね(;^_^A

さあ、やってみよう！

THE THOR（ザ・トール）サイトロゴ入り画像を準備

ロゴ画像と同じように、トップページに表示させる画像を作成しておいてくださいね。

作り方が分からないときはここに説明していますので参考にしてください♪

THE THOR（ザ・トール）メインビジュアル設定

THE THOR（ザ・トール）で自作のロゴ入り画像のカスタマイズ設定をしよう 

①「外観」　→　「カスタマイズ」をクリック

②「TOPページ設定[THE]」をクリック　→　「メインビジュアル設定」をクリックしてください。

③「メインビジュアル設定」のページが表示されます。

ここが、私のブログのTOPページにでで～んとある画像の設定場所になります。

THE THOR（ザ・トール）メインビジュアルの表示させるか選択

■メインビジュアルを表示するか選択

表示になっていると思いますので、そのままで。

もし表示したくないならプルダウンをクリックして非表示を選択してください。

スマホには表示させたくないなぁという方は、その下の

□スマホは非表示にする　にチェックを入れて下さい。

THE THOR（ザ・トール）メインビジュアルの表示サイズをカスタマイズ

■表示サイズ[横]を選択

「ノーマルサイズ」　「ワイドサイズ」　「ビックサイズ」から選択できます。

選択してみてしっくりするのを選択してください。

私は「ノーマルサイズ」を選択してあります。

THE THOR（ザ・トール）メインビジュアルのスマホの表示サイズをカスタマイズ

■スマホ表示時の表示サイズ[縦]を指定

私はそのまま使っている時、

スマホの画面でみたら画像が見切れていていたので「110」に変更しました。

THE THOR（ザ・トール）メインビジュアルのPCの表示サイズをカスタマイズ

■PC表示時の表示サイズ[縦]を指定

私は初めの設定のままつかっていますので「450」です。

THE THOR（ザ・トール）メインビジュアルの表示モードをカスタマイズ

メインビジュアルの表示モードの設定

静止画にチェックが入っていると思いますのでそのままで。

THE THOR（ザ・トール）メインビジュアルの静止画をカスタマイズ

■メインビジュアルの表示モードを選択

・静止画(default)
・YouTube背景動画
・スライドショー

この３パターンから表示モードを選択します。
私は「静止画」を選択してあります。

THE THOR（ザ・トール）メインビジュアル画像の上に文字を表示

■タイトルを入力　(タグ利用可）

このタイトルの入力場所に文字を入れると、画像の上にまた大きな文字がどーんと表示されます。

■サブタイトルを入力　(タグ利用可）

ここのサブタイトルの入力場所に文字を入れると、タイトルの下に

画像の上にまた大きな文字がどーんと表示されます。

タグ利用可なので、次回コピペ文を追記しようと思います♪

ブログでロゴ画像を使う？

THE THORではヘッダーエリアのロゴ画像を、使用するかしないか。
THE THORではロゴ画像を使用しないを選択した場合、上記の画像のようにサイトのタイトルが文字で表示されます。

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

WordPressの有料テーマTHE THOR（ザ・トール）の09をインストールして着せ替え後、さあブログをはじめよう！

と思ったとき、自分のブログの名前でないブログ名のロゴ画像が表示されいてどうしようかと思いました。

その下の写真画像もHE THOR（ザ・トール）のデモサイトのロゴ写真です。

ため息が出ました(;^ω^)

ロゴ写真画像にはしっかりTHE THOR（ザ・トール）デモサイトの

ブログ名がはいっていたので、このままでは使えない～と頭を悩ませました。

という訳で同じような方の助けになればいいなぁと記事にしてみました。