賢威7 WPビューティ版

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

ビューティ版のテンプレートは、デザインに背景画像が多用されています。サイトカラーを変更する場合は、画像ファイルの編集が必要になります。カスタマイズに手間がかかるので、大幅なカスタマイズはお勧めしません。

女性をターゲットにしたアフィリエイトサイトを構築する場合は、標準で用意されている6種類のカラーだけでも問題なく運用できます。標準のテンプレートを活用して、コンテンツ作成に集中しましょう。

テンプレートをカスタマイズする場合は、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テーマをアップデートしても設定データが失われることがない。
参考記事

ビューティ版について

女性をターゲットにしたサイトに最適

ビューティ版のテンプレートは「美容、健康促進、ファッション」など、女性にターゲットを絞ったアフィリエイトサイトを構築するのに最適です。

美容
  • エステ
  • 脱毛
  • 化粧品
  • 美容器具
健康促進
  • 健康食品
  • 健康器具
  • 腰痛改善・骨盤矯正
  • ダイエット
  • サプリメント
ファッション
  • 衣類
  • アクセサリー
  • ブランド品

標準のカラー

賢威7 WordPress ビューティ版のテンプレートには「美容、健康促進、ファッション」などのアフィリエイトサイトを構築するのに最適な6種類のカラーが用意されています。

このテンプレートに関しては、無理にサイトカラーをカスタマイズする必要はありません。標準で用意されたカラーだけでも問題なく運用できます。

ビューティ版の標準カラー

ビューティ版

標準のカラーコード
標準カラー カラーコード
  GOLD(金色) #87692d
  AQUA(水色) #57a0c3
  WINE(濃い赤色) #73261e
  GREEN(濃い緑色) #353d01
  PINK(濃い肌色) #9b524b
  WHITE(白色) #909090

サイトカラーの変更について

「ビューティ版」と「プリティ版」のテンプレートに関しては、テンプレートのデザインに「背景画像」が含まれています。その為、サイトカラーを変更する場合は、画像ファイルの作成や編集が必須です。

ネタワン編集部の見解としては、「ビューティ版」と「プリティ版」のサイトカラーを変更したい場合は、変更が必要になる画像ファイルが多くなるので、サイトカラーの変更は勧めしません。

「美容、健康促進、ファッション」などのアフィリエイトサイトを構築するのに最適な6種類のカラーが用意されています。それを活用しましょう。

トップページのレイアウト例

トップページのメイン画像のレイアウトは必要に応じて変更することができます。

メイン画像をタグとして表示する

メイン画像を「タグとして表示する」場合は、メイン画像の部分に大きい画像を表示できます。

Webサイトの内容を視覚的に表現するメインビジュアルを作成して登録します。登録した画像の縦横比率は横幅を基準として、縦横比率が維持されて表示されます。

賢威7 WPビューティ版
賢威の設定
賢威の設定 > トップページ

メイン画像をウインドウ(ブラウザ)幅で表示 > チェックを外す
メイン画像の表示タイプ > タグとして表示する

推奨画像サイズ

1,200 x 300 px(縦幅が短い)
1,200 x 500 px(縦幅が長い)

メイン画像を背景でウィンドウ幅として表示する

メイン画像を「背景画像として表示する」と「ウィンドウ幅で表示」に設定した場合は、テキストやHTMLコードを背景画像の上に重ねて表示することができます。

賢威7 WPビューティ版
賢威の設定
賢威の設定 > トップページ
  • メイン画像をウインドウ(ブラウザ)幅で表示 > 有効にする
  • メイン画像の表示タイプ > 背景画像として表示する

合わせて、下記内容にも必要な情報を設定します。

  • メイン画像のキャッチコピー
  • メイン画像のサブキャッチコピー
  • メイン画像の自由記述欄
推奨画像サイズ

1,200 x 300 px

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

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

トップページの「メイン画像の自由記述欄」にリンクボタンを配置すると、少しリンクボタンが大きすぎる気がするので、小さいサイズのリンクボタンも用意します。

もし、同じようなことをやりたい人は、サンプルコードを参考にしてみてください。

賢威7 WPビューティ版
小さいリンクボタン
ボタン
賢威の設定
賢威の設定 > トップページ

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

メイン画像の自由記述欄
<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; }

ヘッダーのロゴ画像

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

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

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

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

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

投稿のコメント欄

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

コメント欄の微調整

コメント欄の微調整になりますが、コメント欄の入力欄の配置が左右均等ではないので、中央寄せに調整することもできます。微調整レベルなので、変更したい方のみ利用してください。

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

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

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

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

WP管理画面

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

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

ウィジェット

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; }

検索のウィジェット

サイドバーに配置する検索の入力フィールドが左右均等ではないので、中央寄せに調整してみました。微調整レベルなので、変更したい方のみ利用してください。

.sub-conts .search-box { text-align: center; }

まとめ

賢威7 WordPress ビューティ版は、女性向けのアフィリエイトサイトを構築するのに最適です。美容、健康促進、ファッションなどのコンテンツを作成する場合に活用しましょう。

注意点としては、ビューティ版のテンプレートは、デザインに背景画像が多用されています。サイトカラーを変更する場合は、画像ファイルの編集が必要になります。カスタマイズに手間がかかるので、大幅なカスタマイズはお勧めしません。

標準で用意されている6種類のカラーだけでも問題なく運用できます。標準のテンプレートを活用して、コンテンツの制作に集中しましょう。

以上