賢威8を導入してから、少しづつ少しづつブログをカスタマイズしていってます。
楽しいですよね。
でもなかなか上手くいかなくて、頭を抱えることもしばしば。特にヘッダー部分がなかなかしっくりこなくて、何回も修正しています。
賢威8ではヘッダーのロゴ画像が左に表示されますが、今の画像だと左よりはしっくりこないので、中央に表示したかったんです。
でも、HTMLとかCSSとか、まだ全然よくわかってなくて編集するのが怖かったんですよね。
バックアップはとってあるものの、復元にもまだ自信ないですし…。でも、子テーマを使うことであまり恐れずにカスタマイズすることができました。
子テーマとは
親テーマとセットで使うことで、親テーマの基本スタイルを変えることなくカスタマイズできます。簡単なイメージしやすい物としたら、スマートフォンのカバーみたいな感じでしょうか。
本体が親テーマで、カバーが子テーマです。カバーをいろいろカスタマイズしても本体は同じですよね。親テーマをアップデートした場合も、子テーマでカスタマイズしたものは残ります。
全て上書きされて、カスタマイズをいちからやり直し…なんてことがないんです。子テーマでカスタマイズが上手くいかなくても、親テーマに影響しません。
なので、初心者で小心者の私でも挑戦できました。
参考にしてみて下さい。
子テーマでヘッダーのロゴ画像を中央に表示する方法
子テーマのダウンロードがまだでしたら、賢威サポートページから子テーマをダウンロードして有効化して下さい。
編集前のヘッダーはこちら。
ロゴ画像が左です。
外観→テーマの編集を開きます。
編集するテーマを子テーマにします。
base.cssをクリックします。
CSSのいちばん下に
.keni-header .site-title, .keni-header_col1 .site-title {
float: none;
max-width: 100%;
text-align: center;
}
と、追加します。
私は、他にも色の変更などのCSSを上の方に追加していますが、自分が追加したCSSしか載っていないのでわかりやすいです。
最後にファイルを更新ボタンをクリックします。
ヘッダーを確認すると、
ロゴ画像が中央に表示されました。
追加CSSでロゴ画像を中央にする方法
賢威8のダッシュボード、外観→カスタマイズ→追加CSSを開きます。
下の方にCSSを追加できるところがあるので、そこにCSSを追加します。CSS自体は子テーマの時と同じものです。
追加CSSを使った場合は、右側で変化がすぐに確認できます。最後に公開ボタンをクリックして完了です。
私は他のカスタマイズを子テーマでしていたので、自分がわかりやすいようにロゴ画像のカスタマイズも子テーマでやってみました。変化が確認しやすいので、簡単なカスタマイズなら追加CSSを使うのもよさそうですね。
