【SWELL】記事執筆画面の横幅を狭くするカスタマイズ方法【WordPress】

WordPressテーマのSWELLでは記事執筆画面の横幅がかなり広めです。

そうなると書いても書いても一行分が埋まらずに、書く量は同じでもタイピングがしんどくなってきます。

本記事では、執筆画面の横幅だけを狭くするカスタマイズ方法をご紹介します。

CFXLOG

functions.phpをいじるので、自己責任にてお願いします！

手順は以下の通りです。

まずはWordPressのダッシュボードから以下の通り移動します。

外観 ＞ テーマファイルエディター ＞ functions.php

小テーマに追記しましょう。

親テーマのfunctions.phpを編集すると、アップデート時に設定が消える場合があります。

functions.phpの最後に次のコードを追記すると、横幅を750pxに変更できます。

/* ---------------------------------------------------------------
ブロックエディタ の横幅を減らす
--------------------------------------------------------------- */
add_action( 'admin_head', function() {
 echo '<style>.wp-block{max-width: 750px !important}</style>'."\n";
});

/* ---------------------------------------------------------------
ブロックエディタ の横幅を減らす
--------------------------------------------------------------- */
add_action( 'admin_head', function() {
 echo '<style>.wp-block{max-width: 750px !important}</style>'."\n";
});

750pxにした理由は、たまたま僕の好みだったからです。

ぜひ微調整しつつベストな横幅を見つけてください。

カスタマイズにあたって疑問に思えそうな点をまとめました。

追加したコードを削除すればOKです。

/* ---------------------------------------------------------------
ブロックエディタ の横幅を減らす
--------------------------------------------------------------- */
add_action( 'admin_head', function() {
 echo '<style>.wp-block{max-width: 750px !important}</style>'."\n";
});

/* ---------------------------------------------------------------
ブロックエディタ の横幅を減らす
--------------------------------------------------------------- */
add_action( 'admin_head', function() {
 echo '<style>.wp-block{max-width: 750px !important}</style>'."\n";
});

今回は小テーマにコードを追加しているので、SWELLのアップデートを行なっても元に戻りません。

次の二つに気をつければ、どこに貼り付けてもOKです。

最近のPHPコードでは?>がないこともあるので、なければ ② は気にしないでOKです。

functions.phpをいじるカスタマイズは他にも書いているので、あわせてどうぞ。

あわせて読みたい

【WordPress】内部リンクのピンバック通知を停止する方法 内部リンクを貼った時の自分宛のピンバック通知、いらないんだが… WordPressの仕様で、自分が過去に書いた記事にリンク（内部リンク）を貼った場合にもピンバック通知と…