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

お知らせ

これから 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 では難しかったコンテンツが簡単に作れます。

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

最新情報をチェック!

Nishiki / Nishiki Pro テーマに特化した情報を「にしきちゃん」がお伝えします😀

  • リリース情報
  • 新機能の紹介
  • 便利な使い方
  • 開発中の機能紹介
  • 導入事例
  • あるある日常ネタ

など

著者

bouya Imamura

東京都北区十条にあるウェブサイト(ホームページ)制作会社 AnimaGate(アニマゲート) という会社をやっています。サポトピアでは自社製品・サービスの全般的な開発・管理などを行っています。これまで数多くのウェブサイトの新規作成・リニューアル・運営などを経験し、WordPress(ワードプレス)公式サイト登録済みテーマやプラグインなど、ウェブサイト運営に役立つ様々なツールを開発・公開しています。サポートの一環として YouTube のライブ配信などオンラインサポートを試験運用しています。ぜひチャンネル登録いただけると大変嬉しいです。→ブログはこちら