賢威6.1は、デフォルト仕様ではヘッダー画像が左寄りに設定されています。
このヘッダー画像を中央に配置する設定方法を解説します。
まずは、賢威6.0ヘルシー版での解説となります。
（記事後半でクール版の解説も行います。）
↑上記のようにデフォルトではヘッダー画像は左寄りに設定されています。
このヘッダー画像を中央に寄せる設定をします。
賢威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 ヘッダー画像を中央に設置する設定方法 クール版
今度は、賢威6.0クール版でのヘッダー画像を中央に設置する設定方法を解説します。
↑まず、ヘッダー画像をデフォルト設定で設置した状態です。
今回は、同時にヘッダー背景色を白色にしてみます。
ダッシュボードより、「テーマの編集」→「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の値を変更*/
}
上記記述を変更し、ヘッダー画像は中央に配置でき、
ヘッダー背景が白色になりました。
賢威のカスタムは自由度が高し
HTML記述やCSSを理解していれば賢威テンプレートはカスタムの自由度が高いです。
上記のようにヘッダー画像の位置から背景色変更の簡単なことから、
各コンテンツ部分も自由に変更していくことができるので、
是非HTML記述スキルが向上してきたらチャレンジしてみましょう。
今回のカスタム設定は賢威6.0での例でしたが、賢威6.1でも実用できます。
基本的な記述は同じなので、バックアップを取りながら気軽に変更してみましょう。
コメント