賢威7 見出し

賢威が7.0にバージョンアップされましたね。
2015年12月現在は、先行公開版ということで「スタンダード版」「コーポレート版」「プリティ版」が利用できるようになっています。

賢威7はデザインも時代性に合わせた非常に洗練されたテーマになっている他、HTML5に対応しCSS3も採用されたことや、見出し構造が見直されたことにより、内部構造も大きな刷新を遂げましたので、ぜひ積極的に利用していきたいですね。

十分に美しいテーマではありますが、やはり他サイトと差別化していくためには、デザインカスタマイズは必要ですね。
テーマファイルの構造も変更がありましたので、以前のバージョンでのカスタマイズに慣れていた方は戸惑われることもあるかと思います。

今回は、賢威7の見出しの文字色や背景色などのデザインの変更方法について解説します。

 

 

賢威7のデフォルトデザイン(スタンダード版)

今回は、賢威7のスタンダード版を例にとってご説明したいと思います。
賢威7スタンダード版の各見出しのデフォルトデザインはこのようになっていますね。

賢威7 見出し

非常にスッキリとして見やすい見出しですね。
見出しは非常に目につくところなので、少しの変更でもグッとイメージを変えることができます。

この見出しのCSSを変更するには、下記のテーマファイルを編集します。

ダッシュボードメニュー>外観>テーマの編集>base.css

以前のバージョンでは、「design.css」にあたるファイルですね。

今回は、見出し2と見出し3を例にとって、文字色や文字サイズ、背景色、線の形状を変更してみたいと思います。

 

 

見出し2(H2タグ)のデザイン変更方法

見出し2は、1115行目~1121行目あたりの

.main-body h2

のプロパティを変更します。

 

文字色

.main-body h2{
 margin: 60px 0 30px;
 padding: 10px 18px;
 background: #909090;
 color: #fff;
 font-size: 1.75em;
}

文字色を変更するには、

color: #fff;

のカラーコードを変更します。

カラーコードとは、#(シャープ)で始まるコードのことですね。
カラーの探し方はこちらのカラーコード一覧表も参考にしてみてください。

 

文字サイズ

.main-body h2{
 margin: 60px 0 30px;
 padding: 10px 18px;
 background: #909090;
 color: #fff;
 font-size: 1.75em;
}

文字サイズは、

font-size: 1.75em;

の数字を変更します。

 

背景色

.main-body h2{
 margin: 60px 0 30px;
 padding: 10px 18px;
 background: #909090;
 color: #fff;
 font-size: 1.75em;
}

見出しの背景色は、

background: #909090;

のカラーコードを変更します。

 

変更例

見出し2を以下のように変更してみます。

背景色: #00ced1 darkturquoise
文字色: #2f4f4f darkslategray

変更箇所はこのとおり。

.main-body h2{
 margin: 60px 0 30px;
 padding: 10px 18px;
 background: #00ced1;
 color: #2f4f4f;
 font-size: 1.75em;
}

すると、このように文字色と背景色が変更されました。

賢威7 見出し

 

 

見出し3(H3タグ)のデザイン変更方法

見出し3は、

.main-body h3

のプロパティを変更します。

.main-body h3{
 margin: 60px 0 30px;
 padding: 0 0 10px;
 border-bottom: 1px solid #909090;
 font-weight: bold;
 font-size: 1.5em;
}

1123行目~1129行目にある、.main-body h3が見出し3の該当部分になります。

 

文字色

見出し3の文字色を変更するには、.main-body h3のプロパティに下記のコードを加えます。

color: #ffffff;

カラーコードはお好きなものに変更してください。

 

文字サイズ

文字サイズを変更するには、

font-size: 1.5em;

の数字を変更します。

.main-body h3{
 margin: 60px 0 30px;
 padding: 0 0 10px;
 border-bottom: 1px solid #909090;
 font-weight: bold;
 font-size: 1.5em;
}

 

背景色

背景色を設定するには、文字色の変更と同様に、.main-body h3のプロパティに以下のコードを付け加えます。

background: #909090;

こちらもカラーコードは適宜変更してください。

 

アンダーラインの線種・太さ・色

見出し3のアンダーラインの線種・太さ・色を変更するには、下記の部分を変更します。

border-bottom: 1px solid #909090;
.main-body h3{
 margin: 60px 0 30px;
 padding: 0 0 10px;
 border-bottom: 1px solid #909090;
 font-weight: bold;
 font-size: 1.5em;
}

線の太さ → 【1px】 の数字を変更
線の色 → 【#909090】 のカラーコードを変更
線種 → 【solid】 を変更

■■ 線種の設定

  • 実線 → solid
  • 点線 → dotted
  • 破線 → dashed

 

変更例

見出し3の文字色と背景色を次のように変更してみましょう。

背景色: ##c9c9c4 pearl gray
文字色: #00a1e9 cyan

変更箇所はこのとおり。

.main-body h3{
 margin: 60px 0 30px;
 padding: 0 0 10px;
 border-bottom: 1px solid #909090;
 font-weight: bold;
 background: #c9c9c4;
 color: #00a1e9;
 font-size: 1.5em;
}

すると、このように文字色と背景色が変更されます。

賢威7 見出し

 

 

見出し4(H4タグ) 見出し5(H5タグ) 見出し6(H6タグ)の変更箇所

見出し4、見出し5、見出し6の変更箇所は下記のとおりです。

 

見出し4(H4タグ) 1131行目~1137行目

.main-body h4

見出し5(H5タグ) 1139行目~1145行目

.main-body h5

見出し6(H6タグ) 1147行目~1151行目

.main-body h6

文字色、文字サイズ、背景色、線種の変更などは、見出し2、見出し3の例と同様に変更してください。
最後に、「ファイルを更新」をクリックして完了です。

テーマファイル変更時は必ずバックアップを取るようにしてくださいね!