Nishiki Pro：編集画面と表示画面の差異を極力減らすため、ブロックエディター（Gutenberg）の入力幅をコンテンツ本文の幅と合わせました

お知らせ

このページで紹介している機能はこれまで Nishiki Pro 製品版のみ利用可能でしたが「よりテーマの機能や便利さを知ってもらい、ワードプレスを使ったブログやウェブサイト運営を楽しみながら継続できるきっかけにして欲しい」という思いから、お試し版でも利用可能といたしました。

もし、お試し版をご使用いただき、気に入っていただけましたら、継続的なアップデートやサポートのサービスが利用できる「製品版」のご利用を検討ください。

ブロックエディターの入力画面と、実際に表示される画面って、なるべく差がないほうが嬉しいと思うのですが、Nishiki Pro テーマでは、以下のようにブロックエディターの入力幅を設定しています。

こんな設定をしています

ワードプレスの管理画面より「外観」→「カスタマイズ」を選択して、サイト基本情報の「サイトコンテンツ全体幅」を見てください。

例えば、以下のように 900px に設定したとします。

これで実際にページとして表示されるコンテンツ幅は 900px に設定されました。

次に、投稿または固定ページのブロックエディターの編集画面を開いてください。入力幅は、コンテンツ全体幅と同じく 900px に設定されます。

下の画像のように、カスタマイザーの投稿または固定ページでサイドバーを表示する場合もあると思います。

左サイドバーまたは右サイドバーを表示している場合、入力幅は、サイトのコンテンツ全体幅 -（サイドバー + サイドバーのマージン）に設定されます。

上の設定を例にすると、下の画像では 900px - （ 300px + 50px ） = 550px に設定されています。

Nishiki Pro はページごとにレイアウトを変更できる「ページテンプレート」があります。

「ページテンプレート」を左サイドバーまたは右サイドバーに設定している場合も、サイトのコンテンツ全体幅 -（サイドバー + サイドバーのマージン）の入力幅が適用されます。

※ ページテンプレートを設定後、更新してから再度編集画面を読み込むと、入力幅が変わります。