\ お問い合わせはこちら /

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

  • SWELLに変えてから、記事執筆画面の横幅が広く感じる…

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

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

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

Nommy

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

WordPressテーマSWELLで記事執筆画面の横幅を狭める方法

手順は以下の通りです。

  1. 外観 > テーマファイルエディター > functions.php
  2. 横幅を調整するコードを追加する

1. functions.phpに移動

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

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

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

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

2. 横幅を調整するコードを追加する

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

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

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

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

カスタマイズにあたってのQ&A

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

元に戻す方法

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

PHP
<div class="hcb_wrap"><pre class="prism undefined-numbers lang-php" data-file="functions.php" data-lang="PHP"><code>/* ---------------------------------------------------------------
ブロックエディタ の横幅を減らす
--------------------------------------------------------------- */
add_action( 'admin_head', function() {
 echo '<style>.wp-block{max-width: 750px !important}</style>'."\n";
});</code></pre></div>

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

コードを張る位置について

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

  1. <?php の後ろ
  2. 既存の ?> の前

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

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

普段はエンジニアとして働きつつ、旅行では「住むように旅する」をテーマに動き回っています。

TABIGRAMMER では、
・旅の情報(台湾を中心としたアジア旅ガイド)
・ミニマリストの持ち物や旅の効率化テクニック
・ブログ運営やプログラミング記事

といった、旅とITが交差するコンテンツを発信しています。

難しいことをわかりやすく、旅をより快適に。そんなスタイルで記事を書いています。

コメント

コメントする

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)