AFFINGER5(アフィンガー 5)の使い方【記事装飾を使いこなそう！】

こういった疑問に答えます。

テーマの有効化がまだ終わっていない方はこちらの記事の最後の章で詳しく解説しています。まずはそちらをどうぞ。

関連記事

【初心者でも簡単】お洒落なブログへ大変身！AFFINGER5(アフィンガー5)の評判と体験談を紹介

続きを見る

テーマを有効化したけど初期設定が終わっていないという方は先にこちらをどうぞ。

関連記事

【初心者でも簡単】AFFINGER5(アフィンガー 5)の初期設定

続きを見る

この記事を書いている僕は、先日AFFINGER5(アフィンガー5)を導入しまして、最初は記事の装飾の多さに驚きました。
元々cocoonを使っていましたが、cocoonも記事装飾はかなり豊富です。
しかし、AFFINGER5(アフィンガー 5) はそれを超えます。いまだに使ったことのない装飾が山のようにありまして、さすが有料テーマって感じです。

僕もそうでしたが、最初はどうやって使えば良いのかがわからないと思います。
本記事では、AFFINGER5(アフィンガー 5)の使い方、記事装飾の方法をクラシックエディターとブロックエディター（Gutenberg）にわけて説明します。

この記事を読めば記事を基本的な使い方をマスターでき、さらに記事をおしゃれに装飾できるようになりますので是非じっくりご覧ください。

AFFINGER5(アフィンガー 5)吹き出しの設定

AFFINFER5(アフィンガー 5)の吹き出しを使用するためには、画像の登録が必要です。登録方法から呼び出し方を紹介します。

吹き出しの登録方法

AFFINGER5管理を選択

会話・ファビコンをクリック

名前入力→画像をアップロード

アイコンは８つまで登録できます！

保存して完了です！

【クラシックエディター】吹き出しの呼び出し方

『タグ』▶︎『会話ふきだし』▶︎アイコン選択

ショートコードの間にセリフを入力

デフォルトでは左側にアイコンが表示されます。
向きを変えたい場合は、前半の[ ]内の最後に『r』を入れると、右側になります。

以上で完了です！

【ブロックエディター（Gutenberg）】吹き出しの呼び出し方

『+』▶︎『STINGER』

『STINGER』が表示されない方は、Gutenberg用プラグインをインストールしましょう。
AFFINGER5をインストールした時にフォルダ内に入っています。

やり方わかんないよって方は、こちらの記事の『最低限必要なプラグイン』というところで解説していますので参考にしてください。

関連記事

【初心者でも簡単】AFFINGER5(アフィンガー 5)の初期設定

続きを見る

会話ふきだしを選択

アイコンを選択▶︎向きを選択▶︎セリフを入力

これで完了です！

AFFINGER5(アフィンガー 5)の使い方・装飾方法【クラシックエディター編】

まずは、クラシックエディターの使い方を紹介します。

プラグイン『Classic Editor』の導入

デフォルトではブロックエディターとなっているので、Classic Editorのプラグインをインストールして有効化しておきましょう。

プラグイン『TinyMCE Advanced』を導入

プラグイン『TinyMCE Advanced』を有効化していない方は、インストールして有効化しましょう。
TinyMCE Advancedとは、記事の編集画面を拡張するプラグインです。
簡単に言うと、記事装飾のボタンをデフォルトの状態より増やすことができます。必ず導入しましょう。

ただ、導入後にちょっとした設定が必要なので、こちらの記事のプラグイン導入の章をみて設定してみてください。

関連記事

【初心者でも簡単】AFFINGER5(アフィンガー 5)の初期設定

続きを見る

クラシックエディターの表示

AFFINGER5をインストールすると、デフォルトの状態だと記事編集画面がブロックエディター（Gutenberg）となっています。
クラシックエディターに変更する必要がありますので、手順を解説します。

WordPressのサイドメニューから『投稿』▶︎『新規追加』をクリック

こんな感じでブロックエディターの記事編集画面が表示されます。

右上のメニュー▶︎『旧エディターに切替』をクリック

これでクラシックエディターの画面になります

