腎威7カスタマイズ!「デザインの初期設定」全て教えます!

腎威7カスタマイズ!「デザインの初期設定」全て教えます!

 

ここあです。

 

あなたは腎威というワードプレスの

テンプレートをご存知ですか?

 

このテンプレートは2007年1月に発売されて以来

24,800円という価格でありながら…

 

すでに24,000人を超えるユーザーに利用されている

大ベストセラーテーマです。

 

腎威は京都にあるSEO専門会社によって

作られたテーマなのでSEOに強いのはもちろんのこと

今なお時代に合わせ進化し続けている優良テーマ。

 

今回はアフィリエイターなら誰もが知っている

超有名なテーマ「腎威7」

 

デザインカスタマイズ(初期設定)の方法を

余すところなくご紹介したいと思います。

 

これからブログやアフィリエイトを始める場合、腎威7を購入したら

どれぐらいのスピードでサイトの立ち上げができるのか

ぜひ参考にしてください^^

 

ちなみに腎威7のテンプレートは

5種類6色の計30種類の中から

好きなテーマを選べるのですが…

腎威7テンプレート種類

 

今回はその中の1つである

コーポレート版のカスタマイズについて

ご紹介致したいと思います。

 

腎威7をカスタマイズする場所

まずは、腎威7をカスタマイズする場所を簡単にご紹介。

 

Webデザインの知識が全くない人が

いきなりヘッダーやフッターとか言われても

何のことかサッパリ分かりませんよね…^^;

 

なので、それらの用語がどこを指すのかも

実際のサイトイメージと合わせてご確認ください。

 

サイト名称説明

おおむねあなたがよく目にする

用語というのは左の画像の

位置を指します。

 

使い出すと次第に慣れてくるので

まずはヘッダーやフッターが

どこを指すのか分かってもらえれば

OKです。

 

腎威7のコーポレート版をワードプレスにインストールしたてというのは

以下の状態になります。

腎威7インストール初期状態

どうですか?初期状態でも

すぐに記事が書けそうなぐらい

サイトは整っていますよね^^

 

だから、腎威7を使えば…

それほど手を加えなくとも

すぐに記事を書き始めることができるので

初心者のあなたでも全然大丈夫です。

 

腎威7の初期設定(デザイン)

主にカスタマイズしなければならないのは

  • ヘッダー画像の差し替え/削除、もしくはロゴ画像を挿入
  • メニューの作成
  • サイドバーウィジェットの変更

 

とりあえずここだけカスタマイズすれば

すぐに記事を書き始めることができます。

 

あとはどこまでこだわるかで

時間のかかり方が変わってきます。

 

サイト立ち上げ当初というのは記事が少ないので

初めからデザインにこだわり過ぎないようにしてください。

 

なぜかと言うと、記事を書いていくうちに少しずつ

サイトのイメージが固まってきます。

※もちろん、ヘッダー画像などは最初にサイトの方向性を決めて
 
確実に設定してください。それ以外の細かい部分は後回しでOK

 

最初からデザインにこだわっていても

記事が増えていくにつれて

 

「あれ?なんか最近方向性変わってきてる?」

なんて思うことも出てくるからです^^;

 

なので、最初はできるだけ簡単に

デザインの体裁を整え、記事が充実してきたら

記事の内容とサイトイメージがマッチするように

 

改めてデザインをカスタマイズする方が

確実に時間の無駄がなくなります^^

 

ということで、上から順番に

カスタマイズしていきましょう!

 

腎威7のヘッダーをカスタマイズ

腎威7ヘッダーカスタマイズ

 

まずはヘッダー部分をカスタマイズしましょう。

ヘッダーはサイトの顔とも言える部分になります。

 

サイト訪問者がまず目にするのはこのヘッダー部分。

ここの第一印象が悪いと記事も読まれず

サイトを閉じられる可能性すら起こり得ます^^;

 

なので…

  • ヘッダーの印象
  • メニューの分かりやすさ
  • タイトル(覚えてもらいやすいもの)

はかなり大事。

 

特に「デザインが苦手」というあなたであっても

最低限ヘッダー部分だけは力を入れるようにしてください。

ブログで収益化したいなら必須ですよ。

 

メニューを追加する

腎威7に関わらず…

 

ワードプレスにテーマをインストールした直後というのは

ヘッダー部分にメニューバーがありません。

ということで、まずはメニューから作成しましょう。

 

メニューに追加するのは投稿ページのカテゴリー

固定ページのどちらでも構いません。

 

ただし、メニューを決める時にはあらかじめ

