Twenty Fourteenの子テーマを作って微調整

我がnetanote.comは見る人が見ればすぐに分かるようにWordPressで運営していまして、テーマもTwenty Fourteenを使っています。ただ、初期値では、いろいろな箇所で英語表記部分が大文字化されてしまっていて(WordPressがWORDPRESSみたいに変換されてしまっていて)、これが気になったので、なんとか調整します。

まずは、子テーマにしまして、オリジナルのテーマは修正しないようにします。具体的にはディレクトリ、
wp-content/themes/netanote/
を作成して、その中にstyle.cssを作成します。中身は、

/*
Theme Name: Netanote
Template: twentyfourteen
*/

@import url('../twentyfourteen/style.css');

として、Twenty Fourteenの子テーマであることの宣言と、元々のCSSの読込みをします。

で、大文字になってしまうのは、
text-transform: uppercase;
の指定というのは分かっているので、

* {
    text-transform: none;
}

と全要素に対して変換しないように指定すれば、いっちょあがり!

と思ったら、全然、うまくいかなくって、タグの表示だとかコメントのタイトル部分とか全然直りません…とほほ。
子要素や孫要素には反映されないのかなぁ、とか悩んだり、何かしらの理由でさらに指定が上書きされているんだろうなぁ、とか考えたりしましたが、正直、CSSは自分の守備範囲からははみ出る部分でもあるので、今回は、元々のstyle.cssからuppercase指定している箇所を抜き出して、全て個別にnone指定してやり過ごすことにしました。
これだと、テーマがアップデートされた際に、指定が追加・変更されると個別対応しないといけないので、あまり賢くないのですが、そうそう頻繁にあることでもないでしょうから、良しとします。
で、使っているCSSの内容は以下の通りです。同じ対応する方はどうぞお使いください。全要素指定でもうまくいく方法をご存知の方、よければ指定方法を教えていただけると幸いです。

/*
Theme Name: Netanote
Template: twentyfourteen
*/

@import url('../twentyfourteen/style.css');

button,
.contributor-posts-link,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	text-transform: none;
}

.site-navigation a {
	text-transform: none;
}

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

.entry-meta {
	text-transform: none;
}

.cat-links {
	text-transform: none;
}

.entry-meta .tag-links a {
	text-transform: none;
}

.entry-content th,
.comment-content th {
	text-transform: none;
}

.entry-content .edit-link {
	text-transform: none;
}

.page-links {
	text-transform: none;
}

.post-navigation .meta-nav {
	text-transform: none;
}

.paging-navigation .page-numbers {
	text-transform: none;
}

.comment-reply-title,
.comments-title {
	text-transform: none;
}

.comment-list .reply,
.comment-metadata {
	text-transform: none;
}

.no-comments {
	text-transform: none;
}

.comment-navigation {
	text-transform: none;
}

.widget .widget-title {
	text-transform: none;
}

.widget_calendar caption {
	text-transform: none;
}

.widget_twentyfourteen_ephemera .post-format-archive-link {
	text-transform: none;
}

.content-sidebar .widget .widget-title {
	text-transform: none;
}

.featured-content .entry-title {
	text-transform: none;
}

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

コメントを残す

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