ブログ講座

AFFINGER6ブロックエディター(Gutenberg)の使い方|ACTION専用の機能解説

マルくん

AFFINGER6専用のブロックの使い方について知りたい

という悩みを解決する記事を書きました。

AFFINGER6には、下記のような専用のブロックや機能があります。

  • ACTION専用ブロック
  • 旧AFFINGER5の記事装飾
  • マイブロック

この記事では、AFFINGER6専用の機能の使い方について、画像つきで紹介します。

記事を読み終えたら、AFFINGER6での記事装飾がスムーズにできるようになりますよ。

基本を知りたい

ブロックエディターの基本的な使い方・操作方法を知りたい方は、「WordPressブロックエディターの使い方と操作方法」の記事で、以下の内容を解説しています。

記事の内容

  • ブロックエディターでの記事執筆の流れ
  • デフォルトのブロックの使い方
    • 段落ブロック
    • 見出しブロック
    • 画像ブロック
    • リストブロック
    • テーブルブロック
    • スペーサーブロック
    • カラムブロック
    • ボタンブロック
    • 引用ブロック
  • ブロックの操作方法
WordPressブロックエディターの使い方と操作方法|記事執筆速度UPの秘訣も

WordPress:ブロックエディターの使い方を紹介しています。

続きを見る

AFFINGER6でブロックエディターを使う準備:専用プラグイン「Gutenbergプラグイン2」をインストールしよう

AFFINGER6のブロックエディターの機能を最大限に使うためには、「Gutenbergプラグイン2」をインストールする必要があります。

「Gutenbergプラグイン2」のインストールが終わっていない方は、下記の方法でインストールをしましょう▼

AFFINGER6専用機能①:ACTION専用ブロックの使い方

AFFINGER6の専用ブロック9つの使い方を紹介します▼

  • メモ
  • マイボックス
  • 見出し付きフリーボックス
  • バナー風ボックス
  • カスタムボタン
  • 会話吹き出し
  • 記事一覧(ID)
  • カテゴリ一覧
  • スライド

ACTION専用ブロック①:メモ

STINGER:メモブロックのアイコンと表示例

メモ(STINGER:メモ)は、以下のようなボックスを挿入できます▼

STINGER:メモ

STINGER:メモ

STINGER:メモ

STINGER:メモ

複数行もOK!

右側のサイドバーでは、以下の設定ができます。

  • アイコン設定(種類・色)
  • アイコン下のテキスト
  • 文字・背景・ボーダー色
サイドバーでデザインの変更が可能

ACTION専用ブロック②:マイボックス

STINGER:マイボックスのアイコンと表示例

マイボックス(STINGER:マイボックス)は、以下のようなボックスを挿入できます▼

ポイント

STINGER:マイボックス

注意

STINGER:マイボックス

注意

見出しを枠内に入れることも可能

右側のサイドバーでは、以下の設定ができます。

  • 見出し
  • アイコン
  • 見出しサイズ
  • 見出しの場所
  • ボーダーの太さと丸み

ACTION専用ブロック③:見出し付きフリーボックス

STINGER:見出し付きフリーボックスのアイコンと表示例

見出し付きフリーボックス(STINGER:見出し付きフリーボックス)は、以下のようなボックスを挿入できます▼

見出しテキスト

STINGER:見出し付きフリーボックス

ダウンロード

STINGER:見出し付きフリーボックス

右側のサイドバーでは、以下の設定ができます。

  • 見出し
  • アイコン
  • 見出し幅
  • ボーダーの太さと丸み

ACTION専用ブロック④:バナー風ボックス

STINGER:バナー風ボックスのアイコンと表示例

バナー風ボックス(STINGER:バナー風ボックス)は、以下のようなボックスを挿入できます▼

マルゲリータ

マルゲリータ

右側のサイドバーでは、以下の設定ができます。

  • 見出し
  • アイコン
  • 見出しサイズ
  • 画像
  • 画像のぼかし・明るさ
  • リンクの設定
  • 幅・高さ

ACTION専用ブロック⑤:カスタムボタン

STINGER:カスタムボタンのアイコンと表示例

