AFFINGER6

AFFINGER6の初期設定【やった方がいい!おすすめ20項目】

2021年10月17日

疑問

AFFINGER6(アフィンガー6)を購入したけど、どの設定をすればよいのかわからない。何からはじめればいいの?

AFFINGER6では設定できる項目が多いので、慣れないうちは初期設定だけでかなりの時間を使ってしまいます。

最低限やっておいた方がいい「おすすめ20項目」を紹介します。

AFFINGER6をインストールしたらやること2つ

いろいろな設定をする前に忘れがちな初期値の設定をしましょう。

「AFFINGER 管理」>「はじめに」に移動して、「最初にまずSaveを1回クリックして下さい(初期値が設定されます)」にある「Save」ボタンをクリックします。

また、「設定」>「パーマリンク設定」に移動して「変更を保存」ボタンをクリックして「パーマリンクの更新」も完了させます。

この2つはマニュアルにもあるのでインストールしたらやりましょう。

AFFINGER6の設定で「AFFINGER 管理」でやる項目

AFFINGER6の初期設定で左メニューの「AFFINGER 管理」でやる項目を紹介していきます。

自分に必要ないところは設定不要です。

【1】アイキャッチ画像の設定

初期状態では、アイキャッチ画像は非表示になっています。

下層ページの先頭で画像を表示させたい場合は、設定変更が必要です。

「AFFINGER 管理」>「投稿・固定記事」>「アイキャッチ設定」の項目に移動します。

下記の2つにチェックを入れて保存します。

  • アイキャッチ画像の表示を全ての記事で有効化する(デフォルトは上部)
  • アイキャッチ画像をタイトル下表示に変更する

メモ

下層ページでは表示させない方が、直帰率や離脱率は減少します。

パソコンの場合はインパクトがなくなりますが、モバイルからの流入がメインの場合は、ない方がいいかもしれません。

【2】記事の更新日付の表示

記事に表示する日付は、投稿日付だけでなく更新日付も表示することで、記事の鮮度をユーザーに伝えることができます。

「AFFINGER 管理」>「投稿・固定記事」>「投稿日(更新日)」で、更新日がある場合のラジオボタンを【両方表示する(※一覧を除く)】にします。

【3】スマホでメニューを表示

スマホでサイトを見る場合、左手に持って操作は右手が多いので、メニューは右側にあった方が使いやすいです。

「AFFINGER 管理」>「メニュー」>「スマホ用スライドメニュー」にある【メニューの位置】で「右」を選択します。

AFFINGERでメニューを右にする

【4】スマホで検索ボタンをヘッダーに表示

パソコンの場合は、検索ボックスをサイドメニューに表示できますが、スマホの場合は上の方にあると便利です。

スマホで検索ボタン(検索アイコン)をヘッダーに表示させる場合は、下記のように設定します。

「AFFINGER 管理」>「メニュー」>「スマホ用スライドメニュー」にある検索アイコン項目で【スマホヘッダーに検索アイコンを追加する】にチェックをいれます。

【5】フォントのサイズ

コンテンツ内のスマホ、タブレット、PCの場合のフォントサイズを指定します。

「AFFINGER 管理」>「全体設定」>「フォントのサイズ」で設定できます。

そのままでも使えますが、PCの場合の基本(Pタグ他)が小さく、行間がややつまった感じがするので修正するといいです。

このサイトでは以下の設定を行っています。

スマートフォン

・【基本(Pタグ他)】サイズ:17px

タブレット

・【基本(Pタグ他)】サイズ:17px

PC

・【基本(Pタグ他)】サイズ:17px
・【基本(Pタグ他)】行間:32px
・【H2タグ】サイズ:25px
・【H2タグ】サイズ:21px
・【H4タグ】サイズ:17px

【6】下層ページの新着記事を非表示にする

何もしていなければ、下層ページのサイドバーに、新着記事一覧が自動で表示されます。

