STINGER7/Plus:記事中と投稿編集画面の見出しデザインをカスタマイズする方法

      2016/11/23

eye_stinger7

無料で配布されているWordPressテーマをそのまま使用すると、デザインが他のサイトと同じになってしまいますね。「STINGER7」のような人気のあるテーマは使っている人も多いので、どうにかしてオリジナリティを出したいところです。

見出しのデザインはCSSだけで簡単に変更できて他のサイトとの差別化にもなるので、既成のテーマを使用するならやっておきたいカスタマイズの1つです。

そこで今回はSTINGER7の記事中の「h2〜h4」などの見出しのデザインをカスタマイズする方法をご紹介します!

【追記:2016.9.27】
※一部内容を修正。STINGER Plusに対応しました。

スポンサーリンク

子テーマの使用方法

テーマファイルをカスタマイズする時は子テーマを使うことが推奨されています。
子テーマを使用すると、テーマ本体をアップデートしてもカスタマイズ内容が消えないというメリットがあります。

STINGER7での子テーマの使用方法はこちら↓
STINGER7:テーマのインストールと子テーマの使用方法

特にSTINGER7の場合は「header.php」を編集する際には注意が必要です。
こちらの記事を参考にしてください↓
STINGER7:親テーマの任意のファイルを子テーマで編集する方法

変更前の見出しデザイン

まずは変更前の見出しデザインを確認しておきます。
STINGER7のデフォルトで色も変更してない状態だとこんな感じですね。

h2の吹き出しっぽいデザインはオシャレなんですけど、みんなが同じだと変えたくなっちゃいますよね(^^;)

20160402b

見出しデザインのリセット

CSSに慣れていない方でも色々なデザインに変更しやすいように、最初にデフォルトで指定されている見出しのデザインをある程度リセットしておきます。
以下のコードを「style.css」にコピペしてください。

 

STINGER Plusをお使いの方はこちらのコードになります↓

当サイトの場合

僕はとりあえず以下のようにデザインを変更しました。
コピペで使っていただいても良いですし、カラーや余白などサイトに合わせて変更してみてください。

CSSは原則として後に記述された指定が優先されるので、先ほどのリセットのコードより後に記述します。

するとこのようになります↓

20160402c

「h2」はストライプ柄にして、文字は白にしました。
「h3」は上下に2pxのボーダーを。
「h4」は2種類のボーダーを重ねたようなデザインになっています。

最後の「.post h4.point」は記事本文ではなくてページ下にある「関連記事」の見出しですが、デザインを統一させるために指定しています。

その他のデザインサンプル

CSSだけで他にも色々とデザインを変えることができます。
こちらのサイトにサンプルがたくさんありますので参考になると思います↓

シンプルなHTMLとCSSコピペで実装できるタイトル(見出し)のデザインサンプル 50 | NxWorld
画像は使用せずにCSSだけでスタイリングしたタイトル(見出し)のデザインサンプルで、似たようなものやちょっとCSS追記した程度のものも多いですが全50種類です。全体的にすごく手間がかかっているようなも

投稿編集画面の見た目も変更する

そのままだと投稿編集画面ではデフォルトのデザインのままですね。
せっかくなので編集画面のビジュアルエディタ見出しもデザインを変更しておきましょう。

投稿編集画面にCSSを適用するためには「editor-style.css」を使用します。
STINGER7(Plus)の本体に入っている「editor-style.css」をFTPソフトでダウンロードして、中身を全て削除してから子テーマにアップロードしてください。

ファイルを追加できたら以下のように記事本文の見出しと同じ内容を記述します↓

 

STINGER Plusの場合はこちら↓

最初にデフォルトのデザインのリセットも入れています。
「.post h4.point」は関連記事の見出しで、投稿編集画面には関係ないので省いています。
これでビジュアルエディタでも見出しのデザインが変更されました↓

20160402d

まとめ

見出しのデザインを変えるだけでオリジナル感が増しますよね。
簡単にサイトの雰囲気を変えることができるのでぜひチャレンジしてみてください♪

【追記:2016.3.24】
STINGER7のカスタマイズ記事をまとめました↓

STINGER7:カスタマイズまとめ
このブログでも使用させて頂いているWordPressテーマ「STINGER7」のカスタマイズ記事をまとめました。

スポンサーリンク

この記事をシェアする!

 - WordPress