2015.08.08  2018.08.11

WordPressテーマで英文を使うと大文字になってしまうので子テーマを使ってCSSを修正した

Web制作


当ブログ「ねたまめ.com」ですが、WordPressテーマ「Simple Catch」を使用しております。 余計なものがなくて、シンプルで見やすいテーマを探していたのでバッチリでした。
(※現在は違います)

が…、なんとも微妙な現象がおきました。

一つ前の記事 で、見出し(h3)にGoogleCalendarという英文を使ったのですがプレビューを見るとGOOGLECALENDARになってしまっていました。ださいですね。

スタイルの修正 もくじ
  1. 英文が大文字になってしまう原因を探す
    text-transformとは
  2. CSSを修正する
    子テーマを使用する

英文が大文字になってしまう原因を探す

こんな時は、style.cssでtext-transformを検索します。
4箇所発見しました。

h3が、text-transform:uppercase;となっています。

text-transformとは

英字の大文字/小文字をCSSで指定します。
値は以下の4つとなります。

  • none
    記述した通りに表示(初期値)
  • capitalize
    単語の先頭文字を大文字で表示。(↑使われてますね)
  • lowercase
    全てを小文字で表示。
  • uppercase
    全てを大文字で表示。(↑これも使われてますね)

う〜ん、あんまり普段使うことはなさそうですね。
直接、大文字にした方が早いです。

CSSを修正する

指定されてる値を変更、もしくはプロパティ自体を削除したいところですが
ちょっと待ってください!
WordPressのテーマはご存知の通りアップデートされます。

ここで直接 style.css に手を加えてしまうと、アップデートの時に元に戻ってしまいます。
こういう時は”子テーマ”を作ります。

子テーマを使用する

まずは、サーバーに上がっているテーマフォルダを念のためバックアップしておきましょう。

FTPソフトで、simple-catchフォルダ(テーマフォルダ)をGET操作して下さい。
場所は、〜/wp-content/themes/simple-catch です。
(※もちろん全てのWordPressのファイルをバックアップしてもOKです。)

simple-catchフォルダと同じ階層に、空のフォルダを作ります。
名前は何でも良いですが、私はわかりやすいように simple-catch_child としています。

すると、こういった状態になると思います。(赤線で囲ったのは階層をわかりやすくするためです)

simple-catch_childフォルダに、新しく style.css を作成し、以下を記述して下さい。

これで「この style.css は、simple-catch というテーマの”子テーマ”である simple-catch_child ですよ。simple-catch の style.css を上書きしますよ。」ということになります。
他にも記述できる内容はありますが、この2行で子テーマと認識されます。
※Template: に入力するのはテーマ名ではなくフォルダ名です。

また同様に、functions.phpも作成し、以下を記述して下さい。
機能はコメントの通り(削除してかまいません)。

 

そして、やっと本題です。
以下を記述して下さい。

これで、style.cssのtext-transform:uppercase;を、(simple-catch_childフォルダ内の)style.cssのtext-transform: none;が上書き出来るようになります。

先程 text-transform が、他に3項目ありましたが、ここはお好みでどうぞ。
私は、#wp-calendar th だけそのままにしておきました。

FTPソフトで simple-catch_child フォルダをUP。
WordPressの[外観]→[テーマ]を見ると simple-catch_child というテーマが表示されているので[有効化]して下さい。(←これ!忘れがち!)

これで、見出し(h3)の GOOGLECALENDAR が、テキストそのままの GoogleCalendar に変更されました。


  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。