どういったサイト構造にしたいのか

しっかりと考えた上で作るようにしてくださいね。

 

メニューの考え方としては2つあります。

 

1つ目はメニューを全て固定ページで設定し

固定ページの記事から投稿ページに誘導する方法。

図で説明するとこうなります。

メニューの考え方1

 

2つ目はメニューを投稿ページのカテゴリで設定し

カテゴリーの中から個別に投稿ページへと誘導する方法。

 

こちらも図で説明するとこうなります。

メニューの考え方2

 

これら2つの大きな違いは…

固定記事から各投稿記事へ誘導するか

投稿記事から投稿記事へと誘導するかです。

 

どちらもユーザビリティは高いので

あなたがやりやすい方で構いませんが

SEO的に強くなるのは1つ目、網羅系のやり方です。

 

網羅系の記事を書く場合は…

読者に関心を持ってもらいたい軸となる記事を

固定ページとして書いてまとめ

 

さらに、詳しく踏み込んだ内容を

投稿ページの記事として作成し

読者に深く知ってもらうという感じです。

 

私の記事を例に挙げると…

こちらの記事がいわゆる網羅系の記事になります。

【STORK】カスタマイズ!コピペだけでオシャレにする方法まとめ

 

私の場合、なぜこの記事が

投稿ページの1つになっているかと言うと…

 

STORKのカスタマイズを始めた頃に

いろんなサイトを見て回ったんですが

非常に分かりにくい記事が多かったです。

 

なので、自分でカスタマイズを検証しつつ

「もっと分かりやすい記事を書こう!」と少しずつ

STORKのカスタマイズ記事を書き始めたんですね。

 

そうしているうちにカスタマイズ系の記事が増えてきて

最終的には「まとめページがある方が親切!」

落ち着いたワケなんです。

 

ただし、私の場合は全てのカテゴリーにおいて

STORKだけに特化したサイトを作っているわけではありません。

 

だから、メニューとして固定ページを作るのではなく

トップページやサイドバーに画像リンクを作ることで

 

サイト訪問者をまとめページに誘導し

ユーザビリティを上げているというワケなんですね。

つまり、やり方はいろいろあるということです…(笑)

 

腎威7もこのサイトのように

固定ページをトップページとして設定することもできますし

サイドバーに画像リンクを作ることもできますので

 

あまり考えることだけに時間をかけ過ぎず

まずは手を動かしてみるということを

優先してみてくださいね^^

 

ということで、メニューの下準備をしましょう。

 

メニュー用の固定ページを作成する方法

まずは固定ページの作り方から…。

 

ダッシュボードメニューから

固定ページ → 新規追加をクリック。

ダッシュボードメニュー

 

固定ページの新規追加画面を開いたら

  1. タイトルを入力
  2. 一旦保存
  3. パーマリンクを設定
  4. 再度、更新ボタンを押して保存

の順番に固定ページを作成します。

 

固定ページ作成

 

固定ページの中身(記事)は後から書けばいいので

今は空白で大丈夫です^^

※固定ページは、公開ボタンを押して、公開状態にしておかないと
 
メニューに表示されないのでご注意ください。

 

メニュー用のカテゴリーを作成する方法

続いてメニュー用、投稿ページのカテゴリーを

作成する方法を説明します。

 

投稿ページのカテゴリーを作成する場合は

ダッシュボードメニューから

投稿 → カテゴリーをクリック。

 

カテゴリーページを開いたら

以下、必要項目を入力の上、設定を保存しましょう。

腎威7カテゴリー設定

 

メニューを設定する方法

固定ページもしくは投稿ページのカテゴリー

設定できたら、いよいよメニューの作成です。

 

ダッシュボードメニューから

外観 → メニューをクリックしましょう。

 

メニュー作成画面を開いたら

メニュー名を入力し、メニュー作成ボタンを

クリックしてください。

メニュー作成画面

 

続いて、すべて表示をクリックすると

先ほど追加した固定ページの項目が

全て表示されるので、追加したい項目にチェックを入れます。

メニュー作成画面

 

カテゴリーをメニューに追加したい場合も…

 

カテゴリーの部分から固定ページ追加と

同様の手順でメニューに追加しましょう。

 

メニューに追加ボタンをクリックすると

右側に追加したメニューが全て表示されるので

メニュー作成画面

 

最後にメニューの順番をドラッグして入れ替えて

メニューを表示させたい場所にチェックを入れて

メニューを保存をクリックしてください。

腎威7メニュー作成画面

 

そうすると…

サイトタイトル下にメニューが新たに追加されます。

