先日公開された賢威7のクール版ですが、他のテーマとは違い、サイトタイトルが中央寄せになっています。
薄いグレーの背景も良いと思いますし、サイトタイトルもこれはこれでカッコ良いですよね。
でも中には中央寄せではなく左寄せ/右寄せにしたい、またはスマホサイズのみ表示を変えたい、と思っている人もいるかと思います。
なので今回は、
- サイトタイトルを左寄せ
- サイトタイトルを右寄せ
- スマホ・タブレットサイズのみ中央寄せする方法
の3つのカスタマイズをご紹介します。
カスタマイズ前
↓ 最初の状態では中央配置
カスタマイズ後
カスタマイズ 1
↓ サイトタイトルを左寄せ
カスタマイズ 2
↓ サイトタイトルを右寄せ
カスタマイズ 3
↓ スマホ・タブレットサイズのみ中央寄せ
カスタマイズ1. サイトタイトルを左寄せ
まずはサイトタイトルを左寄せする方法です。
親テーマ(賢威7本体)の base.css や子テーマの style.css など、お使いのCSSファイルに以下のコードを追加します。
CSS
コピーする
.site-title {text-align: left;}
↓ コード編集後
カスタマイズ2. サイトタイトルを右寄せ
サイトタイトルを右寄せする方法についても、左寄せとほとんど同じです。
お使いのCSSファイルに以下のコードを追加します。
CSS
コピーする
.site-title {text-align: right;}
↓ コード編集後
カスタマイズ3. スマホ・タブレットサイズのみ中央寄せ
最後は「PCサイズではサイトタイトルを左(右)寄せ、スマホ・タブレットサイズでは中央寄せ」にする方法です。
メディアクエリを使えば良いので、下のCSSコードを追加すると、、、
CSS
コピーする
@media only screen and (min-width : 737px){.site-title {text-align: left;}}
サイトタイトルがPCサイズでは左寄せ、
スマホ・タブレットサイズでは中央寄せになります。
個人的には
「スマホ・タブレットサイズのみ中央寄せ」と書いたほうが分かりやすいと思いましたけど、
「PCサイズのみサイトタイトルを左寄せ」と書いたほうが直接的かもしれませんね。
コピペしない場合には、上のコードが max-width
ではなく min-width
となっていることに注意して下さい。
今回のカスタマイズは以上です。
最後まで閲覧ありがとうございました。