こんにちは "osaboo"
です。"@osaboo_Bot"
AFFINGER6（アフィンガー6）を購入・インストールしたけど…
何からやればいいの？→ 初期設定って？？
WordPressテーマ『AFFINGER6』を使ってブログ運営を始める初心者さん向けに、AFFINGER6の初期設定で最初にやるべき14項目を分かりやすくご紹介します。
＼ 最低限「これだけはやっておくべき！」AFFINGER６の初期設定20項目を厳選しました。^^／
それではご覧ください！
＼初心者でも安心！ コスパ最強の洗練されたWordPressテーマ／
＼＼『すごいもくじLITE』が付いてくる！限定特典キャンペーン実施中！／／
- 少しづつ増え続ける当サイトオリジナル特典付！-
AFFINGER6の初期設定→インストール後にまずやること！
AFFINGER6のインストールが完了したら、いろいろな設定をする前にまず！以下の2つの初期設定をしましょう。
AFFINGER管理→はじめに→Save【その1】
- AFFINGER6の初期値が設定します。
以下の「はじめに（必ずお読みください）」の画面で『Save』をクリックします。（赤枠部）
※ 本記事の設定では『AFFINGER管理』のメニューを編集します。
ロリポップレンタルサーバーをお使いの方は、ドメインの『WAFの設定』を一時的に無効 にしてください。◀︎『403 Error』が出た場合。
-
-
AFFINGER6＆ロリポップ！レンタルサーバー『403 Error』が出た時の対処方法！
ロリポップ！レンタルサーバーを使用してAFFINGER6（ACTION)のヘッダー等の表示系をカスタマイズするとセーブ時に『403 Error』が表示されセーブできない！ こんな時はロリポップユーザー専用ページにログインしてWAFの設定を無効にするだけ！
- AFFINGER管理の『はじめに』タブの内容は必ず、読んでおきましょう。
パーマリンク設定の更新【その2】
- AMP用のURLを生成するためのものでアップデート毎に必要です。
以下の「パーマリンク設定」の画面で『変更を保存』をクリックします。（赤枠部）
- 個人や小規模サイトには、カスタム構造『/%postname%/』（赤破線部分）の使用を推奨します。
AFFINGER6の初期設定→AFFINGER管理でやること！
この章では、AFFINGER管理画面で最初に設定すべき初期項目を厳選してご紹介します。
各設定項目は以下のメニューで開きます。
以下の「AFFINGER管理」画面が表示されます。
左側のタブメニューに含まれる設定項目を厳選してご紹介いていきます。
それでは順番に見ていきましょう。イメージしやすい順番で解説していきますね。^^／
AFFINGER管理の各設定を変更したら！必ず、『Save』をクリックしましょう。
サイト全体のカラー設定【その3】
サイト全体のイメージを簡単に設定できます。
「細かく設定するのが煩わしい」「設定はそこそこで早く記事を書きたい」
と、いう方は…カラーパターンで好みの色を選択すると良い感じにまとまるので試してみてください。
「サイトのイメージカラーが決まっていない」「記事を書きながら少しづつ整えていきたい」と、いう方は、以下の設定で始めましょう。おすすすめ
以下のラジオボタンを選択します。
- カラーパターン
- 『リセット』ラジオボタンを選択します。
- デザインパターン（カスタマイザーの初期値及びリセット値）
- 『ブログ』ラジオボタンを選択します。
サイト全体のカラー設定：補足
- カラーパターンでは、カスタマイザーで細かく設定できる各セクションのカラーを自動的に割り当ててくれます。（設定後、カスタマイザーから変更できます）
- デザインパターンでは、主にサイドバーの見出しデザインが変更されます。
カラーバリエーションやデザインのイメージを確認したい方は以下の記事をご覧ください。
-
-
AFFINGER 管理【全体設定】タブのサイト全体の設定を完全解説！AFFINGER6
AFFINGER6の管理画面で行う『全体設定タブ：サイト全体の設定』の各設定項目を完全解説。設定項目と表示イメージを画像付きでご紹介。「設定場所と表示イメージがわからない？」そんな悩みを解決します。
サイトのカラー設定について…以下の記事で詳しくご紹介しています。「あわせてご覧ください」
カラー設定からメニューまで一気に設定したい方はこちら！
-
-
AFFINGER6 カスタマイズ！メインカラーとデザイン＆メニュー編
AFFINGER6をインストールしたけど、どこからカスタマイズすれば良く解らないという方必見です。インストール直後の画面から「サイト全体のデザイン」や「メニュー」等、AFFINGER6標準のテンプレート機能を使って簡単デザイン！カスタマイズ手順をご紹介。
アイキャッチ設定【その4】
AFFINGERのデフォルト設定ではアイキャッチ画像が非表示になっているため、表示を有効に設定します。
また、アイキャッチ画像とタイトルの表示順を、一般的な上下関係に整えておきましょう。
以下の箇所にチェックを入れます。
- アイキャッチ画像の表示を全ての記事で有効化する（デフォルトは上部）→『ON』
- アイキャッチ画像をタイトル下表示に変更する→『ON』
アイキャッチ画像：補足
ブログのアイキャッチ画像は、記事の内容を視覚的に伝える重要な要素です。
- 記事の第一印象を左右する
- アイキャッチ画像は、読者が記事をクリックするかどうかを判断する大きなポイントです。魅力的な画像は目を引き、アクセス数の向上につながります。
- 内容を分かりやすく補足
- 画像を使うことで記事のテーマや内容を直感的に伝えられます。特に視覚的に情報を受け取りたい読者に有効です。
- SNSでの拡散効果を高める
- SNSで記事をシェアする際、アイキャッチ画像が表示されるとクリック率や拡散率が向上します。
- サイト全体のデザインを統一
- 適切なアイキャッチ画像を使用すると、ブログの見た目が整い、ブランドイメージの向上にもつながります。
結論として、アイキャッチ画像は記事の魅力を高め、アクセス数や読者の関心を引くために欠かせない要素です。
アイキャッチ画像画像は、表示するの一択です。
アイキャッチ画像の作り方について…以下の記事で詳しくご紹介しています。「あわせてご覧ください」
-
-
WordPressブログのアイキャッチ画像【作り方・適正サイズ・画像編集ソフト】調べてみた！！
初めてでも10分でできるアイキャッチ画像の作り方をご紹介。おすすめな無料画像の検索サイトや無料で使える画像編集ソフトをご紹介。WordPressを使ったブログ記事への貼り付け手順を"1"から解説。適切な画像サイズと注意すべき点など初心者必見です！！
投稿日（更新日）【その5】
記事には、投稿日だけでなく更新日も表示することで、記事の鮮度をユーザーにアピールできます。
- 更新されていない記事はマイナス効果となるので注意しましょう。
当サイトでは、2024/11/20 現在以下のように設定しています。（参考）
更新日を重視するため、投稿日は見栄えを考慮して非表示に設定しています。
以下の箇所にチェックを入れます。
- 記事一覧・関連記事一覧の投稿日（更新日）を非表示にする →『ON』
- 更新日のみ表示する（投稿日は表示しない）→『ON』
更新日が表示される設定がおすすめです。「投稿日と更新日」の両方もOKです」
スマホスライドメニュー【その6】
スマホのスライドメニューは、絶対あった方が良いです！
細かい設定は後でOKですが…ここでの設定は、忘れがちなので…先にやっておきましょう。
こんな感じで表示されます。
スマホスライドメニュー（クローズ）
スマホスライドメニュー（オープン）
以下の箇所にチェックを入れます。
- 下層リンクを最初から開く →『ON』
検索アイコン【その7】
スマホスライドメニューに項目の中に『検索アイコン』があります。とても便利なので追加しておきましょう。
以下の箇所にチェックを入れます。
- スマホヘッダーに検索アイコンを追加する →『ON』
スマホメニューの表示設定を完璧に仕上げたい方は、以下の記事を参考にしてみてください。
AFFINGER 管理【メニュー】タブについて…以下の記事で詳しくご紹介しています。
「あわせてご覧ください」
-
-
AFFINGER 管理【メニュー】タブのメニュー設定を完全解説！AFFINGER6
AFFINGER6の管理画面で行う『メニュータブ：メニュー設定』の各設定項目を完全解説。設定項目と表示イメージを画像付きでご紹介。「設定場所と表示イメージがわからない？」そんな悩みを解決します。
フォントサイズ【その8】
フォントのサイズは、各サイトの構成（記事のスタイル）によってさまざまです。
記事のスタイルによって、的確な設定値が変わるので…おすすめしにくい点がありますが、基盤となる部分の参考変数をご紹介します。
設定できる部分が超たくさんあってびっくりするかもしれませんが…
大丈夫ですよー（^^／
まず、はじめに定番となる部分のサイズのみ変更して様子を見ましょう。『基本（Pタグ 他）』が最重要です。
デフォルトでは以下のように薄い文字で枠欄に表示されています。
- 重要部を赤枠でマーキングしています。
A フォントのサイズ：補足
はじめにいじりすぎると、混乱してしまうので、『基本（Pタグ 他）』のサイズと行間を決めてから、少しずつ調整すると良いと思います。
基本（Pタグ 他）のサイズは、『16 or 17』が一般的です。参考
記事を幾つか書いてから、表示バランスを確認して調整しましょう。
- 記事の書き方・作り方で調整する必要があります。
改行の頻度と余白量・スペーサーブロック・グループブロックなどの使い方で見栄えが変わるのであなたの記事の書き方・作り方に合わせて調整しましょう。「少しづつで大丈夫です。^^／」
フォントのサイズや行間についてもっと詳しく知りたい方は、以下の記事を参考にしてみてください。
-
-
AFFINGER6 カスタマイズ【サイトデザインの設定ポイントをまとめてみた！】
AFFINGER６を使った！オリジナリティーと機能性をアップさせるために必要なカスタマイズ箇所と設定方法をご紹介。サイトデザインの設定ポイントを『トップページ・フォント・サイドバー』に分けて解説。初心者さん向けに丁寧に解説しています。
-
-
AFFINGER6 カスタマイズ！段落(Pタグ)下の余白と行間・他要素との間隔調整方法
AFFINGER6の初心者向け！フォントのサイズと行間の設定方法と段落（Pタグ）下の余白の設定方法など記事の文章を綺麗に表現するために必要な設定方法をご紹介。「スペーサーブロックの乱用防止・Gutenberg 設定のグループブロック」についても解説。記事における文章表現をほぼ解決できます。
記事一覧（サイドバーの新着記事一覧）【その9】
デフォルトで表示されるサイドバーの新着記事一覧は、表示していないサイトが多いので、非表示にする設定をご紹介します。
以下の箇所にチェックを入れます。
- トップページのサイドバーの新着記事一覧を非表示にする →『ON』
- 下層ページのサイドバーの新着記事一覧を非表示にする →『ON』
記事一覧（サイドバーの新着記事一覧）：補足
記事が少ないうちは、サイドバーに新着記事一覧を表示してボリュームを補うのも効果的です。記事が増えてきたら、おすすめ記事や人気記事を表示することで、SEO効果が向上します。その際、上記の設定を活用してください。
トップページのタイトルとメタディスクリプション【その10】
トップページのタイトルとメタディスクリプションの設定がAFFINGER管理画面でできます。
WordPressのデフォルトを簡単に変えることができるのでおすすめです。
- Googleなどの検索エンジンで表示されるトップページのタイトルやスニペット（メタディスクリプション）をこの設定で自由に設定できます。
- スニペット：検索エンジンの結果に表示される要約情報
あなたのサイトは、何を配信しているのかアピールしましょう。
こんな感じです。
以下の箇所を入力します。
- トップタイトルを書き替え（ここに記述したタイトルが優先されます）
- 全角25文字を目安にまとめましょう。おすすめ
- トップ用のメタキーワード（複数ある場合は半角カンマ「,」で区切る）
- メタキーワードは、不要とされていますが…3〜5個を入力しても良いと思います。
- トップ用のメタディスクリプション
- 全角120文字前後でまとめましょう。おすすめ
トップページのタイトルとメタディスクリプション：補足
Googleなどの検索エンジンで表示される検索結果は自動生成されるため、設定したテキストがそのまま表示されない場合があります。
X 旧Twitter設定【その11】
ブログをSNSで紹介できるようにしましょう。「X 旧Twitter設定」の項目をご紹介します。
目立つ表示と注目度アップにためには、「カードスタイルで大きく表示して、ハッシュタグをつける」の2つです。
以下の箇所の入力とラジオボタンを選択します。
- @以下の『アカウント名』を入力します。
- 一貫性のあるハッシュタグを入力します。複数の場合はカンマで区切ります。
- ツイートするときにハッシュタグをつけられるので設定しなくてもOKです。
- 『大（summary_large_image）』ラジオボタンを選択します。
キャッチフレーズ【その12】
サイトタイトル（ロゴ画像）の上や下にキャッチフレーズを表示したくないということも「まま」あるので…
非表示設定をご紹介します。PCとスマホ（タブレット含む）が個別に設定できます。
以下の箇所にチェックを入れます。
- ヘッダーにキャッチフレーズを表示しない →『ON』
- ヘッダー（及びフッター）にキャッチフレーズを表示しない →『ON』
AFFINGER6の初期設定→カスタマイザーでやること！
この章では、WordPress管理のカスタマイザーで最初に設定すべき初期項目を厳選してご紹介します。
カスタマイザーの各設定項目は以下のメニューで開きます。
カスタマイザーが起動して、以下の画面が表示されます。（左側）
それでは順番に見ていきましょう。
全体カラー設定【その13】
全体カラー設定では、AFFINGER管理のカラーパターンを基に、さらに細かい調整が行えます。
- 全体カラー設定を使わず、各項目を個別に設定することも可能です。
カスタマイザーが起動すると、画面左側に以下（左端）のメニューが表示されます。
『全体カラー設定』をクリックして、全体カラー設定（詳細）を開きます。
全体カラー設定→
赤破線部を設定します。
全体カラー設定（詳細）
上画面の「赤枠破線部」の4つのカラーを設定することで、より詳細にカラーを変更できます。また、簡単設定を使用すると、ぱんくずの文字や見出し背景の色（色付きの場合はテキストの色）が自動的に白色変更されます。AFFINGER管理で設定したカラーパターンで色選択している場合、簡単い綺麗に設定できると思います。
上画面の「赤枠破線部」の4つのカラーを設定することで、さらに詳細な色調整が可能です。簡単設定を使用すれば、パンくずリストの文字色や見出し背景色（色付きの場合は文字色）が自動的に白に変更され、統一感のあるデザインを簡単に設定できます。
- カラーパターンの色によっては、文字の色が見にくい場合があります。（個別に調整が必要）
あらかた、いい感じにできたら、記事を書きましょう。
カラー設定は、少しずつでOKですよ！注ハマらないように！「ハマった人筆者（笑）」
初心者さんには、「設定名称・設定箇所・反映場所」が把握しにくいため、以下の記事を参考に設定してみてください。
-
-
AFFINGER6 カスタマイズ【細かすぎる色の設定】わかりにくいを解決「まとめてみた！」
AFFINGER6のカスタマイザー「全体カラー設定で、色設定に対する反映場所がわからない！」を解決。「キーカラー？メインカラー？サブカラー？テキスト（一部）？」の設定箇所と反映場所をサンプル画像でわかりやすく解説。AFFINGER6の初心者必見です！
見出しタグ（hx）/ テキスト【その14】
記事を書く上で、見出しタグ（hx）/ テキストのカスタマイズはとても重要です。
AFFINGER6は、カスタマイザーの拡張性が高いので、「記事中の見出しタグ・サイドバーの見出し・ぱんくず」など、サイトに表示されるほとんどのパーツのデザインやカラーを自由に設定できます。
特に記事の構成に不可欠な見出しタグ（H2〜H5）は、早めに！好みに合わせて！設定しましょう。
カスタマイザーが起動すると、画面左側に以下（左端）のメニューが表示されます。
『見出しタグ（hx）/ テキスト』をクリックして『大見出し・中見出し・小見出し・小見出し』から編集するブロックを選択して設定します。
見出しタグ（hx）/ テキスト→
赤破線部を設定します。
見出しタグ（hx）/ テキスト（詳細）
＼初心者でも安心！ コスパ最強の洗練されたWordPressテーマ／
＼＼『すごいもくじLITE』が付いてくる！限定特典キャンペーン実施中！／／
- 少しづつ増え続ける当サイトオリジナル特典付！-
まとめ！AFFINGER6 初期設定｜ブログ運営を加速する最初にやるべき14項目「厳選してみた！」
AFFINGER6で、ブログ運営を加速させるために最初にやるべき初期設定14項目を厳選してご紹介しました。
記事を書き始める前に設定しておきたい項目を厳選しているので、少しでも早く記事を書きたい初心者さんには特にお役に立つのではないでしょうか。
AFFINGER6は、拡張性が高く、自由にカスタマイズできるので、カスタマイズに凝り出してしまうと…ブログ本来の記事作成がおろそかになってしまいます。「注意してくださいね。^^」この記事が、ブログのスタートアップにお役に立てば嬉しいです。
「最後まで、ご観覧いただきありがとうございました。」
また、次の記事で…お会いしましょう。＼^^／
