賢威6.1ヘッダー画像を中央に設置する設定方法

賢威6.0

kenicustom

賢威6.1は、デフォルト仕様ではヘッダー画像が左寄りに設定されています。
このヘッダー画像を中央に配置する設定方法を解説します。

まずは、賢威6.0ヘルシー版での解説となります。
(記事後半でクール版の解説も行います。)

賢威6.0ヘッダー画像中央に1
↑上記のようにデフォルトではヘッダー画像は左寄りに設定されています。
このヘッダー画像を中央に寄せる設定をします。

賢威6.0 ヘッダー画像を中央に設置する設定方法 ヘルシー版

賢威のヘッダー画像配置場所を変更していくにはdesign.cssを変更していきます。

ダッシュボードより、「テーマの編集」→「design.css」と移動します。

「design.css」の「ヘッダー」部分記述を変更することにより、
ヘッダー画像を中央に設置できます。

以下の記述(中央設置指定記述)を下記指定の位置に追加記述し、

text-align: center;

以下記述を削除しています。

/*●ヘッダーロゴ(メインタイトル)*/
#header #header-title{
float: left;
width: 59.5%; /*ロゴ(メインタイトル)下の<h1>の1行の幅はこちらのwidthの値を変更*/
}

以下、具体的な変更箇所例です。

【変更前】
/*——————————————————–
ヘッダー
——————————————————–*/

#header{
background: url(./images/common/bg-header.jpg) center top repeat-x #fff;
font-size: 1.2em;
}

#header-in{ padding: 4em 0 1em; }

/*●ヘッダーロゴ(メインタイトル)*/
#header #header-title{
float: left;
width: 59.5%; /*ロゴ(メインタイトル)下の<h1>の1行の幅はこちらのwidthの値を変更*/
}

#header .header-logo{
margin-bottom: 0.2em;
font-size: 2.25em;
font-weight: bold;
}

【変更後】
/*——————————————————–
ヘッダー
——————————————————–*/

#header{
background: url(./images/common/bg-header.jpg) center top repeat-x #fff;
font-size: 1.2em;
text-align: center;
}

#header-in{ padding: 0 ; }

#header .header-logo{
margin-bottom: 0.2em;
font-size: 2.25em;
font-weight: bold;

}

上記の記述に変更します。

賢威6.0ヘッダー画像中央に2
記述を変更すると、上記のように中央にヘッダー画像が配置されました。

賢威6.0 ヘッダー画像を中央に設置する設定方法 クール版

今度は、賢威6.0クール版でのヘッダー画像を中央に設置する設定方法を解説します。

賢威6.0ヘッダー画像中央に3
↑まず、ヘッダー画像をデフォルト設定で設置した状態です。

今回は、同時にヘッダー背景色を白色にしてみます。

ダッシュボードより、「テーマの編集」→「design.css」と移動します。
「design.css」の「ヘッダー」部分記述を変更することにより設定します。

以下の記述を変更します。

【変更前】

#header{
border-bottom: 1px solid #000;
color: #ffff;
font-size: 1.2em;
}

【変更後】

#header{
border-bottom: 1px solid #000;
color: #000;
font-size: 1.2em;
background-color: #fff;
text-align: center;
}

以下記述を削除しています。

/*●ヘッダーロゴ(メインタイトル)*/
#header #header-title{
float: left;
width: 59.5%; /*ロゴ(メインタイトル)下の<h1>の1行の幅はこちらのwidthの値を変更*/
}

賢威6.0ヘッダー画像中央に4
上記記述を変更し、ヘッダー画像は中央に配置でき、
ヘッダー背景が白色になりました。

賢威のカスタムは自由度が高し

HTML記述やCSSを理解していれば賢威テンプレートはカスタムの自由度が高いです。

上記のようにヘッダー画像の位置から背景色変更の簡単なことから、
各コンテンツ部分も自由に変更していくことができるので、
是非HTML記述スキルが向上してきたらチャレンジしてみましょう。

今回のカスタム設定は賢威6.0での例でしたが、賢威6.1でも実用できます。
基本的な記述は同じなので、バックアップを取りながら気軽に変更してみましょう。

賢威6.1導入からカスタム設定方法まとめに戻る

コメント