何が起きたのか
WordPressで記事を書いていると、見出しやタイトルに英単語を使いたくなる時がある。
例えば、この記事がそうだ。
この記事は、「WordPress」という単語をタイトルの一部として使用している。
ところが、Excelのオートコレクトのような仕組みが自動的に適用されて、この英単語がすべて大文字になってしまう場合がある。
WordPressのテーマによっても挙動は異なると思うが、このブログで使用しているTwenty Sixteenの場合は、H4サイズの見出しのみが大文字化されるという事態に遭遇した。
他のサイズの見出しだと何も起こらなかったのだが、H4サイズの見出しで小文字を使用すると、以下のように自動的に大文字に変換されてしまうのだ。
もちろん、テキストは「WordPressテスト見出しH4」のように入力しているのだが、このように表示されてしまうのだ。
何が原因なのか
このような場合、「犯人」はたいていCSSだ。
CSSには「text-transform: uppercase」という構文があり、この構文が有効な範囲内では小文字が大文字に変換されてしまう。
英語文化圏では便利な機能なのかも知れないが、日本語利用者には必要性がよく分からないし、正直に言ってしまえば邪魔でしかない機能だ。
テーマのCSSを検索してみると、やはりこの構文を使っている箇所があった。
それどころか、あちこちで当たり前のように使われていて驚いた。
CSSの修正方法
以下の手順は中級者以上向けとなる。
スキルに自信がない場合は、無理に自力で解決しようとせず、最初から見出しやタイトルを勝手に大文字にしないテーマを使用することをおすすめする。
テーマエディターを起動する
まずは、WordPressのサイドメニューから「外観」を選択し、サブメニューから「テーマエディター」を選択しよう。
CSSのファイルを選択する
続いて、テーマエディターの画面の右サイドメニューから、「スタイルシート(style.css)」を選択しよう。
修正箇所を特定する
このファイル内を「text-transform: uppercase」で検索し、当該箇所をコメントアウトしてしまえばよい。
コメントアウトでなく、物理的に削除しても効果は同じだが、後々元に戻す必要があるかも知れないのでおすすめはしない。
検索の方法は、テーマエディターの画面上で、CtrlキーとFキーを同時に押下すればよい。
すると、画面上部に検索テキストの入力ボックスがポップアップ表示されるので、そこに検索する文字列を入力してEnterキーを押下するだけだ。
検索文字列が「text-transform: uppercase」のように長いと表示が途中で切れてしまうが、特に問題なく検索できる。
検索して見つかった場所があれば、カーソルがその地点へ自動的に移動し、検索した文字列の背景が黄色でハイライト表示される。
当該箇所を修正する
当該箇所で間違いなければ、前後にコメントマークを挿入し、当該箇所をコメントアウトしよう。
コメントアウトの方法は、無効にしたい行の前後に「/*」および「*/」を挿入すればよい。
検索で見つかった箇所が複数存在し、どこをコメントアウトするべきなのか判断が難しいような場合は、一つずつ順番に変更してみて都度結果を確認するなどの方法を採るのがよいだろう。
あるいは、影響がないと思える状況であれば、検索で見つかった場所を全てコメントアウトしてしまっても問題ないかも知れない。
いずれにしても、先にバックアップを取得してから作業することをおすすめする。
コメントアウトを実施すると、CSSファイルの当該行付近は以下のようになる。
以上により、見出しやタイトルが勝手に大文字になる現象は回避できるようになるはずだ。
修正した結果
最初に例として示したH4の見出しは、小文字混じりのまま問題なく表示されるようになった。