【コピペだけ!】THE THORのロゴサイズをカスタマイズする方法!

ここあです。

 

私が今、使っているWordPressテーマ

THE THOR(ザ・トール)」も

かなり利用者が増えてきています。

 

なので、そろそろ本気でカスタマイズしたいですよね。

 

ということで、今回はサイトの顔ともいうべき

サイトのロゴサイズをカスタマイズする方法について

解説させていただきますので、

 

ロゴ画像の設定をしてるんだけど、

どうもサイズがしっくりこない」と不満を持っているあなたは、

ぜひ私の記事でストレスを解消してくださいね。

 

コピペと微調整で簡単にできますので^^

 

THE THORにおけるサイトロゴの設定方法

まずはTHE THORのサイトロゴを設定する

基本的な方法からご説明いたします。

 

そもそもサイトロゴを設定していなければ

サイズを調整する必要がありませんので(笑)

 

なので、もうすでに「設定してるよ〜」というあなたは

読み飛ばしてくださいね。

 

THE THORのサイトロゴを設定する時は、

ダッシュボードメニューから外観 → カスタマイズをクリックし

 

そこから、基本設定[THE]をクリック

THE THOR基本設定

 

さらに、サイトロゴの設定をクリックすると、

THE THOR基本設定

 

以下の部分でサイトロゴの設定ができます。

THE THORサイトロゴの設定

 

なので、サイトロゴの設定ができたら

そのすぐ下にある「ヘッダー表示時のロゴの高さ設定」で

ひとまずサイトロゴのサイズ調整をしてみてください。

 

あなたが設定するサイトロゴの画像サイズによっては

この調整だけで済むこともありますヨ。

 

ロゴサイズのカスタマイズはCSSで

続いて、上記の方法で、サイトロゴのサイズが

しっくりこなかった時の調整方法について解説します。

 

THE THORの基本設定で、サイトロゴのサイズが

うまく調整できなかった場合は

CSSを使ってロゴサイズを調整します。

 

なので、サイトロゴをCSSで調整する場合は

ダッシュボードメニューから、

外観 → カスタマイズ → 追加CSSをクリックし

 

この部分にCSSコードを記入するようにしてくださいね。

追加CSSのスペース

 

ロゴサイズをカスタマイズする前に

今回、私があなたにお伝えするサイトロゴのカスタマイズ方法は

基本的に、今、私のサイトでしているような

 

サイトロゴをヘッダー部分の中心にレイアウトする

ダイナミック」レイアウトをしているあなたにのみ推奨します。

 

なぜなら、サイトロゴのレイアウトが

シンプル(default)」になっていると

 

サイトロゴとグローバルメニューがこのように

THE THORヘッダーロゴ

 

重なって悲惨なことになるからです(笑)

 

ということで、今

「シンプル(default)レイアウト」にしているあなたは

 

必ずサイトロゴのレイアウトを

ダイナミック」に切り替えるようにしてくださいね。

 

サイトロゴをダイナミックレイアウトに切り替える場合は

ダッシュボードメニューから外観 → カスタマイズをクリックし

 

基本設定[THE]のすぐ下にある「共通エリア設定[THE]」をクリック

THE THOR共通エリア設定

 

さらにヘッダーエリア設定をクリックすると

THE THORヘッダーエリア設定

 

以下の画面でヘッダーのレイアウトが選択できます。

THE THORヘッダーエリア設定

 

THE THORのサイトロゴのサイズをカスタマイズする方法

それでは、ここからが本番です。

 

とは言っても、すぐに終わります(笑)

なぜなら、ただコピペするだけだから^^

 

サイトロゴを調整するCSSは以下のコードをコピーして

先ほど説明した「追加CSS」に貼り付けてください。

追加CSSにコピペ
@media only screen and (min-width: 896px){
.t-logoPc70 .siteTitle__logo {
height: 100px;
}
}

 

CSSコードをコピペしたら、あとは簡単。

height: 100px; ←あなたの好きな数字にどうぞ

