当サイトの採用している「賢威7」は、アフィリエイト初心者でも扱えるように最初から見た目が完成されたテンプレートに仕上がっています。そういった意味で賢威7は初心者にも優しいテンプレートなのですね。
しかし、見た目が完成されているからカスタマイズが不要…というわけではありません。カスタマイズをしないとライバルサイトに差をつけられませんからね。
サイトのカスタマイズにはある程度HTML/CSSの知識が必要になってきます。ここが初心者にとっては厄介な部分ですね。
初心者が1からカスタマイズするのはハードルが高いかもしれません。そこで当サイトではHTML/CSS初心者でもカスタマイズできるよう、ほぼコピペだけで済むカスタマイズを仕上げさせてもらいました。
このカスタマイズ法を使えば、当サイトのような見た目のサイトを簡単に作ることができますよ！
【賢威7】ヘッダーカスタマイズ
僕がサイトをデザインする時は、まずはヘッダーからカスタマイズしていきます。
「ヘッダー」はサイトの顔とも言える部分です。ユーザーに第一印象を与える非常に重要な部分ですので、ここを綺麗に使いやすくデザインしておくのは必須です。また、オリジナリティを持たせてサイトを覚えてもらおうとする努力をすれば尚良しかと思いますね！
ではどうやって賢威7のヘッダー部分をカスタマイズしていくのかをこれからお話ししましょう。とは言っても、賢威は最初から見た目がかなり完成されているのでほんの少しのカスタマイズでオッケーですよ！
メニューを追加
まずは賢威7にメニューを追加してあげましょう。メニューに追加したい記事を用意した後に、「カスタマイズ」>「メニュー」と進めば簡単にメニュー作成できますよ！
詳しいメニュー作成方法については以下の記事に記載しておきますので、参考にしてみてください。
メイン画像を削除/変更する
次にメイン画像を削除（追加）します。デフォルトでは地球儀の画像が貼られていますが、僕のカスタマイズではこれを削除させていただきました。
管理画面の「賢威の設定」<「トップページ」の順に進むと「メイン画像」という項目が見つかるので、ここのURLを削除すればオッケーです。画像を変更したい場合は「画像を設定する」のボタンから設定してください。
ヘッダー背景色を変える
ヘッダー背景を変えてみます。これも変更は簡単なので、当サイトのカスタマイズコードをここに載せさせていただきましょう。
.site-title a{
color: #E5A800 !important;/*文字色をオレンジに*/
}
.site-header{
background: #1c1c1c !important;/*背景色を黒に変更*/
}
.global-nav{
border-top:3px #ddd solid;/*影をつける*/
}
これを賢威7のスタイルシート(base.css)に追記するだけでオッケーです。管理画面から「外観」<「テーマ編集」<「base.css」と進んで、その最下部にこのコードを追記してください。
なおヘッダー背景色は黒(#181944)、文字色はオレンジ(#E5A800)となっていますが、これはお好きにカスタマイズしちゃってくださいね。カラーコードを参考に好きな色を選んできて、そのコードに書き換えるだけでオッケーなので！
【応用】ヘッダーロゴを配置する
「もっと綺麗なヘッダーに仕上げたい！」というならヘッダーロゴを配置するようにしましょう。ヘッダーロゴを入れるとサイトの印象はかなり変わりますし、オリジナリティがグッと高まります。
このように背景色に合わせてヘッダーロゴ画像を用意し、それを「賢威の設定」から配置するだけでオッケーなので割と簡単ですよ！
ロゴ画像は自分で作っても良いですし、それが難しいならココナラなどで外注しても良いですね！
詳しい方法に関してはここでは書ききれないので、以下の記事を参考にしてみてください。
【賢威7】記事のカスタマイズ
次は賢威7の記事(メイン)部分のカスタマイズに移ります。
記事はサイトの命です。読者に分かりやすく伝えるための工夫を必死に凝らす必要があるので、カスタマイズする上で最もこだわるべき部分かもしれません。
そこで、ここでは賢威7を利用する上で取り入れたい記事カスタマイズをまとめてみました！
記事に背景色をつける
まずカスタマイズしたいのは記事の背景ですね。
賢威7のデフォルトでは背景色が設定されていませんので、白の背景を設定して記事っぽくしたいと思います。方法は簡単で、以下のコードを「base.css」の最下部にコピペするだけです！
.section-wrap{
padding: 30px;
}
.col2 .main-conts{
background-color: #fff;
}
もともとの賢威7デフォルトでもオシャレではあるんですけれど、やはり記事は背景が白い方が見やすい傾向がありますので、この設定はしておくことをおすすめします。
見出しをカスタマイズする
次にカスタマイズしたいのは賢威7の見出し部分です。
テンプレートのままでも十分綺麗な見出しにはなっていますが、これをもう少しだけカスタマイズしてみたいと思います。
コピペで使える賢威7の見出しを8つ用意しておきましたので、こちらを参考にして見出しをカスタマイズしてみてくださいませ！
SNSを設置する
賢威7テンプレでは既存のSNSボタンが小さく、ソーシャルメディアでの拡散が少なくなりそうなのが問題です。
そこで今回はコピペでできるSNSボタンを用意しておきました。これは当サイトで使っているものと全く同様のものですね。これも是非利用するようにしてみてくださいませ！
【賢威7】サイドバーのカスタマイズ
次は賢威7のサイドバーをカスタマイズしていきましょう。
サイドバーはメインを補助する名脇役です。メインで紹介している商品の販売ページへと誘ったり、ユーザーを興味のある記事へと導いてくれたりするのが主な役割ですね。
そんな脇役のサイドバーも綺麗に整えておくとユーザーにとっても利用しやすいサイトになり、売り上げアップが見込めます。そのための賢威7カスタマイズもガッツリまとめさせてもらいましたよ！
PV数ランキングの設置方法
まず絶対設置しておきたいのがPV数ランキングです。管理画面の「カスタマイズ」>「ウィジェット」と進めば、サイドバーにPV数ランキングを簡単に設置できるようになっています。
PV数ランキングがあればサイトの回遊率は上がりますし、ユーザーにとってもわかりやすいですからね。これは他のテンプレートにはない賢威7の独自機能ですので必ず設定しておきたいです。
最近の投稿の設置方法
また、もうひとつ便利なのが「最近の投稿」です。これもPV数ランキングと同様に「カスタマイズ」>「ウィジェット」から追加することができます。
好みに合わせて色の調整を
あとは好みに合わせてサイドバーウィジェットの背景色を調整してください！
ウィジェット背景を白くする
メリハリを持たせるために背景を白くするのもアリでしょう。
.sub-conts .section-wrap .section-in{
background: #fff !important;
}
これを賢威7のスタイルシート(base.css)の好きな場所に追記するだけで背景を白くすることができます。
サイト背景と同色にする
また、サイト背景と同色にしてサイドバーを溶け込ませるように仕上げるのもアリですよ！これによりメイン記事が目立つというメリットもあります。
.sub-conts .section-wrap .section-in{
background:#edf3fb !important;/*テーマによって用調整！*/
border:none !important;
}
backgraundの「#edf3fb」のカラーコードはテーマによっては調整が必要です。賢威クール版NAVYを使っている人ならこのまま貼り付けて大丈夫ですけど、他の人は背景色と同色のカラーコードを設定するようにしましょう。
背景のカラーコードはChromeの「ディベロッパーツール」を使えば簡単に調べることができますよ。少し難しいかもしれませんが、興味のある人はチャレンジしてみてください。
【賢威7】フッターカスタマイズ
最後に賢威7のフッターカスタマイズをしましょう。
フッターカスタマイズは任意ではありますが、カスタマイズをしておくとサイトの回遊率は間違いなく上がるでしょう。
サイト下部まで降りた時に何も記事がなかったら離脱をされてしまう可能性が高くなるんですけれど、フッターを開発していれば他の記事に飛んでくれるカモしれませんから、離脱リスクを軽減できるというわけですね！
フッター開発の方法
ではそのための賢威7カスタマイズを見ていきましょう。
とは言ってもフッター開発は僕の差別化要素の1つなので大っぴらに晒す気はありません。そのため、賢威7購入者の限定特典としてフッター開発の記事を付けさせていただきます。
僕のサイトを介して購入いただければ記事を読めるようになっていますので、購入者の方はどうぞご利用くださいませ。
【賢威7】カスタマイズまとめ
AFFINGER4の全カスタマイズでした。
たとえHTML/CSSの初心者でも苦戦しないように、ほとんどコピペでサイトを仕上げられるように設計をしておきました。なのでアフィリ初心者はもちろん、コーディングが苦手な方でもAFFINGER4を見た目の綺麗なサイトに仕上げられるはずです！
ここまでカスタマイズが出来たら、AFFINGER4のランキング作成機能なども駆使して、アフィリエイトの売り上げをガンガン増やしていきましょう（＾◇＾）