こんにちは "osaboo"
です。"@osaboo_Bot"
AFFINGER６で「Gutenberg用ブロックプラグイン2」をインストールしたけど…入れればいいだけなの？
投稿（記事編集）画面とプレビューが違って見えて「やりにくい」…
＼＼ このような「疑問を解決する」お手伝いをします！／／
簡単な設定で超見やすく気持ちよくブログが書けるようになるよ。
今回の記事では…
AFFINGER6のGutenberg用ブロックプラグイン2の設定方法をご紹介します。
投稿（記事編集）画面とページプレビューの幅に表示誤差が生じて 記事の配置がイメージしにくい…なんてことはありませんか？
投稿（記事編集）画面とページプレビューの幅を合わせて イメージ通りに記事を書きやすくする設定をご紹介します。もちろん！「投稿（記事編集）画面」以外のすべての設定項目も完全解説でお届けします。
それではご覧ください！
＼初心者でも安心！コスパ最強の洗練されたWordPressテーマ／
＼＼『すごいもくじLITE』が付いてくる！限定特典キャンペーン実施中！／／
- 少しづつ増え続ける当サイトオリジナル特典付！-
Gutenberg用ブロックプラグイン2とは？
Gutenberg用ブロックプラグイン2 とは、Gutenberg 用のブロックを追加するACTIONテーマ専用プラグインです。（AFFINGER6に無料でついてくる専用プラグインです。）
ブロックエディターを設定するための機能が備えられていて 執筆効率を上げるためには不可欠なプラグインです。
※ この記事では、インストール等の導入説明は 割愛します。
Gutenberg 設定：全般タブ▶︎全般設定
この章では、Gutenberg用ブロックプラグイン2の全般設定をご紹介します。
『Gutenberg 設定』画面を開きます。
以下の画面が表示されます。
それでは順番に見ていきましょう。
基本設定
基本設定では「投稿（記事編集）画面の幅・自動保存間隔・ブロック設定」の設定ができます。
投稿画面の幅
投稿（記事編集）画面とプレビューの見栄えの違いが修正できます。
「投稿（記事編集）画面とプレビューの見栄えの違い？」わかりづらいので…
イメージはこんな感じ！
※ 基本設定の設定項目は 投稿画面の表示に反映されます。
Gutenbergのデフォルト設定では 投稿（記事編集）画面の表示幅が『900px』になっている。
サイトのメイン幅が 『780px』の場合『120px』がはみ出る。
こんな感じで はみ出します。
Gutenbergデフォルト『900px』を サイト幅『780px』に変更するとこんな感じ！
※ サイトの幅に関して わかりづらい場合は以下の記事をご覧ください。
AFFINGER6 サイトの幅を設定【初期設定値1060pxは狭すぎる！ベストな設定値は？】
設定の手順は ここから！
『Gutenberg 設定＞全般タブ』を開くと 以下の画面が表示されます。
『投稿画面の幅』がデフォルトでは『空欄』になっているのでサイトのメイン幅を入力します。
サンプルでは『780』と入力します。
※ 設定変更後、最後に『Save』をクリックします。
自動保存間隔
デフォルト設定のままで OK です。
- 自動保存間隔『300』：デフォルトのままで OK です。
ブロック設定
全てにチェックを入れていますが…デフォルトのままで OK です。
デフォルト設定のままで OK です。
- 「ブロックタイプまたはスタイルを変更」の項目をシンプルにする『OFF』
- ブロックエリアのホバー時に枠線を表示する『OFF』
- Gutenbergブロック厳選モード『ON』
マイブロック
下側にスクロールして 『マイブロック』まで移動します。
デフォルト設定のままで OK です。
埋め込みURL
下側にスクロールして 『埋め込みURL』まで移動します。
デフォルト設定のままで OK です。
カラー設定
投稿（記事編集）画面で表示されるメニューの初期設定（マーカー・枠の幅・変更色のパターン追加）ができます。
カラー設定は 投稿画面のメニューに反映されるよ。
表示イメージはこんな感じ！
※ カラー設定の設定項目は 投稿画面で表示されるメニュー項目に反映されます。
段落（Pタグ）の入力メニューで『ペンアイコン』をクリックした時のサブメニューで確認できます。
マイ細マーカー設定の反映場所
投稿画面 右側のブロックタブメニュー『枠線』をクリックした時のサブメニューで確認できます。
ボーダー設定の反映場所
投稿画面 右側のブロックタブメニュー『色：テキスト・背景』をクリックした時のサブメニューで確認できます。
オリジナルカラーパレットの反映場所
設定の手順は ここから！
下側にスクロールして 『カラー設定』まで移動します。
サイトでよく使うカラー設定を必要に応じて設定します。
※ 設定変更後、最後に『Save』をクリックします。
Gutenberg 設定：グループブロックタブ▶︎グループブロック
この章では、Gutenberg用ブロックプラグイン2のグループブロックの設定をご紹介します。
『Gutenberg 設定』画面を開きます。
タブを切り替え▶︎『グループブロック』タブをクリックします。
以下の画面が表示されます。
それでは見ていきましょう。
ブロック下の余白
ブロック下の余白では「-大」「-小」「大」の3種類の余白量が設定できます。
投稿（記事編集）画面で表示されるブロック下の余白メニューの初期設定ができます。
ブロック下の余白は 投稿画面のメニューに反映されるよ。
表示イメージはこんな感じ！
※ ブロック下の余白の設定項目は 投稿画面で表示されるメニュー項目に反映されます。
投稿画面 右側のブロックタブメニュー『ブロック下の余白』をクリックした時のサブメニューで確認できます。
※ ブロック下の余白や行間について詳しく知りたい方は以下の記事をご覧ください。
AFFINGER6 記事の書き方【段落(Pタグ)下の余白と行間・他要素との間隔調整方法】
設定の手順は ここから！
『Gutenberg 設定＞グループブロックタブ』を開くと 以下の画面が表示されます。
サンプルでは『-大：-17』『-小：-7』『大：55』と入力します。
※ 設定変更後、最後に『Save』をクリックします。
Gutenberg 設定：段落ブロックタブ▶︎段落ブロック
この章では、Gutenberg用ブロックプラグイン2の段落ブロックの設定をご紹介します。
『Gutenberg 設定』画面を開きます。
タブを切り替え▶︎『段落ブロック』タブをクリックします。
以下の画面が表示されます。
それでは順番に見ていきましょう。
段落ブロックスタイル(アイコン)
段落ブロックスタイル(アイコン)では 段落ブロックにワンタッチ表示できるアイコンの色の変更や背景の初期設定ができます。
段落ブロックスタイルのイメージはこんな感じ！
後でから変更が可能だけど…よく使うものは好みに変更しておくといいよ。
これはメモのサンプルです。
これはリンクのサンプルです。
これはポイントのサンプルです。
これは注意のサンプルです。
段落ブロックスタイル(アイコン)は 投稿画面のメニューに反映されるよ。
表示イメージはこんな感じ！
※ 段落ブロックスタイル(アイコン)の設定項目は 投稿画面で表示されるメニュー項目に反映されます。
投稿画面 右側のブロックタブメニュー『スタイル』をクリックした時のサブメニューで確認できます。
設定の手順は ここから！
『Gutenberg 設定＞段落ブロック』を開くと 以下の画面が表示されます。
サイトでよく使う段落ブロックスタイルを必要に応じて設定します。
※ 設定変更後、最後に『Save』をクリックします。
その他の非表示設定
下側にスクロールして 『その他の非表示設定』まで移動します。
一部にチェックが入っていますが…全てチェックを外したデフォルト設定で OK です。
デフォルト設定のままで OK です。
角丸
角丸では 段落ブロックの角の丸み（R）の初期値が設定できます。
段落ブロックの角丸はここだよ！
設定の手順は ここから！
下側にスクロールして 『角丸』まで移動します。
「角丸（R）が大きいと可愛い感じ・小さいとかっこいい感じ」で表現できます。
（デフォルトは『5』）
サンプルでは『2』を入力します。
※ 設定変更後、最後に『Save』をクリックします。
投稿画面：オプションの表示を設定する「もっと書きやすく！」
この章では、投稿（記事編集）画面の表示設定をご紹介します。
トップツールバーの設置とフルスクリーンモードの解除
投稿画面でオプションの表示を設定します。
投稿画面で最上部右側の右端『オプションアイコン』をクリックします。
おすすめ！表示設定の変更部分は「ここ」
設定の概要
- オプションアイコン
- オプションのサブメニューが開きます。
- トップツールバー
- ツールバーを最上部に固定することができます。
- フルスクリーンモード
- フルスクリーンモードを解除できます。
※ 標準設定から変更した方が操作性が向上しそうな2項目をピックアップしました。
試してみて！^^／
マイブロックの便利な使い方
とても便利な機能です。以下の記事にてご紹介しています。
-
-
AFFINGER6 マイブロックの便利な使い方【ブログ初心者はこれが知りたい！】
AFFINGER6に搭載されている便利な機能「マイブロック」の登録方法から使い方までを具体例を使ってご紹介。楽して「ぶれない」記事を書くために是非使ってほしい機能です。記事の書き方が定まらないという方は是非ご覧下さい。初心者の目線で丁寧に解説しています。初心者必須！！
まとめ！AFFINGER6【Gutenberg用ブロックプラグイン2】の設定方法「使いやすい・見やすい・捗る」設定ポイント！
「記事をすらすら書きたい！書きやすくしたい！」等、効率を上げるためには不可欠な設定だと思います。初心者でもテーマの使い勝手が良くなれば自ずと効率よく（早く）記事編集・作成ができるようになる筈です。この記事がAFFINGER6を使い始めたばかりの初心者の方に役立てば嬉しいです。
今回は AFFINGER6【Gutenberg用ブロックプラグイン2】の設定方法をご紹介しました。
「最後まで、ご観覧いただきありがとうございました。」
また、次の記事で…お会いしましょう。＼^^／
