STINGER3デフォルトのデザインっぽさをなくすなら、まずカスタマイズしたいCSSセレクタ

stinger3のCSSをいじる

STINGER3は今、無料で使えるWordpressテーマとしては、トップクラスの人気テーマだと思います。

というのも、STINGER3は初心者にでも簡単に使えてSEOにも強く、収益化(アドセンスやアフィリエイト)についても考えられて作られているテーマだからです。その上、デザインがシンプルなのでカスタマイズもしやすく、どんどん手を加えていくから更に愛着がわき、噛めば噛むほど味が出てくるテーマになっていると思います。

ただ、あまりHTMLやCSSを触ったことがない人にとっては、テーマのカスタマイズは、面倒なもの。そのまま使っている人も多く、STINGER3の人気から、自分と似たようなデザインのブログを多く見かけるなんてこともあると思います。そうなってくると、他のブログとデザインを多少でも差別化したくなるのが人情です。

ですので今回は、あまりHTMLやCSSに慣れてない人が、STINGER3のデフォルトのデザインとわからない程度にテーマをカスタマイズする為のポイントとなる要素(CSSセレクター)をまとめてみたいと思います。

photo by 邪恶的正太

スポンサーリンク
レクタングル(大)広告

下準備

まず始める前の準備です。

HTML、CSSの知識

まず、STINGER3をカスタマイズするには最低限のHTMLとCSSに対する知識は必要です。ただ、カンペを読みながら編集すれば誰にでもできると言っていいほど大して難しくはないと思います。

僕の場合は、わからないことがあると、以下のサイトをちょこちょこ見ながら編集しています。

参考 HTMLクイックリファレンス

特に難しいことをしないのであれば、上のサイト1つで十分すぎる内容です。

子テーマの作成

STINGER3のファイルをそのまま直接編集しても良いのですが、出来れば子テーマを作って編集すれば、後々楽ができます。

子テーマの作成といっても、Wordpressが設置でき、各種設定ができるのであれば、大して難しいことではありません。子テーマのベースは、慣れている人なら1分、慣れていない人でも5分があれば作成できるので、以下を参考に作成してからカスタマイズすることをお勧めします。

参考 1分でできるstinger3カスタマイズ用のベース子テーマの作り方

準備ができたら、STINGER3カスタマイズに移ります。

STINGER3デフォルトっぽい箇所と、変更後デザイン提案

とりあえず、今回は一目見てSTINGER3っぽい箇所を、なるべく無くすカスタマイズをしたいと思います。(※STINGER3デフォルトのデザインがダメと言っているわけではなく、他のブログと差別化する場合、変更したい箇所になると思うからです。)

そのためには、SEO的にも問題ない(と僕が思う)ところを消してしまうかもしれませんが、必要とあらば残すか、他のデザインにカスタマイズしてください。

ブログのタイトル

ブログのタイトル

文字のブログタイトルは、シンプルでいいですが、ロゴなどに変更してしまってもいいかもしれません。

ブログのタイトル部分を画像に変更するには、ロゴを画像にしように詳しく書いてあります。

子テーマで実現

上記リンクの方法を子テーマで実現するには、このようにします。

  1. 用意したロゴイメージを子テーマの「images」フォルダにアップロード
  2. 親テーマの「header.php」を子テーマフォルダにコピー
  3. 「header.php」の編集

3の編集は、この箇所を


このように編集してください。

STINGER3公式ではget_template_directory_uri();関数を使うことになっていますが、子テーマを使う場合は、get_stylesheet_directory_uri();にする必要があります。

ロゴジェネレーター

ロゴの作成は、以下のようなジェネレータを使うと簡単に作れます。

タイトルを文字のままにする場合

タイトル文字は、デフォルトで「arial,helvetica,osaka,"MS PGothic"」でゴツゴツした感じになっているので、次のように変更すると雰囲気も変わるかもしれません。

これらのフォントは、H1、H2、H3、H4、H5、H6などの見だしに使っても、かなり雰囲気が変わって見えます。

参考 CSSのfont-family指定はこれで決まり!(2013春) – 遠近法ノート

ヘッダーの画像

ヘッダーの画像

ヘッダーの画像は、サイトの顔ともなり得る部分ですが、最もSTINGER3ぽい場所であるとともに、縦のスペースをとるので消している人も結構おられます。

消し方としては、子テーマの「style.css」ファイルに次のように書けば、非表示にすることができます。

