AFFINGER WordPress

老眼対策でWordPressブロックエディターの編集文字サイズを大きくする

とりあえずエディターの文字を大きくしたい！

最近はOSでもアプリでも新しい環境をセットアップするときに必ず「表示の文字を大きくする」という作業が入ります。

WordPressのテーマをAffinger5 から Affiger 6に変えたときも、エディターの文字を大きくしました。

今まで使っていたAffinger5はクラシックエディターで使っていました。その時は以下の方法で文字を大きくして使っていました。

Affinger6はブロックエディターで使います。上記の方法をやってみましたがうまくいきませんでした。

ブロックエディターの文字サイズ変更方法を探していたら、以下のブログが見つかりました。今回の方法はここの情報を元にしています。感謝。

エディター用のCSSを追加してfunctions.phpに読み込むように記述する点は一緒なのですが、書き方がちょっと違いました。

cssは上記のブログのものと異なります。

デザインの再現性よりも、とにかく文字を大きく見やすくする設定にしました。

視力に問題を抱えるブロガーさんの参考になれば幸いです。


Xserverでfunctions.phpを書き換え、cssファイルを追加する

私はXserverを使っているので、Xserverのファイルマネージャー上で作業をしました。他の方法もあるかもしれません。

functions.phpに追記

Xserverのコントロールパネルからファイル管理へ

ファイルマネージャー上で
(ドメイン名) > public html > wp-content > themes > affinger-child に移動

functions.php を選択して編集ボタンをクリック

以下の内容を追記

function gutenberg_support_setup() {
  add_theme_support( 'editor-styles' );
  add_editor_style( 'editor-style.css' );
}
add_action( 'after_setup_theme', 'gutenberg_support_setup' );

functions.php 全体はこうなります。

<?php
if ( !defined( 'ABSPATH' ) ) {
  exit;
}
function gutenberg_support_setup() {
  add_theme_support( 'editor-styles' );
  add_editor_style( 'editor-style.css' );
}
add_action( 'after_setup_theme', 'gutenberg_support_setup' );

editor-style.cssファイルを追加

同じディレクトリで「新規ファイル」ボタンをクリック

名前は editor-style.css に設定

editor-style.cssを選択して「編集」ボタンをクリック

以下のように設定しました。クラシックエディターの時と同じです。

div, p {
  font-size: 24px;
  line-height: 40px;
  margin-bottom: 25px;
}

h2 {
  font-size: 24px;
  line-height: 40px;
}

これで次にブロックエディターを開いた時には、編集文字が大きくなっているはずです。


【備忘録】Localでfunctions.phpのあるパス

Local by flywheelのローカル環境では、以下のパスにfuncsions.phpがあります。

/Users/{ユーザー名}/Local Sites/{サイト名}/app/public/wp-content/themes/{テーマ名}/functions.php

ブロックエディターはSafariの方が安定しているっぽい

Chromeでブロックエディターを開いて記事を書いていると、一時的に無反応になることがちょくちょくあります。

Chromeの問題なのかWordPressの問題なのかAffingerの問題なのか、MacOSやM1チップの問題なのか分かりませんが、ちょっと使いづらいです。

試しにブラウザをSafariにしてみたら問題なくなりました。

とりあえず記事を書くのはSafariでやることにします。

-AFFINGER, WordPress