こんな人におすすめ
- AFFINGER6（アフィンガー）の設定が細かくて分からない
- 誰かの設定を参考にサイトのデザインをしたい
- どのようなデザインの設定ができるか知りたい！
このようにAFFINGER6の設定に困っている人・購入を悩んでいる人へお届けいたします。
たしかにアフィンガーは細かい設定が多く時間がかかってしまいますよね。
そのような人のために、わたしが月40万円以上稼いだアフィンガーのデザインを無料公開いたします！
画像付きで解説しているので、誰でも簡単にデザインが再現できますよ！
もちろんテンプレートとして丸ぱくりOK！
まだ、アフィンガーを購入するかどうか悩んでいる人は、初心者が悩む初期設定を全部解説しているので参考にしてくださいね！
「なべけんメルマガ」配信中！
完全無料の「なべけんメルマガ」では、キャリア戦略や副業術、ブログ戦略、Web3テクノロジーについて発信をしていますよ。
今だけ期間限定！
無料登録いただいた全員に「月40万円稼ぐブログ戦略」を無料プレゼント中です！
この企画は予告なく終了する可能性ありなので、少しでも興味ある人は今すぐに登録してください！
AFFINGER6初期設定でやるべきこととカスタマイズの注意点
AFFINGER6は設定項目がたくさんあり、基本的にはどこから手を付けても良いです。
ですが2つだけ最初にやるべきことがあるので、まずはこれを実践しましょう。
hello worldを消す
アフィンガーをインストールしたばかりのときは、「Hello world!」というダミーの投稿があります。
これが残っているとGoogleからのSEO評価が下がってしまうので、初めに投稿を消すところから初めましょう。
「Hello world!」をゴミ箱へ
投稿を消す方法は簡単で、Wordpressの「投稿一覧」から対象の記事を「ゴミ箱へ移動」をクリックします。
これだけの作業で、「Hello World!」の投稿が消えました。
403エラーが出るときの対処法
AFFINGERの設定をしていると、ロリポップサーバーを使っている人は403エラーが出てしまうことがあります。
このときはほとんどレンタルサーバーのセキュリティ設定が原因なので、設定を変更してサイトのカスタマイズをしましょう。
レンタルサーバーの管理画面へログイン
まずはサイトのの管理画面へログインして、設定状況を確認します。
確認をする箇所は、「セキュリティ」の「WAF」という設定項目についてです。
WAF設定を無効化する
ここでは、わたしが使っているロリポップサーバーの管理画面で説明いたします。
このようにWAF設定を変更できる項目があるので、AFFINGERで設定するときは「無効にする」を選択して保存しましょう。無効化したあと10分後から設定が適用されます。
編集後に有効へ戻す
AFFINGERの設定後に「WAFを有効」に戻して保存すればセキュリティもOKです。
WAF設定を有効に戻してもAFFINGERの設定は保存されているので、イチから設定し直すことはありませんのでご安心ください。
ヘッダー（サイト上部）のデザインを変更
サイトのヘッダーは訪問した人が最初に見るところなので、印象に残るデザインに変更しましょう。
ここで印象に残るデザインができると、改めて検索・訪問してくれるリピーターを増やすことができますね。
ヘッダーの色を変更
画像を表示させたいときは設定不要ですが、画像がないときは色の設定をしましょう。
ヘッダーのキャッチフレーズ削除
サイトのロゴを設定すると、キャッチフレーズのフォントが悪い意味で浮いてしまうので非表示設定をしています。
キャッチフレーズの設定をしなくても表示されなくなりますが、検索結果に表示されなくなってしまうので、「AFFINGER管理画面」から非表示の設定をしましょう。
キャッチフレーズを非表示にすると、ちょっと寂しいですがこのようになります。
サイトロゴの設定
他のサイトと差別化をするためには、イラストレーターやフォトショップでサイトロゴを作って設定するのがおすすめです。
シンプルなデザインでも、サイトを訪問した人の印象に残りやすくなりますね。
自分で作れない人は「ココナラ」がおすすめ
ココナラは、さまざまなジャンルの個人の専門家に仕事の依頼をするサービスです。
わたしのプロフィール画像も「ココナラ」でデザイナーさんに依頼をして作成してもらいました。
ココナラの利用画面
実際に依頼をする前に見積もりができ返金保証もあるので、はじめての人でも安心して利用できますね。
ヘッダーメニューをロゴの横へ配置変更
当サイトでは、ヘッダーメニューをロゴの横に配置するように設定をしています。
単色の部分が多くなるとデザインに時間を書けてない印象になり、初心者ブログと思われてしまうのです。
そのため単色部分を減らすために、ロゴの横にメニュー位置を設定しています。
AFFINGER管理からメニュー表示設定の変更
表示するメニューの設定
メニューに表示する項目を設定します。
ここではカテゴリーのみを設定していますが、固定記事などもメニューに設定ができます。
設定を終えると、このようにロゴの横にメニューの配置ができました。
スマホ用メニューの変更
メニューの設定はスマホだと別の設定が必要なので、デザインの設定を「カスタマイズ画面」から変更します。
フッター（サイト下部）のデザイン設定
サイトのフッターもヘッダーと同様に設定が必須なところになります。
サイトマップや運営者情報などサイトのフッターに掲載することが多いので、それらをチェックしてもらえるデザインにしましょう。
フッターメニュー
フッターメニューもヘッダーと同様に、まずメニューの設定を行います。
サイトロゴのフッター設置
作成したフッターメニューをフッターエリアに反映し、デザインの設定も行こないます。
トップページのデザイン設定
トップページのサイトが見やすいと、サイトの記事をクリックしてもらいやすいため見やすいデザインを設定しましょう。
おすすめ記事の表示設定
まずは、サイトに訪問してくれた人に読んでほしい記事を「おすすめ記事」として紹介するデザインを設定いましょう。
トップページの設定は「AFFINGER管理」画面から設定ができます。
参考までにわたしが使っているコードも記載いたしますので、コピペで使ってください。
html
<h3 style="text-align: center;">おすすめ記事</h3>
<div class="clearfix responbox50">
<div class="lbox">
[st-card myclass="" id="1553" label="" pc_height="200" name="" bgcolor="" color="" webicon="" readmore="on" thumbnail="on" type=""]
[st-card myclass="" id="5480" label="" pc_height="" name="" bgcolor="" color="" webicon="" readmore="on" thumbnail="on" type=""]
</div>
<div class="rbox">
[st-card myclass="" id="2126" label="" pc_height="200" name="" bgcolor="" color="" webicon="" readmore="on" thumbnail="on" type=""]
[st-card myclass="" id="2317" label="" pc_height="" name="" bgcolor="" color="" webicon="" readmore="on" thumbnail="on" type=""]
</div>
</div>
<h3 style="text-align: center;">新着記事</h3>
[st-catgroup cat="0" page="5" order="desc" orderby="id" child="on" slide="on" slides_to_show="3,3,1" slide_date="" slide_more="ReadMore" slide_center="on" fullsize_type=""]
カテゴリーアイコンのデザイン
設定当初の色合いだと非常に見ずらいため、サイトのイメージに合う色を設定するようにしましょう。
タイトルのデザインを設定
タイトルの設定も最初の設定だと地味な印象を与えてしまいます。
これもカテゴリーと同様にサイトに合う色を設定しましょう。
サイドバー（サイトの右側）のカスタマイズ
トップページが設定できたら、後はサイドバー・ウィジェットの設定をすれば終わりです。
サイドバーに追加したいメニューの設定
まずは、サイドバーに設置したい項目をWordpressの管理画面から「サイドバートップ」に追加していきます。
「サイドバートップ」に追加ができたら、各項目の設定をしていきます。
プロフィール設定
記事をどのような人が書いているかをアピールできるプロフィールの設定はマストですね。
まずはじめにプロフィール画像の設定方法を解説いたします。
プロフィール背景・画像
画像はカスタマイズ画面から追加・変更ができます。
プロフィール文・SNSアイコンの設定
プロフィール文はWordpress管理画面から設定をすると自動的に反映されるようになっています。
またプロフィール欄のSNS項目へURLを入力するとアイコンが設置されるようになるので、アカウントを持っている人は設定しましょう。
広告・ボタンを設置
アフィリエイトリンクやバナーを表示したい人は、「カスタムHTML」にHTMLを入力をすれば、リンク画像が表示できるようになります。
サイドバーのタイトルのデザイン
サイドバーのタイトル欄もデザインの変更ができるので、見やすい設定に変更しましょう。
カテゴリーメニュー設定
ほとんどの人がサイドバーにカテゴリーメニューを設定しています。
この設定はヘッダー・フッターの設定と同じ方法です。
カテゴリーはサブカテゴリーも階層表示ができるので、入れ子にしたいときは「ドラッグアンドドロップ」で図のように設定しましょう。
サイドばーカテゴリーのデザイン
回送表示にするときのデザインを変更することもできます。
背景色や矢印のデザインもサイトに合わせて設定してみましょう。
SUGOI MOKUJI（すごいもくじ）の設定
ここまででサイトのデザイン設定は終わりですが、AFFINGERの特典である「SUGOI MOKUJI（すごいもくじ）」の設定方法も解説いたします。
目次の表示設定
目次を適切に設定するとサイトからの離脱を防げるので、この設定を参考にカスタマイズしてみてください。
アンカーリンクのスクロール設定
目次とは異なりますが、HTMLを記述するとアンカーリンクの設定ができます。
このアンカーリンクも目次と合わせて「スムーズ・スクロール効果」をJavascriptを記述して実装しましょう。
AFFINGER管理画面の【その他】から「コードの出力」へ、下記のコードをコピペすればOKです。
script
<script>
// ヌルヌルスクロール
jQuery(function(){
// #で始まるアンカーをクリックした場合に以下が動作
jQuery('a[href^="#"]').click(function(){
var speed = 800;// スクロール速度 msec
var href = jQuery(this).attr("href");// アンカーの値取得
var target = jQuery(href == "#" || href == "" ? 'html' : href); // 移動先を取得
var position = target.offset().top - 100; // 移動先を数値で取得（固定ヘッダーがかぶるので位置調整）
jQuery('body,html').animate({scrollTop:position}, speed, 'swing'); // ヌルヌルスクロールする
return false;
});
});
</script>
まとめ：一度マネをしてからカスタマイズがおすすめ
いかがでしたか。
少しでもお力になれたら幸いです。
それでは失礼いたします。