- 他サイトでAffinger5(アフィンガー)がおすすめされていたけど使いこなせるか不安
- Affinger5を買ったけどどこから手をつけていいか分からない
- Affinger5のあの機能・デザインってどうやって使えばいいか分からない
この記事ではそんな悩みを解決します。
分からない方でも0からAffingerを導入できるよう、初期設定から順を追って説明していきますので、ぜひ参考にしてみてくださいね。
購入はこちらから
こちらもCHECK
Affigner5の初期設定方法
この部分では、最低限やっておきたいAffinger5の設定について説明します。
この設定が終われば、あとはそのまま記事を書きはじめられます。
次の流れで初期設定を行っていきます。
Affinger5の初期設定
- テーマをインストールして有効化する
- パーマリンクを設定(更新)する
- サイト全体のカラーを設定する
- ヘッダー画像を変更する
- Classic Editorのインストール
テーマをインストールして有効化する
まずはテーマをインストールして有効化します。
これでAffinger5を自分のブログに適用させることができます。
step
1自分のブログのWordpress管理画面にログインする
下の写真のような画面になればOKです。
管理画面のログインページが分からない方用
ログインページは「【自分のブログのURL】/wp-admin」です。
例えば、自分のブログが「https://blog.com」であれば、管理画面のログインページは「https://blog.com/wp-admin」になります。
ログインページにいくと、「ユーザー名またはメールアドレス」と「パスワード」の入力を求められます。
サーバーレンタルとドメイン取得をした後にWordpressのインストールしたと思いますが、そのときのユーザー名とパスワードを入力すればOKです。
これで管理画面にログインできると思います。
step
2[外観]-[テーマ]でテーマ一覧の画面に移動する
「外観」にカーソルを持っていき、「テーマ」をクリックします。
単に「外観」をクリックするだけでもOKです。
step
3[新規追加]-[テーマのアップロード]-ファイルを選択-[今すぐインストールする]
「新規追加」をクリックします。
続いて「テーマのアップロード」をクリックします。
「ファイルを選択」をクリックします。クリックしたら「affinger5.zip」を選びます。
最後に「今すぐインストール」をクリックします。
step
4テーマを有効化する
インストールが終わったら「有効化」をクリックしてAffinger5を有効にします。
テーマの一覧にページが移動するので、「WING-AFFINGER5」のテーマが「有効」となっていることを念のため確認しておきましょう。
これで「テーマをインストールして有効化する」は完了です。
パーマリンクを設定(更新)する
すでに設定している人も最後の「変更の更新」クリックは必要です。
パーマリンクは簡単に言うとブログ記事それぞれのURLのことです。
そのパーマリンクを設定(更新)します。
step
1[設定]-[パーマリンク設定]でパーマリンク設定の画面に移動する
WordPress管理画面の「設定」にカーソルを持っていき、「パーマリンク設定」をクリックします。
「設定」をクリックした後に「パーマリンク設定」をクリックでもOKです。
step
2パーマリンクの設定を行い「変更を更新」をクリックする
画像の通りに設定し、変更をクリックします。
- 「カスタム構造」にチェックを入れる
- 「/%postname%」と入力する
- 「変更を保存」をクリックする
これで「パーマリンクを設定(更新)する」は完了です。
サイト全体のカラーを設定する
続いてサイト(ブログ)全体のカラーを設定します。
step
1[AFFINGER5 管理]-[AFFINGER5 管理]で管理画面に移動する
WordPress管理画面で「AFFINGER5 管理」にカーソルを持っていき「AFFINGER5 管理」をクリックします。
単に「AFFINGER5 管理」をクリックするだけでもOKです。
step
2[デザイン]-カラーパターンとデザインパターンを選ぶ-[save]
「デザイン」をクリックして、好きなカラーパターンとデザインパターンを選びます。
選び終わったら「save」を押します。
カラーパターンでブログの雰囲気もガラッと変わるので、書きたい内容に合っていそうな色にするのがおすすめです。
カラーパターンを設定するとそれぞれ次のようなイメージになります。
赤（エレガント）
青（ビジネス）
緑（ナチュラル）
オレンジ（元気）
ピンク（可愛い）
グレー（ダーク）
赤（やさしい）
青（やさしい）
緑（やさしい）
オレンジ（やさしい）
ピンク（やさしい）
グレー（やさしい）
ここの色についてはで変更もできますし、自分でカスタマイズもできます。
今は深く悩まずに直感で選んで大丈夫です。
これで「サイト全体のカラーを設定する」は完了です。
ヘッダー画像を変更する
ヘッダー画像はブログのトップページにある横長の大きな画像のことです。
Affinger5では最初からヘッダー画像が設定されています。
ですので、非表示にするか、別のヘッダー画像を設定します。
今回はひとまず非表示にします。
step
1[外観]-[カスタマイズ]でカスタマイズ画面に移動する
WordPress管理画面で「外観」にカーソルを持っていき「カスタマイズ」をクリックします。
「外観」をクリックした後に「カスタマイズ」をクリックでもOKです。
step
2ヘッダー画像の設定画面に移動する
「ヘッダー画像」をクリックします。
step
3ヘッダー画像を変更する
今回はひとまず非表示にするので、「画像を非表示」をクリックします。
現在のヘッダーで画像未設定になっていることを確認して、「公開」をクリックします。
最後に「×」をクリックしてWordpress管理画面に戻ります。
これで「ヘッダー画像を変更する」は完了です。
Classic Editorのインストール
最後にClassic Editorのインストールを行います。
最新のWordpressのブログ記事作成画面は、以前の画面と比べて新しくなっています。
この新しくなってしまった記事作成画面を以前の画面に戻すのが「Classic Editor」です。
以前の画面の方がブログを書きやすいですし、他サイトの解説記事も以前の画面で作られているものが多いです。
何か不利になることもありませんので。新しい画面の方は慣れてきたら使いましょう。
step
1[プラグイン]-[新規追加]でプラグイン追加画面に移動する
WordPress管理画面で「プラグイン」にカーソルを持っていき「新規追加」をクリックします。
「プラグイン」をクリックした後に「新規追加」をクリックでもOKです。
step
2「Classic Editor」を検索する
画面右上にある検索窓に「Classic Editor」と入力します。
step
3「Classic Editor」をインストールして有効化する
「今すぐインストール」をクリックします。
少し待つとインストールが終わるので、「有効化」をクリックします。
有効化が終わると自動的にプラグインの一覧画面に移動します。
画面の通り「Classic Editor」が追加されていればOKです。
これで「Classic Editorのインストール」は完了です。
初期設定としてやっておきたい項目はこれで終わりです。
以下の項目は今は設定できない部分も多いですので、余力があるときにやっておけばOKです。
Affinger5でできればやっておきたい設定
ここからは「できればやっておきたい設定」についての説明していきます。
主に他サービスとの連携、ブログの完成度を上げる、後々のブログ運営を楽にするための設定です。
具体的には次の設定です。
やっておきたい設定
- Googleアナリティクス連携
- SNS設定
- グローバルメニュー設定
- カテゴリー設定(サイドバー)
- 子テーマのインストール
- 自動更新設定
Googleアナリティクス連携
Googleアナリティクスの登録が終わっていることが前提です。
ここの設定をしておけば、Googleアナリティクスでブログのアクセス解析をすることができます。
[AFFINGER5 管理]-[AFFINGER5 管理]-[Google 広告/AMP]-[アナリティクスコード（トラッキング ID）]でトラッキングコードを入力します。
入力が終わったら「save」もしくは「保存」をクリックして完了です。
SNS設定
Twitterのアカウントを持っていることが前提です。
ここの設定をしておけば、Twitterでブログ記事を紹介したときにカード形式で表示されるようになります。
例えばこんな感じです。
『アドセンス落ちた』という方に向けて、審査に合格するためのポイントをまとめてみました。
一発合格者100人のデータからも分析してます。
（たまにはこんな記事も書いていいよね。）https://t.co/K7tMlrh7Mo
— しょうりん (@shorin_1234) October 24, 2019
[AFFINGER5 管理]-[AFFINGER5 管理]-[SNS]-[Twitterアカウント@：]にTwitterのアカウント(@なしで)を入力します。
入力が終わったら「save」をクリックして設定完了です。
グローバルメニュー設定
ある程度ブログ記事が増えてきてから設定するのをおすすめします。
グローバルメニューはブログのトップページにあるバーみたいなものです。
下の画像で囲ってある部分がグローバルメニューです。
step
1[外観]-[メニュー]でメニューの設定画面に移動する
step
2メニューを作成する
メニュー名に「グローバルメニュー」と入力して、「メニューを作成」をクリックします。
step
3グローバルメニューに設定したいページを追加する
追加したいページにチェックを入れて、「メニューに追加」をクリックします。
追加したページについては、クリックすることで表示する名前を変えることができます。
step
4ヘッダー用メニューにチェックを入れ、メニューを保存する
これでグローバルメニューの設定は完了です。
カテゴリー設定(サイドバー)
ある程度ブログ記事が増えてきてから設定するのをおすすめします。
ここではブログのサイド(横側)にカテゴリーを表示させる設定をします。
画像で囲ってある部分です。
step
1[外観]-[メニュー]でメニュー画面に移動する
step
2メニューを作成して保存する
「新しいメニューを作成しましょう」をクリックします。
メニュー名に「サイドメニュー」と入力して、「メニューを作成」をクリックします。
追加したいカテゴリーや記事を追加して、「サイド用メニュー」にチェックを入れる。最後に「メニューを保存」をクリックします。
step
3ウィジェットの設定を行う
[外観]-[ウィジェット]をクリックします。
「01_STINGERサイドバーメニュー」をサイドバーウィジェットの枠にドラッグ&ドロップします。
これで「カテゴリー設定(サイドバー)」は完了です。
子テーマのインストール
Affinger5で用意されているカスタマイズ以外で、自分でがっつり(CSSを書いたりして)カスタマイズする人は絶対にやっておいた方がいい設定です。カスタマイズする予定がない人はやっておくのが無難、くらいの設定です。
子テーマは簡単にいうと、親テーマ(Affinger5)の機能を継承したうえでカスタマイズできるテーマです。
親テーマを直接カスタマイズしてしまうと、親テーマがアップデートされたときにカスタマイズが全て消えてしまいますよね？
一方で、子テーマの方をカスタマイズするようにしておけば、親テーマがアップデートされてもカスタマイズは消えません。
なのでカスタマイズをがっつり行う予定のある方は設定した方がいい、ということです。
[外観]-[テーマ]-[新規追加]-[テーマのアップロード]-[ファイルを選択(Affinger5の子テーマを選ぶ)]-[今すぐインストール]-[有効化]で設定完了です。
自動更新設定
自動更新設定はAffingerのアップデートがあった場合に、通知と更新を行うようにするための設定です。
この機能はうまく動作しない場合があるので、下記の公式アカウントをフォローしてTwitterで更新情報を確認できるようにしておくことも大事です。
[AFFINGER5 管理]-[AFFINGER5 管理]-[その他]-[テーマのアップデート更新通知(β)]に移動します。
その後、更新通知パスワードを入力、有効化にチェックを入れて「保存」で設定完了です。
Affinger5でよく使う記事装飾
ここでは主に記事を作成するときの装飾機能について説明します。
具体的には次の装飾です。
よく使う装飾をピックアップしています。
よく使う記事装飾
- ボタンを入れる
- ブログカードを入れる
- 会話吹き出しを入れる
- 手順の説明を入れる
- ボックスデザインを入れる
ボタンを入れる
ボタンはたくさん用意さていて、主に下記のようなものがあります。(色や形は自分でカスタマイズできます。)
詳しくはコチラすでに用意されているものを利用する場合は、[ツールバー切り替え]-[タグ]-[カスタムボタン]から好きなものを選択できます。
自分でカスタマイズする場合は、次の場所に値を入れていきます。
| url | 移動先ページのURL |
| title | ボタンの文字 |
| color | 文字の色 |
| bgcolor | ボタンの下側の色 |
| bgcolor_top | ボタンの上側の色 |
| bordercolor | ボタンの枠の色 |
| borderwidth | ボタンの枠の幅 |
| borderradius | ボタンの角の丸み具合 |
| fontsize | ボタンの文字の大きさ |
| shadow | ボタンの影の色 |
| ref | 光るボタンのON/OFF(on：光る、空欄：光らない) |
ブログカードを入れる
ブログカードは下記のようなものです。
[ツールバー切り替え]-[カード]で追加することができます。
追加後に、「id=””」の部分に設定したい記事のidを入力します。
idは下記の画像の通り[投稿]-[記事一覧]で確認できます。
会話吹き出しを入れる
吹き出しは下記のような会話形式にしたい部分で使う装飾です。
まず、吹き出しに設定したい画像を[メディア]-[新規追加]でアップロードします。
アップロードしたファイルを開くと画像のリンク(URL)が分かるので、コピーしておきます。
初期設定は[AFFINGER5 管理]-[会話・ファビコン等]から行います。
アイコン名(空欄でもOK)と、先ほどコピーした画像のURLを貼り付けて「アップロード」をクリックし、画面下の「保存」をクリックします。
あとはブログ作成画面で[ツールバー切り替え]-[タグ]-[会話ふきだし]から、先ほど設定した番号の会話を選びます。
吹き出しの向きを逆にする場合は、「st-kaiwa1」を「st-kaiwa1 r」とすればOKです。
また、吹き出しの色やデザイン変える場合は[外観]-[カスタマイズ]-[オプションカラー]-[会話風ふきだし]から設定可能です。
手順の説明を入れる
手順を説明するときは下記の装飾が便利です。
step
1流れを説明するときに使う
追加する方法は[ツールバー切り替え]-[タグ]-[テキストパーツ]-[ステップ]で追加できます。
Stepの番号を変えたい場合は、step_no=”1″ の部分を変えればOKです。
デザインを変えたい場合は、[外観]-[カスタマイズ]-[オプションカラー]-[ステップ/ポイント]から設定可能です。
ボックスデザインを入れる
ボックスデザインは下記のような装飾です。(色などはカスタマイズできます。)
メモ
メモを書くときによく使う
ポイント
ポイントを書くときによく使う
チェックリスト
- ポイントを説明するときによく使う
- ポイントを説明するときによく使う
簡単な流れ
- 流れを説明するときによく使う
- 流れを説明するときによく使う
すでに用意されているものを利用する場合は、[ツールバー切り替え]-[タグ]-[ボックスデザイン]から好きなものを選択できます。
自分でカスタマイズする場合は、次の場所に値を入れていきます。
| color | ボックスタイトルの色 |
| bordercolor | ボックスの枠の色 |
| borderwidth | ボックスの枠の太さ |
| title_bordercolor | ボックスタイトルの下線の色 |
応用編：Affingerの便利な機能とカスタマイズ
最後に応用編として、便利な機能を中心に紹介していきたいと思います。
具体的には次の通りです。
便利な機能
- 色を細かく変更する
- 好きな位置にアドセンスを一括で入れる
- 管理者紹介を入れる
色を細かく変更する
Affinger5管理画面で全体の色を設定できますが、細かく設定することも可能です。
設定は[外観]-[カスタマイズ]から行うことができます。
- メニューのカラー設定
- 各テキストとhタグ(見出し)
- オプションカラー
上記それぞれで色やデザインをカスタマイズ可能です。
好きな位置にアドセンスを一括で入れる
見出しの前にアドセンスを入れるには、[AFFINGER5 管理]-[Google・広告/AMP]から設定できます。
アドセンスのコードを入れたあと、チェックを入れて保存を押せばOKです。
見出し以外の場所に一括で設定する場合は、[外観]-[ウィジェット]で、テキストを一括表示させたい場所の枠にドラッグ&ドロップします。
その後、アドセンスのコードを入力すればOKです。
管理者紹介を入れる
管理者紹介はブログの運営者を表示させるための設定です。
画像で囲っている部分ですね。
まずは[ユーザー]-[あなたのプロフィール]に移動します。
次にニックネームと各種SNSのプロフィールページ(あれば)、プロフィール情報を入力して「プロフィールを更新」をクリックします。
次に[外観]-[カスタマイズ]-[オプションカラー]-[サイト管理者紹介]に移動します。
「プロフィールカードに変更」にチェックを入れて、画像(2種類)を設定し「公開」をクリックすればOKです。
まとめ
今回はAffinger5に関する使い方を書いてみました。
紹介した項目は下記の通りです。
Affinger5の初期設定
- テーマをインストールして有効化する
- パーマリンクを設定(更新)する
- サイト全体のカラーを設定する
- ヘッダー画像を変更する
- Classic Editorのインストール
やっておきたい設定
- Googleアナリティクス連携
- SNS設定
- グローバルメニュー設定
- カテゴリー設定(サイドバー)
- 子テーマのインストール
- 自動更新設定
よく使う記事装飾
- ボタンを入れる
- ブログカードを入れる
- 会話吹き出しを入れる
- 手順の説明を入れる
- ボックスデザインを入れる
便利な機能
- 色を細かく変更する
- 好きな位置にアドセンスを一括で入れる
- 管理者紹介を入れる
思ったよりも項目が増えてしまい、作成するのが大変でしたが、初めての方や困っている方の参考になれば幸いです。
購入はこちらから
こちらもCHECK
コメント