- AFFINGER5購入から導入までの方法がよくわからない。
- 初心者でも簡単にできる方法を知りたい。
こんな疑問を解決します！
本記事のテーマ
初心者でも数分でできるAFFINGER5導入方法
実はこのブログもAFFINGER5で作ってます。一度導入を経験しているので注意点も分かります。
今回は初心者でも簡単にできるように図解付きなので安心して読んでください。
本記事の内容
- テーマ購入・ダウンロード
- テーマ有効化
- AFFINGER5の初期設定
- 初心者がデザインカスタマイズする際、知っておくと便利な情報
この記事を読むことで、失敗せず安心してすぐにテーマ導入までできると思います。
早く記事を書きたい！そんな人は最後までご覧ください。
目次
テーマ購入・ダウンロード
まずは、AFFINGER5公式HPにアクセスしましょう。
続いて、画像のご購入はこちらをクリック。
次に購入画面へ遷移するので下のどちらか当てはまるボタンから購入手続きを行ってください。
購入手続きが完了したら下記のメールが届きます。
AFFINGERのダウンロードは14日以内と決まっているので、購入者マイページからインフォトップにログインし、すぐにダウンロードしましょう。
ダウンロードは矢印の「注文履歴 ダウンロード」から行います。
購入した物が表示されるのでダウンロードボタンをクリックします。
Zipファイルがダウンロードされます。
テーマ有効化
WordPressでのテーマ有効化方法について説明します。
AFFINGERをダウンロードしたら、「.zip」ファイルを解凍しましょう。
macOSの最新版「Catalina（カタリナ）」ではzipファイルが開けない問題が発生しているようです。解決方法はこちらをご覧ください
解凍すると下記のようなフォルダとテキストが5つ出てきます。
- Gutenberg用プラグイン
- WordPressテーマ
- クレジット削除プラグイン
- 必ずお読みください
- 特典
今回有効化していく物は「WordPressテーマ」に入ってる下記の2つです。
- affinger5-child.zip
- affinger5.zip
こちらは解凍せずそのまま WordPressにアップロードしていきます。
「外観」＞「テーマ」にアクセスし、新規追加をクリック。
テーマのアップロードをクリックし「affinger5.zip」、「affinger5-child.zip」をファイルから選択しインストールしましょう。
無事インストールが完了したら「affinger5-child」のみ有効化をクリック。
以上でテーマの有効化は終了です。
次にAFFINGER5の初期設定を行います。
AFFINGER5の初期設定
AFFINGER5有効化後にやるべきことを説明します。
それは以下3つです。
- パーマリンクの設定
- Google Analyticsとの連携
- Google Search Consoleとの連携
どちらも簡単にできるので安心してください。
パーマリンク設定
パーマリンクとは、記事ごとに設定したURLのことです。
例えば、https://bndk2019.com/brain-matome-b-relief/なら赤文字がパーマリンクになります。
この設定によりパーマリンクを変更しても他のページに貼られているリンクが無効にならないなどの効果があるので最初に設定しておきます。
WordPressサイドバーで「設定」＞「パーマリンク設定」を選択
カスタム構造にチェックを入れ「/%postname%」に書きかえてください。
「変更を保存」したら以上でパーマリンク設定が完了です。
Google Analyticsとの連携
GoogleAnalyticsでは、登録したサイトのユーザーの行動に関するデータがわかるため、データをチェックすることで、自分のサイトの改善点が見えてきます。
WordPressサイドバーで「AFFINGER5管理」＞「AFFINGER5管理」＞「Google連携/広告」を選択
「アナリティクスコード（トラッキング ID）：UA-」という項目に、Google Analyticsのトラッキング IDの「UA-」以下の数字を貼り付けましょう。
入力後、「save」を押しテキストボックスが消え、あらたに「削除」というチェックボックスが出ていたら完了です。
Google Analyticsのトラッキング IDの確認方法は、Google Analyticsのサイドバー「管理」＞「プロパティ設定」で確認できます。
Google Search Consoleとの連携
Google Search Consoleではあらゆる視点からサイト管理ができるため、パフォーマンス向上に役立てることができます。
同じようにWordPressサイドバーで「AFFINGER5管理」＞「AFFINGER5管理」＞「Google連携/広告」から設定できます。
「サーチコンソールHTMLタグ」という項目に、Google Search ConsoleのHTMLタグを貼り付けましょう。
※僕は設定済みのため貼り付けられないですが、本来は画像枠内にてテキストボックスが出ています。
Google Search ConsoleのHTMLタグの確認方法は、Google Search Consoleのサイドバー「設定」＞「プロパティ設定」＞「所有権の確認」＞「HTMLタグ」から調べられます。
最後に「save」を押したら完了です。お疲れ様でした。
初心者がデザインカスタマイズする際、知っておくと便利な情報
ここからはAFFINGER5のデザインをカスタマイズする際に、知っておくとスムーズに作業ができること３つを伝えます。
実際に知らなかった僕は問題に陥ったので参考に取り組んでみてください。
カスタマイズしたい場所の名称を覚える
僕は知識０でブログを始めたのでどこをいじれば何が変わるかが分かりませんでした。
ただAFFINGER5の「購入ユーザー専用ページ」にはカスタマイズする際のマニュアルがあります。
その情報を元に作業を進めれば良いんですが名称を知らないため、検索しても欲しい情報に中々辿り着けませんでした。
なので同じような知識量でカスタマイズをしようと思っている人は、まずサイトのカスタマイズしたい場所の名称を覚えましょう。
欲しい情報が手に入れば、あとは指示に従って操作すれば大丈夫です。
マニュアルで分からない事はGoogle検索を使う
僕の場合メニューバーの横幅が100%にならないという事象が起こりました。
こういった場合の対処方法はマニュアルには記載されておりません。
ただ、同じような悩みを抱えた人が必ずいると思ったのでGoogle検索を使用したところ、解決策を見つけることができました。
このようにカスタマイズ時はマニュアルにも載ってない予期せぬハプニングが発生します。
その際は焦らずGoogle検索を使えば、案外解決しますので参考にしてください。
この場合にもきちんと名称を知っていることがとても重要です
Twitterを利用する
Twitterにはブログの達人が沢山います。
そのため、悩みのタネを伝えることで教えてくれる事もあります。
また、僕がTwitterを利用して一番助かったのは、メンタル面です。
初心者は毎日障害にぶつかるため、その度に気分が下がりますがTwitterでは同じ状況の人が沢山いるので、悩みを共有でき励まし合いながら進めます。
なので壁にぶつかった時は、呟いてみるのも効果的です。
まとめ
AFFINGER5を導入してからサイトへの愛着もわき、執筆がとても楽しくなりました！
サイトをカスタマイズして行くととてもワクワクするので、その成果をTwitterで発信するのも良いと思います。
沢山の人に自慢できるサイトができると良いですね。
その時は僕にも教えてください。
それでは、良いブログライフを！