THE THOR(ザ・トール)でサイトロゴとメインビジュアルを設定しよう

サイトロゴ、メインビジュアルの作成から設置まで、試行錯誤して3時間以上かかりました。

微調整が本当に大変…

同じ思いをして欲しくないので、とりあえず形になるよ!という設定を紹介します。



サイトロゴとメインビジュアルを設定する前後を比較

まずはサイトロゴとメインビジュアルを設定するとどうなるか比較しましょう。

 

設定前のTOPページです。

かなり味気ない感じ。

 

やっぱりおしゃれだなーと思うブログは開いた瞬間に

「おっ!すごい!」

って思うんだよな~

 

ちょっとはキャッチーなTOPページにしたいと思って設定。

 

設定後のTOPページがこんな感じ。

ちょっとおしゃれになったかな?

美術センスが2のよしじゅんはこれが限界w

 

設定前よりはマシになっていると思うのでオーケーとしましょう。

 

サイトロゴ、メインビジュアルはCanvaというサイトを使って作成しました。

https://www.canva.com/

 

このサイトを使うとかなり簡単に作成することができます。

よしじゅんは作成に3時間もかかってしまいましたが…

 

みなさんが時間をかけないようにおすすめの設定を紹介していきますね。

 

【購入特典付】THE THOR(ザ・トール)│公式HPはこちら

 

サイトロゴの設定方法

 

サイトロゴを作成する

 

よしじゅんが作成したサイトロゴはこちら。

サイトロゴを作成する際に注意する点がいくつかあります。

 

サイトロゴの大きさ

大きなサイズでロゴを作っても、ザ・トールのカスタマイズで設定した際に勝手にリサイズされます。

 

最初からリサイズされないサイズ

横220px×縦50px

で作成しましょう。

 

大きく作っても問題ないのですが、その分ファイルサイズが大きくなってしまします。

 

サイトロゴの背景

サイトロゴの背景にも気を付ける必要があります。

 

文字だけの切り抜きで設定するということはできません。

四角の画像としてサイトロゴが設置されます。

 

ヘッダーの色に合わせて作らないと、そこだけ浮いてしまいます。

 

よしじゅんのように文字のフォントと色だけ変更したい人は注意してください。

 

 

サイトロゴを設置する

 

出来上がったサイトロゴを設置しましょう。

 

カスタマイズ画面から基本設定を選択。

 

サイトロゴの設定を選択。

 

ロゴ画像の設定から作成したロゴを選びます。

ロゴの高さ設定を変更できます。

ここはお好みで調整してください。

 

よしじゅんは

・スマホの高さ  30px

・パソコンの高さ 50px

で設定しています。

 

これでサイトロゴが設定できました。

 

 

【購入特典付】THE THOR(ザ・トール)│公式HPはこちら

 

メインビジュアルの設定方法

メインビジュアルの作成する

よしじゅんが作成したメインビジュアルはこちら。

こちらも注意点があります。

 

メインビジュアルの大きさ

メインビジュアルの大きさは結構融通がききます。

 

サイトを開いたときに一面に画像を表示することもできます。

 

よしじゅんは下に記事が表示されるようにしたかったので、

横1600px×縦400px

で作成しました。

 

メインビジュアルの背景

メインビジュアルの背景も文字だけにしたい場合は背景の色と同化するように注意しないといけません。

 

メインビジュアルを写真や画像から作る場合は気にする必要はありません。

 

メインビジュアルを設置する

 

メインビジュアルを作成したら設置しましょう。

 

表示される部分は赤丸で囲っている場所。

 

 

カスタマイズ画面からTOPページ設定を選択。

 

メインビジュアル設定を選択。

 

メインビジュアルを表示にします。

 

下にスクロールして、作った画像を選択します。

 

これで設定完了です。

レイアウトが崩れる場合は

表示サイズ(縦)を設定 で微調整してください。

 

THE THOR(ザ・トール)│公式HPはこちら

おしゃれなロゴ、メインビジュアルをココナラで外注しよう!

「おしゃれなロゴ、メインビジュアルで作るのって難しいよね…」

と悩んでいる人は、いっそ外注してみたらどうでしょうか?

「ココナラ」ではおしゃれなロゴ、メインビジュアルを作る人がたくさんいます。



 

ロゴの作成であれば1000円くらいからお願いすることがでます。

よしじゅん
この吹き出しの画像もココナラで作ってもらいました!

ロゴ以外でも活用できるので、無料会員登録しておくと便利です。

無料登録はこちら

会員登録しておくと定期的に割引クーポンも届きます。

 

よしじゅんがロゴ、メインビジュアルを外注しないのは3時間も頑張ったという意地があるだけです(笑)

そろそろ意地を張らずに外注しようと検討しています。

 

ココナラでデザインを依頼してみる

よしじゅん 喜び
よしじゅん
今なら新規会員登録で300円割引クーポン配布中です!

 

 

まとめ

サイトロゴとメインビジュアルの設定方法を紹介しました。

 

家の玄関がきれいになる感じと似ていて、とっても気持ちいい!

まだ設定していない人は是非設定してください。

 

【購入特典付】THE THOR(ザ・トール)│公式HPはこちら

 

【合わせて読みたい】

【有料WordPressテーマへ】LION BLOGからTHE THORに変えるべき理由

【画像大量】THE THOR(ザ・トール)のデザイン着せ替え機能を全部試した結果と感想

(TOPページ編)【THE THOR(ザ・トール)】デザイン着せ替え機能の後にすぐやること

(投稿ページ編)【THE THOR(ザ・トール)】デザイン着せ替え機能の後にすぐやること

データの見える化!THE THOR(ザ・トール)でSEO対策、記事分析を簡単にやろう!

【SNSでシェアされやすい!】THE THOR(ザ・トール)でTwitterカード(OGP)を設定しよう

【PV数1.25倍】THE THOR(ザ・トール)でまとめ記事をピックアップ3記事に設定しよう

 

 

ブログ運営、WordPressテーマに興味をもった人に読んでほしい記事まとめ

最短で結果を出すなら、Wordpressテーマ「THE THOR」

どうせブログを運営するなら、最短で結果を出したいですよね?

よしじゅんは「THE THOR(ザ・トール)」を使って最短で結果を出すことができました。

the thor 画像

 

・SEOに強く、ページ表示速度も国内最高水準

・プロのデザイナーが設計した「美しく・バランスの取れたサイト」がワンクリックで完成

・便利な機能が豊富で、プラグインを追加する必要がない

・プログラミングの知識(CSS)が全く不要

・「無料・無期限・無制限」のアフターフォローもあり、バージョンアップや機能追加、機能改善もすべて無料

一流の開発スタッフ陣が集まって作られた、おすすめの次世代テーマです。

よしじゅん 喜び
よしじゅん
ブログのPV数が右肩上がりになっていくのは本当に嬉しいです!

ブログ初心者には必ずチェックして欲しいWordpressテーマです。

 

THE THOR(ザ・トール)紹介記事はこちら

THE THOR(ザ・トール)公式HPはこちら

Twitterで繋がりませんか?