ＷｏｒｄＰｒｅｓｓのテーマＳＴＩＮＧＥＲ７で記事の文字の大きさを変更する簡単な方法
2016/09/12
ＳＴＩＮＧＥＲ７の記事の文字が小さい！
このブログのテーマにＳＴＩＮＧＥＲ７を導入してから、あちこちのブログを見ていて気がついたことが・・・
このブログの記事の文字って、他のブログの文字に比べると小さくね？！
気にしなければどうということも無いんですが、気になりだすと何だかコセコセした感じがして読み難いなとか思い始めまして。
いろいろ調べて簡単な方法を見つけたんで、メモとして記事にしておきますよと。
まずはプラグイン「Ｓｉｍｐｌｅ Ｃｕｓｔｏｍ ＣＳＳ」をインストールする
どうやらスタイルシート(ＣＳＳ)を変更してやらないと、解決しそうにないと分かりまして。
“ｓｔｙｌｅ．ｃｓｓ”というファイルの中身を編集してやれば良いようなんですが、私は直接ファイルに手作業で変更を加えるというのは避けたい方針でして。
そういうのを気にしない方は子テーマというのを導入して、“ｓｔｙｌｅ．ｃｓｓ”を直接書き換えてやることになると思いますが。
私の場合は、今回「Ｓｉｍｐｌｅ Ｃｕｓｔｏｍ ＣＳＳ」というプラグインをインストールしてやりました。
このプラグインはテーマのファイルを直接編集することなく、ＣＳＳに変更を加えることができるという便利なやつでして。
ＷｏｒｄＰｒｅｓｓの管理画面で、「プラグイン」の「新規追加」のページで検索して、まずはそれをインストールしました。
プラグインでＣＳＳを変更して記事の文字サイズを大きくする
上でインストールした「Ｓｉｍｐｌｅ Ｃｕｓｔｏｍ ＣＳＳ」は、特に設定は必要無く、有効化すると管理メニューの「外観」に「Ｃｕｓｔｏｍ ＣＳＳ」という項目が追加されます。
この「Ｃｕｓｔｏｍ ＣＳＳ」のページを開くと、空っぽのテキストフィールドがありますので、ここに変更用のＣＳＳを書き込むわけですね。
元々のスタイルシートは、「外観」の「テーマの編集」で“スタイルシート(ｓｔｙｌｅ．ｃｓｓ)”の中身を見てやると分かりますが。
この中には記事の文字サイズを指定している部分が以下のように２ヶ所ありまして、上のがスマホ・タブレット用で、下のがＰＣ用となってます。
/*--------------------------------
各フォント設定
---------------------------------*/
/* 基本の文字 */
p {
font-size: 16px;
line-height: 25px;
margin-bottom: 20px;
}
/*--------------------------------
各フォント設定
---------------------------------*/
p {
font-size: 14px;
line-height: 23px;
margin-bottom: 20px;
}
これらを比べると、ＰＣ用のほうが文字サイズが小さく指定されてるのが分かりますね。
これらをスマホ・タブレット用の設定にそろえて、同じ文字サイズにしてやることにしまして。
そのスマホ・タブレット用のＣＳＳをコピーして、上記の「Ｃｕｓｔｏｍ ＣＳＳ」のページのテキストフィールドにそのまま貼り付けます。
ここで設定したＣＳＳの内容が、デフォルトのＣＳＳを上書きするようなイメージで設定されるわけで。
最後に“Ｕｐｄａｔｅ Ｃｕｓｔｏｍ ＣＳＳ”のボタンをクリックして、変更を保存したら完成です。
やることはコレだけ、簡単ですね。
まとめ
今回やったことは、
- 「Ｓｉｍｐｌｅ Ｃｕｓｔｏｍ ＣＳＳ」というプラグインをインストールする。
- スマホ・タブレット用の設定をＰＣ用として貼り付ける
という、２つの手順だけでした。
実際にブログの記事の表示を確認してみて、もう少し調整したいと思ったら
- 文字の大きさ(ｆｏｎｔ－ｓｉｚｅ)
- 行の高さ(ｌｉｎｅ－ｈｉｇｈｔ)
- 段落間の余白(ｍａｒｇｉｎｅ－ｂｏｔｔｏｍ)
の値をいろいろ変えて試してみるといいですね。
私と同様に、ＳＴＩＮＧＥＲ７の文字の大きさが気になる方にとって、参考になれば幸いです。
それでは、良いＳＴＩＮＧＥＲライフを！
