こんにちは、セイタです。 今回は、AFFINGER7でブロックエディタをどのように使うのか、利点は何なのか。Classic Editorを今まで使用してきていたけど、スムーズに移行できるのかといった点について解説します。 本記事を参考にすることで、ブロックエディタの使い方初歩からClassic Editorからの移行方法まで確認ができる内容となっています。
\ 当サイトも使ってるWPテーマ『AFFINGER7』/
AFFINGER7はGutenberg（ブロックエディタ）に完全対応！
AFFINGER7はGutenbergにしっかりと対応されているWordPressテーマです。
また、AFFINGER7を購入した際に、AFFINGER7専用のGutenbergプラグインが付属しているため、ブロックエディタを使用するうえでチューニングされた状態で記事を書き始めることが可能となっています。
これから始めるならブロックエディタ一択の理由
今までClassic Editorを使用してきていて、Gutenbergに変更しようと考えている場合は、Gutenbergにしてしまったほうが執筆スピードが早くなる可能性が高いです。
例えば、Classic Editorで記事を書いているときには、何かしらの記事装飾を追加する際にエディター上部のメニュー部分から「スタイル」や「タグ」などの選択をして、細かいタグの内容を見て何をどこに入れてみたいに入力する作業が通常だと思います。しかし、Gutenbergにすることでその点の編集が右側メニューでできるようになっていて、執筆スピードの時短につながります。
個人的にも長い期間Classic Editorを使用してきていて、書き慣れているという状況からGutenbergに移行しましたが、ストレスなく移行することができました。なんなら、何でもっと早く移行しなかったんだろうと思うレベルでしたね。
クラシックエディターからの移行によるメリット
Classic Editorから移行によるメリットは先程も少し述べましたが、執筆速度の向上とエディター画面の視認性の良さにあります。
例えば、YouTubeのコードや何かしらの埋め込みコードを記事内に入れたい場合、Classic Editorだったらコードタブへ移動してHTMLコードの中に対象のコードを追加して、ビジュアルエディターで正しく表示されているかなどをチェックするというのが通常の流れだと思いますが、Gutenbergの場合は、ただコードを貼り付ければそれでOKです。
その他投稿に関しての情報と記事パーツに対しての変更については、右側タスクバーで投稿とブロックタブを切り替えて変更することが可能となっているため、基本的に操作する場所が固定化されることによって操作上で迷いが生じることなどが無くなり、Classic Editorよりも操作性と執筆性が高くなるのがGutenbergと考えてもらえたら差し支えないと思いますね。
ブロックエディタを使うための必須準備と注意点
Gutenbergを使用するために必須の準備としては、AFFINGER7を購入したときのGutenbergプラグインのインストールとClassic Editorの無効化を行いましょう。
Classic EditorからGutenberg移行時の注意点
Classic EditorからGutenbergに移行しようとした場合、必ずバックアップを取得するようにしてください。もう一度書きます「必ず」です。
何でここまで念を押したのかと言うと、AFFINGER7はGutenbergに完全対応しているWordPressテーマですが、Classic EditorとGutenbergはいわば執筆様式になるため、根本的な仕様は異なる物となっています。
そのため、イメージでいくとClassic EditorからGutenbergプラグインを導入したら、全部都合よくブロック化されて以降が簡単にできるんだと思いがちなのですが、そうもいかない場合も出てくることが想定されます。
必ずバックアップを導入して、Classic EditorからGutenbergに移行するのにあたって、時間と工数がそれなりに掛かりそうなことが想定出来た場合は、バックアップから復元し移行計画を必ず立てて順を追って以降していくことをおすすめします。
専用プラグイン「AFFINGER7ブロックプラグインver2.13.0」のインストール
2026年7月7日の最新版は「AFFINGER7ブロックプラグインver2.13.0」となっています。こちらのプラグインはAFFINGER7を購入した際に同梱されているため、AFFINGER7をダウンロードして解凍したフォルダの中に入っていると思います。
AFFINGER7で記事を執筆するうえで、必ず必要になってくるプラグインになるので必ずインストールするようにしましょう。
プラグインのインストールと有効化手順
AFFINGER7ブロックプラグインver2.13.0のインストールは簡単です。
AFFINGER7のWordPressテーマファイルが入ってる解凍フォルダの中を見ていただくと、「st-blocks.zip」というファイルが存在しているかと思うので、他のプラグインとは異なりプラグインファイルを直接読み込ませてインストールしていきます。
AFFINGER7でよく使う！おすすめ専用ブロックの使い方
それでは、実際にAFFINGER7で利用するGutenbergブロックについて紹介します。
記事が読みやすくなる「会話吹き出し」ブロック
記事の緩急を付けるために、会話吹き出しを利用することがあります。
このように画面左側のAFFINGERタブから、「AFFINGER: 会話吹き出し」を選択すると会話ブロックが追加されます。内容は手打ちができるようになっていて、自由に吹き出し内の内容を変更できるようになっています。
要点をまとめる「マイボックス・カスタムボックス」
ボックスはどんな形態のサイトでも使用する頻度がかなり高いブロックになってくると思います。
ブロックの追加方法は、先程の会話ブロックの追加方法と同じですね。このブロックの優秀なところは、通常のボックスデザインと比べてタイトルの背景を自由に変えることが出来て、それが枠の中に入っている状態で四角のボックスとなっているため、デザイン含めてまとまりがあり視認性も良いです。
本ブログでも使用頻度が高いですし、他で運営しているサイトなどでも頻繁にこちらのボックスデザインは使用しているので、かなり使い勝手の良いボックスだと思っています。
アフィリエイトリンクに必須の「マイボタン」
続いて、マイボタンブロックです。このブロックはAmazonアソシエイトなどとは別に、アフィリエイトリンクを貼りたい場合に使用します。
ブロックの追加方法については、繰り返しになるので割愛させていただいて、注目していただきたいのはボックスデザインの編集部分です。Classic Editorのときには長いボタンタグを追加したときのCSSみたいな記述の内容を読んで編集をして、といった形でデザインを整えたり、色を変えたりしていることがほとんどだったと思いますが、Gutenbergの場合はデザインの変更が画像のように画面で編集できるようになっています。
これ個人的には結構感動する部分で、今までコードのどの部分を編集しなければいけないといった感じで、ある程度ブロックごとに仕様を記憶して編集をしていたのですが、GUI上で編集ができる様になったのでデザイン変更や性質の変更がかなり楽になりました。またデザインの変更もリアルタイムで変化するので、実際にどのような変化をしているのかということを確認しつつデザインを決めることができるので、超優秀だと思いました。
【重要】旧タグを使うための「クラシック」ブロック活用法
もしClassic Editorのときに使用していたタグをそのまま使用したい場合や、やむを得ずClassic Editorのときに書いた内容をClassic Editor形式のまま使用したいといった場合には、Classicブロックというものがあります。
Classic Editorと同じ枠が1枠ブロックとして追加される状態になり、その枠内にClassic Editorで使用していた内容を貼り付けると、Classic Editorを使用していたときと変わりなく流用できるようになります。
よくある質問・トラブルシューティング
AFFINGER専用ブロックが表示されない時は？
AFFINGER専用ブロックが表示されない場合は、プラグインのインストールが正常に行われていない可能性があります。
本記事上部で解説している、「専用プラグイン「AFFINGER7ブロックプラグインver2.13.0」のインストール」の内容を参考にしてみてください。
エディタ画面と実際のプレビューでデザインが違う場合の対処法
エディタ画面と実際のプレビューでデザインが違う場合は、反映されるデザイン以上の権限でCSSが働いている可能性が高いです。CSSというのは、デザインの様式を決めるコードとなるのですが、独自にデザインしたCSSなどを使用していて「!important」を付けたCSSをカスタマイザーの「追加CSS」に記述している場合は、そちらが優先されている可能性が高いです。
そのため、今回Gutenbergを導入するのにあたって、デザイン面は基本柔軟に対応できる状況となるため、この機会に追加CSSは不要なもののみ削除してしまっても良いかもしれません。
Gutenbergをマスターしてサイト運営を効率化しよう
今回はAFFINGER7においてのGutenberg利用について解説しましたが、いかがだったでしょうか。
Grtenbergを毛嫌いして長年Classic Editorを使用してきた僕ですが、別サイトの立ち上げと同時に挑戦してみようと思いGutenbergを利用し始めましたが、確実にと言ってよいほどClassic Editorよりも執筆スピードと視認性が上がり快適度が上がりました。
Gutenbergの執筆に慣れてからClassic Editorで記事を書こうとすると、今まで見えていなかった不便な部分というのが浮き彫りになり、良い意味でClassic Editorには後戻りできなくなります。
ぜひ、今回の記事を参考にして、これからGutenbergを使用してブログを書いていきたいという方は、前段で挙げた注意点を考慮していただきつつGutenbergへの移行をしてみてください。かなり快適になりますよ。