【AFFINGER5】ブロックエディターで旧エディターデザインを使用する方法

このような悩みを抱えているAFFINGER5民の方は最後まで読んでください。

AFFINGER5は、クラシックエディター(旧エディター)対応の有料テーマです。
なので、前回のテーマでブロックエディター(現在のエディター)で記事を書いていた人は使いづらいはずです。

この記事ではAFFINGER5でボックスデザインを使用する方法をメインで紹介します。

こんなことを思ってる方は、ぜひ最後まで読んでいってください。


この記事を読み終えたら

真似するだけで、すぐに扱えるようになります。

AFFINGER5でブロックエディターの記事を書いている人は、筆者しかいないと勝手に思っているので、ぜひ参考にしてください。

WordPress旧エディターのボックスデザインを使用する方法

旧エディターのボックスデザインが使用できるまでの手順を簡単に記載しました。

この3ステップで使用できるようになります。

図解付きで解説してくので、安心して真似していってください。

気に入ったボックスデザインを選択

テーマをAFFINGER5にしたとき、投稿ページに「記事作成パーツ確認用ダミーページ 」が追加されたかと思います。

記事作成パーツ確認用ダミーページをブロックエディターで開いてください。

すると、下の画面のように表示されます。

この画面が開けたら、まずは好きなデザインを決めてください。

おすすめは

①箇条書きのときに使用するボックス

②注意書きしたいときに使用するボックス

③枠なしボックス

④タイトル幅100%ボックス

⑤吹き出し付きボックス

この5つのボックスは例です。

色々なボックスを使用すると、ユーザーの目にストレスが溜まるので、使用するボックスは5つ以内に絞りましょう。

気に入ったデザインが見つかったら、右上の「…」のマークから「コードエディター」を選択しましょう。

選択できたら、下のような画面に切り替わります。

終了するときは青文字の「コードエディターを終了」を押せば、ブロックエディターの画面に戻ります。


好きなデザインをコピーできたら、メモ帳を開きましょう。
※次の見出しで解説します。

メモ帳にデザインのコードを貼り付け

先ほどの見出しで好きなデザインをコピーするところまで完了しました。

完了できたら、メモ帳を開きましょう。

開けたら、コピーしたデザインを貼り付けます。

わかりやすいようにボックスの名前を付けましょう。

空白を空けると、1つのデザインがわかりやすくなるので、適度に空けることをオススメします。

ブロックエディターの編集画面に貼り付け

先ほどの見出しでデザインをメモ帳に貼り付けるところまで完了しました。

最後にメモ帳にコピーしたデザインをブロックエディターの編集画面に貼り付けます。

上のようにブロックエディターに反映させたいデザインを選択してコピーします。

コピーができたら、新規追加をクリックして記事編集ページを開きます。

最後に、貼り付けしたら完了です。

[/st-mybox]の上にカーソルを合わせると、いつも通りの編集画面が表示されます。

リストを追加し、適当に文字入力してデザインが反映されているか確認しましょう。

こんな感じで反映されていたらOKです。

この記事で使用しているWordPressボックスデザインを紹介

最後に、この記事で使用したボックスデザインを紹介します。
※勝手に使用してOK

①枠なしボックス

[st-mybox title="" fontawesome="" color="#757575" bordercolor="#f4f4f4" bgcolor="#f4f4f4" borderwidth="0" borderradius="5" titleweight="bold" fontsize="" myclass="st-mybox-class" margin="25px 0 25px 0"]



[/st-mybox]

②浮き出し付きボックス

[st-minihukidashi fontawesome="fa-circle-o" fontsize="90" fontweight="bold" bgcolor="#3F51B5" color="#fff" margin="0 0 0 0"]吹き出しボックス[/st-minihukidashi]
[st-mybox title="" fontawesome="" color="#757575" bordercolor="" bgcolor="#E8EAF6" borderwidth="0" borderradius="5" titleweight="bold" fontsize=""]



[/st-mybox]

③枠ありボックス

[st-mybox title="" fontawesome="" color="#2b2b4c" bordercolor="#7c7c7c" bgcolor="#f4f4f4" borderwidth="1" borderradius="2" titleweight="bold" fontsize="" myclass="st-mybox-class" margin="25px 0 25px 0"]


[/st-mybox]

④注意ボックス

[st-cmemo fontawesome="fa-exclamation-circle" iconcolor="#ef5350" bgcolor="#ffebee" color="#000000" bordercolor="" borderwidth="" iconsize=""]ここに入力[/st-cmemo]

実際に記事に貼り付けて確認してみてください。

旧エディターデザインを使用する方法まとめ

今回はAFFINGER5の旧エディターデザインをブロックエディターで使用する方法を紹介しました。

AFFINGER5でブロックエディターを使用している人は、ぜひ参考にしてください。

その他にもAFFINGER5についての記事を投稿しています。

気になった方はぜひチェックしていってください。

AFFINGERをまだ購入していない人

筆者のサイトでは、9つの豪華特典付きでAFFINGERを販売しています。

こんな方にオススメです！

特典だけでもAFFINGERと同等以上の価値があるので、この機会にぜひ！