他のサイトメニューに表示したものよりも上に表示されるので、非表示にする方法を知っておくと便利です。

「AFFINGER 管理」>「トップページ」>「記事一覧」で下記の2つにチェックを入れます。

  • トップページのサイドバーの新着記事一覧を非表示にする
  • 下層ページのサイドバーの新着記事一覧を非表示にする

【7】トップページのタイトルとデスクリプションを設定する

トップページのタイトルとメタデスクリプションが設定できます。

「AFFINGER 管理」>「SEO」>「SEO関連設定」で、【トップタイトルを書き替え】と【トップ用のメタディスクリプション】のテキストボックスを修正します。

【8】タイトルからサイト名を削除する

何もしていなければ、タイトル(titleタグ)にサイト名が自動で追加されてしまいます。

設定で非表示にできます。

「AFFINGER 管理」>「SEO」>「SEO関連設定」で、【投稿及び固定記事タイトルの末尾にサイト名を追加しない】にチェックを入れます。

ページのソース(Chromeの場合はCtrl+U)を開いて「<title>」と検索し、サイトタイトルが表示されていないか確認できます。

指名検索が多い場合はいいかもしれませんが、タイトルの文字数が増えてキーワード効果が薄まるので、非表示がおすすめです。

【WPデフォルトのタイトル出力を使用する(プラグインで操作したい場合など)】を選択してもサイト名が消えないことがあります。

ただし、このデフォルト出力を使うと「All in one SEO」や「Yoast SEO」を使っていた場合に、titleタグが2重で表示されるのを防ぐことができます。

【9】ツイッターカードを使えるようにする

ツイッターカードを設定すると、自分のブログURLをツイッターに貼り付けた時に、画像やタイトルなどをカード形式で表示できます。

「AFFINGER 管理」>「SNS / OGP」>「Twitter設定」で、「Twitterアカウント@」に自分ツイッターの@マーク以下を入力して保存します。

  • 「ハッシュタグの設定」は必須ではありません。
  • Twitterカードサイズは「大」を設定。

この設定だけだとトップページのURLを貼り付けた場合は「no-image」が使われてしまいます。

トップページ用のツイッターカード画像設定は、【トップページ(投稿・固定ページ以外)アイキャッチ画像】でできます。

ページのソース(Chromeの場合はCtrl+U)を開いて「twitter:image」と検索し、表示したい画像が設定されていれば完了です。

もしくは、Card validatorというツールを使って確認することもできます。

【10】ヘッダー部分のキャッチフレーズを消したい

ロゴの上に表示されるキャッチフレーズを消すことができます。

「AFFINGER 管理」>「ヘッダー」>「ヘッダーエリア」で、【ヘッダーにキャッチフレーズを表示しない】にチェックをいれます。

「スマホ(タブレット含む)のみ」と「PCのみ」のそれぞれでチェックを入れます。

「PCのみ」にチェックを入れるとフッターのキャッチフレーズも消えます。

「PC・スマホ共通」にある設定では、ロゴとキャッチフレーズの両方が非表示になってしまいます。

もう一つ方法があります。

「外観」>「カスタマイズ」>「サイト基本情報」の「キャッチフレーズ」を削除します。

その他、ロゴとキャッチフレーズの上下を入れ替えたい場合は、「PC・スマホ共通」にある「サイト名とキャッチフレーズを上下反対にする(フッター連動)」にチェックをいれると変更できます。

【11】Googleアナリティクスを設定する

Googleアナリティクスの設定は、AFFINGER6で可能です。そのため、All-in-One-SEOなどのプラグインのインストールは必要ありません。

「AFFINGER 管理」>「Google・広告 / AMP」で、「アナリティクスコード(gtag.js)」に自分の「UA-」または「G-」を含むトラッキングIDを入力します。

このままだと自分のアクセスもページビューとしてカウントされるので、自分のIPアドレスは除外設定しましょう。

自分のIPアドレスからのアクセスは除外する方法

