AFFINGER

AFFINGER5の初期設定まとめ【写真付きで誰でもできる!】

鷲の飛んでいる姿

悩む学生
ついにAFFINGER5を購入しました!だけど、何から始めたらいいか分かりません。最初にしたらいいことを教えてください。できればサクッと終わらせて、早く記事を書きたい。

 

今回はこんな悩みを解決します。

 

アフィンガー5を買ったはいいものの、初期設定は何からいじればいいのかわかりませんよね。

 

ぼくもネットの知識なんてなかったので、めっちゃ苦労しました。
リットン

 

そこで、今回はAFFINGER5購入後の初期設定について、写真付きで詳細に解説します。

 

本記事を見れば、初期設定の方法が分かり、さくっと記事を書き始められるようになりますよ。

 

絶対できるので最後まで見てくださいね!
リットン

 

AFFINGER5の初期設定まとめ

to doリストにチェックする人

 

AFFINGER5を購入後にすべき初期設定は下記のとおりです。

 

AFFINGER5の初期設定

  1. 初期値の保存
  2. パーマリンクの設定
  3. タイムゾーンの設定
  4. サイトのタイトル設定
  5. Googleとの連携
  6. プラグインの導入と設定
  7. サイトのカラー設定
  8. 見出しの設定
  9. フォントの設定
  10. 会話吹き出しの設定
  11. SNSの設定
  12. トップページのカスタマイズ

 

 項目は多いですけど、ほぼクリックするだけの作業なので、とくに難しいことはありません。

 

詳しいことはいいから、初期設定だけ知りたいって人は黄色のマーカーだけ見てください。

 

AFFINGER5の初期設定初期値の保存

 

AFFINGER5管理→はじめに→保存をクリック

 

アフィンガー5の初期値の保存

 

なんで保存するの?という人もいるかもですが、テーマの初期値を設定するためです。保存すると、この後の設定がきちんと反映されます。

 

AFFINGER5の初期設定パーマリンクの設定

 

設定→パーマリンク設定→投稿名にチェック

 

アフィンガー5のパーマリンク設定

 

 理由は後述しますが、この設定は後から変更するのはよくありません。必ず最初にしておきましょう。

 

パーマリンクは、URLの灰色のマーカーの部分。
https://lytton-diary.com/affinger-toppage-customize/

 

投稿名にチェックしておくことで、ページごとのURLを自分で決められるようになります。このURLがほかの設定では、意味不明な文字列になることもあるので推奨しません。

 

悩む学生
なんでダメなんですか?

 

意味不明な文字列だと、検索した読者が怪しんで見てくれなく可能性もあります。
以下の2つなら前者の方が読者にもなんとなく内容が伝わりやすいし、安心するでしょう。

  • https://lytton-diary.com/affinger5-first-setting/
  • https://lytton-diary.com/p=344555/

  

後からパーマリンクを変更すると記事の評価がリセットされるので、必ず投稿名にチェックしておきましょう。

 

AFFINGER5の初期設定タイムゾーンの設定

 

設定→一般→タイムゾーン→東京

 

アフィンガー5のタイムゾーン設定

 

東京の設定にしておきましょう。

 

AFFINGER5の初期設定サイトのタイトル設定

 

設定→一般→サイトのタイトルとキャッチフレーズ

 

アフィンガー5のサイトのタイトル設定

 

これは後から変更できるので、とりあえずでもかまいません。タイトルとキャッチフレーズはブログの上の方(ヘッダーエリア)に表示されます。

 

アドバイスとしては、できればほかの人と被らないようにしましょう。印象に残って、あなたのサイト名で検索してくれる人も増えやすくなります。

 

AFFINGER5の初期設定Googleとの連携

 

GoogleアナリティクスとGooglerサーチコンソールの設定をします。

 

アナリティクスの管理→トラッキング情報→トラッキングIDをコピー→AFFINGER5管理→Googe・l広告/AMP→IDを張りつけ

 

アフィンガー5のアナリティクス設定

 

アナリティクスのコードは、Googleアナリティクスにログイン→左下にある歯車の管理→プロパティ→トラッキング情報→トラッキングコードから確認できます。

アナリティクスのトラッキングコード取得

 

Googleアナリティクスを導入しておけば、サイトの閲覧数や滞在時間などを確認できます。

 

注意すべきは、AFFINGER5以外の箇所にアナリティクスのコードを張りつけてはいけないということです。二重計測というエラーが起きて異常数値が計測されます。

 

Googlerサーチコンソールに関しては、アナリティクスと連携させる場合は、AFFINGER5でやることはありません。

 

ぼくはアナリティクスと連携させています。方法は下記の記事を参考にしてみてください。
サーチコンソールとアナリティクスの連携方法

 

AFFINGER5の初期設定プラグインの導入と設定

 

プラグイン→目的のプラグインの新規追加・設定

 

プラグインとは、WordPressの機能を拡張させるためのものです。例えば、この記事の目次もプラグインがなければ、作れていません。

 

プラグインはブログ運営を快適にするためには、必須となります。ただし、AFFINGER5に適したプラグインでなければ、バグを起こす可能性もあります。

 

