Gutenbergの横幅を変える方法

こんにちは、minoruです。

私はワードプレスのクラシックエディターが好きだ。Gutenberg(グーテンベルグ)は重いしゴチャゴチャと余計な物が多すぎるし、使いづらい。

だけどクラシックエディターのサポートは2021年までらしく、多分有志の誰かがクラシックエディター的な何かを作るだろうけど、それは確定事項では無いので、一応Gutenbergの操作に慣れるべく嫌々ながら更新頻度の低い別ブログで試している。

Guternbergの横幅を変える方法

まずGutenbergを使い始めて思ったのは実際にブログが表示される場合の横幅と、編集中の横幅が違うため、自分にとっては気持ち悪い箇所で改行になっていたりする。

なのでGutenbergのエディターの横幅を実際の横幅に合わせた。

WordPressのブロックエディタのコンテンツ幅を広げるのページが一番わかりやすかった。以下は自分の備忘録的に書いておく。

  1. functions.phpの最下部にCSSを読み込ませるための命令文を追加する
  2. CSSファイルを用意する
  3. そのCSSファイルをテーマの入っているフォルダの直下にアップロード

functions.phpに追加する奴

そもそもfunctions.phpて何やねんと言う人もいるだろう。ワードプレスにログインして、ダッシュボードの画面左端のメニューの一覧から「外観」を選び、「テーマエディター」に進んでみてほしい。

画面が変わったら今度は右端の方に「テーマのための関数(functions.php)」てのがあるから、それをクリックし、表示されたファイルの一番最下段に以下の命令文を書いて保存。

// ブロックエディタの幅を広げる
function add_my_assets_to_block_editor()
{
wp_enqueue_style('my-gutenberg-style', get_stylesheet_directory_uri() . '/my-gutenberg-style.css');
}
add_action('enqueue_block_editor_assets', 'add_my_assets_to_block_editor');

CSSファイルに書く事

自分のパソコンのデスクトップとか好きなところでテキストエディタを開き、以下のCSSを書いてmy-gutenberg-style.css という名前で保存する。

672px ←この部分は自分の使ってるテーマによって最適な数値は違うので、一度やってみて、合わなければ増やしたり減らしたりしよう。

// my-gutenberg-style.css
.wp-block {
max-width: 672px; /* 好きな幅で */
}

私の場合はテーマをSimplicity2使ってるんですが、上記でピッタリな感じ。

アップロードする場所

あとはFTPソフトやレンタルサーバーが提供しているファイルマネージャーなどを使って先程作ったCSSファイルをアップロードする。

hogehoge.com/wp-content/themes/simplicity2

私の場合は末尾がsimplicity2のフォルダ内直下だが、自分の使っているテーマのフォルダの直下にCSSファイルをアップロードしよう。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする