初心者ブログ

画像32枚でAFFINGER6の設定を解説◇真似するだけでデザインが1時間で完成!

affinger-setting

こんな人におすすめ

  • AFFINGER6(アフィンガー)の設定が細かくて分からない
  • 誰かの設定を参考にサイトのデザインをしたい
  • どのようなデザインの設定ができるか知りたい!

 

このようにAFFINGER6の設定に困っている人・購入を悩んでいる人へお届けいたします。

 

はじめまして、なべけん(@yochi_career)と申します。

 

副業としてブログを更新しており、ブログ歴2年で350記事以上を書いています。

 

ブログを始めたときは無料テーマでしたが、アフィンガー6を使いはじめてデザインを設定するとページ滞在時間が約3分もアップしました。

 

アフィンガーを使うデメリットの1つに「サイトの設定が難しい」ことがありますが、この記事を読めば1日かからずに設定ができます!

 

WordPressに使い慣れていない人でも、真似するだけで簡単に「よちきゃり」のような滞在率アップするデザインを設定する方法をご紹介いたします。

 

\ AFFINGERなら簡単にプロ級のサイトに! /

今すぐ購入する

一度購入すれば追加料金は一切なし!

 

AFFINGER6の設定で最初にやることと注意点

 

AFFINGER6は設定項目がたくさんあり、基本的にはどこから手を付けても良いです。

 

ですが2つだけ最初にやるべきことがあるので、まずはこれを実践しましょう。

 

hello worldを消す

 

アフィンガーをインストールしたばかりのときは、「Hello world!」というダミーの投稿があります。

 

hello world削除

 

これが残っているとGoogleからのSEO評価が下がってしまうので、初めに投稿を消すところから初めましょう。

 

「Hello world!」をゴミ箱へ

 

投稿を消す方法は簡単で、Wordpressの「投稿一覧」から対象の記事を「ゴミ箱へ移動」をクリックします。

 

hello wordl!を消す2

 

これだけの作業で、「Hello World!」の投稿が消えました。

 

hello world削除結果

 

403エラーが出るときの対処法

 

AFFINGERの設定をしていると、ロリポップサーバーを使っている人は403エラーが出てしまうことがあります。

 

このときはほとんどレンタルサーバーのセキュリティ設定が原因なので、設定を変更してサイトのカスタマイズをしましょう。

 

レンタルサーバーの管理画面へログイン

 

まずはサイトのの管理画面へログインして、設定状況を確認します。

 

確認をする箇所は、「セキュリティ」の「WAF」という設定項目についてです。

 

WAF設定を無効化する

 

ここでは、わたしが使っているロリポップサーバーの管理画面で説明いたします。

 

このようにWAF設定を変更できる項目があるので、AFFINGERで設定するときは「無効にする」を選択して保存しましょう。無効化したあと10分後から設定が適用されます。

 

ロリポップWAF設定

 

編集後に有効へ戻す

 

AFFINGERの設定後に「WAFを有効」に戻して保存すればセキュリティもOKです。

 

WAF設定を有効に戻してもAFFINGERの設定は保存されているので、イチから設定し直すことはありませんのでご安心ください。

 

\ 国内シェアNo.1のロリポップ! /

ロリポップはこちら

 

ヘッダー(サイト上部)のデザインを変更

 

サイトのヘッダーは訪問した人が最初に見るところなので、印象に残るデザインに変更しましょう。

 

ここで印象に残るデザインができると、改めて検索・訪問してくれるリピーターを増やすことができますね。

 

ヘッダーの色を変更

 

画像を表示させたいときは設定不要ですが、画像がないときは色の設定をしましょう。

 

ヘッダー色変更

 

ヘッダーのキャッチフレーズ削除

 

サイトのロゴを設定すると、キャッチフレーズのフォントが悪い意味で浮いてしまうので非表示設定をしています。

 

キャッチフレーズの設定をしなくても表示されなくなりますが、検索結果に表示されなくなってしまうので、「AFFINGER管理画面」から非表示の設定をしましょう。

 

キャッチフレーズ非表示

 