カスタムボタン(STINGER:カスタムボタン)は、以下のようなボックスを挿入できます▼

右側のサイドバーでは、以下の設定ができます。

  • テキスト
  • アイコン(前・後ろ)
  • テキストサイズ
  • リンク設定
  • ボタン幅
  • ボタンの影・光るボタン
  • ボーダーの太さと丸み

ACTION専用ブロック⑥:会話吹き出し

STINGER:会話吹き出しのアイコンと表示例

会話吹き出し(STINGER:会話吹き出し)は、以下のような吹き出しが挿入できます▼

マルくん

こんにちは

まるげり

会話ふきだしは全部で8つ登録できるよ

向きも変えられるよ

マルくん

右側のサイドバーでは、以下の設定ができます。

  • 吹き出しアイコン
  • 向き

会話ふきだしを使うためには、事前に設定しておかなければなりません。

ACTION専用ブロック⑦:記事一覧(ID)

STINGER:記事一覧(ID)のアイコンと表示例

記事一覧(ID)は、以下のようなカードを挿入できます▼

ブログ講座

【ブロックエディター】高速で記事を書く裏技|マークダウンの辞書登録✕ショートカットキー✕再利用ブロックが最強

2022/2/5    

高速で記事を書く裏技「マークダウンの辞書登録」「ショートカットキー」「再利用ブロック」を紹介しています。

ブログ講座

WordPressブロックエディターの使い方と操作方法|記事執筆速度UPの秘訣も

2022/1/13  

WordPress:ブロックエディターの使い方を紹介しています。

1

ブログ講座

【ブロックエディター】高速で記事を書く裏技|マークダウンの辞書登録✕ショートカットキー✕再利用ブロックが最強

2022/2/5    

高速で記事を書く裏技「マークダウンの辞書登録」「ショートカットキー」「再利用ブロック」を紹介しています。

2

ブログ講座

WordPressブロックエディターの使い方と操作方法|記事執筆速度UPの秘訣も

2022/1/13  

WordPress:ブロックエディターの使い方を紹介しています。

記事IDを右側サイドバーに入力すれば、記事表示できます▼

記事一覧(ID)ブロックの表示のさせ方

右側サイドバーでは、以下の設定ができます。

  • 記事IDの入力
  • ランキング

ACTION専用ブロック⑧:カテゴリ一覧

STINGER:カテゴリ一覧のアイコンと表示例

カテゴリ一覧は、以下のようなカードを挿入できます▼

ブログ講座

【新規ドメイン】インデックスされない?解決のためにやった10の方法

2022/3/31

新規ドメインで、インデックスされるまでにやった「10の方法」について書きました。

no image

ブログ講座

【後回し厳禁!】WordPressを立ち上げ後にする2つの設定|一般設定&パーマリンク

2022/1/20

という悩みを解決する記事を書きました。 WordPressを始めたら、たくさん設定することがあるのですが… それらの中でも、最初に絶対にしておかなければならない2つの設定があります。 この2つの設定は ...

no image

ブログ講座

【2022年最新版】Googleアナリティクスとサーチコンソールを連携させる方法

2022/1/20

この記事ではGoogleアナリティクスとサーチコンソールを連携させる方法について紹介しています。 記事を読んだら、グーグルアナリティクスとサーチコンソールの連携方法がわかり、ブログの分析に役立てること ...

ブログ講座

2022/3/31

【新規ドメイン】インデックスされない?解決のためにやった10の方法

新規ドメインで、インデックスされるまでにやった「10の方法」について書きました。

ReadMore

no image

ブログ講座

2022/1/20

【後回し厳禁!】WordPressを立ち上げ後にする2つの設定|一般設定&パーマリンク

という悩みを解決する記事を書きました。 WordPressを始めたら、たくさん設定することがあるのですが… それらの中でも、最初に絶対にしておかなければならない2つの設定があります。 この2つの設定は後回し厳禁です。今すぐ設定を終わらせていきましょう。 まずは「一般設定」を終わらせよう ワードプレスの一般設定で「タイトル」「サブタイトル」「アドレス」を確認します。 6ステップで解説していきます! step1ワードプレスにログイン ワードプレスを開設したときに届いたメールの「管理画面URL」からログイン画面 ...

