AFFINGER6【Gutenberg用ブロックプラグイン2】の設定方法「使いやすい・見やすい・捗る」設定ポイント!

AFFINGER6【Gutenberg用ブロックプラグイン2】の設定方法「使いやすい・見やすい・捗る」設定ポイント

こんにちは "osaboo"です。"@osaboo_Bot"

Question

AFFINGER6で「Gutenberg用ブロックプラグイン2」をインストールしたけど…入れればいいだけなの?
投稿(記事編集)画面とプレビューが違って見えて「やりにくい」…

\\ このような「疑問を解決する」お手伝いをします!//

簡単な設定で超見やすく気持ちよくブログが書けるようになるよ。

osaboo

こんな方におすすめ!

  • WordPressテーマAFFINGER6を使っている。
  • 「Gutenberg用ブロックプラグイン2」を設定していない。
  • 投稿(記事編集)画面が見にくいと感じている。
  • ブログ初心者

この記事でわかること!

  • Gutenberg用ブロックプラグイン2とは?
  • Gutenberg 設定:全般タブ▶︎全般設定
  • Gutenberg 設定:グループブロックタブ▶︎グループブロック
  • Gutenberg 設定:段落ブロックタブ▶︎段落ブロック
  • 投稿画面:オプションの表示を設定する「もっと書きやすく」

今回の記事では…

AFFINGER6のGutenberg用ブロックプラグイン2の設定方法をご紹介します。

投稿(記事編集)画面とページプレビューの幅に表示誤差が生じて 記事の配置がイメージしにくい…なんてことはありませんか?

投稿(記事編集)画面とページプレビューの幅を合わせて イメージ通りに記事を書きやすくする設定をご紹介します。もちろん!「投稿(記事編集)画面」以外のすべての設定項目も完全解説でお届けします。

それではご覧ください!

初心者でも安心!コスパ最強の洗練されたWordPressテーマ

AFFINGER6 購入 ▶︎ 詳しくはこちら

\\『すごいもくじLITE』が付いてくる!限定特典キャンペーン実施中!//

- 少しづつ増え続ける当サイトオリジナル特典付!-

Gutenberg用ブロックプラグイン2とは?

Gutenberg用ブロックプラグイン2とは?

Gutenberg用ブロックプラグイン2 とは、Gutenberg 用のブロックを追加するACTIONテーマ専用プラグインです。(AFFINGER6に無料でついてくる専用プラグインです。)

ブロックエディターを設定するための機能が備えられていて 執筆効率を上げるためには不可欠なプラグインです。

※ この記事では、インストール等の導入説明は 割愛します。

Gutenberg 設定:全般タブ▶︎全般設定

Gutenberg 設定:全般タブ▶︎全般設定

この章では、Gutenberg用ブロックプラグイン2の全般設定をご紹介します。

設定項目

  • 基本設定
  • マイブロック
  • 埋め込みURL
  • カラー設定

『Gutenberg 設定』画面を開きます。

『WordPress管理>ダッシュボード>AFFINGER 管理>Gutenberg 設定』をクリックします。

以下の画面が表示されます。

Gutenberg 設定

それでは順番に見ていきましょう。

基本設定

基本設定では「投稿(記事編集)画面の幅・自動保存間隔・ブロック設定」の設定ができます。

投稿画面の幅

投稿(記事編集)画面とプレビューの見栄えの違いが修正できます。

osaboo

「投稿(記事編集)画面とプレビューの見栄えの違い?」わかりづらいので…
イメージはこんな感じ!

※ 基本設定の設定項目は 投稿画面の表示に反映されます。

Gutenbergのデフォルト設定では 投稿(記事編集)画面の表示幅が『900px』になっている。
サイトのメイン幅が 『780px』の場合『120px』がはみ出る。

こんな感じで はみ出します。

投稿画面の幅:ズレ修正前

Gutenbergデフォルト『900px』を サイト幅『780px』に変更するとこんな感じ!

投稿画面の幅:ズレ修正後

※ サイトの幅に関して わかりづらい場合は以下の記事をご覧ください。

osaboo

設定の手順は ここから!

『Gutenberg 設定>全般タブ』を開くと 以下の画面が表示されます。

『投稿画面の幅』がデフォルトでは『空欄』になっているのでサイトのメイン幅を入力します。

サンプルでは『780』と入力します。

Gutenberg 設定:基本設定