腎威7トップページイメージ

 

メニューの作成は初めのうちは少し戸惑うかもしれませんが

すぐに慣れてくるので、いろいろ試してみてください^^

 

ヘッダー画像を削除または変更する

続いて、ヘッダー画像の調整をします。

 

腎威7のコーポレート版はデフォルトで

事務所の写真がメイン画像として設定されています。

 

ヘッダー画像の設定方法は、ダッシュボードメニューから

腎威の設定 → トップページをクリックし

腎威7ダッシュボードメニュー

 

以下の設定画面を開きます。

腎威7トップページ設定

 

メイン画像を削除したい場合は…

 

以下、画像のURLを削除して空白にし

設定を保存すれば表示されなくなります。

腎威7トップページ設定

 

メイン画像を変更したい場合は…

画像を設定するをクリックし

腎威7トップページ設定

 

ファイルを選択をクリックして任意の場所から画像を選ぶか

登録したい画像を点線の中にドロップして

ライブラリに画像を追加します。

腎威7ライブラリ登録画面

 

画像を追加すると新たに以下の画面になりますので

代替テキストを入力し、画像サイズを選んでから

最後に投稿に挿入をクリックしましょう。

 

画像編集画面

 

今回はヘッダー用のメイン画像なので

サイズはフルサイズでOKです。

 

また、代替テキストはSEO効果もありますので

画像をライブラリに登録する際には必ず入力するよう

心がけてください^^

 

こうして画像の登録ができると…

最初にあった事務所の写真が新たに設定した画像に変更されます。

腎威7トップページ設定

 

実際にサイト表示で見てみると…

トップページの画像が変更されています。

腎威7トップページイメージ

 

また、トップページの画像は

メニューと同じ幅に設定する場合と

 

以下、メイン画像をウインドウ(ブラウザ)幅で表示

チェックを入れることで

メイン画像をウインドウ(ブラウザ)幅で表示

 

ブラウザの画面幅いっぱいに設定することもできます。

腎威7トップページイメージ

 

その辺はあなたのお好みで設定してくださいね^^

 

ヘッダーロゴを登録する

続いて、ヘッダーロゴの登録です。

 

こちらの設定は任意となりますが…

先ほどのヘッダー画像を登録しない場合は

ヘッダーロゴで他のサイトと差別化する方が望ましいです。

 

いずれにしても、サイトのヘッダー部分には

オリジナリティがある方が断然良いです。

 

ヘッダーロゴを自分で作れるなら作れば良し

それが難しいという場合はココナラなどで

外注しても良いですね!!

 

もちろん、私は自分で作ってますよ…^^

 

ヘッダーロゴを外注さんに頼む場合は

背景色のないPNG画像で仕上げてもらうと

いろいろと使い勝手がいいのでおすすめです。

 

背景があると、ヘッダーの背景色も限定されるし

後から背景色を変えたくなっても変更できないという

デメリットがありますので気を付けてくださいね^^;

 

私は簡単にこんなヘッダーロゴを作ってみました。

背景は白になっていますが、

背景色のないPNG画像で作成しています。
※上記サンプルは背景白のjpg画像です。

 

私のようなシンプルなヘッダーロゴであれば

以下のアイコンサイトからアイコンをダウンロードし

文字と組み合わせるだけですぐに作れます^^

FLAT ICON

 

画像編集ソフトさえあればあなたでも簡単に作れますので

ぜひチャレンジしてみてください。

あとはあなたのセンス次第!←ここ重要(笑)

 

ということで、ヘッダーロゴの設定方法です。

 

ヘッダーロゴの設定先は

ダッシュボードメニューから腎威の設定をクリック

以下の場所から登録できます。

 

画像を設定するをクリックし、あとは先ほどと同じ

ヘッダー画像を登録したのと同じ流れで設定してください。

ヘッダーロゴ登録

 

ロゴ画像を登録し、サイト表示で見てみると…

腎威7トップページイメージ

 

だいぶ、小洒落た感じになってきましたね(笑)

 

私は少し小さめのロゴ画像を設定しましたが

ロゴ画像を大きくして登録すれば…

 

ヘッダー画像のごとく、メニューの上に大きく

インパクトのあるロゴを設定できます。

 

もしもヘッダー画像ではなく、ロゴ画像を大きくして

サイトにインパクトを持たせたいという場合は…

 

横1,200px × 縦300pxぐらいを目安に組んでみてください。

一番バランス良く見えますよ^^

 

ヘッダーメニューの色を変更する