この部分の数字を、あなたのお好みのサイズに変更するだけ!

 

ちなみに、私が紹介しているサイトロゴのサイズを変えるCSSは

iPad以上の画面サイズにのみ適用されるようにしてあります。

 

なので、スマホ用のサイズ、ipad用のサイズ、パソコン用のサイズ

それぞれ分けて個別に設定したい場合は、以下のように

 

●896px以上で表示(PC用)

@media screen and (min-width:896px) {
.t-logoPc70 .siteTitle__logo {
height: 100px;
}
}

※height: 100px; をあなたの好きな数字に

 

● 895px以下で表示(タブレット用)

@media only screen and (max-width:895px) {
.t-logoPc70 .siteTitle__logo {
height: 80px;
}
}

※height: 80px; をあなたの好きな数字に

 

● 480px以下で表示(スマホ用)

@media screen and (max-width:480px) {
.t-logoPc70 .siteTitle__logo {
height: 50px;
}
}

※height: 50px; をあなたの好きな数字に

 

これら3つのコードを追記して、それぞれサイトロゴのサイズを

あなたのロゴサイズの幅に応じて調整してみてください。

 

なお、ロゴサイズを調整する際には、あなたのパソコン画面で

Chromeなどのブラウザの表示画面の左右を縮めれば、

THE THORサイトロゴ

 

画面を見ながら、直接サイトロゴの調整ができます。

サイトロゴの設定方法と調整方法は以上です。

 

THE THORのロゴサイズをカスタマイズする方法まとめ

THE THORのロゴサイズをカスタマイズする方法まとめ

 

今回は、THE THORにおける

サイトロゴのロゴサイズをカスタマイズする方法について

解説させていただきました。

 

サイトロゴというのは、そもそも画面を切り換えても

必ず表示される、言わば「あなたの顔のようなもの」。

 

なので、あなたのサイト名をネットユーザーに

きちんと覚えてもらうためには

 

サイトロゴをきちんと見やすく、適正なサイズで

表示させておくことが大事です。

 

特にサイトロゴを作る場合には、ネットユーザーに

  • 覚えてもらいやすいサイトタイトル
  • どんな情報を発信しているのか、分かりやすいキャッチフレーズ

など

 

しっかりと表示させておくことで

初めてあなたのサイトを訪れたネットユーザーには

 

あなたのサイトがどんなサイトなのかが

非常に分かりやすくなります。

 

なので、サイトロゴに関しては

あなたが考える以上に重要な役目を果たしますので

本気でビジネスとしてオウンドメディアを運営するなら

 

「自分にはサイトロゴなんか作れない!」と思うのではなく

プロに頼んででも作りましょう。

 

その方が、あなたの信用に繋がりやすくなりますので。

 

ということで、最後までお読みいただき

ありがとうござました!

 

 

WordPressテーマ「THE THOR」
一流の開発陣によって集客と収益に徹底的にこだわり開発された究極のテーマ「ザ・トール」。どのテーマよりも早く実装された革新的機能が詰まったこのテーマで、あなたもインターネットを活用したビジネスを始めませんか?

>ネットで毎月30万円以上の自動収益を得ながら 「自分らしい人生」を送る方法を無料公開!

ネットで毎月30万円以上の自動収益を得ながら 「自分らしい人生」を送る方法を無料公開!

●自動化の仕組みで毎月30万円を稼ぐ仕組みの全貌マニュアル
●主婦やニートでもネットで毎月5〜10万円の不労所得を得る方法
●20年サラリーマンをしてきてなぜ今になって脱サラしたのか?
●安定を求めれば求めるほど不安定になる理由とは?
●いくら知識があっても、あなたが絶対に成功できない理由
など、無料メール講座本編では、決して表には出せない秘匿性の高い情報もたくさん提供していきます。※この無料メール講座は、私が有料セミナーで直接成功者たちから聞いた内容も多数含まれているため、予告なく募集を終了する可能性があります。

CTR IMG