賢威8はヘッダー画像のカスタマイズでトップページを一新する方法

運営者：富田

賢威を利用している人の中には、トップページやブログ全体の見た目を大きく変えて他のワードプレスと差別化したい人もいます。

そこで今回は、賢威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–>

引用元：賢威８マニュアルより