賢威7.0

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

keni7-cool-site-title-text-align-thumbnail

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

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

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

なので今回は、

  1. サイトタイトルを左寄せ
  2. サイトタイトルを右寄せ
  3. スマホ・タブレットサイズのみ中央寄せする方法

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

カスタマイズ前

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

keni-cool-site-title-text-align-before

カスタマイズ後

カスタマイズ 1

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

keni-cool-site-title-text-align-after-1
カスタマイズ 2

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

keni-cool-site-title-text-align-after-2
カスタマイズ 3

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

keni-cool-site-title-text-align-after-3

[ad]

カスタマイズ1. サイトタイトルを左寄せ

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

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

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

↓ コード編集後

keni-cool-site-title-text-align-after-1

カスタマイズ2. サイトタイトルを右寄せ

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

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

↓ コード編集後

keni-cool-site-title-text-align-after-2

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

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

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

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

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

keni-cool-site-title-text-align-after-3

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

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

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