クラシックエディターでの記事の書き方・記事の装飾方法

基本的に赤枠の部分をメインで使用します。

どこのボタンにどんなデザインがあるのかは、『AFFINGER5記事作成用パーツ一覧』の記事にすべて掲載してあります。
これを見ればどんな記事パーツがどこにあるのかがわかりますので参考にどうぞ。

関連記事

AFFINGER5(アフィンガー 5)記事作成パーツ一覧

続きを見る

AFFINGER5(アフィンガー 5)の使い方・装飾方法【ブロックエディター（Gutenberg）編】

次に、ブロックエディター（Gutenberg）の使い方を紹介します。
デフォルトの状態でブロックエディターとなっているため、ダッシュボード左側のサイドメニューより、『投稿』▶︎『新規追加』でブロックエディターの画面での編集できます。

とはいえ、AFFINGER5の推奨はクラシックエディターです。ブロックエディターだけだと機能が足りないので、適宜クラシックエディターをミックスさせて記事を書いていく必要があります。
ここではその方法を紹介します。

プラグイン『TinyMCE Advanced』を導入

プラグイン『TinyMCE Advanced』を有効化していない方は、インストールして有効化しましょう。
TinyMCE Advancedとは、記事の編集画面を拡張するプラグインです。
簡単に言うと、記事装飾のボタンをデフォルトの状態より増やすことができます。必ず導入しましょう。

ただ、導入後にちょっとした設定が必要なので、こちらの記事のプラグイン導入の章をみて設定してみてください。

関連記事

【初心者でも簡単】AFFINGER5(アフィンガー 5)の初期設定

続きを見る

クラシックエディターでの記事の書き方・記事の装飾方法

それでは記事装飾の方法を解説します。

一般ブロック

ここでは、一般ブロックのよく使う部分だけ紹介します。

✔️段落
段落を追加するだけです。押せばわかります（笑）

✔️見出し
こちらも説明不要だと思いますが、H2〜H４まで選択可能です。

✔️画像
画像を挿入できます。

✔️リスト
リストを選択できます。また、リストをクリックすると右側サイドメニューに編集画面が表示されるので、アイコンを変えたり、
アンダーラインを引けたりします。

• サンプル
• サンプル

• サンプル
• サンプル

✔️クラシック版の段落
ブロックエディターでは、使用できないパーツもあります。（ブログカードなど）
そういった時に部分的にクラシックエディターを出現させることができます。

こんな感じで、クラシックエディターが挿入されます。
クラシックエディターの使い方も覚えなければなりませんので、本記事の【クラシックエディター編】の章を参考にしてみてください。

✔️引用
引用部分を囲みます。

サンプル

STINGER

ここでは、STINGERのよく使う部分だけ紹介します。
※STINGERのボタンが表示されない方は、プラグインを導入する必要があります。本記事の吹き出しの設定の部分でも触れていますのでそちらをご覧ください。

✔️マイボックス
右側の編集画面でアイコンの種類や、色を変更できます。

✔️見出し付きフリーボックス
右側の編集画面でアイコンの種類や、色を変更できます。

✔️メモ
右側の編集画面でアイコンの種類や、色を変更できます。

✔️バナー風ボックス
右側の編集画面でアイコンの種類や、色や背景画像・ぼかしなどを変更できます。

✔️カスタムボタン
おなじみのアフィリンクなど貼るボタン。右側の編集画面でアイコンの種類や、色、大きさを変更できます。

公式サイトはこちら

まとめ：できればブロックエディター（Gutenberg）を使いこなそう！

WordPressより、クラシックエディターは2021年12月31日にサポートが終了すると発表されています。
今後はブロックエディターが主流となると考えられるので、初心者の方でどちらを使うべき？と言う方は、
ブロックエディター（Gutenberg）を使用しましょう。

直感的に作業できるので、とても操作しやすくオススメです。

というわけで今回は以上です！

AFFINGER5のカスタマイズがまだの人は、こちらの記事をどうぞ。

関連記事

【初心者でも簡単】AFFINGER5(アフィンガー 5)カスタマイズ方法

続きを見る