WordPressテンプレート賢威のカスタマイズでアクセスを増やす


アフィリエイトで稼ごうと思ったら、独自ドメイン+WordPess+賢威テンプレートの組み合わせによるブログ開設が、今では常識となっていますね。(当ブログも、もちろん賢威です)


賢威はSEOに強いテンプレートということで有名ですが、用途にあったデザインのテンプレートが豊富なことでも知られています。


賢威には、企業向けのコーポレート版、美容系のビューティ版、汎用的に使えるクール版など、各用途ごとにそれぞれ6種類のカラーバリエーションがあり、全部でなんと合計60種類ものテンプレートがあります。


用途、テーマを強く意識したデザインですが、基本的にはどれもシンプルなものとなっています。


ブログを開設する場合に、用意されているテンプレートを手を加えず運営するのもいいですが、ここはやはり、他のブログとの差別化やアクセス増加を狙うということで、独自のカスタマイズを考えていきましょう。


カスタマイズによって、訪れてくれた人が少しでも印象に残るようなデザインを目指していきたいものです。


今から、僕のブログを例にして、カスタマイズする手順について解説していきます。


なお、カスタマイズするテンプレートは、賢威7の「スタンダード版」(カラーは赤)です。


カスタマイズの内容は目次を参照してください。

カスタマイズ前と後の、ビフォーアフター

ビフォー

賢威カスタマイズ前

アフター

賢威カスタマイズ後

デフォルトの不要なメイン画像を削除

テンプレートによっては、かなり大きいメイン画像が最初からレイアウトされていることがあります。

ブログの場合は、メイン画像(ピンクの模様の画像)は不要なので削除します。

まず、WordPressの管理画面にログインし、「賢威の設定」→「トップページ」をクリック。

以下の「メイン画像」にあるurlの内容(httpではじまる文字列)を削除して、画面一番下にある「変更を保存」ボタンをクリック。
メイン画像

これでメイン画像が削除されます。

グローバルメニューの作成

次にグローバルメニューを作成します。

「外観」→「メニュー」をクリック。

グローバルメニューに設定する各項目(プロフィール、問い合わせなど)を作成していきます。
※ここでは各項目の作成方法は割愛します。

項目が全て作成できたら、メニューの位置は「グローバルメニュー」にチェックをつけて、「メニューを保存」をクリック。
グローバルメニュー作成


これで、グローバルメニューがヘッダーのすぐ下に表示されます。
グローバルメニュー追加

SNSの設定

「賢威の設定」→「SNSの設定」をクリック。

SNSのアイコンを表示したいページの場合は、チェックを外して、画面一番したの「変更を保存」をクリック。
SNSの設定

ヘッダー画像の追加

ヘッダー画像を用意する

あらかじめ、ヘッダーに貼りける画像を用意してください。

ここではアフィリエイトのイメージになるべく近い、作業スペースの画像を使っています。

画像の中はブログのキャッチコピーなど、アピールしたいものをテキストで重ねてください。
ヘッダー画像


このテンプレートの場合は、ヘッダー画像の最大幅は1,200ピクセルとなっているので、この幅と同じ画像を用意しました。

縦は、200ピクセルちょっとです。

メインのコンテンツ部分のスペースをできるだけ確保するために、縦はあまり大きくしない方がいいでしょう。

ヘッダー画像を設定する

「賢威の設定」をクリックし、以下のロゴ画像で「画像を設定する」をクリック。
ヘッダー画像の設定


用意したヘッダー画像を、以下のエリアにドラッグ&ドロップします。
ヘッダー画像をドロップ


ヘッダー画像のサイズを指定して、「投稿に挿入」をクリックし、「賢威の設定」画面の一番下の「変更を保存」をクリック。
ヘッダー画像のサイズ設定


これでヘッダー画像が追加されました。
ヘッダー画像の追加完了

ヘッダー画像と周囲の余分なスペースを詰める

ヘッダー画像とグローバルメニューの間にある程度のスペースが確保されているようなので、これが気になる場合はスペースを詰めます。

cssファイルを修正する

スペースを詰める場合は、テンプレートのcssファイルを修正する必要があります。

「外観」→「テーマの編集」をクリックし、画面右下にあるbase.cssを選択。

ブラウザで「site-header-conts」を検索。(CtrL+Fキーで検索窓が開きます)

検索されたら、下の画面のように.site-header-contsの部分が表示されるので、以下のように修正して「ファイルを更新」をクリック。

padding: 30px 0; → padding: 0px 0;
パディング修正前 → パディング修正後

※ヘッダー画像の上下に30pxのスペースがあくように指定がされているので、これをスペースなしに修正。

これでヘッダー画像の上下のスペースが詰められました。
パディング修正完了

サイト、アプリ用のアイコンを追加

サイトのアイコン(ブラウザのタブに表示される小さいアイコン)とスマホなどのブラウザお気に入りアイコンをオリジナルなものにします。

アイコンにはファビコンと呼ばれるアイコン用の画像(favicon.ico)を使う方法もありますが、手順が面倒なので、これより解説する方法でアイコンを作ることをおすすめします。

アイコン(画像)は縦横それぞれ、最低512ピクセル以上のものを用意してください。

アイコンを設定する