ヘッダー画像もしくはロゴ画像が登録できました。

 

しかし、ロゴや画像のイメージによっては

ヘッダーメニューとのバランスが

非常に悪く見える場合がありますよね…。

 

先ほどの私のサンプルを例に挙げても違和感バリバリです^^;

ということで、メニューの色も変更しちゃいましょう!

 

ヘッダーメニューの色はCSSコードで変更します。

「CSSコード?何それ?」と思ったあなたでも大丈夫。

あなたはカラーコードを打ち変えるだけ…^^

 

「カラーコード」とは…

#で始まる6ケタの色を表すコードです。通常は#f05689など#を除く6ケタになりますが
黒のコード#000000のように同じ数字や、同じアルファベットが並ぶ場合は
#000と3ケタにしてもOKです。

 

腎威7のCSSコードの記述先は

base.cssの一番下に記述しましょうという人が

もの凄く多いですが、私はおすすめしません。

 

というのも、コードを入力してから

その都度、表示結果を見るのは非常に手間だからです。

 

なので、私はダッシュボードメニューから

外観 → カスタマイズ → 追加CSSに

記述することをおすすめします

 

こちらの追加CSSであれば、ライブプレビューで

表示結果を確認しながら調整できるので

作業に無駄がなく、非常にやりやすいです。

 

カスタマイズの際は追加CSSに記述しましょう。

※カスタマイズは必ず子テーマでお願いします。←ここかなり重要!!

 

追加CSSコードは以下になります。

/* グローバルメニュー */
.global-nav-in li{
border-bottom: none;
}

.global-nav-in li a{
color: #fff;/*文字の色*/
background:#000;/*背景の色*/
}

.global-nav-in li a:hover,
.global-nav-in li a:active,
.global-nav-in li a:focus,
.global-nav-in li:hover > a{
color: #fff; background: #fea34e;
}

.global-nav-in li ul li:hover > a{
color: #fea34e;
}

.global-nav {
border-top: 1px solid #e6e6e6;
border-bottom: 3px solid #f7840f;/*下線の色*/
background: #000;/*背景の色*/
}

CSSコードをコピペした瞬間

以下の画像のごとく、メニューの色が変更されます^^

腎威7トップページイメージ

 

CSSコードのカスタマイズ方法もご説明しますので

あなたのサイトイメージに合わせて色を変更してくださいね。

 

以下、2つのサイトを立ち上げながら作業すると

カラーイメージが作りやすいです。

ぜひ参考にしてみてください^^

 

立ち上げながら色を決めよう!

 

メニューバーの背景色を変更する場合

メニューバーの背景色(黒の部分)を変更する場合は

以下のカラーコードで調整してください。

変更箇所は2カ所になります。

 

.global-nav-in li a{
color: #fff;/*文字の色*/
background:#000;/*背景の色*/←メニュー部分の背景色が変わります。
}

.global-nav {
border-top: 1px solid #e6e6e6;
border-bottom: 3px solid #f7840f;/*下線の色*/
background: #000;/*背景の色*/←メニュー両端の背景色が変わります。
}

 

メニューの文字色を変更する場合

メニューの背景色に合わせて文字の色を変更する場合は

以下のコードで調整できます。

.global-nav-in li a{
color: #fff;/*文字の色*/←ここで文字の色が変わります。
background:#000;/*背景の色*/
}

 

さらに、サブカテゴリーを作りプルダウンで

表示される文字の色を変更する場合は

以下のコードで調整できます。

.global-nav-in li ul li:hover > a{
color: #fea34e;ここで文字の色が変わります。
}

 

メニューにマウスの色を乗せた時の色を変更する場合

メニューにマウスを乗せた時の色は

以下のコードで調整できます。

.global-nav-in li a:hover,
.global-nav-in li a:active,
.global-nav-in li a:focus,
.global-nav-in li:hover > a{
color: #fff; ←ここでホバー時の文字の色
background: #fea34e;←ここでホバー時の背景色が変わります。
}

 

メニューのアンダーラインの色を変更する場合

メニュー下にあるオレンジの線の色を

変更する場合は以下のコードで調整できます。

.global-nav {
border-top: 1px solid #e6e6e6;
border-bottom: 3px solid #f7840f;/*下線の色*/←オレンジラインはここで変更
background: #000;/*背景の色*/
}

また、border-bottom: 3px solid #f7840f;

3pxの数字を変えれば線の太さが変更できます。

 

オレンジの線がいらないという場合は

border-bottom: none;としてください。消えます(笑)

 

スマホのメニュー背景色を変更する場合

