AFFINGER

AFFINGER6の使い方|ブロックエディタ・記事の書き方【徹底解説】

シン

ブロガー|本業プログラマー|大阪在住|29歳|SEOライティング独学|特化ブログ月間33万PV達成|使用プログラミング言語:Java/HTML/CSS/SQL|好きな食べ物はカレー|猫好きです。

AFFINGER6(アフィンガー)の使い方が知りたいなぁ。ブロックエディタを使いこなしたい。

こんなお悩みにお答えします。

本記事の内容

  • AFFINGER6でブロックエディタを使うための事前準備
  • AFFINGER6の使い方|ブロックエディタまとめ
  • AFFINGER6でブロックエディタを使いこなすコツ
シン(1000)
Twitter(@shin_memo09)

本記事をお読みいただければ、AFFINGER6の使い方について知ることができます。

実際に当サイトでもAFFINGER6を使用しておりまして、どこよりも詳しく解説していきますね。

記事の最後では、ブロックエディタを使いこなすコツについても触れておりますので、ぜひご覧ください。

AFFINGER6の使い方|ブロックエディタ【前提】

まずは下記についてサクッと解説します。

  • AFFINGER6の特徴
  • AFFINGER6でブロックエディタは使いやすいのか
  • AFFINGER6でブロックエディタを使う為の事前準備

AFFINGER6の特徴

AFFINGER6は2021年7月1日に発売されたWordPress有料テーマです。

すでにAFFINGER5をお使いの方は無料でアップデートすることが可能です。

ちなみに5から6になったことで、主に下記の点が変わりました。

  • WINGからACTIONに名称変更
  • グーテンベルクがより使いやすく
  • トップページにタブ式カテゴリーを一覧表示
  • ページ表示速度の高速化
  • FontAwesome5.0対応
  • クレジット削除プラグインの廃止
Classic Editorプラグインを追加すれば、引き続きAFFINGER6でも旧エディタを使用することができます。
シン

ブロックエディタは使いやすいのか

ブロックエディタは慣れると使いやすいですし、旧エディタよりも速く記事が書けるようになります。

僕はAFFINGER6にするまではクラシックエディタを使っていまして、ブロックエディタに変えた当初はかなり使いにくかったです。

ただ今では逆にクラシックエディタに戻れないくらい、ブロックエディタの方が便利と感じております。

WordPress公式でも「クラシックエディタのサポートは2022年まで」とアナウンスもありますので、この機会にブロックエディタに移行がいいと思います。
シン

ブロックエディタを使う事前準備

ではAFFINGER6でブロックエディタを使う準備をしていきましょう。

まずはAFFINGER6専用の「Gutenbergプラグイン2」をインストールしていきます。

インストール方法

  • AFFINGER6の公式サイトにアクセス
  • 購入ユーザー限定ページにログイン
  • AFFINGER6のリンクをクリック
  • Gutenbergプラグイン2のzipファイルをダウンロード
  • WordPressにプラグインを新規追加し有効化する
Classic Editorのプラグインを有効化している場合は無効化しておいてくださいね。
シン

AFFINGER6の使い方|ブロックエディタ【記事の書き方】

AFFINGER6で実際にブロックエディタを使ってみましょう。

実践しながら読み進めていただく方が分かりやすいと思いますので、ぜひみながら操作してみてください。

集中執筆モードにする

ブロックエディタでは、ブログ記事を書く際に気が散らないよう、集中執筆モードにすることができます。

これが非常に効果的で、実際に僕はかなり記事作成に集中することができています。

通常だと周りにボタンやタブなど、気が散る要素が多いです。

集中モードの設定方法は、ブロックエディタ画面右上にある点が3つのマークをクリックします。

次に下記画像のように「スポットライトモード」「フルスクリーンモード」にチェックをいれます。

これで気が散らないよう集中できます。

macをお使いの方でGoogle Chromeであれば、フルスクリーンにした後に「command+shift+F」で上のブラウザタブも非表示にできますよ。
シン

投稿設定

