WordPressのテーマであるSTINGER8(スティンガー8)のカスタマイズをします。
※ちなみにこのサイトのテーマは現在STINGER8ではありません。
シンプルでいい感じのSTINGER8ですが、個人的にパソコンの画面上のフォントが少し小さいかなと思いました。
スマホやタブレットだと画面が小さくなるぶん、デフォルトのフォントサイズで満足なのですが。
そこでパソコン画面上のときのみフォントサイズを少し大きくしたいと思います。
作業概要
安全のため子テーマにて作業を行いたいと思います。
手順
１．WordPressの「外観」→「テーマの編集」にて「style.css」を開く
２．「style.css」を編集する。
１. 「style.css」を開く
STINGER8のサイトからテーマだけでなく子テーマもダウンロードできますのではじめから子テーマを使っている人も多いでしょう。
また、今回はstyle.cssを編集します。
そのため今回は子テーマを作ったりファイルをFTPでコピペしたりする必要は特にありません。
書いてある通り「外観」→「テーマの編集」にて「style.css」を開きましょう。
２. 「style.css」を編集する。
STINGER8の子テーマのcssは非常にシンプルですね。
パソコンとスマホで個別の設定をしたいときわかりやすいです。
全体を見るとこんな感じになっているので、
/*
Theme Name: STINGER8 Child
Template: stinger8
Version: 20161115
*/
@import url('../stinger8/style.css');
/*media Queries タブレットサイズ（960px以下）
----------------------------------------------------*/
@media only screen and (max-width: 960x) {
/*-- ここまで --*/
}
/*media Queries タブレットサイズ（600px以上）
----------------------------------------------------*/
@media only screen and (min-width: 600px) {
/*-- ここまで --*/
}
/*media Queries PCサイズ（960px以上）
----------------------------------------------------*/
@media print, screen and (min-width: 960px) {
/*-- ここまで --*/
}
今回はパソコン画面のみフォントサイズを変更したいので青字の部分を編集します。
編集した部分をクローズアップして見てみましょう。
/*media Queries PCサイズ（960px以上）
----------------------------------------------------*/
@media print, screen and (min-width: 960px) {
.entry-content p {
font-size: 18px; /* 文字サイズ */
line-height: 27px; /* 行間 */
}
/*-- ここまで --*/
}
赤字の部分を追加しています。
フォントサイズを大きくしたら窮屈に感じたので行間も調整しました。
ちなみに・・・
パソコン・スマホ全ての画面サイズに共通した設定をしたい場合は、
/*
Theme Name: STINGER8 Child
Template: stinger8
Version: 20161115
*/
@import url('../stinger8/style.css');
/*media Queries タブレットサイズ（960px以下）
----------------------------------------------------*/
@media only screen and (max-width: 960x) {
/*-- ここまで --*/
}
赤字のすぐ下から記入すればOKです。