THE THOR(ザ・トール)にサイトロゴを設定する方法

サイトロゴを設定したからといって、特別に良いことがある訳ではないのですが、あった方がカッコいいので余裕があったら設定してみましょう。

サイトロゴとは?

THE THOR(ザ・トール)でのサイトロゴとは、このブログでいえばページのトップに表示されているこの部分ですね。

サイトロゴのデモ

ちなみにサイトロゴを設定しないとサイトタイトルが表示されます。

こんな感じ。

まあ、これでも問題ないのですが、やっぱりカッコ良く見せたいですよね。

ただ、あまり拘って良いものを作ろうとしても、最初の段階でそこに時間をかけるのはナンセンスなので、ある程度記事がたまってから考えても良いですよ。

なにせコンテンツが一番大事な部分なので。

ロゴ画像を用意しよう

まずはサイトロゴに使用する画像を用意しましょう。

サイトロゴに使用する画像は、あなたのブログサイトだと分かるようなデザインが良いでしょう。

私のサイトの場合は、THE THOR(ザ・トール)ロゴマークである金づちマークの横にサイト名を配置した単純なロゴ画像になっています。

ロゴマーク

単純でシンプルですが、私のサイトを的確に表しているロゴマークだと思います。

ちなみにこのロゴ画像は私のアフィリエイトの先生に作って頂きました。

ありがとうございます!

自身で作成する場合は、無料で作ることができるサイトがありますので、そちらで作成しても良いでしょう。

Googleなどで「ロゴ 作成 無料」と検索すればサイトを紹介しているブログが出てきますので、見てみてくださいね。

あと、ちょっと凝ったロゴをオリジナルで作成したい場合は、有料ですが下の「ココナラ」というサイトで制作してくれる人がいるので、頼んでみても良いでしょう。

500円から請け負ってくれるので、私もたまに利用してます。

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

画像サイズは大きくなり過ぎない。

サイトロゴに設定できるサイズには限りがあり、大きいサイズの画像を使用しても、自動的にリサイズされてしまいます。

PCの画面で測ってみたところ、横幅は最大1000pxくらいで表示されました。

縦幅は設定上50pxが最大になり、この縦幅が基準となってリサイズされるようです。

しかしPCでは問題ないですが、スマホで表示されるサイズがあり横幅に1000pxもの画像を使うと横にはみ出してしまいます。

ちなみに私のサイトロゴは「356 x 50ピクセル」で作っていますので、このサイズを参考にしてサイトロゴを作ってみてくださいね。

保存形式

サイトロゴが全面画像になっている場合はJPEG形式で問題ないですが、私のサイトの様に背景に空白がある場合は、画像ファイルの保存形式に気を付けなければいけません。

サイトロゴの背景色がサイトの背景色と同じなら良いのですが、違う場合はサイトロゴの背景を透過処理して「GIF」や「PNG」形式で画像ファイルを保存しましょう。

THE THOR(ザ・トール)ロゴ画像を設定

サイトロゴに使用するロゴ画像が用意できたら、さっそくあなたのブログサイトに設置しましょう。

ダッシュボード「外観」⇒「カスタマイズ」からカスタマイザーを開きます。

サイトロゴカスタマイザー基本設定

基本設定[THE]をクリックして「サイトロゴの設定」を開きます。

カスタマイザーサイトロゴの設定

「画像を選択」ボタンをクリックして、画像ファイルをアップロードして画像を選択すると設置完了です。

画像を選択する

ロゴのサイズを設定しよう

サイトロゴを設置したら、次はPCやスマホで表示させる高さを設定しましょう。

スマホ表示時のロゴ画像の高さは「20px(default)」「25px」「30px」の3種類。

PC表示時のロゴ画像の高さは「30px(default)」「40px」「50px」の3種類から選択します。

高さを設定

まとめ

まとめ

いかがでしたか?

今回はTHE THOR(ザ・トール)でサイトロゴを設置する方法を紹介しました。

最初にも言いましたが、サイトロゴは無くて困るようなものでもないので、記事を更新しながら気晴らし程度の気持ちで考えたら良いと思いますよ。

この記事があなたのお役に立てれば幸いです。

メルマガ登録バナー1

最新情報をチェックしよう!