※ 設定変更後、最後に『Save』をクリックします。

自動保存間隔

デフォルト設定のままで OK です。

  • 自動保存間隔『300』:デフォルトのままで OK です。

ブロック設定

全てにチェックを入れていますが…デフォルトのままで OK です。

デフォルト設定のままで OK です。

  • 「ブロックタイプまたはスタイルを変更」の項目をシンプルにする『OFF』
  • ブロックエリアのホバー時に枠線を表示する『OFF』
  • Gutenbergブロック厳選モード『ON』

マイブロック

下側にスクロールして 『マイブロック』まで移動します。

デフォルト設定のままで OK です。

Gutenberg 設定:マイブロック

埋め込みURL

下側にスクロールして 『埋め込みURL』まで移動します。

デフォルト設定のままで OK です。

Gutenberg 設定:埋め込みURL

カラー設定

投稿(記事編集)画面で表示されるメニューの初期設定(マーカー・枠の幅・変更色のパターン追加)ができます。

osaboo

カラー設定は 投稿画面のメニューに反映されるよ。
表示イメージはこんな感じ!

※ カラー設定の設定項目は 投稿画面で表示されるメニュー項目に反映されます。

段落(Pタグ)の入力メニューで『ペンアイコン』をクリックした時のサブメニューで確認できます。

マイ細マーカー設定の反映場所

投稿画面:マイ細マーカー

投稿画面 右側のブロックタブメニュー『枠線』をクリックした時のサブメニューで確認できます。

ボーダー設定の反映場所

投稿画面:ボーダー設定

投稿画面 右側のブロックタブメニュー『色:テキスト・背景』をクリックした時のサブメニューで確認できます。

オリジナルカラーパレットの反映場所

投稿画面:オリジナルパレット
osaboo

設定の手順は ここから!

下側にスクロールして 『カラー設定』まで移動します。

サイトでよく使うカラー設定を必要に応じて設定します。

Gutenberg 設定:カラー設定

※ 設定変更後、最後に『Save』をクリックします。

Gutenberg 設定:グループブロックタブ▶︎グループブロック

 Gutenberg 設定:グループブロックタブ▶︎グループブロック

この章では、Gutenberg用ブロックプラグイン2のグループブロックの設定をご紹介します。

設定項目

  • ブロック下の余白

『Gutenberg 設定』画面を開きます。

『WordPress管理>ダッシュボード>AFFINGER 管理>Gutenberg 設定』をクリックします。

タブを切り替え▶︎『グループブロック』タブをクリックします。

以下の画面が表示されます。

Gutenberg 設定:グループブロック

それでは見ていきましょう。

ブロック下の余白

ブロック下の余白では「-大」「-小」「大」の3種類の余白量が設定できます。

投稿(記事編集)画面で表示されるブロック下の余白メニューの初期設定ができます。

osaboo

ブロック下の余白は 投稿画面のメニューに反映されるよ。
表示イメージはこんな感じ!

※ ブロック下の余白の設定項目は 投稿画面で表示されるメニュー項目に反映されます。

投稿画面 右側のブロックタブメニュー『ブロック下の余白』をクリックした時のサブメニューで確認できます。

投稿画面:ブロック下の余白

※ ブロック下の余白や行間について詳しく知りたい方は以下の記事をご覧ください。

osaboo

設定の手順は ここから!

『Gutenberg 設定>グループブロックタブ』を開くと 以下の画面が表示されます。

サンプルでは『-大:-17』『-小:-7』『大:55』と入力します。

Gutenberg 設定:ブロック下の余白

※ 設定変更後、最後に『Save』をクリックします。

Gutenberg 設定:段落ブロックタブ▶︎段落ブロック

 Gutenberg 設定:段落ブロックタブ▶︎段落ブロック

この章では、Gutenberg用ブロックプラグイン2の段落ブロックの設定をご紹介します。

設定項目

  • 段落ブロックスタイル(アイコン)
  • 角丸

『Gutenberg 設定』画面を開きます。

『WordPress管理>ダッシュボード>AFFINGER 管理>Gutenberg 設定』をクリックします。

タブを切り替え▶︎『段落ブロック』タブをクリックします。

以下の画面が表示されます。

Gutenberg 設定:段落ブロック

それでは順番に見ていきましょう。

段落ブロックスタイル(アイコン)

段落ブロックスタイル(アイコン)では 段落ブロックにワンタッチ表示できるアイコンの色の変更や背景の初期設定ができます。

