賢威7 WordPress クール版

賢威7 WordPress クール版のテンプレートをカスタマイズする際に役立つ情報を紹介します。

クール版のテンプレートは、グローバルメニューや記事の見出しのカラーを変更するだけでもサイトの印象が大きく変わります。サイトのカラーをカスタマイズして個性を表現しましょう。

CSSの設定を上書きすることで、WordPressテーマのテンプレートを直接編集することなく「サイトカラー、見出し、リンクボタン」などのカラーを変更できます。カラーを変更するだけで個性がでるので、テンプレートのカラー変更をお勧めします。

CSSのサンプルコードを用意しています。下記のサンプルコードをコピー&ペーストして利用してください。


はじめに

基本方針

賢威7のテンプレートをカスタマイズする際は、テンプレート本体を可能な限り直接編集しないことをお勧めします。

「WPプラグイン」や「子テーマ」の機能を利用してCSSを上書きすることでテンプレートの見た目(外観)をカスタマイズします。テンプレート本体の直接編集は可能な限り避けます。

賢威7のテンプレートは定期的に機能追加やバグ修正のためのアップデートがあります。テンプレートファイルを直接編集してしまうと、賢威7のアップデートごとにテンプレートファイルを編集し直す必要がでます。それは運用面において効率が良くありません。可能な限りテンプレートファイルの直接編集は避けましょう。

基本方針
  1. テンプレート本体を可能な限り直接編集しない。
  2. 賢威7に標準で用意されているCSSを可能な限り活用する。
  3. WPテーマの外観はCSSを上書きして見た目をカスタマイズする。
  4. WPテーマのコンテンツエリアやサイドバーの横幅を変更しない。

CSSを上書きする方法

WordPressテーマのCSSやPHPファイルの設定を上書きする方法は2通りあります。

賢威7では「子テーマ」の利用が推奨されていますが、WPプラグインを利用する方法もあるので紹介します。

下記のどちらの方法を利用しても問題ありません。あなたに最適な方法を選んで利用してください。

1. 子テーマを利用する

賢威7 WordPress版には「子テーマ」の専用テンプレートが用意されています。
「子テーマ」の機能を利用する場合は、公式サイトにある専用テンプレートを利用してください。

「子テーマ」のファイルは「賢威サポートページ」からダウンロードできます。
使い方などの詳細情報は「賢威サポートページ」をご覧ください。

子テーマを利用する利点
  1. テーマのための関数(functions.php)をカスタマイズできる。
  2. スタイルシート(CSS)をカスタマイズできる。
  3. テンプレートファイルを個別にカスタマイズできる。
ダウンロードページ

賢威サポートページ > 賢威7のダウンロード > 賢威7WordPress版子テーマのダウンロード

2. WPプラグインを利用する

WordPressプラグインの「Simple Custom CSS」を利用してCSSの設定を上書きしてデザインをカスタマイズする方法を紹介します。

WPプラグインを利用するので、テンプレートファイルを直接編集する必要がありません。この方法はCSSさえわかれば、初心者でも簡単に利用できるのが利点です。

もし、テーマのための関数(functions.php)も一緒にカスタマイズしたい場合は、WordPressプラグインの「Code Snippets」の利用をお勧めします。

WPプラグインを利用する利点
  1. テンプレートファイルを直接編集する必要がない。初心者でも簡単に扱える。
  2. WPプラグインを停止すればデザインや設定が初期状態に戻る。
  3. WPテーマをアップデートしても設定データが失われることがない。
参考記事

クール版について

シンプル&クール

クール版はシンプル尚且つクールなデザインのテンプレートです。サイト訪問者に対して、クールで先進的な好印象を与える効果が期待できます。

IT技術系のノウハウや商材を紹介するアフィリエイトサイトを運用するのに最適です。

標準のカラー

賢威7 WordPress クール版のテンプレートには、標準で6種類のカラーが用意されています。

テンプレートのサイトカラーをカスタマイズしたい場合は、カスタマイズしたいカラーに近い色のテンプレートを選んで、そのテンプレートをベースにしてカスタマイズしましょう。そうすることで、テンプレートに含まれる画像ファイルを作り直す手間が省けて効率的です。

クール版の標準カラー

クール版の標準カラー

標準のカラーコード
標準カラー カラーコード
  BLACK(黒色) #222222
  RED(赤色) #800000
  OLIVE(オリーブ色) #72640c
  GREEN(緑色) #006a6c
  NAVY(紺色) #181944
  GRAY(灰色) #485859

