twentyfourteen全ての大文字変換を無効にする

twentyfourteenの投稿タイトルが全部大文字になっちゃうのをやめる

で、投稿の大文字化をやめるようにしたのですが、ふと気がつくと色々な所で小文字を全て大文字にしていることに気づきました。

Image

テーマの上部にある、メニューの文字も全て大文字になっています。実際のタイトルは

gallery   sample page

です。

twentyfourteenのstyle.cssを text-transform: uppercase; で検索すると、ものすごくたくさんの指定がしてあります。

text-transform: uppercase; というのは テキストの小文字を大文字にする という指定なのです。

英語圏だとその方がメリハリがあっていいのかと思うのですが、例えば WordPress とか XOOPS Cubeとか大文字小文字が明確に決まっている場合などに変わっちゃうとなんかなぁ~という気持ちになってしまいます。

なので、全ての大文字変換を無効にするよう、子テーマに仕込みました。子テーマのstyle.cssの最後に以下の行を追加します。

/* 大文字にしているところの指定をなしにする */
button,
.contributor-posts-link,
input[type=”button”],
input[type=”reset”],
input[type=”submit”] ,
.site-navigation a ,
.entry-title ,
.entry-meta ,
.cat-links ,
.entry-meta .tag-links a ,
.entry-content th,
.comment-content th ,
.entry-content .edit-link ,
.page-links ,
.post-navigation .meta-nav ,
.paging-navigation .page-numbers ,
.comments-title ,
.comment-list .reply,
.comment-metadata ,
.no-comments ,
.comment-navigation ,
.widget .widget-title ,
.widget_calendar caption ,
.widget_twentyfourteen_ephemera .post-format-archive-link ,
.content-sidebar .widget .widget-title ,
.featured-content .entry-title {
text-transform: none;
}

@media screen and (min-width: 783px) {
.primary-navigation {
text-transform: none;
}
}

全ての大文字化をなしにしたので、表示も

Image

このように変わりました。

兎本美佳
ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
スポンサー広告

コメント

  1. […] 職場の twenty fourteen は上の①の方法で解決しました。 その後もう一つ別の方法をこちらで見つけました。 style.css の文末に一括で修正する内容を記述する方法です。 […]

トップへ戻る