ゲーム記事は「ゲーム女子」に移動しました

コピペでOK★h2・h3・h4タグの見出しデザインをCSSで変えよう

どうも、あず(@yuuki_azusa)です

このブログを開設する際に、テーマは「STORK」を使用することにしました。

デフォルトでもとっても使いやすいSTORKですが、いろいろ弄って更にデザインにこだわってみたので、順番に変更した点をご紹介します。

今回は見出しのデザインの変更(h2とかh3とかのやつです)!

私がよく使うh2〜h4までを変更してみました。

MEMO
このブログは2017年9月25日にWordPressテーマを「SANGO」に変更しました。SANGOでも同じコードを使用することができます。

WPテーマをSANGOに変えてからやったカスタマイズまとめ

2017.10.01

見出しタグを変更しよう

まず、変更したあとの私の見出しデザインを見て下さい。

画質の関係で若干色が暗く見えてしまいますが、デザインはわかってもらえたでしょうか?

今回コピペで作れる見出しのデザインは

  • h2タグは背景塗り潰し+角丸+縁に点線
  • h3タグは左に縦線+下に点線
  • h4タグは下に斜め線

の3つです。

色はカラーコードで自由に変更出来るので、ピンクにこだわらなくても大丈夫ですよ〜。

それでは、さっそくやっていきましょう!

変更前に準備するもの

  • 使用テーマの「子テーマ」

子テーマがないと、テーマのアップデートが来るたびに元に戻ってしまいますので、必ず子テーマのCSSを変更しましょうね!

STORK・アルバトロス・ハミングバードの子テーマは、コチラからダウンロードできます。

MEMO
その他のテーマを使用している方は、「テーマ名+子テーマ」で検索してみてください。

h2タグの見出しデザイン変更方法

スタイルシート(style.css)に以下の記述をそのままコピペするだけです。

css
/* h2見出しのデザイン変更 */
.entry-content h2{
    font-size: 1em;/* 文字の大きさ */
    font-weight: bold;/* 文字の太さ */
    color: #fff!important;
    background: #ff8caa!important;
    padding: 12px;
    margin: 2.0em 0 1.5em;
    border: 2px dashed rgba(255,255,255,0.5);
    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    box-shadow: 0 0 0 5px #ff8caa, 0 2px 3px 5px rgba(0,0,0,0.5)!important;
    -moz-box-shadow: 0 0 0 5px #ff8caa, 0 2px 3px 5px rgba(0,0,0,0.5)!important;
    -webkit-box-shadow: 0 0 0 5px #ff8caa, 0 2px 3px 5px rgba(0,0,0,0.5)!important;
}

#ff8caa」の部分がメインカラーです。ここを別のカラーコードに変更すると、色が変えられます。

色を変更する場合は「#ff8caa」と書いてある4ヶ所全てを変更して下さい。

h3タグの見出しデザイン変更方法

こちらもスタイルシート(style.css)に以下の記述をコピペでOK。

css
/* h3見出しのデザイン変更 */
.entry-content h3{
font-size: 1em;/* 文字の大きさ */
font-weight: bold;/* 文字の太さ */
color: #5C4747!important;/* 文字の色 */
border-left: 7px solid #ff8caa!important;/* 文字左の点線の太さ・種類・カラー */
border-bottom: 2px dashed #ff8caa!important;/* 文字下の点線の太さ・種類・カラー */
margin: 0 0 1.5em;
padding: 0.2em 0.8em;
}

#ff8caa」の部分を別のカラーコードに変更すると、色が変えられます。

1つ目の#ff8caaを変更すると左の縦線の色が、2つ目を変更すると下の点線の色が変えられます。

h4タグの見出しデザイン変更方法

これも同じく以下の記述をそのままコピペ。

css
/* h4見出しのデザイン変更 */
.entry-content h4 {
position: relative;
font-size: 1em;/* 文字の大きさ */
}
.entry-content h4:after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 4px;
background: -webkit-repeating-linear-gradient(-45deg, #ff8caa, #ff8caa 2px, #fff 2px, #fff 4px);
background: repeating-linear-gradient(-45deg, #ff8caa, #ff8caa 2px, #fff 2px, #fff 4px);
}

同じように「#ff8caa」の部分を別のカラーコードに変更すると、色が変えられます。変更するところが4ヶ所ありますので注意しましょう。

ちょっと補足

全ての記述に「entry-content」と入っていたのは気付きましたか?

これを入れることによって、投稿記事・ページ以外の箇所ではデザインの変更が起きないようにしています。

そのまま「.h2 {」などと記載してしまうと、予期していない場所のデザインが崩れたりするので、覚えておくと便利です。

カラーコードはいろいろなサイトに載っていますが、個人的にHTML,CSS カラーコード一覧表|背景色や文字色の設定で探すのが一番お気に入りです。

参考

HTML,CSS カラーコード一覧表|背景色や文字色の設定ホームページ作成、運営、管理ガイド

やっぱりデザインにもこだわりたい

デザインにこだわっている時間があるなら、記事を書け!」などの意見も多いですし、それは私も同感です。

だからこそ、有料テーマだけど最初からほぼ完成されているSTORKを選んだんですから。

MEMO
このブログは2017年9月25日にWordPressテーマを「SANGO」に変更しました。

SANGOはテーマそのものがオシャレで軽く、様々な見出しなども用意されているので、細かいカスタマイズをしなくても個性を出すことができます。

でも、読者さんに少しでも覚えてもらいたいので、「みんなと一緒」じゃなくてオリジナリティを出すために、少しだけ弄ってます。

簡単に出来るので、時間もかからないですしね!

記事の質ももちろん大事なんですが、「見やすいブログ」や「なんとなく好き」と思われるのって、そういうこだわりがあるブログなのかも知れません

私は、CSSをこの本で勉強しています。初心者にも優しく、とても丁寧に説明してくれているので、実践しながら覚えられます。

Amazonでチェック

最後まで読んでくれてありがとうございました。あず(@yuuki_azusa)でした

4 Comments

コメントを残す