記事タイトルの文字数チェックやパーマリンクなどの設定は、「右上の歯車マーク→投稿」より設定できます。

  • タイトルの文字数確認
  • パーマリンク設定
  • カテゴリー選択
  • タグ選択
  • アイキャッチ画像設定
  • index変更

主に上記の設定ができます。

スペーサーで段落

段落で行間をあける場合は、スペーサーという機能を使っていきます。

クラシックエディタをお使いだった方はお分かりだと思いますが、以前はEnterキーを押せば段落できました。

ただブロックエディタでは、エンターのみだと行が詰まってしまい、段落することができないんです。

そこでスペーサーの出番というわけです。

やり方は画面左上にある「+」ボタンをクリックし、スペーサーを選択します。

行幅は自由に変更できますが、個人的に「20px」がスマホで見た時にちょうど良い感じなのでおすすめです。

ちなみにスペーサーやその他のブロックは、スラッシュ「 / 」を使えば簡単に呼び出すことができますよ。

スラッシュ「 / 」は便利なのでぜひ意識して使ってみてください。

あと改行に関しては「shift+Enter」でできますよ。
シン

見出しをつける

ブロックエディタで見出しを作っていきましょう。

見出しにしたい文字の段落を選択し、タブの一番左にある黒いマークをクリックします。

すると「見出し」と表示されるのでクリックします。

これで見出しができます。

ただ、最初はどうしてもh2になるので、再度「見出し」をクリックすると、その他の見出しタグを使うことができます。

ちなみにもっと素早く見出しを作る便利な方法があります。

それが、見出し化したい文字の先頭にシャープ「#」を書いて半角スペースを押して見出しにする方法です。

ちなみにこれはマークダウン記法といいます。

マークダウン記法

シャープ「#」が2回で見出し2(h2)

シャープ「#」が3回で見出し3(h3)

シャープ「#」が4回で見出し4(h4)

マークダウン記法はかなり便利なので覚えておきましょう。

テキストに内部リンクを張る

テキストリンクを設定する方法について解説します。

やり方はとても簡単で、テキストにしたい文字を選び、リンクをクリック後にURLを挿入すればできます。

ちなみにmacならテキストリンクにしたい文字を選択してから「command+k」で、windowsなら「Ctrl+k」でリンク挿入ができます。

内部リンクをブログカードにする

ブログカードは内部リンクURLを段落に直接張ればできます。

ただ、リンクを直接張る方法だと、PCでみた時にタイトル下の抜粋文が消えません。

なので、ブログカードを画像とタイトルだけにしたい方は、「クラシック→カード」を選択すれば抜粋文なしでブログカードにすることができます。

やり方は画面左上の「+」マークを押下し、クラシックを選択後、出てきたブロックをクリックして開きます。

次に「カード」を選択し、ブログカードにしたい「記事ID」を入力すると表示することができます。

ちなみに記事IDは投稿一覧画面の右端に表示されております。

これでタイトルと画像のみのブログカードのできあがりです。プレビューで見てみましょう。

もし抜粋文が消えていない方は、AFFINGER管理から設定できます。

AFFINGER管理→全体設定→抜粋設定

上記画像の通り、2つの項目にチェックを入れれば抜粋文が非表示になります。

あとブログカードの記事IDのコード横にある「label」に表示させたい文字を入力すれば、リボンをつけることもできますよ。

リボンのデザイン変更は下記手順で行えます。

「WordPress管理画面→外観→カスタマイズ→オプションその他→ブログカード/ラベル」

AFFINGER6の使い方|ブロックエディタ【装飾】

AFFINGER6のブロックエディタは、段落で視覚的にかつ簡単に装飾することができます。

詳しく解説していきますね。

段落ブロック

ブロックエディタでは段落に直接装飾を加えることができます。

装飾の色やアイコンはお好みに変更することができます。

段落の初期デザインは下記の通り。

自由に文字を変えれます

チェックもあります

注意ブロックも

色の変更もできます

ブロックに吹き出しをつけることも

まるもじもありますよ

マーカー

マーカーを引くやり方について解説します。

マーカーを引きたい文字を範囲選択し、下矢印マークをクリックしましょう。

