こんにちは "osaboo"
です。"@osaboo_Bot"
この記事で解決できる悩み
この記事では、これらのお悩みを解決します。
「まずはブログを始めたい！」という方は、『WordPressブログ完全ガイド』をご覧ください。
開設から運営・収益化までを初心者向けに画像付きでわかりやすく解説しています。
AFFINGER7のGutenberg設定とは？
AFFINGER7のGutenberg設定は、WordPressのブロックエディター「Gutenberg」を使いやすくするための設定です。
投稿画面の幅やブロックの表示設定などを最適化することで、記事作成がしやすくなり、執筆作業の効率アップにつながります。
最初に設定しておけば、その後の記事作成もスムーズに進められます。
Gutenberg設定でできること
AFFINGER7のGutenberg設定では、投稿画面を見やすくしたり、記事を書きやすい編集環境に整えたりできます。
例えば、次のような設定が可能です。
- 投稿画面の表示幅を変更する
- ブロックエディターの表示を調整する
- オリジナルのカラーパレットを登録する
- マイブロックを活用して定型コンテンツを使い回す
どれも一度設定しておけばOKなので、最初に済ませておくと毎日の記事作成がグッと快適になります。
AFFINGER7でおすすめのGutenberg設定
AFFINGER7のGutenberg設定には、記事作成を快適にする便利な機能が用意されています。
ここでは、初心者にもおすすめの設定を順番に紹介します。迷ったら、この設定を参考に進めてみてください。
全般設定
全般設定では、投稿画面やブロックエディターを使いやすくする基本設定を変更できます。まずは、記事作成を快適にするおすすめ設定から見ていきましょう
全般設定設定では以下の項目が設定できます。
- 基本設定
- ブロック設定
- マイブロック
- 埋め込みURL
- カラー設定
- マイ細マーカー設定
- ボーダー設定
- オリジナルカラーパレット
設定場所
Menu『WordPress管理画面 → AFFINGER管理 → Gutenberg設定 → 全体』をクリックします。
基本設定
投稿画面の幅
投稿画面の幅を設定すると、公開後の見た目に近い状態で記事を書けるようになります。
本文の横幅に合わせておくと、改行位置のズレが少なくなり、よりスムーズに執筆できます。
おすすめ設定
「投稿画面の幅」の欄に、ブログの本文幅に近い数値を設定するのがおすすめです。
例：640〜900px（使用しているレイアウトに合わせて調整）
ワンポイント
- ブログの横幅に合わせておくと、プレビューを何度も確認する手間を減らせます。
- PC閲覧時のサイトの幅（width※デフォルトは1060px）から「420」を引くとおおよそ整います。
※ サイトの幅を確認する方法 は、『AFFINGER管理 → 全体設定 → サイト全体のレイアウト一括設定』で確認できます。
＋ サイトの幅（コンテンツ幅）の設定場所を確認する
関連記事 詳しい設定方法は、以下の記事で解説しています。
-
-
AFFINGER7のサイト幅設定方法｜1060pxは狭い？おすすめの横幅を解説
AFFINGER7のサイト幅設定方法を解説。初期設定の1060pxは狭いのか、おすすめの横幅は何pxなのかを紹介します。PC表示を見やすくするサイト幅の変更手順や設定ポイントも詳しく解説。
自動保存間隔
Gutenbergには、記事を自動で保存する機能があります。
万が一ブラウザが閉じたり、通信トラブルが発生した場合でも、保存データを復元しやすくなります。
ブロック設定
ブロックを変更するメニューをシンプルに表示する機能です。
メニューが見やすくなるため、ブロックの切り替えがしやすくなります。
マイブロック
マイブロックは、よく使う文章や装飾を登録して再利用できる便利な機能です。
CTAやプロフィール、注意書きなどを毎回作り直す必要がなくなるため、記事作成の時短につながります。
埋め込みURL
URLを貼り付けたときに、自動でブログカードへ変換するかを設定できます。
AFFINGERではブログカードをよく使うため、基本的には自動変換を活用するのがおすすめです。
カラー設定
記事内で使う各マーカーやボーダーの色を設定できます。
よく使う色を登録しておくと、毎回色を選び直す手間がなくなります。
マイ細マーカー設定
テキストの下側に引く細いマーカーの色を設定できます。
おすすめ設定
- マイ細マーカーA：黄色系（重要ポイント）
- マイ細マーカーB：ピンク系（補足や注意）
- ストライプにする → OFF
ワンポイント
デフォルトで設定される色の系列がおすすめです。シンプルな配色は、記事全体に統一感が出て読みやすくなります。
＋ マイ細マーカーの反映場所を確認する
投稿画面（エディター）：ツールバーの段落（Pタグ）入力メニューで、『ペンアイコン（書式）』をクリックすると表示されるドロップダウンメニューで確認できます。
ボーダー設定
ボックスや囲み枠の線の色や角丸を設定できます。
サイトデザインに合わせておくと、記事の装飾に統一感が生まれます。
おすすめ設定
- カラー：サイトのメインカラーに合わせる
- 角丸：3px（初期設定のまま）
ワンポイント
迷った場合は初期設定のままでOKです。まずは記事を書くことを優先しましょう。
＋ ボーダー設定の反映場所を確認する
投稿画面（エディター）：右側のブロックタブメニュー内にある設定タブの『枠線（プリセット）』をクリックすると表示されるサブメニューで確認できます。
オリジナルカラーパレット
⭐ ここは特におすすめ！
オリジナルカラーパレットを設定すると、Gutenbergの色選択画面に自分専用のカラーを表示できます。
毎回カラーコードを入力する必要がなくなるので、記事作成がかなり快適になります。
おすすめ設定
- カラーA：強調カラー
- カラーB：メインカラー
- カラーC：リンク補助
- カラーD：注意・補足
| 用途 | おすすめ色 |
|---|---|
| 強調カラー | オレンジ系 |
| メインカラー | サイトのブランドカラー |
| リンク補助 | ブルー系 |
| 注意・補足 | グレー系 |
- 配色の順番は自由でOK
ワンポイント
色を固定しておくと、どの記事でも同じデザインルールで装飾できるので、サイト全体の統一感が向上します。
＋ オリジナルカラーパレットの反映場所
投稿画面（エディター）：右側のブロックタブメニュー内のスタイルタブにある『色：テキスト・背景』をクリックすると表示されるサブメニューで確認できます。
グループブロック
グループブロックでは、グループブロックの初期デザインや装飾を設定できます。
記事内で囲み枠や背景付きのコンテンツをよく使う場合は、最初に設定しておくと統一感のあるデザインで記事を作成できます。
おすすめ設定
ストライプ枠スタイル
- カラーA：#ccc（デフォルト）
- カラーB：#fff（デフォルト）
- 背景色： #fff（デフォルト）
ブロック下の余白
- [-大]：-20（デフォルト）
- [-小]：-10（デフォルト）
- [大]：40（デフォルト）
基本的には初期設定のままでOKです。
デザインにこだわりたい場合のみ、自分のサイトに合わせて変更しましょう。
ワンポイント
記事ごとにデザインを変えるより、最初に設定を統一しておくとサイト全体にまとまりが出ます。
＋ ストライプ枠 スタイルの反映場所を確認する
投稿画面（エディター）：右側のブロックタブメニュー内にあるスタイルタブでスタイルをクリックし、表示される『ストライプ枠』を選択すると確認できます。
＋ ブロック下の余白の反映場所を確認する
投稿画面（エディター）：右側のブロックタブメニュー内にある設定タブで『ブロック下の余白』をクリックすると、表示されるサブメニューで確認できます。
関連記事 こちらの記事で詳しく解説しています。
-
-
AFFINGER7の余白・行間を調整する方法｜Pタグ・ブロック間の設定を解説
AFFINGER6の余白・行間の調整方法を初心者向けに解説。Pタグや要素間の設定手順から、見やすいレイアウトに整えるコツまでわかりやすくまとめています。
段落ブロック
段落ブロックでは、ブロックスタイルのアイコン色や背景色などの初期設定を変更できます。
よく使うデザインを設定しておけば、毎回設定し直す必要がなくなり、記事作成がグッと快適になります。
おすすめ設定
段落ブロックスタイル(アイコン)
- よく使う文字色やマーカーのみ設定する
- その他の非表示設定はデフォルトでOK
角丸
- 5（デフォルト）
ワンポイント
マーカーや文字色を使いすぎると読みにくくなるため、2〜3色程度に絞るのがおすすめです。
＋ 段落ブロックスタイル(アイコン)の反映場所を確認する
投稿画面（エディター）：右側のブロックタブメニュー内にあるスタイルタブで「スタイル」をクリックすると表示されるサブメニューで確認できます。
＋ 角丸の反映場所を確認する
以下のサンプル画像では、『20px』に設定しています。
サイト全体のイメージに合わせると効果的です。
例えば、サムネイル画像などを角丸に設定したら、同じぐらいの角丸にするとかですね。
タブブロック
タブブロックでは、タブデザインの初期設定を変更できます。
比較記事や料金表など、情報を切り替えて見せたいときに便利なブロックです。
おすすめ設定
デフォルト設定
- 基本的にはデフォルトでOK
サイトカラーに合わせたい場合だけ変更しましょう。
ワンポイント
タブブロックは使いすぎに注意、比較したい情報だけに使うと見やすくなります。
＋ デフォルト設定の反映場所を確認する
投稿画面（エディター）：右側のブロックタブメニュー内にあるスタイルタブで「スタイル」をクリックすると表示されるサブメニューで確認できます。
コードブロック
コードブロックでは、コードを見やすく表示するためのデザインや初期設定を変更できます。
HTMLやCSS、PHPなどのコードを記事で紹介する機会が多い場合は、自分のサイトに合ったデザインに設定しておくと見やすくなります。
初心者が最初に設定しておきたいGutenberg設定まとめ
AFFINGER7のGutenberg設定には多くの項目がありますが、最初からすべて変更する必要はありません。
まずは、記事作成が快適になるおすすめ設定から見直していきましょう。
| 設定項目 | おすすめ |
|---|---|
| 投稿画面の幅 | サイトの本文幅に合わせる |
| 自動保存間隔 | 初期設定のままでOK |
| ブロックタイプまたはスタイルを変更 | ON |
| ホバー時に枠線を表示 | お好みでOK |
| Gutenbergブロック厳選モード | 最初はOFFがおすすめ |
| マイブロック | 編集リンクを表示 |
| 埋め込みURL | 初期設定のままでOK |
| オリジナルカラーパレット | よく使う色を登録 |
| グループブロック | 初期設定のままでOK |
| 段落ブロック | よく使うデザインだけ設定 |
| タブブロック | 初期設定のままでOK |
| コードブロック | ダークモードがおすすめ |
よくある質問（FAQ）
Gutenberg設定は後から変更できますか？
はい。いつでも変更できます。設定を変更しても、すでに公開している記事には基本的に影響ありません。
初期設定のままでも記事は書けますか？
問題なく記事を書けます。ただし、投稿画面の幅やマイブロックなどを設定しておくと、より快適に執筆できます。
Gutenberg設定を変更すると公開中の記事も変わりますか？
設定内容によって異なります。編集画面だけに反映される項目もあれば、ブロックのデザインに影響する項目もあるため、変更後は一度プレビューで確認するのがおすすめです。
まとめ！AFFINGER7のGutenberg設定方法｜記事を書きやすく・見やすくする初期設定
AFFINGER7のGutenberg設定を見直しておくと、投稿画面が見やすくなり、記事作成をより快適に進められます。
すべての設定を変更する必要はありませんが、自分がよく使う機能やデザインをあらかじめ設定しておくことで、毎回の編集作業を効率化できます。
まずはこの記事で紹介したおすすめ設定を参考に、使いやすい編集環境を整えてみてください。