osaboo

段落ブロックスタイルのイメージはこんな感じ!
後でから変更が可能だけど…よく使うものは好みに変更しておくといいよ。

これはメモのサンプルです。

これはポイントのサンプルです。

これは注意のサンプルです。

osaboo

段落ブロックスタイル(アイコン)は 投稿画面のメニューに反映されるよ。
表示イメージはこんな感じ!

※ 段落ブロックスタイル(アイコン)の設定項目は 投稿画面で表示されるメニュー項目に反映されます。

投稿画面 右側のブロックタブメニュー『スタイル』をクリックした時のサブメニューで確認できます。

投稿画面:段落ブロックスタイル(アイコン)
osaboo

設定の手順は ここから!

『Gutenberg 設定>段落ブロック』を開くと 以下の画面が表示されます。

サイトでよく使う段落ブロックスタイルを必要に応じて設定します。

Gutenberg 設定:段落ブロックスタイル(アイコン)

※ 設定変更後、最後に『Save』をクリックします。

その他の非表示設定

下側にスクロールして 『その他の非表示設定』まで移動します。

一部にチェックが入っていますが…全てチェックを外したデフォルト設定で OK です。

デフォルト設定のままで OK です。

Gutenberg 設定:その他の非表示設定

角丸

角丸では 段落ブロックの角の丸み(R)の初期値が設定できます。

osaboo

段落ブロックの角丸はここだよ!

段落ブロック:角丸イメージ
osaboo

設定の手順は ここから!

下側にスクロールして 『角丸』まで移動します。

「角丸(R)が大きいと可愛い感じ・小さいとかっこいい感じ」で表現できます。
(デフォルトは『5』)

サンプルでは『2』を入力します。

Gutenberg 設定:角丸

※ 設定変更後、最後に『Save』をクリックします。

投稿画面:オプションの表示を設定する「もっと書きやすく!」

投稿(記事編集)画面の表示設定「もっと書きやすく!」

この章では、投稿(記事編集)画面の表示設定をご紹介します。

トップツールバーの設置とフルスクリーンモードの解除

投稿画面でオプションの表示を設定します。

投稿画面で最上部右側の右端『オプションアイコン』をクリックします。

投稿画面:オプション表示設定

おすすめ!表示設定の変更部分は「ここ」

投稿画面:設定メニュー

設定の概要

  1. オプションアイコン
    • オプションのサブメニューが開きます。
  2. トップツールバー
    • ツールバーを最上部に固定することができます。
  3. フルスクリーンモード
    • フルスクリーンモードを解除できます。

※ 標準設定から変更した方が操作性が向上しそうな2項目をピックアップしました。

osaboo

試してみて!^^/

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

とても便利な機能です。以下の記事にてご紹介しています。

AFFINGER6 マイブロックの便利な使い方【ブログ初心者はこれが知りたい!】
AFFINGER6 マイブロックの便利な使い方【ブログ初心者はこれが知りたい!】

AFFINGER6に搭載されている便利な機能「マイブロック」の登録方法から使い方までを具体例を使ってご紹介。楽して「ぶれない」記事を書くために是非使ってほしい機能です。記事の書き方が定まらないという方は是非ご覧下さい。初心者の目線で丁寧に解説しています。初心者必須!!

まとめ!AFFINGER6【Gutenberg用ブロックプラグイン2】の設定方法「使いやすい・見やすい・捗る」設定ポイント!

「記事をすらすら書きたい!書きやすくしたい!」等、効率を上げるためには不可欠な設定だと思います。初心者でもテーマの使い勝手が良くなれば自ずと効率よく(早く)記事編集・作成ができるようになる筈です。この記事がAFFINGER6を使い始めたばかりの初心者の方に役立てば嬉しいです。
今回は AFFINGER6【Gutenberg用ブロックプラグイン2】の設定方法をご紹介しました。

「最後まで、ご観覧いただきありがとうございました。」
また、次の記事で…お会いしましょう。\^^/



「稼ぐ」に特化したWordPressテーマ

action-affinger6-ex-1a

ACTION / AFFINGER

コスパ最強のWordPressテーマ

価格:14,800円(税込)

今なら漏れなく特典付き!!

AFFINGER6 ▶︎ 購入はこちら

「結果」を出すためのテーマ・プラグインが揃った戦略的セット

「コード管理・リンク計測」プラグイン