賢威7クール版のサイトタイトルを左寄せ/右寄せする方法

こんにちは、ぶどうサワーです。
サイトの閲覧ありがとうございます。

先日公開された賢威7のクール版ですが、他のテーマとは違い、サイトタイトルが中央寄せになっています。

薄いグレーの背景も良いと思いますし、サイトタイトルもこれはこれでカッコ良いですよね。
でも中には中央寄せではなく左寄せ/右寄せにしたい、またはスマホサイズのみ表示を変えたい、と思っている人もいるかと思います。

なので今回は、

の3つのカスタマイズをご紹介します。

カスタマイズ前

↓ 最初の状態では中央配置

↓ サイトタイトルを左寄せ

↓ サイトタイトルを右寄せ

↓ スマホ・タブレットサイズのみ中央寄せ

[ad]

まずはサイトタイトルを左寄せする方法です。

親テーマ（賢威7本体）の base.css や子テーマの style.css など、お使いのCSSファイルに以下のコードを追加します。

.site-title {
    text-align: left;
}

↓　コード編集後

サイトタイトルを右寄せする方法についても、左寄せとほとんど同じです。
お使いのCSSファイルに以下のコードを追加します。

.site-title {
    text-align: right;
}

↓　コード編集後

最後は「PCサイズではサイトタイトルを左（右）寄せ、スマホ・タブレットサイズでは中央寄せ」にする方法です。

メディアクエリを使えば良いので、下のCSSコードを追加すると、、、

@media only screen and (min-width : 737px){
    .site-title {
        text-align: left;
    }
}

サイトタイトルがPCサイズでは左寄せ、
スマホ・タブレットサイズでは中央寄せになります。

個人的には
「スマホ・タブレットサイズのみ中央寄せ」と書いたほうが分かりやすいと思いましたけど、
「PCサイズのみサイトタイトルを左寄せ」と書いたほうが直接的かもしれませんね。

コピペしない場合には、上のコードが max-width ではなく min-width となっていることに注意して下さい。

今回のカスタマイズは以上です。
最後まで閲覧ありがとうございました。