当サイトには広告が含まれております

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

この記事は最終更新日から10年経過しています。内容が古い可能性があります。

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

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

 

この記事が気に入ったら
いいね または フォローしてね!

あなたのシェアが励みになります!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメント一覧 (1件)

記事をざっと見る