賢威7 WordPress スタンダード版のテンプレートをカスタマイズする際に役立つ情報を紹介します。
スタンダード版のテンプレートは、グローバルメニューや記事の見出しのカラーを変更するだけでもサイトの印象が大きく変わります。サイトのカラーをカスタマイズして個性を表現しましょう。
CSSの設定を上書きすることで、WordPressテーマのテンプレートを直接編集することなく「サイトカラー、見出し、リンクボタン」などのカラーを変更できます。カラーを変更するだけで個性がでるので、テンプレートのカラー変更をお勧めします。
CSSのサンプルコードを用意しています。下記のサンプルコードをコピー＆ペーストして利用してください。
目次
はじめに
基本方針
賢威7のテンプレートをカスタマイズする際は、テンプレート本体を可能な限り直接編集しないことをお勧めします。
「WPプラグイン」や「子テーマ」の機能を利用してCSSを上書きすることでテンプレートの見た目（外観）をカスタマイズします。テンプレート本体の直接編集は可能な限り避けます。
賢威7のテンプレートは定期的に機能追加やバグ修正のためのアップデートがあります。テンプレートファイルを直接編集してしまうと、賢威7のアップデートごとにテンプレートファイルを編集し直す必要がでます。それは運用面において効率が良くありません。可能な限りテンプレートファイルの直接編集は避けましょう。
基本方針
- テンプレート本体を可能な限り直接編集しない。
- 賢威7に標準で用意されているCSSを可能な限り活用する。
- WPテーマの外観はCSSを上書きして見た目をカスタマイズする。
- WPテーマのコンテンツエリアやサイドバーの横幅を変更しない。
CSSを上書きする方法
WordPressテーマのCSSやPHPファイルの設定を上書きする方法は2通りあります。
賢威7では「子テーマ」の利用が推奨されていますが、WPプラグインを利用する方法もあるので紹介します。
下記のどちらの方法を利用しても問題ありません。あなたに最適な方法を選んで利用してください。
1. 子テーマを利用する
賢威7 WordPress版には「子テーマ」の専用テンプレートが用意されています。
「子テーマ」の機能を利用する場合は、公式サイトにある専用テンプレートを利用してください。
「子テーマ」のファイルは「賢威サポートページ」からダウンロードできます。
使い方などの詳細情報は「賢威サポートページ」をご覧ください。
子テーマを利用する利点
- テーマのための関数（functions.php）をカスタマイズできる。
- スタイルシート（CSS）をカスタマイズできる。
- テンプレートファイルを個別にカスタマイズできる。
ダウンロードページ
賢威サポートページ ＞ 賢威7のダウンロード ＞ 賢威7WordPress版子テーマのダウンロード
2. WPプラグインを利用する
WordPressプラグインの「Simple Custom CSS」を利用してCSSの設定を上書きしてデザインをカスタマイズする方法を紹介します。
WPプラグインを利用するので、テンプレートファイルを直接編集する必要がありません。この方法はCSSさえわかれば、初心者でも簡単に利用できるのが利点です。
もし、テーマのための関数（functions.php）も一緒にカスタマイズしたい場合は、WordPressプラグインの「Code Snippets」の利用をお勧めします。
WPプラグインを利用する利点
- テンプレートファイルを直接編集する必要がない。初心者でも簡単に扱える。
- WPプラグインを停止すればデザインや設定が初期状態に戻る。
- WPテーマをアップデートしても設定データが失われることがない。
参考記事
- Simple Custom CSS – テーマを直接編集せずにCSSをカスタマイズできるWPプラグイン
- Code Snippets – functions.phpのPHPコードを管理できるWPプラグイン
スタンダード版について
汎用的なテンプレート
スタンダード版のテンプレートは「標準的」なデザインのテンプレートです。どのテンプレートを利用するか迷っている場合は、このテンプレートをまず利用してみましょう。
デザインがシンプルで汎用的に利用できるのが特徴です。様々な業種のアフィリエイトサイトに利用できます。
標準のカラー
賢威7 WordPress スタンダード版のテンプレートには、標準で6種類のカラーが用意されています。
テンプレートのサイトカラーをカスタマイズしたい場合は、カスタマイズしたいカラーに近い色のテンプレートを選んで、そのテンプレートをベースにしてカスタマイズしましょう。そうすることで、テンプレートに含まれる画像ファイルを作り直す手間が省けて効率的です。
スタンダード版の標準カラー
標準のカラーコード
| 標準カラー | カラーコード | |
|---|---|---|
| Gray（灰色） | #909090 | |
| Black（黒色） | #111111 | |
| Blue（青色） | #4687bd | |
| Green（緑色） | #3eb883 | |
| Orange（橙色） | #e78435 | |
| Red（赤色） | #bd4646 |
サイトカラーの変更
CSSの設定を上書きすることでテンプレートのサイトカラーを変更できます。
サンプルコードのカラー
この記事のサンプルコードはサイトカラーを「青色（#0075c2）、濃い青色（#003f8e）」で記述しています。カラーコードを入れ替えれば、あなた好みのカラーに変更できます。
あなたのWebサイトで実際に利用する場合は、カラーコードを変更して利用してください。
| 青色 |
スペクトラムブルー #0075c2
|
|---|---|
| 濃い青色 |
インクブルー #003f8e
|
色見本
あなたのWebサイトのサイトカラーを選ぶ際は、下記の記事が参考になります。
世界の伝統色（洋色）からサイトカラーを探すと良い感じのカラーが見つかります。
参考記事（外部サイト）
世界の伝統色の色見本
ビビッドカラーの色見本
パステルカラーの色見本
サイトカラー
ヘッダー・フッター・グローバルメニューなどのカラーを変更できます。
サンプルコードはサイトカラーを「青色（#0075c2）、濃い青色（#003f8e）」で記述しています。カラーはあくまでも見本です。カラーは自分で変更してください。
/* サイトカラー */
.site-footer,
.btn-search { background: #0075c2; }
.copyright { background: #003f8e; }
/* グローバルメニュー */
.global-nav li ul li a { padding: 0.6em 0.4em; }
.global-nav,
.global-nav-in li a { background: #1da1f2; }
.global-nav-in ul { border-left: 1px solid #fff; }
.global-nav-in li { border-right: 1px solid #fff; }
.global-nav-in li a:hover,
.global-nav-in li a:active,
.global-nav-in li a:focus { background: #eee; }
見出し
記事の見出しのカラーをあなた好みに変更できます。
見出しのカラーを変更する
.main-body h1,
.main-body h2 { background: #0075c2; }
.main-body h3 { border-bottom: 1px solid #0075c2; }
.main-body h4 { border-bottom: 1px dashed #0075c2; }
.main-body h5 { border-left: 6px solid #0075c2; }
トップページのリンクボタン
メイン画像の自由記述欄にリンクボタンを配置する
トップページのメインビジュアル（メイン画像の自由記述欄）にリンクボタンを配置すると、少しリンクボタンが大きすぎる気がするので、小さいサイズのリンクボタンも用意します。
同じようなことをやりたい人は、サンプルコードを参考にしてみてください。
小さいリンクボタン
変更点
- 小さいサイズのリンクボタンのCSSを追加して適用する。
賢威の設定
賢威の設定 ＞ トップページ
メイン画像をウインドウ（ブラウザ）幅で表示 ＞ 有効にする
メイン画像の表示タイプ ＞ 背景画像として表示する
メイン画像の自由記述欄
<div class="al-c m20-t"> <ul class="inline"> <li><a href="#" class="btn btn-blue btn-mini"><span>ブルー</span></a></li> <li><a href="#" class="btn btn-green btn-mini"><span>グリーン</span></a></li> <li><a href="#" class="btn btn-orange btn-mini"><span>オレンジ</span></a></li> <li><a href="#" class="btn btn-red btn-mini"><span>レッド</span></a></li> </ul> </div>
.btn-mini { padding: 10px 20px; margin: 0 10px 0 0; font-size: 1em; }
トップページのメイン画像
メイン画像をタグとして表示する場合
トップページのメインビジュアル（メイン画像）を「タグとして表示する」を選択した場合は、メインビジュアルの表示エリアの背景色を変更することもできます。
メイン画像を背景色と馴染むように作る場合は、背景色を調整しましょう。
下記の背景色は見本なのでカラーを変更して利用してください。
賢威の設定
賢威の設定 ＞ トップページ
メイン画像をウインドウ（ブラウザ）幅で表示 ＞ チェックを外す
メイン画像の表示タイプ ＞ タグとして表示する
.main-image { background: #eee; }
ヘッダーのロゴ画像
ヘッダーに配置されているロゴ画像の余白を調整することができます。
ロゴ画像に大きな画像を登録する場合は、ロゴ画像の上下の余白の調整が必要になる場合があります。必要に応じて余白を調整しましょう。
/* 余白ゼロ */
.site-header-conts { padding:0; }
/* 上側の余白ゼロ */
.site-header-conts { padding-top:0; }
/* 下側の余白ゼロ */
.site-header-conts { padding-bottom:0; }
テーブル
テーブルヘッダのカラーを調整できます。
比較用テーブル
変更点
- テーブルヘッダのカラーを変更する。
- 比較用テーブルのカラーを変更する。
thead th { background: #0075c2; }
.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>
ランキング
ランキング用の見出しのカラーを調整できます。
変更点
- ランキングのタイトル下の線のカラーを変更します。
- ランキングのマージンや文字サイズを調整します。
.ranking-list03 li .rank-title { border-bottom: 1px solid #0075c2; }
.main-body .rank-title { margin-bottom: 10px; font-size: 1.25em; }
記述リスト
記述リスト（DL,DT,DD）にサイトカラーが指定されている部分があるので、カラーを上書きします。記述リストを利用しない場合は、設定を省略しても問題ありません。
変更点
記述リストの背景色を変更します。
.dl-style01 dd { border-bottom: 1px dotted #909090; }
.dl-style02 dt { background: #909090; }
投稿のコメント欄
投稿の記事の下にあるコメント欄を微調整できます。
コメント欄の微調整
コメント欄の微調整になりますが、コメント欄の入力欄の配置が左右均等ではないので、中央寄せに調整することもできます。それに加え、送信ボタンを少し小さく調整しました。
微調整レベルなので、変更したい方のみ利用してください。
変更点
- 送信ボタンを少し小さくする。
- 送信ボタンのカラーを変更。
- コメント欄を中央寄せに変更。
.btn-form01 { padding: 15px 30px; background: #0075c2; }
form#commentform p { text-align: center; }
コメント欄の要素を非表示にする
投稿の記事の下にあるコメント欄にある入力欄「メールアドレス、ウェブサイト」を非表示にすることもできます。
入力欄を非表示にする場合は、WP管理画面のディスカッションにある「コメントの投稿者の名前とメールアドレスの入力を必須にする」のチェックを外して設定を保存しておきましょう。
WP管理画面
設定 ＞ ディスカッション ＞ コメントの投稿者の名前とメールアドレスの入力を必須にする
.comment-form-mail { display: none; }
.comment-form-url { display: none; }
ウィジェット
PV数ランキングのウィジェット
PV数ランキングのウィジェットには、6種類の表示形式が用意されています。
標準では文字サイズが大きめに設定されています。文字サイズを小さく調整したい場合は、下記のサンプルコードを参考にしてCSSを調整してください。
PV数ランキング
- 王冠アイコンのリスト
- メダルアイコンのリスト
- シンプルなリスト
- 画像＋ランキング番号のリスト
- 画像＋テキストのリスト
- 背景画像＋テキストのリスト
「画像＋ランキング番号のリスト」を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; }
検索のウィジェット
サイドバーに配置する検索の入力フィールドが左右均等ではないので、中央寄せに調整してみました。微調整レベルなので、変更したい方のみ利用してください。
.sub-conts .search-box { text-align: center; }
まとめ
賢威7 WordPress スタンダード版のテンプレートは、CSSの設定を上書きすることで、WordPressテーマのテンプレートを直接編集することなく「サイトカラー、見出し、リンクボタン」などのカラーを変更できます。
テンプレートのカラーを変更するとWebサイトの印象が大きく変わります。あなたのWebサイトで実際に利用する場合は、カラーコードを変更して利用してください。
カラーコードは変更してください
この記事のサンプルコードは、サイトカラーを「青色（#0075c2）、濃い青色（#003f8e）」で記述しています。カラーコードは変更して利用してください。カラーコードを入れ替えれば、あなた好みのカラーに変更できます。
以上
