ブロガー『wordpressでブログ書いてるんですけど、htmlのspanタグで指定しているフォントサイズを一括で変更する方法ありますか?
膨大なので、手作業ではなく自動で変更したいです。』

wordpressでブログを書いていて、上のような問題にぶつかったので、その解決方法をご紹介します。

記事の内容
  • ブログ記事のフォントサイズ(htmlのspanタグ)を一括変更する方法
  • サクラエディタを使った置換のやり方

フォントサイズ変更したいけど、余計なプラグインとか重くなるから入れたくない!という方向けです。

htmlテキストのspanタグとは?

wordpressでブログ書いている人はご存知だと思いますが、記事投稿画面では「ビジュアル」「テキスト」とありますよね。

それでビジュアルしか使わないと、spanタグ(<span></span>)に見覚えない方もいるかもですが、spanタグというhtmlタグがあります。

文字列をspanタグで囲むことで、例えば次のようなテキスト調整ができます。

  • 文字色、背景色の調整
  • フォントサイズの変更

よくわからないよ、という方は、wordpressのビジュアルモードで上記の処理を行った後、該当箇所をテキストモードで確認してみてください。<span>~</span>というタグで囲まれているはずです。

問題1:ブログ記事の文字サイズが小さすぎる⇒読めなーい!

記事を書いていると、文章の重要度などに応じて、フォントサイズを適宜変えながら書くことがあると思います。

たとえば通常はフォントサイズ:14pxで書いているけど、強調したい文章はフォントサイズ:20pxで書いている…という感じです。

僕はこんな感じでフォントサイズを使い分けつつ記事を量産していたのですが、ある日つぎのような問題にぶちあたりました。

me

あれ、僕のブログの文字、小さすぎない?これじゃ見にくいよ…

いや、もっと早く気づけよ!と思いますが、なぜかある日ふいにそう感じました。

スマホの画面で見ていたときはそこまで小さく思わなかったのですが、PC画面(とくにIE)で確認してみたら、なぜかめちゃくちゃ小さかったのです。

問題2:フォントサイズを変更したくない箇所(文章)もある

じゃあ全ての記事で、ビジュアルモードで全テキストを選択して、一気にフォントサイズを大きくすれば?wordpressなら簡単でしょ?

と思われそうですが、実はまだ問題が…

僕は1つの記事でも、重要度に応じてフォントサイズを使い分けていたので、一括で1つのサイズに変更することはしたくなかったのです。

つまり、次のようにしたかったのです。

  • 通常の文章⇒14pxから16pxへ変更
  • それ以外の文章⇒そのまま(変更しない)

このような条件だと、ビジュアルモードで全テキストを一括選択からのフォントサイズ変更だとまずいわけです。変更しなくていい文章までフォントサイズが変わってしまいます。

解決策:spanタグの特定のサイズ指定箇所だけ変更する

ということで解決策として、以下の方法を思いつきました。

フォントサイズ:14pxと指定のある文章だけフォントサイズ:16pxに変更する

こうすれば、たとえばフォントサイズ:18pxとかで指定していた他の文章にはノータッチとなります。変更したいのは14pxの部分だけ。

でも、これを手作業で1つ1つやりたくないので、当然ツールを使って自動で一括変換することにします。

サクラエディタの「置換機能」で一括変換

サクラエディタをご存知ですか?日本製Windows用のテキストエディタです。フリーで提供されています。

このサクラエディタの置換機能を使って、フォントサイズを一括変換する方法をご紹介します。

① 記事のhtmlテキストをサクラエディタへコピー

まずは、wordpressでフォントサイズを変更したい記事のhtmlテキストをコピーして、サクラエディタへ貼り付けましょう。

htmlテキストはwordpressのテキストモードから確認できます。

テキストモードで適当な箇所をクリックして、[ctrl+A]でテキスト全体を選択できます(windowsの場合)。

② サクラエディタの置換機能を使い、変更したい箇所のフォントサイズを変更する

記事のhtmlテキストをサクラエディタに貼ったら、フォントサイズを変更したい”文字列”を置換します。

僕の場合、次のように置換をしました。

  • 置換前:<span style=”font-size: 14px;”>
  • 置換後:<span style=”font-size: 16px;”>

サクラエディタの置換を画像で表すと、次のような感じ。(字が小さくて見えなーい!という方は画像クリックで拡大表示してみてください^^;)

ちなみにサクラエディタの置換機能は、エディタの上で[ctrl+R]で使えます。

上画像の赤枠で囲んだ箇所のように、「置換前」「置換後」にフォントサイズを変更したいhtmlタグを入れ、最後に「すべて置換」をクリックで一括変換できます。

③ 置換後(フォントサイズ変更後)のhtmlテキストをwordpressへコピー

上のステップで一括変換できたhtmlテキストを、wordpressの元の記事のhtmlテキストに上書き保存して完成です。

念のため、ビジュアルモードに変更してみて、体裁がおかしな場所がないか確認してみてください。

場合によっては何かしらの微調整が必要となる場合があるかもしれません。とはいえ、膨大な文章を1つ1つ選択してフォントサイズを変更するよりはいくぶん楽になったはずです。

まとめ

ブログ記事のフォントサイズを一括して変更したい場合のサクラエディタを使った変更方法のご紹介でした。きっともっと最適な方法があるかもしれませんが、とりあえず僕の行った方法を解説してみました。

サクラエディタはパソコンの知識がなくても誰でも使えますし、置換機能もとっても優秀なので、使ってみると良いです。