今回は、AFFINGER(アフィンガー)の使い方をガッツリまとめます。
一気に覚えるのは大変なので、目次を見ながら少しずつマスターしてくださいね!
>>【W特典!】AFFINGERの体験レビュー・導入手順【忖度なし】
記事作成の前に…【最低限設定しておくべきポイント】
AFFINGERの使い方に入る前に、最低限設定しておくべきポイントを3つだけ解説します!
その①:パーマリンクの設定
パーマリンクとは、記事のURLに使う文字列で、記事の内容を表すかんたんな言葉にするのがおすすめです。
設定→パーマリンクから「投稿名」に変更。
記事編集画面の「URL」から入力できます!
一度下書き保存しないとパーマリンクは表示されないので、覚えておいてくださいね!
その②:アイキャッチ画像の設定
アイキャッチ画像とは、その記事のイメージ画像のことで、トップページやブログカードで表示されます。
投稿タブのアイキャッチ画像に画像をドラック&ドロップ。
画像が反映されます
その③:カテゴリーの設定
カテゴリ分けしておくと、後から上のように分けられます。
投稿タブ「新規カテゴリを追加」からカテゴリを追加し、チェックマークをつける。
下書き保存後、プレビュー画面でジャンル分けされているか確認しましょう!
AFFINGERの使い方【記事を書く際に使える機能】
それでは、AFFINGERの使い方をみていきましょう!
記事作成は、まずこのボタンをクリック
まずはこちらから新規記事を作成しましょう!
見出しの作成方法
上のような見出しを設定していきます。
見出しにしたい文字を選択し「見出しボタン」をクリック。
「見出し」をクリックすると変更される。
見出しの種類を変更する場合は↓。
見出しの色の変更方法
「外観」→「カスタマイズ」→「見出しタグ(hx)/テキスト」をクリック。
変更する見出しを選択し、色を変更。
ボタンリンクの設定方法
ボタンリンクの設定方法をみていきましょう!
左上の「+マーク」→「カスタムボタン」をクリック。
ボックスが挿入されるので、見出しを消し「未設定」に変更。
丸みを「0」に変更し背景色を「灰色」、ボーダー色を「白」に変更。
ボックス内に文字を打ち込む。
文字を選択し「中央ぞろえ」と「太字」に変更。
左上の「+マーク」→「カスタムボタン」をクリック。
ボタンが配置されるので、ブロックタブからテキストを入力。
リンク先URLにアフェリエイトリンクを貼る(なければ「#」のままでOK)、幅を100に変更。
ボーダー太さを「1」、丸みを「5」に変更。
色をカラーコードを用いて変更する。変更方法はこちら。
以下のように設定する。
- 背景色1:#43A047
- 背景色2:#66BB6A
- ボーダー:81C784
- ボタンシャドウ:#388E3C
プレビューで実際にボタンが作成されているか確認しましょう!
ちなみに、一度つくったらコピペで使い回せますよ。
コピペの方法は超かんたんですが、やり方が気になる方はこちらをクリックしてください!
会話吹き出しの作成方法
以下のような会話吹き出しを設定します。
始めにこちらからアイコン画像を名前を設定しておきます。(8個まで設定可能)
吹き出しの背景色は外観のカスタマイズ→オプション→会話ふきだしから設定可能
左上の「+マーク」→「会話ふきだし」をクリック
吹き出しが配置されます。アイコンの種類と向きの変更は以下のボタンから可能です。
画像の挿入方法
画像の挿入方法を解説します。
挿入したい箇所に画像をドラック&ドロップ。(コピペでもOK)
画像が挿入されます。(右側の「枠線」をクリックすると画像が見やすくなるのでおすすめ)
以下の3つのボタンはよく使うので覚えておきましょう!
ボックスの作成方法
ボックスとは、上のような囲みのことで、これがあると記事がわかりやすくなります。
左上の「+」マークからマイボックスをクリック。
ボックスが挿入されるのでタイトルを入力し、アイコンを「未設定」に変更。
枠線丸み、タイトルの色を変更。
続いてボックス内の文章を追加します。
ボックス内の左上の「+マーク」からリストをクリック。
以下のボタンからリストを選択。
以下の画面から「チェックB」に変更。
改行でリストを追加し。表を作成して完成!
ブロックの背景色の変更方法
上のような背景色があるボックスを作成します。
左上の「+」マークからマイボックスをクリック。
ボックスが挿入されるのでタイトルを消し、アイコンを「未設定」に変更。
枠線の太さと丸みを「0」にし、背景色も薄黄色へ変更。
先ほどと同様にリストを追加すれば完成です。
文字の装飾方法
文字の装飾方法を解説します。
文字を選択し、鉛筆マークをクリック。
装飾イメージは以下の通りです。
文字にリンクを貼る方法
文字にリンクを貼る方法を解説します。
文字を選択しリンクマークをクリック。
リンクを入力し「Enter」で完了です!
スペーサで行間を広くする方法
スペーサを挿入し行間を広くする方法を解説します。
左上の「+」マークからスペーサをクリック。
スペーサが挿入されます。高さは設定タブから変更可能。
テーブルの挿入方法
以下のような表の挿入方法を解説します。
左上の「+マーク」からテーブルをクリック。
カラム数と行数を入力し「表を作成」をクリック。
表が挿入されるので各セルに入力して完成させましょう!
ブログカードの挿入方法
以下のようなブログカードを挿入する方法を解説します。
事前に挿入する記事のIDを確認しておきましょう。(IDは投稿ページの↓から確認できます)
左上の「+マーク」からクラシックをクリック。
ツールバー切替ボタンからカード→IDを入力・readmoreをoffにする。
プレビュー画面で挿入されていることを確認します。
一度つくったブロックはコピペで使い回せます!
一度作成したブロックはコピペすることが可能です。
必要に応じて使用してください!


AFFINGERの使い方【トップページの設定方法】
最後に、トップページの設定方法をみていきましょう!
ブログタイトル・キャッチフレーズの変更方法
ブログタイトルとキャッチフレーズの設定方法を解説します!
設定から「サイトのタイトル」と「キャッチフレーズ」を入力。
下へスクロールし「変更を保存」をクリック。
サイトタイトルとキャッチフレーズが変更されていることを確認。
背景色・文字色と変えたい場合は↓。
メニューボタンの配置方法
メニューボタンとは、この部分。
「外観」→「カスタマイズ」→「メニュー」→「メニューを新規作成」。
分かりやすい名前を入力→「ヘッダーメニュー」を選択し「次」→「+項目を追加」。
カテゴリを選択するのがおすすめ→「公開」をクリック。
メニューボタンが配置されているのを確認しましょう!(複数ボタンを配置したい場合、この作業を繰り返してください!)
メニューボタンの背景・文字色を変えたい場合は↓。
ヘッダーカードの設定方法
ヘッダーカードの設定方法を解説します。
AFFINGER管理→「ヘッダー下/おすすめ」からヘッダーカード情報を入力。
右上の「Save」をクリック。
ヘッダーカードが設定されていることを確認します。
プロフィールカードの設定方法
プロフィールカードの設定方法を解説します。
「外観」→「ウィジェット」→「プロフィール」をサイドバーウィジェットの一番上へドラック&ドロップ。
名前とプロフィールは、「ユーザー」→「プロフィール」で設定。
アイコン画像とプロフィール画像は、「外観」→「カスタマイズ」→「オプション」→「プロフィールカード」をクリック。
ヘッダー画像とプロフィール画像を設定し「公開」。
プロフィールカードが設定されたことを確認してください!
人気記事の表示方法
人気記事の設定方法は、下記の通り。
「AFFINGER管理」→「ヘッダー下/おすすめ」をクリック。
「人気記事」(何でもOKです)入力→記事IDを順番に入力→「再度のスクロールに表示する」にチェック→「Save」。