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

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

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

【変更前】

ヘッダー 左寄せ

【変更後】

ヘッダー 中央 配置

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

【変更前】のコードを【変更後】のように修正することで、ヘッダー画像を中央に配置することができます。

シートを変更したら、トップページを開き、ヘッダー画像が中央配置されたことを確認してください。



コメントを残す

サブコンテンツ

このページの先頭へ