運営者：富田 賢威を利用している人の中には、トップページやブログ全体の見た目を大きく変えて他のワードプレスと差別化したい人もいます。
そこで今回は、賢威8をカスタマイズしたりヘッダー画像を加えてトップページやブログ全体のデザインや見た目を大きく変える方法を解説！
他とは違う賢威式ワードプレスブログの作り方を徹底解説！
賢威8はテーマをカスタマイズするな！
賢威8はこれまでのバージョンと違いデザインがすごいシンプルです。
なので、ブログ全体をテーマの中のHTMLやCSS、phpコードを編集してカスタマイズするよりも、もっと簡単にデザインの見た目を大きく変える方法があります。
ヘッダー画像のカスタマイズが大事！
それが、ヘッダー画像のカスタマイズです。
例えば、白髪染めをアフィリエイトする口コミブログを作成するとします。
その場合、上記のようなヘッダー画像を用意してロゴ画像として設定します。
さらに、ワードプレスの管理画面から「外観」「カスタマイズ」「追加CSS」と書かれた箇所をクリックして下記のタグを書き入れると、ヘッダー画像が幅いっぱいで表示されるようなるんです。
.keni-header .site-title,
.keni-header_col1 .site-title{
float: none;
max-width: 100%;
text-align: center;
}.keni-header_col1 .keni-header_cont{
max-width: 100%;
}.keni-header_col2 .keni-header_cont{
display: none;
}.site-description {
display: none;
}@media (min-width: 768px){
.col1 .keni-header_outer,
.col2 .keni-header_outer,
.col2r .keni-header_outer {
max-width:100%;
}
.keni-header .site-title, .keni-header_col1 .site-title {
max-width:100%;
}
.site-title {
padding:0;
}
}@media only screen and (min-width : 736px){
.keni-gnav_inner li {
position: relative;
top: -10px;
}
}引用元：賢威サポートフォーラムより
トップページのカスタマイズは？
記事投稿が増えてきたらトップページをカスタマイズすることも考えるべきです。
賢威8でのトップページのカスタマイズは、
- 固定ページにトップページを作成し
- 「一般」「表示設定」から
- 「ホームページの表示」で作成した固定ページを選択
すると、1番目に投稿した固定ページがトップページとして表示されるようなります。
ここまでは、簡単です。
大事なのは、トップページに何を含むべきか事前に決めて、賢威8の装飾タグでトップページをカスタマイズすることです。
トップページのカスタマイズで何を含めるべきかは、どんなブログを作るかによります。
例えば、複数の商品の口コミを書いてアフィリエイトするレビューブログを作成する場合、トップページには
- ブログの紹介や
- 人気ランキングや
- 最新記事の紹介
- カテゴリーの紹介
などを含めるのが、一般的にはおすすめです。
これらは賢威のサポートサイトにアップされている賢威マニュアルに書かれている装飾タグをコピペして利用することで簡単に作り上げることが可能です。
<ol class=”ranking-list comparative-list”><li class=”ranking-list_item ranking-list_item_hasimage”><div class=”rank_thumb”><img src=”./images/sample004.jpg” alt=”サンプル” width=”315″ height=”210″></div><div class=”item-data_outer”><h3 class=”rank_title title_no-style”>商品名が入ります（メーカー名）</h3><div class=”item-data”><dl><dt>価格：</dt><dd><span class=”red f12em”>2,000円</span><small>（税込）</small></dd></dl><dl><dt>容量：</dt><dd>100ml</dd></dl></div><table class=”review-table”><tr><th>価格</th><td><span class=”review_star star50″>5.0</span></td></tr><tr><th>使用感</th><td><span class=”review_star star35″>3.5</span></td></tr><tr><th>効果</th><td><span class=”review_star star40″>4.0</span></td></tr></table></div><div class=”rank_desc”><p>商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。</p><p>商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。</p></div><div class=”review_desc”><h4 class=”review_desc_title title_no-style”>管理人のレビュー</h4><p class=”m0-b”>管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。</p></div><p class=”btn-detail”><a class=”btn dir-arw_r btn_style02″ href=”#”><span class=”icon_arrow_s_right”></span> 商品詳細を見る</a></p></li><li class=”ranking-list_item ranking-list_item_hasimage”><div class=”rank_thumb”><img src=”./images/sample005.jpg” alt=”サンプル” width=”315″ height=”210″></div><div class=”item-data_outer”><h3 class=”rank_title title_no-style”>商品名が入ります（メーカー名）</h3><div class=”item-data”><dl><dt>価格：</dt><dd><span class=”red f12em”>2,000円</span><small>（税込）</small></dd></dl><dl><dt>容量：</dt><dd>100ml</dd></dl></div><table class=”review-table”><tr><th>価格</th><td><span class=”review_star star50″>5.0</span></td></tr><tr><th>使用感</th><td><span class=”review_star star35″>3.5</span></td></tr><tr><th>効果</th><td><span class=”review_star star40″>4.0</span></td></tr></table></div><div class=”rank_desc”><p>商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。</p><p>商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。</p></div><div class=”review_desc”><h5 class=”review_desc_title title_no-style”>管理人のレビュー</h5><p class=”m0-b”>管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。</p></div><p class=”btn-detail”><a class=”btn dir-arw_r btn_style02″ href=”#”><span class=”icon_arrow_s_right”></span> 商品詳細を見る</a></p></li><li class=”ranking-list_item ranking-list_item_hasimage”><div class=”rank_thumb”><img src=”./images/sample006.jpg” alt=”サンプル” width=”315″ height=”210″></div><div class=”item-data_outer”><h3 class=”rank_title title_no-style”>商品名が入ります（メーカー名）</h3><div class=”item-data”><dl><dt>価格：</dt><dd><span class=”red f12em”>2,000円</span><small>（税込）</small></dd></dl><dl><dt>容量：</dt><dd>100ml</dd></dl></div><table class=”review-table”><tr><th>価格</th><td><span class=”review_star star50″>5.0</span></td></tr><tr><th>使用感</th><td><span class=”review_star star35″>3.5</span></td></tr><tr><th>効果</th><td><span class=”review_star star40″>4.0</span></td></tr></table></div><div class=”rank_desc”><p>商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。</p><p>商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。</p></div><div class=”review_desc”><h5 class=”review_desc_title title_no-style”>管理人のレビュー</h5><p>管理人のレビューが入ります。管理人のレビューが入ります。</p><p class=”m0-b”>管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。</p></div><p class=”btn-detail”><a class=”btn dir-arw_r btn_style02″ href=”#”><span class=”icon_arrow_s_right”></span> 商品詳細を見る</a></p></li></ol><!–ranking-list–>引用元：賢威８マニュアルより
例えば、人気記事ランキングであれば、上記の賢威８のランキングタグを使えば下記のような商品レビューをした口コミ記事のランキングを作り上げることが可能です。
あとは、トップページをうまくカスタマイズできるかは、どれだけインパクトが大きい画像を作り上げるかも大きな鍵となります。
ただ単に、ランキングで人気商品の口コミ記事や、運営者おすすめ記事ランキングを表示したりするだけじゃ味気ないです。
しかし、下記のような画像をランキング前に表示させると「パッ」と見の印象を帰ることが可能です。
実際に私が作り上げたワードプレスやホームページは下記記事でも公開しています↓
ヘッダー画像の作り方
このような画像を作り上げるには、賢威だけでは無理です。
賢威8はあくまでもテンプレートであって、画像を作成できるツールではありませんし特にサンプル用のヘッダー画像が含まれているわけでもありません。
ですので、上記のようなオリジナル画像を作り上げるには別の画像編集ソフトが必要になります。
ちなみに、賢威の販売元のウェブライダー社は、上記のようなポップでデザイン性も高いヘッダー画像やセンター画像、その他、様々な画像を簡単に作り上げられるツール「バナープラス」も販売しています。
画像作成ツールは、フォトショップやイラストレーターなど様々な画像編集ソフトがありますが、初心者の方には操作方法が難しいです。
一方で、ウェブライダーが販売するバナープラスは、初心者でも簡単に作れる画像編集でアフィリエイトブログで使う際には1番おすすめの画像編集ソフトですよ！
詳しくは↓
バナープラスとは？
記事のカスタマイズは？
賢威8は、装飾タグをうまく利用する事で、ブログの記事のデザインをカスタマイズして差別化を図ることができます。
例えば、記事に
文字色や背景色をつけたり
- 文字色を緑色に変更することができます。
- 背景色をつけたりすることができます。
- 文字下に黄色の背景色をつけることができます。
テーブル機能で価格等を比較したり
| 項目名 | 項目名 | |
|---|---|---|
| 項目名が入ります | 項目内容 | 項目内容 |
| 項目名が入ります | 項目内容 | 項目内容 |
| 項目名が入ります | 項目内容 | 項目内容 |
アフィリエイトリンクを含んだボタンを作成したり
人物が話す吹き出し画像で運営者が見えるようにしたり
運営者：富田 吹き出しは、運営者の顔を見せる上で使えます！
ポップな装飾ボックスで、文字を読みやすくしたり
テキストが入ります。
などなど、様々な装飾タグが賢威サポートページに用意されている賢威マニュアルにアクセスすることで利用することができるようになります。
これらを利用することで、あなたのブログの訪問者の方に見やすい記事を作り上げることができるようになるんです。
カスタマイズ代行サービスとは？
ただ、初心者の方ですと「賢威テンプレートをカスタマイズするのは苦手」って方もいると思います。
そう言う方は、賢威テンプレートのカスタマイズ代行サービスを利用するのも一つです。
ただし、価格は非常に高くつく可能性があります。
私も、私のスクールの生徒さん限定で賢威を利用したWordpressブログのカスタマイズサービスを提供していますが、値段は5,000円程度です。
ただ一般的には、１０万〜３０万以上するのが普通でしょう。
ですので、1番良いのは
- 値段がリーズナブルなフリーランス
- もしくは独自で勉強して行う
かのどちらかを選ぶのがおすすめです。
フリーランスであれば、ホームページ作成会社よりは安く済みます。
ただし、その代わり本当に信頼できて、なおかつ自分のイメージをうまく表現できるフリーランスを探すのは結構難しかったりします。
