TCDテーマ「GENSEN」の標準文字が小さいので大きくする方法→CSSに1行追加

ワードプレス難しいー!

TCDのテーマでほんとに困るのが字が小さいこと。標準で12ピクセル(px)か14pxくらい?
これがおしゃれという中の人のイメージなのかもしれませんが、PCでもスマホでも読みにくいったらないのです。
で、調べたら、TCD公式のカスタマイズブログに変え方がありました。

グーグルさまの推奨は本文記事のフォント16pxらしい

 

サイトのフォントサイズが小さすぎるとGoogle検索で「ページがモバイル フレンドリーではありません。」と表示されてしまうみたいです。
今回は、TCDテーマの記事のフォントサイズを大きくする方法をご説明します。

Googleの推奨サイズは16pxのようです。

管理人
じゃあ、最初からそういう設定にしてよー!

 

こんにちは(14px)

こんにちは(16px)

 

これくらい違う。(小声)

ともかくTCD公式さまが下のコードがCSSにあるから、「font-size:16px;」を追加しなさいというので。。。

.post p {

line-height: 2;
margin: 0 0 2em 0;
}

ダッシュボードで
外観→テーマの編集→スタイルシート (style.css)
を見て、Cntl+Fで「post」を探して、
ここかなというところをフォント14から16や26などに更新してみましたけど、PC上は変わりません。

しかし、いろいろやっているうちに解決しました!

すくなくともGENSENのCSSには「.post p」はありませんでした。

かわりにもっと単純に、(sytele.cssで、Cntl+F=検索で、「基本設定」と検索してでてくる以下のところの下に)

/* ———————————————————————-
基本設定
———————————————————————- */
body { font-family: YuGothic,’Yu Gothic’,’Hiragino Kaku Gothic ProN’,’ヒラギノ角ゴ ProN W3′,’メイリオ’, Meiryo,’ヒラギノ明朝 ProN’,’Hiragino Mincho ProN’,’Arial’,sans-serif; font-size:20px; color:#000; line-height:1.5; width:100%; min-width:1330px; background:#fff; overflow-x:hidden; }
a { color:#000; text-decoration:none; }
a, a .caption, input {
-webkit-transition-property:background-color, color, border-color; -webkit-transition-duration:0.2s; -webkit-transition-timing-function:ease;
-moz-transition-property:background-color, color, border-color; -moz-transition-duration:0.2s; -moz-transition-timing-function:ease;
-ms-transition-property:background-color, color, border-color; -ms-transition-duration:0.2s; -ms-transition-timing-function:ease;
-o-transition-property:background-color, color, border-color; -o-transition-duration:0.2s; -o-transition-timing-function:ease;
transition-property:background-color, color, border-color; transition-duration:0.2s; transition-timing-function:ease;
}
a:hover { color:#b69e84; text-decoration:none; }
.clear { clear:both; }
.hide { display:none; }

この下に
/* 記事の文字サイズ */
p{font-size:20px}
と書き加える。(コードは下のところをコピーしてください)

たったのこれだけ、書いたら解決しました~。(このときはやけになって20pxにしましたが、あとで16pxにしました、短い文は18pxでもいいかも。)

管理人
カスタマイズなんてレベルじゃないっ!もうイヤや!

 

上の解決に至るまでの試行錯誤(やらないでいいです)

 

style.css、responsive.css、style_sp.cssどれか

とあるので、ほかの二つも探しましょう。

GENSENには残りの二つのCSSはなさそうです。

editor-style-02.css

というのがあるので、これかな?

@media screen and (max-width: 640px) {

.post p {

font-size:16px;
line-height: 2;
margin: 0 0 2em 0;
}

}

だめでした。

テーマのCSS追加でも追加してもだめです。

Gensenの過剰ぎみのサービスにいろいろな設定がクリックでできるのですが、そのなかのひとつに
外観→TCDテーマオプションの基本設定で、本文のフォントを3つから選べるというのがあります。
ここを設定をかえるとすぐにかわります。

つまり、ここに対応するのが優先で、CSSを追加しても、それが優先されていないようなのです。

このフォントを3つから選ぶというのが、もとのファイルのどこにあるかを探さないといけないようです。

CSSで全部のフォントの数字を2PXあげたりもしてみましたが、タイトルなどの文字は大きくなるけど、記事の文字はかわりません。

もしかして、記事を書くたびに、大きさを指定すればいいの?

それもメンドーだけど。

ぐぐってみたところ、こんなブログがありました。

でも、かわらない。。。

さらにぐぐると

まさか、まさか。。。。またプラグイン導入か。。。。

「TinyMCE Advanced」の仲間「TinyMCE テンプレート」はもう入れています。

だったら相性も大丈夫かな。
というわけでインストしてみます。(Wordpressが4.8のままのため、最新のプラグインは4.9から対応のため、一度、削除して、

Advanced Editor Tools (previously TinyMCE Advanced)

ここの一番下にある一つ前のバージョン(4.5.6)のZIPファイルをPCにダウンロード。あらためてWPのプラグイン新規追加から、ZIPファイルをアップロードしてインストしました。

できました!!

 

ながかった~汗

でもデフォルトでは、小さいままで、

全体を指定して、フォントのサイズを一括して指定しないと、大きくなりません。。。。一手間面倒です。

管理人
SpeechBubbleを使った会話も小さい文字のまま。なんとかしたいなぁ
管理人
この会話文を16pxにあらためて指定すればいいのかな?
できたー!

まだまだ旅は続く

とりあえず、TCDさん早くデフォルトで16pxにしてー!

 

関連記事

  1. 旅の手帖2018年3月号の特集は「むかし町を旅する」

  2. font awesomeで動くフォントを使ってみてみた

  3. ワードプレスで会話調のふきだしをCSSでつくる

  4. XSERVERでワードプレスを始めようとシンプルなドメイン直下のURLに設定して公開しようとしたところできない→できた!

  5. inkscapeでふきだしをつくる

  6. ワードプレスでhttps化をしたあとにすることまとめ

    • 名無しの権兵衛

     はじめまして。^^

    「 ワードプレス文字 大きさ一括変更 」でググってましたが、
    プラグイン・インストールでの個別記事ごとの設定以外に、
    なかなか良い情報が無く、検索を続けていたら管理人様の
    ブログにたどり着く事が出来、解決する事ができました。

    まずは、お礼まで。m(_ _)m

    予めインストールしていた「 シンプルカスタムCSS 」の
    中に、貴殿の記事で紹介されていたソースコードを
    入れたら見事に反映され、めでたしとなりました。↓

    WordPressテーマとの相性もあるのでしょうが、
    他のサイトに書かれていたコードは反映されませんでした。

    有益な情報を、ありがとうございました。

      • rekishitoraberu

      お役に立てたのならなによりです。コメントありがとうございます

    • 今ちゃん

    非常に役に立ちました。
    同じGENSENを使って、同じ悩みを持っていました。
    本当に助かりました!奇跡の2行です!!
    ありがとうございます!

      • 歴史トラベル管理人

      よかったですね。こんなことに試行錯誤するのは、無駄の極みなので、公式のところでちゃんと説明するなりしてほしいですね。

  1. この記事へのトラックバックはありません。