カテゴリー
WordPress

【WordPress】CSS の text-transform: none を!英字が大文字変換されないように修正♪【Twenty Fourteen】!

スクリーンショット 2014-01-15 0.33.02.png

ポイント

  • style.css で text-transform: none; を指定するように修正する。修正前は text-transform: uppercase;

実際にやってみましたの♪

本ブログは、Twenty Fourteen テーマを使用しておりますけれども、そのままは使用しておりません♪

子テーマですの♪

ですので、ほぼ空っぽの CSS を修正して、次のように修正いたしました♪

/*
Theme Name: oki2a24.com, Twenty Fourteen Child
Theme URI: https://oki2a24.com/
Description: Twenty Fourteen テーマを基にした子テーマです。
Author: oki2a24.com
Author URI: https://oki2a24.com/
Template: twentyfourteen                    
Version: 1.1
*/
@import url("../twentyfourteen/style.css");

.entry-title {
        font-size: 33px;
        font-weight: 300;
        line-height: 1.0909090909;
        margin-bottom: 12px;
        margin: 0 0 12px 0;
        text-transform: none;
}

.entry-meta {
        clear: both;
        color: #767676;
        font-size: 12px;
        font-weight: 400;
        line-height: 1.3333333333;
        text-transform: none;
}

.cat-links {
        font-weight: 900;
        text-transform: none;
}

.entry-meta .tag-links a {
        background-color: #767676;
        border-radius: 0 2px 2px 0;
        color: #fff;
        display: inline-block;
        font-size: 11px;
        font-weight: 700;
        line-height: 1.2727272727;
        margin: 2px 4px 2px 10px;
        padding: 3px 7px;
        position: relative;
        text-transform: none;
}

style.css の変更内容は、次のようになりますわ♪

子テーマの説明部分は次を修正いたしました。

  • Version を 1.0 から 1.1 へ

子テーマの style.css で、text-transform を none に修正した部分ですわ♪

  • .entry-title、投稿のタイトル部分
    スクリーンショット 2014-01-15 0.11.15.png
  • .entry-meta、投稿ヘッダーのカテゴリーや日付などのメタ部分
    スクリーンショット 2014-01-15 0.12.10.png
  • .cat-links、カテゴリーリンク部分
    スクリーンショット 2014-01-15 0.12.54.png
  • .entry-meta .tag-links a、投稿メタ部分でタグリンク部分
    スクリーンショット 2014-01-15 0.14.40.png

他にもまだ該当部分はございますけれども、今回は一旦これで終了いたしますわね♪

おわりに

今回修正した現象は、わたくしの記憶が確かならば、、、Twenty Thirteen テーマでも発生していたように存じます。ようやくすっきりいたしましたわ♪

また、今回の修正は、変更する部分を子テーマの style.css に追記するだけで、反映されますの!子テーマの利点は、以前も申し上げましたけれども、

  • 親テーマを変更しないで済む
  • 親テーマがアップデートされても、子テーマには影響がない
  • 子テーマの修正が失敗しても該当部分を削除するだけで、親テーマの内容が適用される

ということですわ♪

今まで、子テーマとしてきましたけれども、functions.php を弄るだけで CSS はまったく修正しておりませんでした。

これを期に、テーマもときどきいじっていきたいですの♪

最後に、参考にさせていただいたページです。修正方法自体はこのページの内容を全面的に使わさせていただきました。ありがとう存じます。

以上です。

「【WordPress】CSS の text-transform: none を!英字が大文字変換されないように修正♪【Twenty Fourteen】!」への1件の返信

コメントを残す