Twenty Twelve・Twenty FourteenのGlobal_menuで小文字が大文字になってしまう件の修正

現象

このサイトはWordPressのデフォルトテーマだった「Twenty Twelve」の子テーマを作りカスタマイズしています。

「Twenty Twelve」をベースにして、基本部分で「Twenty Twelve」のレイアウトを引き継ぎながら、子テーマのstyle.cssで新たなデザインと機能を付け加えています。
子テーマにする事で「Twenty Twelve」のバージョンアップで修正部分を書き換えられる事も無いので、この形で使い続けているわけですが、「Twenty Twelve」の癖と言うか設定で、Global_navに表示する英文字が強制的に大文字に変換されるのが、どうも気になってしまい、今更ながらに修正したくなったわけです。

「Twenty Fourteen」もGlobal_navで項目が大文字に変換されます。

メニューが勝手に大文字に01_2

メニューが勝手に大文字に02_2
英文字が強制的に大文字に変換されるのは「Twenty Twelve」と「Twenty Fourteen」だけの仕様で、

  • 「Twenty ten」
  • 「Twenty Eleven」
  • 「Twenty Thirteen」
  • 「Twenty Fifteen」
  • 「Twenty Sixteen」

では変換は行われず、大文字は大文字で、小文字は小文字で表示されます。

 

原理と修正

全て大文字になるのは、CSSでGlobal_navの各項目の「a」要素の「text-transform」プロパティーを「uppercase」に設定して大文字にしているからです。
ここを編集するだけなので、らくちんです。

Twenty Twelve (1533行目)

 

Twenty Fourteen (957行目)

text-transform: uppercase;

text-transform: none;
にすれば、大文字は大文字に.小文字は小文字として表示されます。

しかし、直接「Twenty Twelve」(又は「Twenty Fourteen」)のstyle.cssを修正すると、テーマをバージョンアップした時にまた前の状態に戻るので、そうならない様に「Twenty Twelve」(又は「Twenty Fourteen」)の子テーマを作り、その子テーマのstyle.cssに、

Twenty Twelve

 

Twenty Fourteen

を加えてやります。

子テーマを作るには、まずFTPクライアント(FileZillaやFFFTP、Cyberduckなど)でサイトを置いているサーバに接続します。

そしてサイトのWordPressのディレクトリ内の、「wp-content」内の「themes」に、子テーマのディレクトリを作り、子テーマ名を付けます(好きな名前でOK)。

その子テーマ内に「style.css」を作成し、

の様に子テーマ名・親テーマ名をコメントで宣言し、親テーマのstyle.cssをインポートしてやります。
(親テーマのstyle.cssへのパスは、親テーマ・子テーマとも同じ「Themes」ディレクトリに有るなら「../twentytwelve/style.css」となります。
これは”子テーマのstyle.cssのあるディレクトリ[ 子テーマのディレクトリ ]の一つ上のディレクトリ[ 「Themes」ディレクトリ ]にある「twentytwelve」ディレクトリ内のstyle.css”と指示しています。)

子テーマを作る時、最低限必要ものはstyle.cssです。これに上記の形で子テーマ名と親テーマ名が宣言されていれば、他のファイルが無くてもWordPressはその子テーマを認識し、ダッシュボード > 外観 > テーマ で、この子テーマを選択出来る様になります。

そして、先程の修正部分の

Twenty Twelveの子テーマの場合

 

Twenty Fourteenの子テーマの場合

を @import url(“../○●/style.css”); の次の行以後に付け加えてやります。
そして文字コードを「UTF-8のBOM無し」として保存します。(WebではBOMはトラブルの元)

すると、

メニューが勝手に大文字に03_2

と大文字は大文字で、小文字は小文字で表示されます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です