まずは、「自分のIPアドレス」を確認します。

次にGoogleアナリティクスの画面で左下の「管理」をクリックし、ビューにある「フィルタ」を選択します。

「ビューにフィルタを追加する」画面で以下の設定を行い保存します。

Googleアナリティクスで自分のIPを除外させる設定

  • フィルタ名:自分のIPアドレス除外(分かりやすい名称)
  • フィルタの種類:カスタム(除外)
  • フィルタフィールド:IPアドレス
  • フィルタパターン:先ほど調べた自分のIPアドレス

設定できたかどうかは、Googleアナリティクスの「アクティブユーザーのリアルタイム」モニタリングで確認できます。

ただし、除外設定は即時に反映されるわけではないので、時間をおいてから確認しましょう。

【12】サイト全体のカラー設定

サイト全体のカラー設定は、「AFFINGER 管理」と「外観」でできます。

「AFFINGER 管理」では、すでにある色から選択し、「外観」では自分の指定した色で設定できます。

「AFFINGER 管理」の場合は、下記の場所で設定します。

「AFFINGER 管理」>「全体設定」>「カラーパターン」で、すでにあるカラーを選択できます。

メモ

「AFFINGER 管理」のカラーパターンを設定したい場合は、「外観」>「カスタマイズ」>「全体カラー設定」の「簡単設定を使用する」の項目では、【使用しない(管理画面で選択したカラーが初期値になります)】を選択しないと反映されません。

ついでに下にある「デザインパターン」を設定しましょう。

「AFFINGER 管理」>「全体設定」>「デザインパターン(カスタマイザーの初期値及びリセット値)」で変更できます。

デザインパターンで設定できるのは下記の項目です。

あくまで、パターンの設定で色などの設定はここではできません。

デザインパターンで設定できること

  • カテゴリーやタグの背景形状
  • サイドメニューのタイトルの背景形状
  • hタグの背景形状>

「ブログ(初心者おすすめ)」が使いやすいと思います(このサイトはデフォルトを使っています)。

【AFFINGER6】決まった色からサイト全体の色を決める。デザインパターンも一緒に選ぶ

もう一つの色の設定方法が、「外観」で設定する方法です。

自分で利用したい色が決まっている場合はこちらを使います。

「外観」>「カスタマイズ」>「全体カラー設定」で「キーカラー」「メインカラー」「サブカラー」「テキスト」の4つの色を設定します。

その下にある「簡単設定を使用する」で【 (3)初期値として設定:反映箇所のカラー初期値として登録されます】を選びます。

【AFFINGER6】自分で色を決める場合は「外観」の全体カラー設定から設定する

AFFINGER6の設定で「カスタマイズ」でやること

AFFINGER6の設定で「外観」>「カスタマイズ」でやることを紹介します。

【1】hタグの設定

hタグは、ユーザーにページの項目を分かりやすく伝えるために重要です。

初期設定のままでも使えますが、カスタマイズして見やすくすることもできます。

「外観」>「カスタマイズ」>「見出しタグ(hx)/テキスト」で設定できます。

【2】favicon(ファビコン)を設定する

AFFINGER6では、favicon(ファビコン)のことを「サイトアイコン」と呼んでいます。

「外観」>「カスタマイズ」>「サイト基本情報」で設定できます。

詳細な設定方法は下記の記事を参考にしてください。

AFFINGER6でfavicon(ファビコン)を設定する方法

【3】トップに戻るボタンの丸角をとりたい

ページを下にスクロールすると表示される「トップに戻るボタン」の丸角をとって四角にしたい場合の設定です。

「外観」>「カスタマイズ」>「オプション(その他)」>「TOPに戻るボタン」で、「ページトップボタンを丸くする」のチェックをはずせが四角にできます。

【4】ブログカードのラベルデザインをリボンにしたい

ショートコードで指定するブログカードのラベルのデザインを「たすき掛け」ではなく「リボンデザイン」に変える方法です。

