速報・最新ネタ

ニュースネットでお小遣い稼ぎ

STINGER5のh2・h3・h4見出しカスタマイズ|プロのような見出しを初心者でも簡単に作る方法

      2015/12/29

Sponscred Links

STINGER5のh見出しはとてもシンプルですよね。

目 次
■ STINGER5の記事内にある見出し(タイトル)のカスタマイズです
■ 記事内見出しのカスタマイズ用
■ h見出しが変更されているか確認してみましょう。

ブログ運営を長くやっているとh見出しだけじゃなく、きれいなサイトを見るたびに、私もこんな風にカスタマイズしたいなってことありますよね。

実際いろんなサイトから情報を得てやってみたのですが、結構分かりずらく苦戦したことが多かったのです。

そんなことがないように、初心者でもできるカスタマイズを記載しております。

それでは自分だけの見出しを作ってみましょう。

■ STINGER5の記事内にある見出し(記事タイトル)のカスタマイズです

まず最初に、デフォルトの見出しの使い方がわからない方はこちらで確認ください

それでは始めましょう、最初にh2~h4を呼び出すCSSをセットします。

ダッシュボードの「外観」1→「テーマの編集」2→「style.css」とお進みください。

style.cssの下画像の/* 中見出し */以下/* サイドバーの見出し */までを

htag編集CSS書き換え

— ここから —以下— ここまで —までに書き換えしてください。

※コピーペーストでOKです。

Sponscred Links

■ 記事内見出しのカスタマイズ用

— ここから —

/* 中見出し */
h2 {
position: relative;
background: #D9E5FF;
color: #D7EEFF;
font-size: 20px;
line-height: 27px;
border-top: 5px solid #0000CD;
margin-bottom: 20px;
margin: 0 -40px 20px -40px;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
}
h2:after {
content: ”;
position: absolute;
border-top: 10px solid #D9E5FF;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
bottom: -10px;
left: 30px;
border-radius: 2px;
}
h2:before {
content: ”;
position: absolute;
border-top: 10px solid #D9E5FF;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
bottom: -10px;
left: 30px;
}
/*小見出し*/
.post h3 {
position: relative;
color: #D7EEFF;
background: #D9E5FF;
font-size: 16px;
border: 3px solid #0000CD;
margin: 10px 10px 23px 10px;
padding: 10px 5px 10px 10px;
border-radius: 3px;
}
.post h4 {
position: relative;
font-size: 16px;
padding:10px;
margin-bottom:10px;
background: #D9E5FF;
border-top: 3px #0000CD dotted;
}
.post h5{
margin-bottom:10px;
font-size:16px;
}
.wp-caption-text a,.wp-caption-text{
font-size:12px;
color:#ccc;
}

— ここまで —

書き換えが終わったら、ファイルを更新をクリックしてください。

■ h見出しが変更されているか確認してみましょう。

ダッシュボードより「投稿」→「新規追加」で新規投稿を追加画面になりましたね。

適当に4段ほど文字を並べてみます。

htag編集CSS書き換え確認用セット

画像のように見出し(タイトル)にしたい文字列を選択し、h2~h4をセットしてプレビューをクリックして確認しましょう。

htag編集CSS書き換え確認

出来ていましたね、これなら他の人と違ったおしゃれな見出しになったでしょう。

しかし、もっと変更したいっていう人もいますよね。

この設定は青が基調だから違う色に変更したいなど。

カラーコードのサイトをリンクしておきますので、そちらのコードを参考に先ほど書き換えたHTMLソースを書き換えてみればよろしいかと思います。

カラーコードの参考サイトはこちらから

お疲れさまでした。

 - STINGER5 , , ,