Atrasi-2079-Vox

フリーランスウェブデザイナーArata-Atrasi-Takamiのブログ。服・靴・育児ときどき開発。

Tag Archives: text-transform

WordPress記事タイトルの英文が大文字になっちゃう

  • 投稿日:2013/02/09

このブログを時折見て下さっていた方はお気付きだったかと思いますが、このブログの記事タイトルの英文の箇所が全部大文字でした。実を言いますと意図的に大文字化してたわけでは無かったのですね。

「別にいいや」とずーっと放置してきたのですが、いい加減に原因究明&解決した方が何かと良いなと思いまして、ついに解決するに至りました。オチを言いますと、とってもとっても下らないと言いますか、何か肩透かしを食らったような気分です。はい。

それは事の顛末を…

 

 

1.何故か英文が大文字になっちゃう

いつから…という訳でもないのですが、WordPressの勉強とかのためにこのブログを作ってから割と初期段階でその症状は出ていました。WordPressインストール直後のデフォルト状態では何とも無かったのに、何故かタイトルの英文の箇所が大文字化。謎だ。

 

2.投稿時から大文字というわけではない

当たり前ですが「勝手に大文字化しちゃう」と言ってるんですから、当然私本人は投稿時に大文字では入力してません。

入力欄

ちゃんと大文字小文字と分けて入力している事がわかるかと思います。

 

投稿一覧のとこだって


ちゃーんと大文字小文字が区別されています。なんでだべ。

 

 

3.そういやSEOプラグイン入れてたな

そういえばSEO用に「All in One SEO」なるプラグインを入れてたな、と気づきました。確かその設定項目にタイトルを大文字にするとか何とかってのがあった気がします。

ありました

きっとこいつのせい。多分そう。こいつのチェックを外してみました。これで記事タイトルが直るはず。

 

 

………。

 

あれ?

 

直らない…。

 

 

4.All in One SEOのバグ?

一番クサイと思われてた「All in One SEO」プラグインの設定項目で直らなかったので不思議に思ったのですが、WordPressのプラグインにバグなんてつきもの、きっと同じ用にAll in One SEOプラグインで困っている人がいるに違いない!!と、All in One SEOプラグインについて調べ始めたのです。

「All in One SEO 大文字」と…。

そこで辿り着いたこの記事。

murak.net / WordPressプラグイン All in One SEO Pack の効果的な設定

きたよきたよ〜!きっとこれで解決だぁ〜!

>「カテゴリーの<title>の先頭を大文字にするオプションです」 

え…?せ…先頭…?英文を大文字にするんじゃないの…?あ…っていうか、よく考えたらカテゴリータイトルって記事タイトルじゃねーよな…。あら…あららららら……?

どうやら完全に勘違いしていたようです。どうもAll in One SEOプラグインはシロと言わざるを得ない様です。
という事は何が原因なのか…。WordPressのデフォルトの投稿設定にも「記事タイトルを大文字にする」なんて無かったはずなのに…。

 

 

5.もっとシンプルに調べてみよう

その後他のプラグインを色々と調べましたが、記事タイトルを置き換える様な動作をするプラグインは無さそうでした。迷宮入りしそうな気がしてきましたが、こういう時こそシンプルに考えましょう。

「WordPress 大文字」

これで検索してみました。もうWordPress自体の何かかも知れんぞと。そして辿り着いたこの記事。

>「ひょっとしたらスタイルシートで設定されてるのか?」

なにいいいいいいいいいいいい!!!!!??

 

なるほどCSSでしたかそうですか。そういや英語の大文字小文字の表示を指定できる「text-transform」なんてものありましたね。普段使わないもんだから完全に忘れてましたよ。

↓特に指定なし
text-transform:none;

↓先頭の文字だけ大文字にする
text-transform:capitalize;

↓全部小文字にする
text-transform:lowercase;

↓全部大文字にする
text-transform:uppercase;

ああ…ああ…これくさいね、うん…。

そういえばAll in One SEOプラグインと同時期に導入し現在使用しているWordPressテーマ「Origin」っつーのがありました。なるほど、このテーマのCSSっぽいですね。完全にプラグインのせいだとばかり思ってました…反省。

というわけでテーマファイルのCSSをのぞいてみたところ…

キタコレ

記事タイトルのとこのclass「.entry-title」にバッチリ「text-transform:uppercase;」が指定されてました。
こいつを以下のように直します。

 

 

さて表示確認を…

 

おっしゃあああああああああああああああ!!!!!

 

 

というわけで、何とも単純なお話。ただのCSSの指定でした。Originテーマ自体は海外製テーマですので、こういう日本語圏ではあまり馴染みのないCSSが使われていたりすることがあるんですね。勉強になりました。

ちなみに、テーマファイル内部のCSSを上記のように直せば表示は直りますが、テーマのアップデートの際に再度上書きされてしまう可能性もありますので、Originテーマのテーマ設定からCustom CSSの欄に

.hentry .entry-title{text-transform: none;}

という感じで追記しておくと良いかも知れません。

 

 

結論:ちゃんとインスペクタとか使って検証しようね