賢威のヘッダー画像を中央に配置する方法を解説【備忘録】

こんにちは、ユウトです。

今回は、賢威でヘッダー画像を中央に配置する方法について、備忘録としてまとめておきます。

【変更前】

【変更後】

ワードプレス管理画面から外観、テーマの編集と移動し、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;
}