画像を変更するだけで十分な場合は、トップ画像を変更するを参考にしてください。

ヘッダーのメニュー部分

STINGER3メニュー部分

メニュー部分は、シンプルなつくりになっていて、僕はほとんどそのまま使っています。ただ、メニューをもっと見栄えのするものにしたい場合は、主に以下のCSSに変更を加える必要があります。

子テーマの「style.css」に上記のスタイルシートを貼り付けて、不要なところは削除し、変更を加えるところは変更します。

リストタグを使ったメニューのスタイルシート例としては以下のページが参考になります。

常時表示しているソーシャルボタン

ソーシャルボタン

ここらへんは、特に必要性を感じなければ、消してしまってもいいかもしれません。拡散を重視するかどうかの好みの問題です。

続きをみるなどのボタン類

続きをみるなどのボタン類

トップページの記事一覧にある「続きをみる」や、サイドバーのNEW ENTRYにある「→もっと見る」や、関連記事表示部分にある「記事を読む」なども大きな特徴です。

デザインを変更するか、不要ならば消してしまってもいいかも。

各種見出し

H2やH3。

H2H3

サイドバーのH4なども特徴的です。

H4

上に紹介したデフォルトの設定値を参考に見出しのアイコンを変更するだけでも、かなり独自色が出ると思います。

凝ったものにしたければ、以下のサイトを参考に、気に入ったものをコピペで子テーマに貼り付けてもいいかもしれません。

検索フォーム

検索フォーム

特徴的なこの検索フォーム。編集するには子テーマフォルダ内に「searchform.php」というファイルを作り、親テーマのソースを参考に検索フォームを作成します(そのままコピーしてもいい)。その後スタイルシートでスタイルを変更します。

デザインなどは、以下のページが参考になります。

その他の方法として、子テーマフォルダ内に「searchform.php」というファイルを作りGoogleの検索フォームを設置してしまうというようなこともできます。

WordPressのブログ内検索をGoogle検索にする方法 | jMatsuzaki

引用文

引用文

使うと、結構目立つ存在である引用文(blockquote)。ここを凝ったデザインにしておられるブロガーも結構おられます。

デザインは、以下などが参考になります。

まとめ

今回紹介した、ページを参考にしながらスタイルシートをコピペしていくと、元々こんな感じだったのが

stinger3デフォルト

こんな感じになります。

stinger3カスタマイズ後

ぱっと見では、大分STINGER3っぽくなくなったかと思います。(あ、メニューを黒にしてしまったから、縮小した画像で見ると似たように見える…。)

ただ、やはり見る人が見ればSTINGER3だとわかります。けれども、それはさほど重要な事ではありません。

やりたいことは、STINGER3っぽさをすべて無くすことではないからです。やりたいのは、テーマをカスタマイズすることで独自色を出すことです。

今回紹介したような箇所を、あなた好みのデザインにすれば、もうそれは、あなただけのデザインと言っていいと思います。もし、その後まだ気になる箇所があるようなら、ちょこちょこと変更していけば、もう完全にあなた色のブログができあがると思います。

そして、それだけ手をかければ、カスタマイズして手を加え続けた愛車よろしく、ブログが可愛くて可愛くて仕方がないなんてことになってしまうかもしれません。

『STINGER3デフォルトのデザインっぽさをなくすなら、まずカスタマイズしたいCSSセレクタ』へのコメント

  1. 名前:wz 投稿日:2015/06/11(木) 12:03:50 ID:205aec153

    ヘッダーのメニュー部分がどうしても反映されないのですが、どうかご教授いただけないでしょうか。
    子テーマの「style.css」に記載のスタイルシートを貼り付けましたがメニュー部に反映されません。

  2. わいひら 名前:わいひら 投稿日:2015/06/11(木) 15:35:01 ID:402490d3f

    本文中に

    変更を加える必要があります。

    とあるように、コードを貼り付けただけでは何も変わりません。
    コードはデフォルト状態と全く同じものです。その部分を自前で変更して自分好みのスタイルを書く必要があります。
    本文中に参考リンクがあると思うので、それを参考にしたり、HTMLクイックリファレンスを見ながらスタイルを変更してみてください。

  3. 名前:wz 投稿日:2015/06/17(水) 15:15:42 ID:3fd78f98c

    ご返答ありがとうございます。
    無事メニュー部の色変更ができました。ありがとうございました。