キャッチフレーズを非表示にすると、ちょっと寂しいですがこのようになります。

 

キャッチフレーズ非表示サイト

 

サイトロゴの設定

 

他のサイトと差別化をするためには、イラストレーターやフォトショップでサイトロゴを作って設定するのがおすすめです。

 

シンプルなデザインでも、サイトを訪問した人の印象に残りやすくなりますね。

 

サイトロゴ設定

 

自分で作れない人は「ココナラ」がおすすめ

coconala

引用:ココナラHP

 

ココナラは、さまざまなジャンルの個人の専門家に仕事の依頼をするサービスです。

 

わたしのプロフィール画像も「ココナラ」でデザイナーさんに依頼をして作成してもらいました。

 

ココナラ

ココナラの利用画面

 

実際に依頼をする前に見積もりができ返金保証もあるので、はじめての人でも安心して利用できますね。

 

「ココナラ」でプロから添削!

無料登録する

無料登録で割引クーポンゲット!口コミが充実してるから安心♪

 

ヘッダーメニューをロゴの横へ配置変更

 

当サイトでは、ヘッダーメニューをロゴの横に配置するように設定をしています。

 

単色の部分が多くなるとデザインに時間を書けてない印象になり、初心者ブログと思われてしまうのです。

 

そのため単色部分を減らすために、ロゴの横にメニュー位置を設定しています。

 

AFFINGER管理からメニュー表示設定の変更

 

ヘッダーメニュー設定①

 

表示するメニューの設定

 

メニューに表示する項目を設定します。

 

ここではカテゴリーのみを設定していますが、固定記事などもメニューに設定ができます。

 

ヘッダーメニュー作成

 

ヘッダーメニュー追加

 

設定を終えると、このようにロゴの横にメニューの配置ができました。

 

ヘッダー横列メニュー設定

 

 

スマホ用メニューの変更

 

メニューの設定はスマホだと別の設定が必要なので、デザインの設定を「カスタマイズ画面」から変更します。

 

スマホメニュー

 

フッター(サイト下部)のデザイン設定

 

サイトのフッターもヘッダーと同様に設定が必須なところになります。

 

サイトマップや運営者情報などサイトのフッターに掲載することが多いので、それらをチェックしてもらえるデザインにしましょう。

 

フッターメニュー

 

フッターメニューもヘッダーと同様に、まずメニューの設定を行います。

 

フッターメニュー作成

 

フッターメニュー作成2

 

サイトロゴのフッター設置

 

作成したフッターメニューをフッターエリアに反映し、デザインの設定も行こないます。

 

フッター設定

 

トップページのデザイン設定

 

トップページのサイトが見やすいと、サイトの記事をクリックしてもらいやすいため見やすいデザインを設定しましょう。

 

おすすめ記事の表示設定

 

まずは、サイトに訪問してくれた人に読んでほしい記事を「おすすめ記事」として紹介するデザインを設定いましょう。

 

トップページの設定は「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=""]

 

カテゴリーアイコンのデザイン

 

設定当初の色合いだと非常に見ずらいため、サイトのイメージに合う色を設定するようにしましょう。

 

カテゴリーデザイン変更

 

タイトルのデザインを設定

 

タイトルの設定も最初の設定だと地味な印象を与えてしまいます。

 

これもカテゴリーと同様にサイトに合う色を設定しましょう。

 

h3デザイン変更(before)

 

h3変更

 

サイドバー(サイトの右側)のカスタマイズ

 

トップページが設定できたら、後はサイドバー・ウィジェットの設定をすれば終わりです。

 

 

 

サイドバーに追加したいメニューの設定

 

まずは、サイドバーに設置したい項目を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>

 

\ 簡単にプロ級のサイトが作れる /

今すぐ購入する

一度購入すれば追加料金は一切なし!

 

まとめ:一度マネをしてからカスタマイズがおすすめ

 

いかがでしたか。

少しでもお力になれたら幸いです。

それでは失礼いたします。

 

\ 簡単にプロ級のサイトが作れる /

今すぐ購入する

一度購入すれば追加料金は一切なし!

-初心者ブログ