Stinger8のh2・h3・h4見出しを見やすくおしゃれにカスタマイズ!

前にstinger8について記事にしたのはFontawesomeを使った見出しのカスタマイズでした。

【WordPress】STINGER8のh2,h3タグに『Font Awesome』を使ってアイコンを表示させる!
前回ご紹介したFont Awesomeを使用して、 h2,h3タグにアイコンを表示させる方法を紹介します。 Font Awesomeの導入・使い方 Font Awesomeの導入・使い方は、下記の記事で紹介していますので、 こち...

最近はもっぱら枠線の見出しにはまっているので、今回はstinger8の見出しを枠線のみの「吹き出し風見出し」にカスタマイズしていきたいと思います。
それでは行ってみよ~

当ブログで行っているカスタマイズは以下のデモページで確認することができますので、実際のできなどについては以下のページでご確認ください!

st8カスタマイズ – Just another WordPress site
スポンサーリンク

子テーマを使いましょう~

stinger8は子テーマありきという特徴が特に強いので、子テーマを使うことを推奨します。
特に初心者のうちは子テーマを必ず使うようにしましょうね~

【初心者向け】stinger8の子テーマ導入方法と使い方をご紹介!
このブログ開設当初のころよくstinger8のカスタマイズ記事を書いていましたが、その記事がいまだに見られています。 せっかく色々な人に見てもらえているので、見直しと修正を少しずつ加えていこうと思います。 その第一弾として今回は...

子テーマってなんぞ?という方は以下の記事をご参考ください

【WordPress】テーマをカスタマイズをするときは、子テーマを使うべし!
WordPressの機能の一つとして、 「子テーマ」というものがあります。 ブログを書き始めた方の場合や、 WordPressを使い始めた方の場合は、 「子テーマ?なんだそれ」とか 「親テーマにそのままコードを書けばいいじゃん...
【WordPress】子テーマの導入方法と使い方を覚えてガンガンカスタマイズする!
前回こちらの記事で、 子テーマの重要性について説明しました。 今回はその子テーマの導入方法と、 使い方についてご説明します。 子テーマを導入する! 子テーマを導入する方法は2通りあります。 1つは親テーマと一緒にダウ...

デフォルトの状態

stinger8にデフォルトで設定されているh2~h4の見出しは以下のようになっています。

実際にデフォルト状態で使うとこんな感じになります。

カスタマイズ後のイメージ

当記事のカスタマイズを適用するとこんな感じになります。

実際に使った感じはこんな感じになります。

h2は枠線のみの「吹き出し風見出し」に、h3は上下の線のみでシンプルに、h4はミニチュア版吹き出し風になっています。
この吹き出し風見出しですが…
最近結構はまってます(笑)

コピペでできるので、お手軽にお試しください~

カスタマイズコード公開

今回のカスタマイズを適用させる場合は、以下のコードをstyle.cssにコピペをしてください。

.entry-content h2{
  border:2px solid #000;/*枠線の太さと色*/
  color:#000;/*文字色*/
  background:#fff;/*見出し背景色*/
  position:relative;
}
.entry-content h2::before{
  content:"";
  position:absolute;
  left:3%;/*吹き出し左からの距離*/
  top:100%;
  border:15px solid transparent;
  border-top:15px solid #000;/*吹出し部分の大きさと色*/
}
.entry-content h2::after{
  content:"";
  position:absolute;
  left:3%;/*beforeと同じ数値*/
  top:95%;/*数値変更で吹出し部分の太さ変更*/
  border:15px solid transparent;/*beforeと同じ数値*/
  border-top:15px solid #fff;/*太さはbeforeと同一にしてください*/
}
.entry-content h3{
	border-top:2px solid #000;/*枠線の太さと色*/
	border-bottom:2px solid #000;/*枠線の太さと色*/
}
.entry-content h4{
	display:inline-block;
  border:2px solid #000;/*枠線の太さと色*/
  color:#fff;/*文字色*/
  background:#000;/*見出し背景色*/
  position:relative;
}
.entry-content h4::before{
  content:"";
  position:absolute;
  left:3%;/*吹き出し左からの距離*/
  top:100%;
  border:15px solid transparent;
  border-top:15px solid #000;/*吹出し部分の大きさと色*/
}

上記のコードでは枠線等の色を「黒」に設定してますので、自分のサイトカラーに合わせて変更してください。
一応誰にでもわかるようにコードの横にコメントをしているので、対応する個所を変更すれば簡単に色や枠線の太さを変更できるようになっています。

もしなにかわからないことなどがあれば、コメントをください!

コピペも良いですが・・・

テーマによってはカスタマイズなんて必要ないかもしれませんが、HTMLやCSSの知識あるとないとでは、トラブルがあった時に大きく違ってきます。
コピペも便利ですが、専門の本などを併せて使用すると、理解度がぐっと深まりますよ!

私が使用したおすすめの本はこちらです。

コメント