デジモノ大好き+

デジタルグッズ自腹レポ・Wordpress関連。+ バツ1おっさんのライフハック。

Stinger8よく使う「h」タグを装飾してみた。 [WordPress]

投稿日:2018年8月16日 更新日:

ブログを書く上で、よく使うタグの一つが「h」タグではないでしょうか。
なので、カスタマイズしたくもなります。

デフォルトだとこんな感じです。

今回手を入れたのは、「h2」タグと「h3」タグ。
「h4」タグはデフォルトのままで。

style.cssに追加。

フォントスタイルを変更

游ゴシックは線が細いので、メイリオをメインに変更。

.post h2, .post h2 span, .post h3, .post h3 span, .entry-title, .post .entry-title {
    font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", Hiragino Kaku Gothic Pro, "MS Pゴシック", sans-serif;
}

「h2」タグの変更点

  • センタリング
  • 背景色(グラデーション)
  • ボーダー調整
h2 {
    background: linear-gradient(#f3f3f3, #ffffff, #f3f3f3);
    border-top: 1px solid #ccc;
    text-align: center;
}

「h3」タグの変更点

  • padding調整
  • ボーダーの調整
  • フォントサイズの調整
.post h3 {
	padding: 5px 15px;
    border-bottom: 1px #999999 solid;
    border-left: 5px solid #999999;
}

※フォントサイズの調整は以下の箇所で設定

/*media Queries タブレット(600px)以上で適応したいCSS -タブレット・PC
---------------------------------------------------------------------------------------------------*/
@media only screen and (min-width: 600px) {

	/*--------------------------------
	各フォント設定
	---------------------------------*/
	.post h3 {
	font-size: 18px;
	}
記事タイトル(h1タグ)の変更方法は「Stinger8の記事タイトルをさりげなく装飾してみた。」をご覧ください。

テーマをいじる場合は、必ずバックアップをとり、自己責任で作業してください。
また、子テーマで作業するのが望ましいです。

スポンサーリンク

-WordPress
-, , ,

関連記事

AmazonJSの画像が表示されないときの回復方法 [WordPress]

AmazonJSはAmazonアソシエイトのリンクを張るときに投稿画面から商品検索ができ、しかもショートコードで貼り付けてくれて、さらに格好良く表示してくれるプラグインなので、ちょーおススメなプラグイ …

ソネットブログからWordPressへ引っ越してみた。

ブログのコンテンツ自体は、エクスポート機能を利用すれば問題ないけど、画像の引っ越しは結構やっかい。 忘備録として残しておきます。 ブログ引っ越しの流れを確認しておきましょう。 目次 コンテンツのエクス …

no image

STINGER8の執筆者とコメントを非表示にしてみた。 [WordPress]

スパムが多いので、コメント欄を非表示にしてみた。 STINGER5は、CSSで非表示にできたんですけど、STINGER8はPHPをいじります。 single.php にある 執筆者: にコメントアウト …

no image

Stinger8のタイトルとキャッチフレーズをセンタリングしてみた。 [WordPress]

Stinger8のタイトルとキャッチフレーズはデフォルトだと左寄せになります。 style.cssに追記するだけ style.css に以下を追記。 #header-l { text-align: c …

Stinger8のページトップボタンを目立たせてみた。 [WordPress]

主張が強すぎるのもなんですが、あまりにも目立ってないので手を加えてみました。 ↑右端にあるこれね。 (わかりずらいので、囲ってみました。) style.cssを変更 差分はこんな感じです。 #page …