ReadMore

no image

ブログ講座

2022/1/20

【2022年最新版】Googleアナリティクスとサーチコンソールを連携させる方法

この記事ではGoogleアナリティクスとサーチコンソールを連携させる方法について紹介しています。 記事を読んだら、グーグルアナリティクスとサーチコンソールの連携方法がわかり、ブログの分析に役立てることができるようになります。 Googleアナリティクス(UA)とサーチコンソールの登録が事前に終わっておく必要があるのでまだの方は、以下の記事で設定を済ませておきましょう▼ Googleアナリティクスとサーチコンソールの連携方法 サーチコンソールは、GoogleアナリティクスのUA(旧アナリティクス)しか連携で ...

ReadMore

ブログ講座

2022/1/14

【AFFINGER6】マイブロックの使い方|再利用ブロックとの違い&使い分け方も解説

【AFFINGER6】マイブロックの使い方と再利用ブロックとの使い分けについて解説してます。

ReadMore

ブログ講座

2022/1/14

【AFFINGER6】会話ふきだしの設定・カスタマイズ・使い方|効果的な活用方法も紹介

AFFINGER6での吹き出しの使い方を紹介しています。

ReadMore

カテゴリ記事IDを右側のサイドバーに入力すれば、記事表示できます▼

カテゴリー欄の表示のさせ方

右側サイドバーでは、以下の設定ができます。

  • カテゴリーIDの入力
  • 表示記事数
  • 昇順・降順の選択
  • スライドショー

ACTION専用ブロック⑨:スライド

STINGER:スライドのアイコンと表示例

スライド(STINGER:スライド)は、以下のようなブロックを挿入できます▼

右側のサイドバーでは、以下の設定ができます。

  • テキスト
  • アイコン
  • センター寄せ
  • ボーダー

AFFINGER6専用機能②:クラシックボックスでの記事装飾の仕方

クラシックブロックを使うと、旧AFFINGER5で使用していた、記事装飾のパーツを使うことができます。

旧AFFINGER5装飾の使い方

step
1
クラシックボックスを選択

クラシックボックスの選択

step
2
クリックして「タグ」を選択

タグの選択

step
3
使いたい記事装飾を選ぶ

使いたいパーツを選ぶ

AFFINGER6専用機能③:マイブロックの使い方

AFFINGER6には、事前に登録したブロックを簡単に呼び出せる「マイブロック」という機能があります。

マイブロックの呼び出し方

  • 上部ツールバーの「+」をクリック
  • 「パターン」をクリック
  • 登録しているブロックの中から使いたいものを選ぶ
マイブロックの使い方

マイブロックに「よく使うブロック」や「記事の型」を登録しておくと、記事執筆速度を上げることができます。

まとめ:AFFINGER専用の機能を使いこなそう

AFFINGER6専用のブロックや機能について、使い方を紹介してきました。

それぞれの機能を上手く活用して、読みやすい記事を書いていきましょう。

この記事は、ブログ完全講義5時間目の内容です▼

5時間目の講義内容

ブログ完全講義を見てみる

マルくん

じゃあまたね。バイバーイ!

おすすめ記事一覧

1

この記事では、エックスサーバーのWordPressクイックスタートを使って簡単にワードプレスを開設する方法を紹介しています。

2

という悩みを解決する記事を書きました。 WordPressでブログを始めようと思っている  or 始めたのはいいけど、初期設定で何をしたらいいのかわからないですよね。 私も、はじめてブログを立ち上げた ...

3

という悩みを解決する記事を書きました。 教員(公務員)がブログを始めるときに、切っても切れない関係にあるのが「原則副業禁止」というきまりです。 私は教員をしていた頃、「副業」に関わる法律のことをよく理 ...

4

ブログ初心者にとって「アフィンガー6」はおすすめ?この記事では、ブログ初心者のころからアフィンガーを使っている筆者が、アフィンガーのメリット・デメリット、口コミなどを紹介しています。

5

この記事では初心者にも使いやすいおすすめASPを5つ紹介しています。登録方法も詳しく知れます。

-ブログ講座
-,