ついでに、画面を縮小し、スマホ時に見える

メニューの背景色を変えるCSSコードもご紹介します。

 

以下のCSSコードのカラーコードを変更すれば

スマホ時のメニュー背景色も変わります^^

/*グローバルナビ背景色*/
@media only screen and (max-width : 950px){
.global-nav-panel{
background-color:#000;
}
}

ご紹介したCSSコードをコピーすると

メニュー背景色が黒に変わりますので

 

background-color:#000;のカラーコードを

あなたの好きな色に変更してくださいね。

 

このCSSコードで「PC版とスマホ版の色のバランス」も

しっかりと取ることができます^^

 

以上がメニューカラーの調整方法です。

いろいろ触って試してみてくださいね^^

 

腎威7の背景色をカスタマイズ

それでは次に、背景色のカスタマイズについてご説明します。

 

一言で、背景色と言っても…

  • サイト全体の背景色
  • ヘッダーの背景色
  • 記事エリアの背景色
  • ウィジェットの背景色
  • フッターの背景色

など、いろいろあります。

 

背景色はサイト全体の色を占める割合が

非常に多いので、背景色を変えるだけで

かなり印象が変わります。

 

まずは、これらの色を調整していきましょう。

 

背景色の変更も先程と同じく、ダッシュボードメニューから

外観 → カスタマイズ → 追加CSS

に記述してくださいね。

 

サイト全体の背景色を変えるCSSコード

まずは、サイト全体の背景色から変更していきます。

以下のCSSコードをコピペするだけサイト全体の背景色を変更できます。

/*サイト全体の背景色*/
body{
background:#f2f2ea;
}

CSSコードにあるbackground:#f2f2ea;

カラーコードで背景色を調整してください。

 

ヘッダーの背景色を変えるCSSコード

ヘッダーロゴの画像を挿入した時に

背景色と違和感が出るのを防ぐため

ヘッダーの背景色も変更しましょう。

 

ヘッダーの背景色を変更する場合は

2通りのパターンがあります。

 

まずはヘッダー画像なしまたは

ヘッダー画像をブラウザ幅ピッタリに設定している場合…

 

↓ こんなパターンか…

腎威7トップページイメージ

↓ こんなパターン

腎威7トップページイメージ

 

上記条件に当てはまる場合は

以下のCSSコードを使用してください。

/*ヘッダー背景色を変更*/
.site-header{
background: #fff;
}

 

次にヘッダー画像をメニュー幅ピッタリで設定している場合。

 

↓ こんなパターン

腎威7トップページイメージ

 

こちらの条件に当てはまる場合は

以下のCSSコードを使用してください。

/*ヘッダー背景色を変更*/
.site-header{
background: #fff;
}

/*ヘッダー画像の左右の背景を変更*/
.main-image{

background: #f2f2ea;
}

こちらのCSSコードを使用する場合は

  • ヘッダーロゴの背景
  • ヘッダー画像の左右の背景

それぞれ2箇所の色指定が必要です。

 

CSSコードの部分にそれぞれ

どちらの背景色を変更するコードか書いているので

確認しながら、カラーコードを変更してみてくださいね。

 

記事の背景色を変えるCSSコード

記事の背景色を変更するCSSコードはこちらです。

やはり、記事の背景色は白い方が良いですよね^^

/*コンテンツの背景色*/
.section-wrap{
background:#fff;
}

上記コードは記事エリアの背景色が

白になるCSSコードなので、コピペだけでOKです。

 

サイドバーウィジェットの背景色を変えるCSSコード

サイドバーウィジェットの

背景色を変更するCSSコードはこちらです。

サイドバーウィジェットの背景色も白がキレイだと思います。

/*ウィジェット背景色*/
.sub-conts .section-wrap .section-in{
background: #fff;
}

白以外の背景色に変えたい場合は

background: #fff;のカラーコードを変更してください。

 

フッターの背景色を変えるCSSコード

フッターエリアの背景色を変える

CSSコードはこちら。

/*フッター背景色*/
.site-footer {
background: #000;
}

フッターエリアの背景色は

あなたのお好みの色に変更してくださいね。

 

copyrightの背景色を変えるCSSコード

サイトの最下部にあるcopyrightの背景色も変更しましょう。

CSSコードはこちらです。

/*copyright背景色*/
.copyright {
background: #f7840f;
}

 

ちなみに、以下のCSSコードを追加すれば

copyrightの文字の色も変更できます。

/*copyright文字色*/
.copyright small {
color:#fff;←ここで文字色を変更できます。
}

