こんにちは、ユウトです。
今回は、賢威でヘッダー画像を中央に配置する方法について、備忘録としてまとめておきます。
【変更前】
【変更後】
ワードプレス管理画面から外観、テーマの編集と移動し、design.cssを開きます。
すると、以下のようなコードが記述されているはずです。
【変更前】
/*——————————————————–
ヘッダー
——————————————————–*/#header{
background-color: #fff;
font-size: 1.2em;}
#header-in{ padding: 0.2em 0; }
/*●ヘッダーロゴ（メインタイトル）*/
#header #header-title{
float: left;
width: 59.5%; /*ロゴ（メインタイトル）下の<h1>の1行の幅はこちらのwidthの値を変更*/
}#header .header-logo{
margin-bottom: 0.2em;
font-size: 3em;
}
まずは、青文字部分を削除します。
※削除する前に、シートのバックアップをとっておきましょう。
続いて、#header{内に画像を中央に配置する以下のコードを追加で記述していきます。
text-align: center;
【変更後】
/*——————————————————–
ヘッダー
——————————————————–*/#header{
background-color: #fff;
font-size: 1.2em;text-align: center;
}#header-in{ padding: 0.2em 0; }
#header .header-logo{
margin-bottom: 0.2em;
font-size: 3em;
}
【変更前】のコードを【変更後】のように修正することで、ヘッダー画像を中央に配置することができます。
シートを変更したら、トップページを開き、ヘッダー画像が中央配置されたことを確認してください。
