【OnePress】テーマを使っていてふと気づくのが、半角英字で大文字、小文字を交えて入力したはずなのに、勝手にすべての文字が大文字になってしまう現象。
ええ～～っ何で～～？？
っと悩まれた方も多いかも知れません（悩んでない？）。
これが起こる原因はテーマに書かれているCSS。随所に半角英字の部分を「全部大文字で！！」と指定されているんです。ちなみにどこかの箇所に書かれている半角英字をすべて大文字にするには
.xx {text-transform: uppercase;}とすれば、xxというセレクタが与えられた箇所の半角英字がすべて大文字になるようになるんです。他にもいろいろな指定ができるので、このCSSプロパティに関して詳しく知りたい方はこちらが参考になると思います。
半角英字で入力された文字を入力通りに表示するには、それらすべてを
.xx {text-transform: none;}に変えるだけなんですけど前述したように【OnePress】のCSSにはすごくたくさんこの指定がされていて、１つ１つ確認しながら変えるのはちょっと面倒。
そこで、親テーマ（または子テーマ）のstyle.cssの末尾か、テーマカスタマイザーの「追加CSS」へコピペするだけで解消されるようにしたコードを以下で紹介しますので、よかったら使ってください。
【OnePress】の半角英字がすべて大文字になってしまうのを解消するCSSコード
/***** 半角ローマ字を入力通りにする↓↓ *****/
h5 {
text-transform: none;
}
h6 {
text-transform: none;
}
abbr,acronym,dfn {
text-transform: none;
}
table th {text-transform: none;}
input[type="reset"], input[type="submit"], input[type="submit"],
.pirate-forms-submit-button, .contact-form div.wpforms-container-full .wpforms-form .wpforms-submit {
text-transform: none;
}
.site-branding .site-title,
.site-branding .site-text-logo {
text-transform: none;
}
.onepress-menu a {
text-transform: none;
}
.page-header .entry-title,
.page-header .page-title {
text-transform: none;
}
.error-404 .widgettitle, .error-404 .widget-title {
text-transform: none;
}
.entry-meta {
text-transform: none;
}
.entry-footer .cat-links, .entry-footer .tags-links {
text-transform: none;
}
.nav-links a, .nav-links .page-numbers {
text-transform: none;
}
#comments .comments-title {
text-transform: none;
}
#comments .comment .comment-wrapper .comment-meta .comment-time, #comments .comment .comment-wrapper .comment-meta .comment-reply-link, #comments .comment .comment-wrapper .comment-meta .comment-edit-link {
text-transform: none;
}
#comments .comment .comment-wrapper .comment-meta cite .fn {
text-transform: none;
}
#respond .comment-reply-title {
text-transform: none;
}
#respond label {
text-transform: none;
}
.btn {
text-transform: none;
}
.sidebar .widget .widget-title {
text-transform: none;
}
.section-title-area .section-title {
text-transform: none;
}
.section-title-area .section-subtitle {
text-transform: none;
}
.hero__content h1, .hero__content h2, .hero__content h3, .hero__content h4, .hero__content h5, .hero__content h6 {
text-transform: none;
}
.hero-content-style1 h2 {
text-transform: none;
}
.counter_item .counter__number {
text-transform: none;
}
.team-member .member-position {
text-transform: none;
}
.section-news .list-article-meta, .archive .list-article-meta, .blog .list-article-meta {
text-transform: none;
}
.wpcf7-form {
text-transform: none;
}
.section-videolightbox .videolightbox__heading {
text-transform: none;
}
.woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce button.button.alt {
text-transform: none;
}
.related.products h2, #tab-description h2 {
text-transform: none;
}
div.wpforms-container .wpforms-form .wpforms-field .wpforms-field-label, div.wpforms-container .wpforms-form .wpforms-field .wpforms-field-sublabel {
text-transform: none;
}
.c-bully {
text-transform: none;
}
.wp-block-pullquote cite {
text-transform: none;
}
/***** 半角ローマ字を入力通りにする↑↑ *****/※上記コードはバージョン: 2.2.5のstyle.cssの中に含まれるものですので、バージョンが違うと取りこぼしがあるかも知れませんので悪しからず。
おまけ ソースコードの中の特定の文字を見つけるには
良く調べたなぁ・・なんてお褒めの言葉待ってます。・・ではなく、方法を知ってれば、結構簡単にソース内で変更したい場所などを調べることができますので、おまけ情報として掲載しておきます。
今回のようにテーマのCSSの場合は
- 「外観」→「テーマエディタ」を開き、「style.css」を開きます（つまり探したいテーマ内のファイルを表示させます）
- コードの中のどこかをクリックした後、キーボードの「Ctrl」＋「F5」を押します
- 小さな窓が表示されるので、調べたい文字列（今回の場合では「text-transform」）を入力して「Enter」キーを押します
すると・・・スクロールバー部分にその文字列（今回の場合では「text-transform」）が含まれる行へ黄色のマーカーが表示され、一発でどこにあるのかが分かるんです。便利ですね～。
※その行に移動してエディタの中をクリックした時点でマーカーは解除されてしまいますので、ほかの行に同じ記述がないかを探す場合は再び2以降を行う必要がありますが、それでも同じ指定がどの位されているのかなどが分かりますからそれでも便利には違いないでしょう
ちなみにこの「Ctrl」＋「F5」はWordPressのエディタだけでなく、ブラウザの中で特定の文字を探すなんてことにも使えますから覚えておいて損はないでしょう。
※慣れてくるとヒョイヒョイっと操作して、あらぬ部分に文字が入ってしまってエラーとなる場合もありますから、この機能は慎重につかうようにしてください。