こちらの色もお好みでどうそ…^^

 

記事エリア・ウィジェットエリアに影を付けるCSSコード

サイト全体の背景色はこれで全て設定できましたが

色の設定の仕方によっては

少しメリハリがなくなる場合があります。

 

そんな時は、以下のコードを追加して

記事エリアとウィジェットエリアに影を付けましょう。

そうすることで、同じ薄い色同士でもしっかりとメリハリがつきます。

 

影をつけるためのCSSコードはこちらです。

/*セクションに影を付ける*/
.section-wrap{
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
}

rgba(0, 0, 0, 0.2);このコードの0.2の部分が

影の濃度になりますので、うまく調整してくださいね。

 

これだけでだいぶ見た目の印象が変わりましたね^^

Before)

腎威7インストール初期状態

After)

腎威7サイトイメージ

 

 

腎威7の記事エリアをカスタマイズ

ヘッダーエリア、背景色が設定できたところで

次は記事エリアに関する装飾をそれぞれ

カスタマイズしていきましょう^^

 

腎威7の見出しをカスタマイズ

このブログテーマSTORKもそうでしたが

どのテーマも今一つ記事の見出しがシンプルすぎる

という印象を受けます。

 

ブログの場合は記事と記事の見出しがシンプルでも

読者に分かりやすく伝わればそれでいいのですが

 

せっかくなら、もう少しだけカスタマイズして

オシャレにしてもいいと思います^^;

 

ということで、コピペで使える

腎威7の記事の見出しに関しては

以下の記事にまとめました。

 

こちらの記事を参考にカスタマイズしてみてください。

コピペできる!腎威7の見出しカスタマイズ!

 

腎威7のSNSボタンをカスタマイズ

腎威7を立ち上げて私が一番驚いたのは

SNSシェアボタンの存在感の無さです(笑)

 

↓ 初期設定はこれ^^;

腎威7SNSシェアボタン

 

しかも、初期設定では…

SNSボタンが表示されなくなっており

「何でやねん!」とツッコミどころ満載!(笑)

 

正直、謙虚すぎるというか…

もう少し堂々と「シェアしてください!」と

主張したボタンでいいですよね^^

 

ということで、私もSNSボタンをカスタマイズしました。

 

検索すれば以下のSNSボタンのカスタマイズ記事は見つかります。

↓ これです。

腎威7SNSシェアボタン

 

なので、興味のある方は探してみてください^^

 

しかし、私の場合はこのSTORKと同様に、

↓ こんなボタンで、もう少しスッキリと、さらにLINEも追加しました。

腎威7SNSシェアボタン

 

STORKのカスタマイズ記事では一般に公開していますが

腎威7のカスタマイズ記事に関しては

ほぼ全て当サイトからの購入特典にします。

 

なので、こちらのSNSボタンのカスタマイズ方法は

ここでは公開致しませんので、ご了承ください。

 

腎威7のサイドバーをカスタマイズ

サイドバーの基本的な設定についても

簡単に説明しておきますね。

 

サイドバーには基本的に…

  • あなたのプロフィール
  • 最新記事
  • 人気記事(よく読まれている記事)
  • カテゴリー
  • アフィリエイト広告

など

 

読者にブログの筆者である

あなたのことを知ってもらったり

 

人気記事や最新記事一覧を表示させておくことで

訪問者の滞在時間を伸ばし、いろんな記事を

読んでもらうための大事な導線となります。

 

もちろん、アフィリエイトをする場合は

アフィリエイト広告などを貼り

収益化に繋げることも大事です。

 

腎威7には…

  • 最新記事
  • PV数ランキング

を表示させるためのウィジェットが

標準装備されています。

 

これらを使うことで、訪問者の利便性が上がり

あなたの記事をたくさん読んでもらうことで

収益化、売り上げアップが見込めます。

 

なので、あなたのサイトが収益化できるように

サイドバーウィジェットもしっかりと

整えていきましょう^^

 

最新記事の表示方法

まずは、最新記事の表示方法です。

このウィジェットは記事を書くまで何も表示されませんが

ひとまずはしっかりと設置しておきましょう^^

 

腎威7では…

【腎威】サムネイル付き最近の投稿という

ウィジェットを使って最新記事を表示させます。

 

ウィジェットの追加方法は、ダッシュボードメニューから

外観 → カスタマイズ → ウィジェットをクリック

腎威7ウィジェット設定画面

 

続いて、ウィジェットを追加をクリックします。

腎威7ウィジェット設定画面

 

ウィジェットの追加画面に切り替わったら