不具合に恐れることなく、ブログをしたい人はこちらの記事を参考にしてください。
AFFINGER5におすすめのプラグインを紹介【すべて公開】

 

AFFINGER5の初期設定サイトのカラー設定

 

AFFINGER5管理→デザイン→カラーパターンで好きな色にしましょう。

 

affinger5の色の設定

 

この設定でサイトの全体的なカラーを決めてくれます。ただし、外観→カスタマイズから自分で好きなように変更できるので、とりあえずの設定でもかまいません。

 

ちなにみに、当サイトは青にしてます。
リットン

 

AFFINGER5の初期設定見出しの設定

 

外観→カスタマイズ→各テキストとhタグからH2タグとH3タグを優先でカスタマイズしましょう。

アフィンガー5のhタグの設定

H2タグは大見出し、H3タグは小見出しの役割を持っています。サイトデザインの雰囲気をわりと左右する箇所です。

 

悩んだ人は以下のように設定しておけば、ダサくなりませんよ。

  • どちらもデザインは左ラインデザイン
  • ボーダー色はお好みでH2なら背景色を薄い色、H3の背景は真っ白にする

 

AFFINGER5の初期設定フォントの設定

 

AFFINGER5管理→デザイン→フォントサイズと種類からお好みで変更しましょう。参考にこのブログの設定を紹介します。

 

アフィンガー5のフォント設定

 

基本の部分はPCなら17か18px、スマホなら16か17pxがおすすめです。

 

フォントの種類は、当サイトは下記のものを利用しています。下記の文字列をコピーして、その他(優先)のところに張りつけてください。 

[/] 
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", "Hiragino Kaku Gothic ProN", "メイリオ", meiryo, sans-serif;

 

アフィンガー5のフォントの種類

 

デフォルトならメイリオの設定になります。とくにこだわりのない人はメイリオでもまったく問題ありません。

 

もし、マナブログさんに憧れてブログを始めた人は、下記の文字列をコピーすればフォントが似たものになりますよ。

 

[/] 
font-family: Noto, Hiragino Sans,Helvetica,Arial,sans-serif;

 

AFFINGER5の初期設定会話吹き出しとファビコンの設定

 

 ファビコンの場合は、AFFINGER5管理→会話・ファビコン等から画像のアップロードをしましょう。

アフィンガー5のファビコン設定

 

吹き出しはAFFINGER5管理→会話・ファビコン等→会話風アイコンで画像のアップロードと、アイコン名を入力しましょう。

 

会話ファビコンの設定画面の図

 

ファビコンとはこの部分。設定しておいた方が、読者の印象にも残りやすく、リピーターになってくれる可能性が高まります。

 

会話吹き出しは、多くても3種類までに設定しましょう。

 

悩む学生
なんで吹き出しを設定するの?

 

ブログからお堅い感じを排除してくれます。さらに詳しく知りたい人は、こちらの記事を参考にしてください。
AFFINGER5の吹き出しの作成とカスタマイズ方法【超簡単】

 

AFFINGER5の初期設定SNSの設定

 

AFFINGER5管理→SNS→Twiter設定

 

アフィンガー5のTwitter設定

 

自分のTwitterアカウントがある人は、アカウントのユーザー名を入力しましょう。

 

ちなみに、こちらの記事にブログでのTwitter利用に関して、知っておくべきことを紹介しています。
【AFFINGER5】簡単にツイッターカードを表示させる方法

 

AFFINGER5の初期設定トップページのカスタマイズ

 

サイトのトップページ全体のカスタマイズです。

 

後でいくらでも変えられますが、最初にすましておけばサイトの見栄えもよくなります。

 

見栄えがあまりにも酷いと、訪問者は「うわ。なんかいやだな、戻ろう。」となるので、最低限は整えましょう。また、サイトの使いやすさも訪問者の離脱に影響します。

 

AFFINGER5のトップページのカスタマイズ方法【写真付き】を見れば、見栄えも使いやすさもある程度は担保されたトップページができて、離脱も防げますよ。

  

AFFINGER5の初期設定をして記事を書こう

山を見つめる人

 

今回はAFFINGER5購入後の初期設定について、説明しました。初期設定をまとめておくと、下記のとおりです。

 

AFFINGER5の初期設定

  1. 初期値の保存
  2. パーマリンクの設定
  3. タイムゾーンの設定
  4. サイトのタイトル設定
  5. Googleとの連携
  6. プラグインの導入と設定
  7. サイトのカラー設定
  8. 見出しの設定
  9. フォントの設定
  10. 会話吹き出しの設定
  11. SNSの設定
  12. トップページのカスタマイズ

 

AFFINGER5は初心者に難しいところもあるかもしれませんが、1つずつ丁寧に作業してみましょう。情報も多くほとんどの問題が解決するはずです。

 

ちなみに、ぼくのTwitterに質問をくださってもかまいません。分かる範囲で答えますよ。
リットン

 

そして、初期設定が済んだら、早速記事を書いてみましょう。

 

今回は以上です。ありがとうございました。

関連記事AFFINGER5のトップページのカスタマイズ方法【写真付き】

関連記事AFFINGER5におすすめのプラグインを紹介【すべて公開】

-AFFINGER

Copyright © Lytton Blog