サイトカラーの変更

CSSの設定を上書きすることでテンプレートのサイトカラーを変更できます。

サンプルコードのカラー

この記事のサンプルコードは「クール版 NAVY」のテンプレートをベースにして、サイトカラーを「紺色(#001e43)、濃い青色(#003f8e)」で記述しています。カラーコードを入れ替えれば、あなた好みのカラーに変更できます。

あなたのWebサイトで実際に利用する場合は、カラーコードを変更して利用してください。

紺色
ミッドナイトブルー #001e43
濃い青色
インクブルー #003f8e

色見本

あなたのWebサイトのサイトカラーを選ぶ際は、下記の記事が参考になります。
世界の伝統色(洋色)からサイトカラーを探すと良い感じのカラーが見つかります。

参考記事(外部サイト)

世界の伝統色の色見本
ビビッドカラーの色見本
パステルカラーの色見本

サイトカラー

ヘッダー・フッター・グローバルメニューなどのカラーを変更できます。

サンプルコードはサイトカラーを「紺色(#001e43)、濃い青色(#003f8e)」で記述しています。カラーはあくまでも見本です。カラーは自分で変更してください。

サイトカラー
/* フッターカラー */
.site-footer { background: #003f8e; }
.copyright { background: #001e43; }

/* 全体の背景色 */
body { background: #edf3fb; }

/* カスタムメニュー */
.global-nav-in li a{ color: #001e43; }
.global-nav-in li a:hover,
.global-nav-in li a:active,
.global-nav-in li a:focus{ background: #001e43; }
.global-nav li ul li a{ background: #003f8e; }
.global-nav { border-bottom: #001e43 solid 3px; }

/* ウィジェット */
.sub-conts .section-wrap .section-in .section-title{ border-bottom: 3px solid #001e43; }

見出し

記事の見出しのカラーをあなた好みに変更できます。

見出しのカラーを変更する
見出し
.section-wrap .section-title{ border-top: 3px solid #001e43; }
.main-body h2{ background: #003f8e; }
.main-body h3{ border-bottom: 3px solid #003f8e; background:#c6d0dc; }
.main-body h4{ 
  	margin: 55px 0 25px;
	font-weight: bold;
	font-size: 1.25em;
	position: relative;
	padding: .1em 0 .2em .75em;
	border-left: 6px solid #003f8e; }
.main-body h4:before { 
	position: absolute;
	left: -6px;
	bottom: 0;
	content: '';
	width: 6px;
	height: 50%;
	background: #c6d0dc;
}

トップページのリンクボタン

メイン画像の自由記述欄にリンクボタンを配置する

トップページのメインビジュアル(メイン画像の自由記述欄)にリンクボタンを配置した例です。同じようなことをやりたい人は、サンプルコードを参考にしてみてください。

リンクボタン
賢威の設定
賢威の設定 > トップページ

メイン画像をウインドウ(ブラウザ)幅で表示 > 有効にする
メイン画像の表示タイプ > 背景画像として表示する

メイン画像の自由記述欄
<div class="al-c m20-t">
<ul class="inline">
<li><a href="#" class="btn btn-blue"><span>ブルー</span></a></li>
<li><a href="#" class="btn btn-green"><span>グリーン</span></a></li>
<li><a href="#" class="btn btn-orange"><span>オレンジ</span></a></li>
<li><a href="#" class="btn btn-red"><span>レッド</span></a></li>
</ul>
</div>

ヘッダーのロゴ画像

ヘッダーに配置されているロゴ画像の余白を調整することができます。

ロゴ画像に大きな画像を登録する場合は、ロゴ画像の上下の余白の調整が必要になる場合があります。必要に応じて余白を調整しましょう。

ロゴ画像
/* 余白ゼロ */
.site-header-conts { padding:0; }

/* 上側の余白ゼロ */
.site-header-conts { padding-top:0; }

/* 下側の余白ゼロ */
.site-header-conts { padding-bottom:0; }

テーブル

テーブルヘッダのカラーを調整できます。

比較用テーブル
比較用テーブル
変更点
  • テーブルヘッダのカラーを変更する。
  • 比較用テーブルのカラーを変更する。
thead th { background: #003f8e; }
.table-comparison th.highlight,
.table-comparison th.highlight span { background: #f60; }
<table class="table-comparison">
<thead>
<tr>
<th class="w25"></th>
<th class="w25">商品A</th>
<th class="w25 highlight"><span class="f12em">当社商品</span></th>
<th class="w25">商品B</th>
</tr>
</thead>
<tfoot>
<tr>
<th>フッター項目名</th>
<td>項目内容</td>
<td>項目内容</td>
<td>項目内容</td>
</tr>
</tfoot>
<tbody>
<tr>
<th>項目名1</th>
<td>項目内容</td>
<td>項目内容</td>
<td>項目内容</td>
</tr>
<tr>
<th>項目名2</th>
<td>項目内容</td>
<td>項目内容</td>
<td>項目内容</td>
</tr>
<tr>
<th>項目名3</th>
<td>項目内容</td>
<td>項目内容</td>
<td>項目内容</td>
</tr>
</tbody>
</table>

投稿のコメント欄

投稿の記事の下にあるコメント欄を微調整できます。

コメント欄の微調整

コメント欄の微調整になりますが、コメント欄の入力欄の配置が左右均等ではないので、中央寄せに調整することもできます。

form#commentform p { text-align: center; }

コメント欄の要素を非表示にする

投稿の記事の下にあるコメント欄にある入力欄「メールアドレス、ウェブサイト」を非表示にすることもできます。

入力欄を非表示にする場合は、WP管理画面のディスカッションにある「コメントの投稿者の名前とメールアドレスの入力を必須にする」のチェックを外して設定を保存しておきましょう

WP管理画面

設定 > ディスカッション > コメントの投稿者の名前とメールアドレスの入力を必須にする

.comment-form-mail { display: none; }
.comment-form-url { display: none; }

コメント欄の送信ボタン

コメント欄にある送信ボタンの配色を変更することもできます。

.btn-form01{ border:3px solid #003f8e; }
.btn-form01:hover,
.btn-form01:active,
.btn-form01:focus{ border:3px solid #003f8e; background:#003f8e; }

ウィジェット

PV数ランキングのウィジェット

PV数ランキングのウィジェットには、6種類の表示形式が用意されています。

標準では文字サイズが大きめに設定されています。文字サイズを小さく調整したい場合は、下記のサンプルコードを参考にしてCSSを調整してください。

PV数ランキング
  1. 王冠アイコンのリスト
  2. メダルアイコンのリスト
  3. シンプルなリスト
  4. 画像+ランキング番号のリスト
  5. 画像+テキストのリスト
  6. 背景画像+テキストのリスト
「画像+ランキング番号のリスト」をCSSで調整した例
ランキング

ランキングの説明文を非表示にする

ランキングに表示される記事の説明文(抜粋)を非表示にしたい場合は、CSSの設定で非表示にしましょう。ランキングの表示エリアの縦幅を小さくする効果があります。

.sub-conts .rank-desc { display: none; }

PV数の文字サイズを小さくする

ランキングに表示されるPV数の文字サイズを小さくしたい場合は、CSSで文字サイズを調整できます。

.sub-conts .num-pv { font-size: 0.6em; }

ランキングの文字サイズを小さくする

記事タイトルが長い場合は、ランキングに表示される記事タイトルの文字サイズを小さめに調整しましょう。そうすることで、記事タイトルが読みやすくなります。

ちなみに、背景に画像が表示されるタイプのランキングは、文字サイズを調整する必要性は薄いです。

王冠アイコンのリスト

「王冠アイコンのリスト」の文字サイズを変更できます。

.sub-conts .ranking-list01 > li .rank-title { font-size: 1.1em; }
メダルアイコンのリスト

「メダルアイコンのリスト」の文字サイズを変更できます。

.sub-conts .ranking-list02 > li .rank-title { font-size: 1.1em; }
シンプルなリスト
画像+ランキング番号のリスト

文字サイズを変更できます。「シンプルなリスト」と「画像+ランキング番号のリスト」は同じCSSを利用しているのでCSSコードが同じになります。

.sub-conts .ranking-list03 > li .rank-title { font-size: 1em; }

まとめ

賢威7 WordPress クール版のテンプレートは、CSSの設定を上書きすることで、WordPressテーマのテンプレートを直接編集することなく「サイトカラー、見出し、リンクボタン」などのカラーを変更できます。

テンプレートのカラーを変更するとWebサイトの印象が大きく変わります。あなたのWebサイトで実際に利用する場合は、カラーコードを変更して利用してください。

カラーコードは変更してください

この記事のサンプルコードは、サイトカラーを「紺色(#001e43)、濃い青色(#003f8e)」で記述しています。カラーコードは変更して利用してください。カラーコードを入れ替えれば、あなた好みのカラーに変更できます。

以上