すると「マイ細マーカー」とでてくるので、AかBどちらかを選ぶとマーカーを引くことができます。

マーカーの色はGutenberg設定から変更することができますよ。

画像の設置(装飾)

ブロックエディターで画像を表示させるのはとても簡単です。

やり方は画像を挿入したい箇所にドラッグアンドドロップをするだけです。

画面左上のプラスマークを押し、「画像」よりアップしたり、呼び出したりすることもできます。

スラッシュ「 / 」を使えば一瞬で画像を呼び出すことも可能です。

STINGERブロック

STINGERブロックでは、見出し付きボックスやアフィリエイトボタン等を作成することができます。

これはメモです。

ポイント

これはマイボックスです。

見出しテキスト

これは見出し付きフリーボックスです。

見出しテキスト

バナー風ボックスです。

ボタン

吹き出しも!
シン

記事一覧です↑

カテゴリー一覧です↓

右上の歯車マークから、色の変更などお好みにカスタマイズすることができます。
シン

リスト

リストのやり方について解説します。

まずは文字を範囲選択し、タブの左端にある黒いマークを選びます。

リストを選択すると、リスト化することができます。

あとは右上の歯車マークから色の変更などカスタマイズすることができますよ。

  • リストにしてみたよ
  • デザインも変えられます
  • 簡単便利です

枠線も太くしたり細くしたりできるので、自由度が高いです。

  • こんな感じです
  • 要点はリストにしましょう
  • リストは便利です
  • いろんなデザインがあるよ
  • 箇条書きを使いましょう
  • AFFINGER6は使いやすい
クラシックエディタより素早く自由にリストが作成できます。
シン

会話吹き出し

会話吹き出しは、左上の「+」マークを押し、「STINGER:吹き出し」から呼び出せます。

ただ、このやり方だと吹き出しの下に余白ができてしまいます。

シン

余白ができちゃいます。。

そこでもう一つ、左上の歯車マークを押し、ここにある「簡易会話A」であれば余白なしで表示ができました。

これなら余白ができず、吹き出しが表示されました。

これなら大丈夫!
シン

ちなみに吹き出しの画像は「AFFINGER管理→会話アイコン→画像URLと吹き出し名入力→Save」で設定できますよ。

画像のURLは、WordPress管理画面から「メディア→画像をクリック」で確認できます。

アコーディオン

アコーディオンとは、クリックして開くタイプの装飾で、ブログ記事で長文解説になりそうな時とかに使えるやつです。

やり方は左上の「+」マークを押してスライドをクリックします。

段落にアコーディオンの中身を記述すれば完了です。あと、スライド背景色の変更もできますよ。

プレビューで見てきちんとできていれば完了です!
シン

AFFINGER6の使い方|ブロックエディタ【マイブロック】

AFFINGER6にはなんとも便利なマイブロック機能があります。

マイブロックとは、よく使う装飾やコードをあらかじめ保存しておき、簡単に呼び出して使うことができる機能です。

使い方はとても簡単ですので、そちらについて解説していきますね。

マイブロックの便利な使い方

マイブロックはよく使う機能や装飾等を、先に保存しておく必要があります。

保存方法は、WordPress管理画面からマイブロック一覧をクリックし、新規追加を押します。

よく使うボックスや装飾などを追加し、右上の「公開」を押すと保存完了です。

保存したブロックを呼び出すには、投稿編集画面の左上「+」マークを押し、パターンを選択し、ブロックをクリックすればOKです。

ポイント

呼び出せましたよ!

再利用ブロックとの違い

再利用ブロックは、マイブロックのように、よく使うブロックを保存するところまでは同じです。

マイブロックとの違いは、再利用ブロックは「連動する」ということです。

たとえば、別の箇所で同じブロックを追加し文字入力をすると、連動して同じ文字が表示されます。

再利用ブロックは連動する

再利用ブロックは連動する

再利用ブロックは、アフィリエイトリンク等の同じ記述でも問題ない時とかに使えそうです。
シン

AFFINGER6の使い方|ブロックエディタ【Twitter埋め込み】

Twitterの埋め込み方法を解説します。

