GENSENの文字が小さいので大きくする方法 CSSに1行追加

ワードプレス難しいー!

TCDのテーマでほんとに困るのが字が小さいこと。12か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」はありませんでした。

かわりにもっと単純に

/* ———————————————————————-
基本設定
———————————————————————- */
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から対応のため、一度、削除して、

TinyMCE Advanced

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

できました!!

 

ながかった~汗

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

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

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

まだまだ旅は続く

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

 

関連記事

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

  2. inkscapeで文字を縁取る方法

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

  4. googleに検索されるにはサーチコンソールでサイトマップを送らないといけない

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

  6. Adsenseをワードプレス(WP)ブログに挿入するためのプラグインAd Inserterを入れてみる

  1. この記事へのコメントはありません。

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