どうも、「きにぶろぐ.com」の自由に憧れるフリーマン(@free_manJJ)です。
STINGER8は人気なワードプレステンプレートの１つで、非常にシンプルな構成になっているので、カスタマイズ性にも優れています。
プラグインを使えば簡単に色々な機能を導入することができますが、CSSコードを編集することでより細かなカスタマイズが可能なので、使い方を覚えておくと何かと役に立つことも多いです。
そこで今回はCSSを使ってSTINGER8の基本的なカスタマイズ方法を、６項目に分けてご紹介するので忘れずに覚えて帰って下さいね。
基本と言っても重要な内容なので「ど忘れ厳禁」ですよ！
STINGER8の基本カスタム
STINGER8を導入してから間もない方や、それほど日数が経過していない方向けの基本となるCSSカスタマイズになります。
また、今まであまりCSSに興味がなかった人にも参考になるかと思います。
コードの編集はSTINGER8の子テーマにある「style.css」を使用します。
文字サイズ・行間・段落
以下のコードが記事ページ内の「文字サイズ・行間・段落」を変更するためのCSSになります。
/*記事内のフォントサイズなど*/
.entry-content p {
font-size: 17px;/*文字サイズ*/
line-height: 27px;/*行間*/
margin-bottom: 20px;/*段落*/
}
行間と段落はSTINGER8で設定されているデフォルトの数値ですが、文字サイズは16pxだったのを「17px」に変更しています。
私の場合は16pxだとパソコンから見ると小さく感じたので、若干大きくしてみましたが一般的に読みやすいとされているサイズは、「15～18px」くらいなのでこれを目安に調整されるといいかと思います。
タイトルとキャッチフレーズ
こちらはブログ上部のタイトルと、ワードプレスで言うところのディスクリプション(説明文)に関するCSSです。
/*-- ブログタイトル --*/
header .sitename {
font-size: 22px;/*文字サイズ*/
}
header .sitename a {
color: #333;/*文字色*/
}
#header-l {
float: none;/*指定を初期値に*/
text-align: center;/*中央寄せ*/
}
/*-- キャッチフレーズ --*/
#header-l .descr {
color: #999933;/*文字色*/
font-size: 20px;/*文字サイズ*/
line-height: 1.7em;/*行間*/
margin-bottom: 1.2em;/*下の余白*/
display: none;/*非表示にする場合*/
}
ブログタイトルに関しては現在ロゴ画像を使用しているので、気になる方はこちらの記事を参考に設定されてみて下さい。
| 参考：インパクト大！STINGER8のブログタイトルをロゴ画像に変更する方法 |
キャッチフレーズはワードプレスで設定自体はしていますが、ブログ内では非表示にしています。
この辺はブログのデザインに合わせて使用されるのがいいと思います。
ブログ全体・記事エリアの背景
ブログ内全体と投稿記事エリアのみの背景色を変更できるCSSになります。
/*-- ブログの背景 --*/
html, body {/*ブログ全体*/
background: #fff;/*背景色*/
}
.st-main {/*記事エリア*/
background: #fff;/*背景色*/
}
「#fff」は白色になりますが「原色大辞典」などの色コードを使って、自分好みの色に変更することができます。
また、カラーコードの部分に「none」と入力すれば、背景なしに変更もできます。
ヘッダー・フッターの背景
ブログのヘッダー(上部)とフッター(下部)の領域の背景色を変更するためのCSSです。
/*-- ヘッダー・フッターの背景 --*/
#headbox-bg {/*タイトルエリア*/
background: #fff;/*背景色*/
}
header {/*メニューエリア*/
background-color: #f2f2f2;/*背景色*/
}
footer{/*フッターエリア*/
background-color: #898989;/*背景色*/
}
ヘッダー部分はブログタイトルが表示されているエリアと、すぐ下のグローバルメニューを表示できるエリアに分かれています。
グローバルメニューとは、トップページから誘導したいページを表示させることができる便利なメニューなので、設定しておくことを強くオススメします。
設定方法などがわからない場合は、こちらの記事を参考にされてみて下さい。
| 参考：コピペで１発OK！STINGER8のグローバルメニューを色々カスタマイズ |
各エリアごとに色を分けて使用することで、コンテンツなどを表示させた場合にわかりやすく誘導できるので、運営しているブログに最適な配色を探してみて下さい。
また、ブログの下部にあるフッターエリアには、デフォルトでタイトルやキャッチフレーズ、メニューなどが表示されていますが、新しくウィジェットを追加することで好きなコンテンツを設置できるようになります。
ウィジェットを追加する方法については、こちらの記事でご紹介しています。
| 参考：STINGER8でフッター用ウィジェットを追加して足元をオシャレに演出！ |
ブログ内のエリア幅
STINGER8で設定されているブログ内全体の横幅、サイドバーエリアや記事エリアの幅を変更できるCSSになります。
/*-- ブログ各エリアの幅 --*/
#content{
max-width:1110px;/*全体の横幅*/
}
#side .st-aside {
width: 300px;/*サイドバーの幅*/
}
.st-main {
width: 700px;/*記事エリアの幅*/
}
@media only screen and (max-width: 420px) {/*スマホ用*/
#side .st-aside {
width: auto;/*サイドバーの幅*/
}
.st-main {
width: auto;/*記事エリアの幅*/
}
}
@media only screen and (max-width: 900px) {/*iPad用*/
#side .st-aside {
width: 60%;/* サイドバーの幅 */
margin-right: auto;
margin-left: auto;
}
.st-main {
width: auto;/* 記事エリアの幅 */
}
}
@media only screen and (max-width: 1050px) {/*iPad Pro用*/
#side .st-aside {
width: 300px;/* サイドバーの幅 */
}
.st-main {
width: 680px;/* 記事エリアの幅 */
}
}
サイドバーを調整すると左側に、記事エリアを調整すると右側に広がっていくので、数値が大きすぎると重なってしまったり、サイドバーが下にズレたりするので変更の際は注意しましょう。
また、サイドバーや記事エリアの幅をpxで指定する場合は、スマホの表示が崩れてしまうので、スマホ用として「auto」で設定しています。
ブログ全体が「1110px」対して「サイドバー + 記事エリア ＝ 1000px」なのは、内側に余白が設定されているからです。
この余白の数値を変更したい方は、「padding: 0px;」のコードを追加して好きな余白の数値に調整されて下さい。
追記：タブレットでの表示が上手く反映できない場合があるので、「iPad用」と「iPad Pro用」のコードも追加しました。
今後はデザイン変更時にパソコン・スマホ・タブレットで、正常に表示されているかを確認するようにして下さい。
テキストリンクの色
テキストリンクが設定されている場合に、リンクの配色やマウスホバーした時の色を変化させるためのCSSです。
/*-- テキストリンク --*/
a {
color: #4682b4;/*リンクの色*/
}
a:hover {/*マウスホバー時*/
color: #ddbf8d;/*リンクの色*/
}
この他にも「font-weight: bold;」でテキストを太字にしたり、「text-decoration: none;」でリンクの下線を消すことも可能です。
ただし、ブログ内の記事一覧やカテゴリーなどでCSSを特に設定していなければ、ここでの設定がすべてのリンクに反映されてしまうので、あらかじめ注意しておきましょう。
まとめ
これといって難しいカスタマイズではありませんし、特に凄い機能でもないですが文字のサイズや行間などは記事の読みやすさに大きく影響します。
エリアごとに配色の変化をつけることでメリハリを効かしたり、テキストリンクに少しの変化を加えるだけでも、クリック率が全然違ってくるんじゃないでしょうか。
STINGER8の初期段階のうちに、ある程度はカスタマイズしておいた方がいい内容ばかりなので、ここでご紹介した項目はしっかり覚えておいて下さいね。
