当ブログと運営者について
スティンガー8

STINGER8の基本的だけど重要なCSSカスタマイズを6項目にまとめたよ

STINGER8の基本的なCSS

 

どうも、「きにぶろぐ.com」の自由に憧れるフリーマン(@free_manJJ)です。

STINGER8は人気なワードプレステンプレートの1つで、非常にシンプルな構成になっているので、カスタマイズ性にも優れています。

 

プラグインを使えば簡単に色々な機能を導入することができますが、CSSコードを編集することでより細かなカスタマイズが可能なので、使い方を覚えておくと何かと役に立つことも多いです。

そこで今回はCSSを使ってSTINGER8の基本的なカスタマイズ方法を、6項目に分けてご紹介するので忘れずに覚えて帰って下さいね。

 

基本と言っても重要な内容なので「ど忘れ厳禁」ですよ!

STINGER8の基本カスタム

STINGER8を導入してから間もない方や、それほど日数が経過していない方向けの基本となるCSSカスタマイズになります。

また、今まであまりCSSに興味がなかった人にも参考になるかと思います。

コードの編集はSTINGER8の子テーマにある「style.css」を使用します。

 

文字サイズ・行間・段落

以下のコードが記事ページ内の「文字サイズ・行間・段落」を変更するためのCSSになります。

 

 

行間と段落はSTINGER8で設定されているデフォルトの数値ですが、文字サイズは16pxだったのを「17px」に変更しています。

私の場合は16pxだとパソコンから見ると小さく感じたので、若干大きくしてみましたが一般的に読みやすいとされているサイズは、「15~18px」くらいなのでこれを目安に調整されるといいかと思います。

 

タイトルとキャッチフレーズ

こちらはブログ上部のタイトルと、ワードプレスで言うところのディスクリプション(説明文)に関するCSSです。

 

 

ブログタイトルに関しては現在ロゴ画像を使用しているので、気になる方はこちらの記事を参考に設定されてみて下さい。

参考:インパクト大!STINGER8のブログタイトルをロゴ画像に変更する方法

 

キャッチフレーズはワードプレスで設定自体はしていますが、ブログ内では非表示にしています。

この辺はブログのデザインに合わせて使用されるのがいいと思います。

 

ブログ全体・記事エリアの背景

ブログ内全体と投稿記事エリアのみの背景色を変更できるCSSになります。

 

 

「#fff」は白色になりますが「原色大辞典」などの色コードを使って、自分好みの色に変更することができます。

また、カラーコードの部分に「none」と入力すれば、背景なしに変更もできます。

 

ヘッダー・フッターの背景

ブログのヘッダー(上部)とフッター(下部)の領域の背景色を変更するためのCSSです。

 

 

ヘッダー部分はブログタイトルが表示されているエリアと、すぐ下のグローバルメニューを表示できるエリアに分かれています。

グローバルメニューとは、トップページから誘導したいページを表示させることができる便利なメニューなので、設定しておくことを強くオススメします。

 

設定方法などがわからない場合は、こちらの記事を参考にされてみて下さい。

参考:コピペで1発OK!STINGER8のグローバルメニューを色々カスタマイズ

 

各エリアごとに色を分けて使用することで、コンテンツなどを表示させた場合にわかりやすく誘導できるので、運営しているブログに最適な配色を探してみて下さい。

 

また、ブログの下部にあるフッターエリアには、デフォルトでタイトルやキャッチフレーズ、メニューなどが表示されていますが、新しくウィジェットを追加することで好きなコンテンツを設置できるようになります。

 

ウィジェットを追加する方法については、こちらの記事でご紹介しています。

参考:STINGER8でフッター用ウィジェットを追加して足元をオシャレに演出!

 

ブログ内のエリア幅

STINGER8で設定されているブログ内全体の横幅、サイドバーエリアや記事エリアの幅を変更できるCSSになります。

 

 

サイドバーを調整すると左側に、記事エリアを調整すると右側に広がっていくので、数値が大きすぎると重なってしまったり、サイドバーが下にズレたりするので変更の際は注意しましょう。

また、サイドバーや記事エリアの幅をpxで指定する場合は、スマホの表示が崩れてしまうので、スマホ用として「auto」で設定しています。

 

ブログ全体が「1110px」対して「サイドバー + 記事エリア = 1000px」なのは、内側に余白が設定されているからです。

この余白の数値を変更したい方は、「padding: 0px;」のコードを追加して好きな余白の数値に調整されて下さい。

 

追記:タブレットでの表示が上手く反映できない場合があるので、「iPad用」と「iPad Pro用」のコードも追加しました。

今後はデザイン変更時にパソコン・スマホ・タブレットで、正常に表示されているかを確認するようにして下さい。

 

テキストリンクの色

テキストリンクが設定されている場合に、リンクの配色やマウスホバーした時の色を変化させるためのCSSです。

 

 

この他にも「font-weight: bold;」でテキストを太字にしたり、「text-decoration: none;」でリンクの下線を消すことも可能です。

ただし、ブログ内の記事一覧やカテゴリーなどでCSSを特に設定していなければ、ここでの設定がすべてのリンクに反映されてしまうので、あらかじめ注意しておきましょう。

 

まとめ

これといって難しいカスタマイズではありませんし、特に凄い機能でもないですが文字のサイズや行間などは記事の読みやすさに大きく影響します。

エリアごとに配色の変化をつけることでメリハリを効かしたり、テキストリンクに少しの変化を加えるだけでも、クリック率が全然違ってくるんじゃないでしょうか。

 

STINGER8の初期段階のうちに、ある程度はカスタマイズしておいた方がいい内容ばかりなので、ここでご紹介した項目はしっかり覚えておいて下さいね。

こちらも読まれています

ABOUT ME
フリーマン
フリーマン
1988年生まれで兵庫県に在住してます。気になることをただひたすらに書き続けて、ブログ運営10ヶ月目で月間10万PV超えを達成。 将来的な資産を作る為に資産運用も実践中。>>詳細プロフィール