まず埋め込みたいツイートの右上のボタンを選択し、「ツイートの埋め込み」をクリックします。

次に「ツイートを埋め込む」を選択します。

するとコードをコピーする画面に移行しますので、「Copy Code」をクリックしましょう。

先ほどコピーしたコードを貼り付けるために、カスタムHTMLブロックを呼び出します。

画面左上の「+」マークをクリックし、カスタムHTMLを選択しましょう。

先ほどコピーしたコードをペーストします。

これで完成です!

AFFINGER6の使い方【広告リンク設置】

アフィリエイトリンクボタンの作り方

アフィリエイトボタンの作り方について解説します。

まず、左上「+」マークからカスタムボタンを呼び出しましょう。

次にお好みのデザインに変更をしましょう。

アフィリエイトのリンクは「リンク先URL」にて設定ができます。

ただし、上記の方法はリンク改変がOKのASPに限ります。

基本的に多くのASPはリンクコードの改変がNGなところが多いので、改変せずにボタンリンクを作る方法もお伝えしますね。

まずはカスタムボタンをHTML表示にしましょう。

次に「カスタムHTML」を呼び出しましょう。

カスタムHTMLにボタンリンクのコードをコピペした後に、<a href="#"> </a>の部分をアフィリエイトリンクに置き換えてください。

タブのプレビューを押すと下記画像のように表示が崩れていますが、右上のプレビューでみると、きちんとボタンリンクが表示されています。

アフィリエイトリンクは毎回作るの大変なので、先ほど解説したマイブロックで保存しておきましょう。
シン

アドセンス広告の貼り方

アドセンス広告を貼る方法は主に二つありまして、一つが直接記事に貼る方法で、二つ目がAFFINGER管理の設定画面から貼る方法です。

AFFINGER管理から貼る場合は、「AFFINGER管理→Google・広告 / AMP」とすすみ、好きな場所に広告のコードを貼り付けてください。

AFFINGER6の使い方【カスタマイズ】

ウィジェット・メタ情報の消し方

AFFINGERのテーマをインストールしたばかりの方はメタ情報が表示されている場合があります。

メタ情報はあっても使うことがほぼないので、非表示にしておくと良いです。

やり方はワードプレス管理画面のウィジェットからメタ情報を削除で非表示にできます。

ファビコン

ファビコンとは、ブラウザのタブに表示されたり、ブックマークでホーム画面に追加をしたときなどに表示されるアイコンのことです。

ファビコンの設定はとても簡単で、ワードプレス管理画面のカスタマイズを選択し、サイト基本情報から設定できます。

ブックマークで保存した時にも表示される画像なので、あなたならではのオリジナル画像を設定してみてください。
シン

フォント・文字サイズ・行間

フォントと文字サイズの変更方法について解説します。

AFFINGER管理の「全体設定」を開き、下にスクロールするとフォント編集の入力欄があるので、そちらに入力しましょう。

AFFINGER6 フォント

ちなみに僕は特に何も入力してないのですが、何も入力しなければ初期値が設定されます。

AFFINGER6でブロックエディタを使いこなすコマンドまとめ

さいごにAFFINGER6でブロックエディタを使いこなすためのコマンドについて解説します。

Windowsは「Shift+Alt+H」Macは「Cotrol+Option+H」でショートカットキーの一覧を表示できます。

Macの表記読み方
Command (コマンド)
Control (コントロール)
Shift (シフト)
Option (オプション)

ショートカットキーは時間短縮にもなりますので、繰り返し実践して覚えてみてください。

ブロックエディタは使いこなすと素早く記事執筆ができるようになります。

僕は2週間ほどで慣れましたが、いまでは旧エディタにはもうもどれないくらい使い心地が良いです。

当サイトでは他にも、AFFINGER6を高速化する方法等も解説しておりますので、ぜひ参考にしてみてください。
シン

  • この記事を書いた人
  • 最新記事

シン

ブロガー|本業プログラマー|大阪在住|29歳|SEOライティング独学|特化ブログ月間33万PV達成|使用プログラミング言語:Java/HTML/CSS/SQL|好きな食べ物はカレー|猫好きです。

-AFFINGER