【腎威】サムネイル付き最近の投稿をクリックしましょう。

腎威7ウィジェット設定画面

 

あとはタイトル、表示件数を入力し

表示方法をライブプレビューで確認しながら

あなたのお好みで決定してください。

※アイキャッチ画像のある記事がない場合
 
サムネイルは表示されませんのでご注意ください
^^;

 

腎威7ウィジェット設定画面

 

この設定だけ出来ていれば、記事を書き公開するだけで

最新記事が画像付きで表示されます。

 

PV数ランキングの表示方法

続いて、PV数ランキングの表示方法です。

PV数とは閲覧数のことです。

 

つまりPV数ランキングとは…

訪問者にどれだけその記事が読まれたかという

ある種の人気記事ランキングになります。

 

腎威7はこの人気記事ランキングも

設定できるようにデフォルトで装備されています。

 

PV数ランキングも先程の

【腎威】サムネイル付き最近の投稿と同じく

ウィジェットの追加画面から設定します。

 

ダッシュボードメニューから

外観 → カスタマイズ → ウィジェットをクリックし

【腎威】PV数ランキング表示をクリックすれば追加できます。

腎威7ウィジェット設定画面

 

あとは、PV数ランキングを表示させるための設定を行います。

腎威7PV数ランキング

 

詳しくはコチラをご覧ください^^

 おすすめ設定
タイトル人気記事など…
表示する投稿数5件がおすすめ。10件だと分かりにくい。
表示項目基本的にはPV数でOK。
PV数を集計する期間全期間 ※トレンドサイトの場合は1週間〜1ヶ月
表示形式背景画像+テキストリスト、もしくはシンプルなリスト

 

また、腎威7のPV数ランキングは

ランキングに含ませたくない記事も設定できます。

 

記事投稿画面の右下の方に、以下の設定項目がありますので

PV数ランキングから除外にチェック入れておけば

ランキング表示されなくなります。

PV数ランキング除外

 

やはり、せっかく訪問者に記事を読んでもらうなら

アフィリエイトの収益化に繋がる記事を

読んでもらいたいですよね?

 

なので、あまり収益と関係ないと

思うような記事に人気が集まっている場合は

 

ランキング表示も上手くコントロールしながら

収益化を考えるのも1つの手です^^

 

また、PV数ランキングを分析することで

人気記事から収益化したい記事に誘導すれば

売り上げアップが期待できるかもしれません…。

 

その辺は要領よくやりましょうね(笑)

 

腎威7のフッターをカスタマイズ

最後に、フッターのカスタマイズです。

 

最近ではスマホからの検索流入も増えてきたので

フッターエリアのユーザビリティを上げておくと

サイトの回遊率が上がり、SEO効果も高くなります。

 

このサイトのテーマであるSTORKの場合は

モバイルファーストをコンセプトに作られているので

しっかりとフッターエリアがカスタマイズしやすくなっています。

 

腎威7もそういうことを見越してか

フッターエリアを自由にカスタマイズするための機能は

備えていますが、HTMLコードでフッターを組む必要があるので

 

Web制作の知識がない人には

非常にカスタマイズしにくい仕様となっているのが

残念なポイントです。

 

毎回フッターをHTMLコードでカスタマイズするのも非常に面倒だし

フッターの使い勝手を良くするため

 

私は新たにフッターウィジェットを追加し

いつでも自由に気軽にカスタマイズできるよう

手を加えました。

 

↓ デフォルトのウィジェットは、サブコンテンツだけですが…

腎威7ウィジェット

 

↓ カスタマイズ後は…

腎威7ウィジェット

 

サブコンテンツと同様

フッターを3列で表示できるウィジェット

設定できるようにしました。

 

そうすることで、このサイトと同様

腎威7でも以下のように

腎威7フッターカスタマイズ

 

このサイトとほぼ同じようなことができるようになっています。

 

こちらのフッターを3列ウィジェットで表示するための方法も

当サイト購入者限定特典とさせていただきます。

 

腎威7カスタマイズまとめ

一部、当サイトの限定特典のカスタマイズもありましたが

基本的に、今回紹介した記事通りに進めれば

 

ある程度、誰が見ても恥ずかしくない

それなりに整って見えるサイトに仕上がります。

 

腎威7は設定箇所も少なく

初心者のあなたでも、ある程度基本的な部分を少し触るだけで

すぐに記事を書き始められるというメリットがあります。

 

しかも、腎威7はSEOにも強く

しっかりと読者の役に立つ記事さえ書き溜めていけば

