【THE THOR】サイト ロゴをCSSで大きくするカスタマイズ

みなさんこんにちは。

THE THORユーザーの Jonyと Ai (@10to1_travel)です。

THE THORを使い始めてからずっと感じていたことがあります。

それは。。。

 
Jony
トップのサイトタイトルがちょっと小さすぎないか!?
 
 
Ai
サイトロゴを設置するにしても小さいよね笑

そこで本日はそのサイト タイトルを大きく表示させようと思います。
需要が少ないニッチな内容ですいません。笑

でもサイト タイトルってサイトの名前で、ユーザーさんがページを訪れた時、一番 初めに見るところなので重要だと思うんです!

完成図は以下の通り。

the thor サイトタイトルを大きく

私たちは THE THORのカスタマイズが大好きです。

THE THOR(ザ・トール)を本格的にカスタマイズしたい方は、HTML・CSSの勉強にオススメの本8冊|ブログをもっとカスタマイズ!をご覧ください。

THE THOR サイト ロゴを大きくする準備

最初に THE THORのヘッダー設定について少し準備します。

THE THORのヘッダー部分の設定は優秀で、シンプル(default)とダイナミックの 2種類で表示できます。

特にどちらでも構いませんが、大きくした時にシンプル(default)だと 2列になってしまうので、ダイナミックをオススメします。

ヘッダー部分の表示設定

外観 → カスタマイズ → 共通エリア設定[THE] → ヘッダーエリア設定

と進んで、シンプル(default)かダイナミックか選びます。

※こちらでタイトルの文字カラーも変えれますが黒か白の 2つしか選べません。
当記事ではこの文字カラーを変更する CSSも紹介します。

THE THOR サイト ロゴを大きくするカスタマイズ

それではTHE THORのサイト タイトルを大きくします。

以下のコードを THE THORの「追加 CSS」にコピペしてください。

/*サイトタイトル PC*/
@media only screen and (min-width: 768px){
 .siteTitle__link{
font-size:70px;
}
}

以上で完了です。

追加 CSSが分からない場合は以下の記事を参考ください。

関連記事

みなさんこんにちは。 THE THORのデザインをもっと細かくカスタマイズしたい時に、ネットで調べたら【コピペだけ!】ってタイトルありますよね。 でも コピペってどこに?追加 CSSって何?どうやって[…]

font-size:70px;の数字を変えると大きさが変わります。
好みのサイズに調節してください。

モバイルのサイト ロゴも変更する場合

モバイルのサイズも変更したい場合は、こちら。

/*サイトタイトル PC*/
@media only screen and (min-width: 768px){
 .siteTitle__link{
font-size:70px;
}
}
/*サイトタイトル モバイル*/
@media only screen and (max-width: 480px){
.siteTitle__link{
font-size:30px;
}
}

PCの時と同様、font-size:30px;の数値を変えて使用してください。

サイト ロゴのカラーを変更する場合

THE THORのサイト タイトルのカラーも変更することができます。

その際、先ほどのヘッダーの設定の【ヘッダーのテキストカラーを選択】を黒文字(default)に設定しておいてください。

/*サイトタイトル PC*/
@media only screen and (min-width: 768px){
 .siteTitle__link{
font-size:70px;
color: #ffcc66;
}
}

上記の color: #ffcc66;の部分がカラーコードになります。

希望のカラーに変更してください。

原色大辞典

色の名前とカラーコードが一目でわかるWEB色見本…

THE THORのおすすめ カスタマイズ一覧

私たちはカスタマイズが大好きで、THE THORの色んなパーツを日々いじって研究してます。

そんな私たちのカスタマイズ案です。

みなさんこんにちは。 サイトデザインをカスタマイズしてると遊び心が出ち […]

みなさんこんにちは。 ONE PIECEのボスキャラ“フワ […]

みなさんこんにちは。 本日は THE THORのウィジェットのランキン […]

テーマの名前 THE THOR (ザ・トール) 評判 [4.5点] 初 […]

みなさんこんにちは。 THE THORにはスターリストと言う機能があり […]

THE THOR サイト ロゴをCSSで大きくするカスタマイズ まとめ

これでサイト タイトルが大きくなりましたね♪

CSSを追加しても変化がない場合はキャッシュを消去してみてください。

※カスタマイズは自己責任でお願いします。

 
最後まで読んでいただいてありがとうございます!

おわり

関連記事

テーマの名前 THE THOR (ザ・トール) 評判 [star-list number=4.5] [4.5点] 初心者 [star-list number=5][5点] デザイン [star-list nu[…]