これから Nishiki Pro
テーマを使うなら1度は確認しよう!

Nishiki テーマおすすめ設定 テーマおすすめ設定を見る
  1. ホーム
  2. お知らせ
  3. Nishiki Pro:編集画面と表示画面の差異を極力減らすため、ブロックエディター(Gutenberg)の入力幅をコンテンツ本文の幅と合わせました

お知らせ

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

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

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

こんな設定をしています

まずはコンテンツ幅を設定しよう

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

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

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

ブロックエディターの編集画面を開いて入力幅を確認しよう

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

サイドバーがついていた場合

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

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

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

サイドバー付きページテンプレートを設定している場合も対応

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

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

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

このページが役に立ちましたら、ぜひシェアしてください。

WordPress テーマ Nishiki Pro

「ウェブサイト運営に本当に必要とされる機能」をテーマ内にまとめて搭載した WordPress テーマです。

ブロックエディター機能を強化し、これまでの WordPress では難しかったコンテンツが簡単に作れます。

ブログ、ポートフォリオ、コーポレートサイト、ビジネスサイトなど、様々な目的のウェブサイトに対応できるテーマです。