ブログの有益化も全然夢ではありません。

 

今回は特に初心者のあなたにとっては…

 

たったこれだけカスタマイズすれば、

だいぶサイトの印象が違って見える

ということはお分かりいただけたかと思います。

 

また、これから腎威7を購入しようか悩んでいるあなたにも

腎威7を手に入れてからサイトを立ち上げるまでの

イメージが掴めたのではないでしょうか?

 

腎威は最初にお伝えした通り

24,000人に利用されている信頼度の高いテーマです。

 

なので、ぜひこの記事を役立てて

あなたのサイトを見栄えのする信頼度の高い

サイトに仕上げてみてくださいね^^

 

腎威7のカスタマイズにこだわりたい方へ

これから先、ブログアフィリエイトで稼ぐためには

ブログの差別化は必須となってきます。

 

というのも、現在のアフィリエイター人口は約400万人。

もしも副業が解禁されたらネットビジネスの参入者

つまり、アフィリエイター人口はさらに増加することになります。

 

なので…

  • 記事での差別化
  • 特典やオリジナルコンテンツでの差別化
  • デザインの差別化

など、

 

他のアフィリエイターに埋もれないよう

あらゆる策を講じる必要が出てきます。

 

もしもあなたがこれからブログアフィリエイトで

収益化を考えているのなら、

  • 今後のブログアフィリエイトに必要なこと
  • デザインの重要性

についてまとめた記事も書いてありますので

ぜひ目を通してみてください。

 

ブログアフィリエイトにデザインが重要な理由とは?

 

また、当サイトから腎威7を購入してくれた方のためだけに

デザインをカスタマイズするためのサイトをオープンしています。

 

現在のところ、まとめてある記事は…

  • 腎威7でWebアイコンフォントを超簡単に使う方法!
  • 腎威7のSNSボタンをカスタマイズする方法
  • 腎威7で子テーマを簡単に作る方法!
  • 腎威7でLINE風プロフィールを作る方法
  • 腎威7のフッターを3列ウィジェットにする方法
  • 腎威7の目次をGoogleフォントで格好良くする方法!

 

これだけの記事だけでも「腎威7」を使っている

他のユーザーと十分差別化できる内容となっています。

 

また、今後のラインナップとして…

  • 腎威7のリスト表示をオシャレにする方法
  • 「こんな方におすすめメリスト」を表示する方法(人気急上昇!)
  • 腎威7のカテゴリーをボタン風にする方法
  • 腎威7のウィジェットタイトルをオシャレにする方法
  • トップへ戻るボタンのカスタマイズ方法

など、どんどん記事を追加していく予定です。

 

またカスタマイズ方法以外にも

腎威7に導入したいおすすめプラグイン

その他のTipsも随時追加していきます。

 

これから腎威7を購入しようか迷っている方で

  • 腎威7のカスタマイズに興味がある
  • 腎威7のカスタマイズに自信のない
  • デザインの重要性を理解している方

は、当サイトからの購入者限定カスタマイズサイトを

役立てていただけたら嬉しいです。

 

 

 

腎威7カスタマイズ購入者特典の受け取り方

当サイトから、腎威7をご購入いただいた場合は

以下、問い合わせフォームよりご連絡ください。

ここからお問い合わせフォームに飛びます

 

その際には…

  • 購入時のお名前
  • 購入番号
  • 当サイトから腎威7を購入した旨

をお伝えいただけますと、スムーズに確認でき

特典の引き渡しも早く行えます。

 

特典につきましては、腎威7カスタマイズ限定サイト

ログインパスワードを送らせていただきます。

 

また、カスタマイズに際し、ご不明な点があった場合

メールサポートも行いますので

連絡時のお名前(ニックネームでも可)も必ずご連絡ください。

 

最後までお読みいただきありがとうございました!

 

「テーマ」に関して分からないことがあれば、何でも気軽にご相談ください。

「ここあ」にちょっと聞いてみる!

 

腎威7カスタマイズ!「デザインの初期設定」全て教えます!

「自分らしく」夢に向かって楽しい人生を生きるために


未来の自分を想像しよう
「副業であなたは変わる」

会社に縛られず
「自由な生き方を選べる」ように
副業で稼ぐ方法をご紹介します。


ABOUTこの記事をかいた人

ここあ

グラフィックデザイナー歴20年。2017年アフィリエイトを始めて独立。デザイナーのスキルも生かし、アフィリエイトでストレスフリーな生活を楽しみながら、ネットビジネスの素晴らしさを一人でも多くの方に伝えたくこのブログを立ち上げました。