「外観」>「カスタマイズ」>「オプション(その他)」>「ブログカード / ラベル」で、「ラベルデザイン」の選択を「リボンデザイン」に変更します。

【5】サイト全体の背景色の設定

「外観」>「カスタマイズ」>「基本エリア設定」>「背景色」で「背景色」を変更します。

初期値では、サイトの最背面にうすいグレー(#f2f2f2)が設定されています。

記事一覧や本文などの背景は白(#ffffff)、サイドメニューには最背面の色が使われています。

広がりを感じるデザインにしたいなら、全体を白にすると広がりがでます。

【6】ヘッダーの色を変えたい(メニュー以外)

「外観」>「カスタマイズ」>「基本エリア設定」>「ヘッダーエリア」で「背景色」と「背景色(グラデーション上部)」の色を変えます。

ロゴが背景色とうまくなじむように変更できます。

ただし、白にしてしまうとモバイル表示の時に、ヘッダーの文字が見えなくなってしまうので注意が必要です。

AFFINGER6の設定で「プラグイン」の追加

これだけは追加しておいた方がよい最低限必要なプラグインを紹介しています。

【1】sitemap.xmlを設定する

インデックスのためのsitemap.xmlは、プラグインを使って設定します。

「プラグイン」>「新規追加」で「Google (XML) Sitemaps Generator for WordPress」と検索して、「XML Sitemaps」プラグインを有効化します。

特に変更する箇所はありません。

「自分のドメイン/sitemap.xml」にアクセスすれば設定できているかを確認できます。

【2】目次を設定する

目次は、プラグインを使って設定します。

「プラグイン」>「新規追加」で「Table of Contents Plus」と検索して、「Table of Contents Plus」プラグインを有効化します。

表示条件は、2つ以上見出しがあるときにします。

また、「上級者向け」の設定を開いて、「見出しレベル」のh2~h4にチェックを入れ、h5とh6はチェックをはずします。

メモ

h5にチェックを入れると、ブログカードのタイトルが目次に表示されてしまいます。

AFFINGER6の初期設定+α

AFFINGER6の初期設定では、必須設定ではないけど設定しておくとよい「+αの要素」を紹介します。

スマホ表示の時にサイドバーを非表示にする

スマホ表示の時に、サイドバーを非表示(読み込み自体なし)にできます。

「AFFINGER 管理」>「全体設定」>「サイト全体のレイアウト」にある「スマホのサイドバーを非表示にする」にチェックを入れる。

サイドバーにプラグインを使っている場合は、表示速度は改善できます。

ただし、設定している広告やおすすめ記事なども表示されなくなるので注意が必要です。

サイドバーにお問い合わせボタンを追加

サイドバーにお問い合わせボタンを追加できます。

「外観」>「全体設定」>「ウィジェット」にある利用できるウィジェットから、「02_STINGER問い合わせボタン(ST-PRO)」をクリックして、サイドバートップかサイドバーウィジェットを選択する。

タイトルとURLを入力して保存します。

サイドバーに任意のボタンを追加

サイドバーに任意のボタンを追加できます。

「外観」>「全体設定」>「ウィジェット」にある利用できるウィジェットから、「06_STINGERオリジナルボタン」をクリックして、サイドバートップかサイドバーウィジェットを選択する。

タイトルとURLを入力して保存します。

背景色なども変更できますが、入力しない場合はサイトカラーが設定されます。

免責事項やプライバシーポリシーなどに使えます。

AFFINGER6の初期設定【おすすめ項目】

AFFINGER6をインストールした後に設定したほうがよい項目は、結構ありますが全部設定しなくても自分の必要なものを追加してください。

プラグインなどは必要に応じて追加が必要です。

おすすめのプラグイン

  • 画像のLazyLoadができる「Smush」
  • ショートコード作成「Shortcoder」
  • リビジョン管理「WP Revisions Control」
  • ログインページURL変更「WPS Hide Login」

-AFFINGER6
-,