「外観」→「カスタマイズ」をクリックし、以下の画面で「サイト基本情報」をクリック。
アイコン設定メニュー

サイトアイコンをクリック。
アイコン設定


「ファイルをアップロード」を選択して、用意していたアイコン用の画像をドラグ&ドロップします。

ドロップしたら、画面右下の「選択」をクリック。


以下の画面で、切り取り枠が表示されるので、切り取りたい位置まで枠を移動させて、画面右下の「画像切り抜き」をクリック。
アイコン画像切り抜き

アイコン画像設定完了

これでアイコン画像の設定が終わりました。


画面上にある「保存して公開」をクリック。

アイコンの確認

ブラウザのタブや、ブックマークアイコンに設定したアイコンが表示されるようになります。
ブラウザアイコン

Nexusでブックマークしたアイコンです。
スマホアイコン

サイドバーにプロフィール画像を貼り付ける

サイドバーにプロフィール画像を貼り付けます。

プロフィール画像には、本人の顔出し画像を使ったり、後ろ姿、アバターなど様々なものがありますが、僕はフクロウの鋭い目つきが気に入ったのでフクロウをプロフィール画像として使っています。

プロフィール画像は自分が好きなものを用意して、「メディア」→「新規追加」であらかじめアップロードしておいてください。

「外観」→「ウィジェット」をクリックし、サブコンテンツの一番上にウィジェットの中の「テキスト」をドラッグ&ドロップします。

テキストウィジェットのタイトルは、「管理人について」(なんでもいいです)などにし、内容はHTML形式でプロフィール画像を指定して完成です。
サイドバーにプロフィール画像

見出しタグの見栄えを変更する

サイドバーにプロフィール画像を貼り付けましたが、サイドバーの見出し(管理にについての部分)や記事内の見出しの見栄えがちょっとさっぱりしすぎているので、CSSを修正して、グラデーションをつけたり線に色をつけていきます。

サイドバーの見出しを変更

「外観」→「テーマの編集」をクリック。

画面右下にある、「スタイル」の「base.css」をクリック。

検索(Ctrl+F3)で、「section-title」を検索します。

以下の箇所で、修正します。
.sub-conts .section-wrap .section-in .section-title,
.sub-conts .section-wrap .article-header .section-title{
margin: 0 -20px 30px;
padding: 0 0 11px;
border-bottom: 1px solid #ccc;
font-weight: normal;
font-size: 1.125em;
}

↓赤枠部分を修正。(#ではじまる数字は色ですが、お好みで変えてください)

.sub-conts .section-wrap .section-in .section-title,
.sub-conts .section-wrap .article-header .section-title{
margin: 0 -20px 30px;
padding: 0 11px 11px;
border-bottom: 1px solid #b6d7a8;
border-left: 3px solid #dc7979;
background-color: #fcf9fa;
font-weight: normal;
font-size: 1.125em;
}

ビフォー

サイドバー見出し変更前

アフター

サイドバー見出し変更後

記事内の見出しを変更

「外観」→「テーマの編集」をクリック。

画面右下にある、「スタイル」の「base.css」をクリック。

検索(Ctrl+F3)で、「h3」を検索します。

以下の箇所で、修正します。
.main-body h3{
margin: 60px 0 30px;
padding: 0 0 10px;
border-bottom: 1px solid #a53232;
font-weight: bold;
font-size: 1.5em;
}

↓赤枠部分を修正。(#ではじまる数字は色ですが、お好みで変えてください)

.main-body h3{
margin: 60px 0 30px;
padding: 0 10px;
border-bottom: 2px solid #b6d7a8;
border-Left: 5px solid #a53232;
background: linear-gradient(270deg, #ffffff, #e7cad0);
font-weight: bold;
font-size: 1.5em;
}

ビフォー

記事内見出し変更前

アフター

記事内見出し変更後



以上で、賢威テンプレートのカスタマイズが完了です。

テンプレートをカスタマイズして、アクセスを増やす

ブログはコンテンツの内容も大事ですが、訪問してくれた人に印象づけるためにも、第一印象は非常に大事になってくると思います。


今回のカスタマイズでは、見た目のデザイン変更を中心に解説しました。


見た目の変更というのは、画像を無料素材のサイトからダウンロードして加工する作業、HTMLタグのCSSを直接修正するという、結構面倒くさい作業が必要になります。


自分でこういう作業をすることが苦でない人はそれでもいいかもしれませんが、標準の状態でデザインに優れているWordPressテンプレートを使うという手もあります。


有名なのが、design-plusが提供しているTCDというWordPressテンプレートです。


デザインと使いやすさにこだわった、インパクトあるテンプレートが豊富で、見た目がとにかく洗練されていて印象づけという点ではでかなりアピールできるテンプレートとなっています。


ただし、勿論有料です。

価格は10,000円をちょっと超えるぐらいのがほとんど。


デザインにこだわりたいけど、そのための作業に時間を費やしたくないという人は、こういうテンプレートを利用するのもいいのでは。



今後、アフィリエイトで稼ぐためには、ブログも1つではなく複数開設することも考えられます。



他のブログにはないカスタマイズをほどこして差別化を図り、その効果でアクセスが増えるようなブログ作りを目指していきましょう。