こんにちは、ユウトです。
今回は、サイドバーの見出しを以下のようにカスタマイズする方法について、備忘録としてまとめておきます。
まずは、ワードプレスの管理画面から外観、テーマの編集へと進み、design.cssを開きます。
続いて、シートを下にスクロールしていき、以下のコードを見つけてください。
.sub-column h3{
スクロールするのが面倒であれば、「ctrl+F」で検索ボックスが左下に表示されるので、上記のコードをコピペして検索してください。
さて、ここからはサイドバーのh3見出しタグをカスタマイズしていきますが、その前にシートのバックアップをとっておきましょう。
今回は、私のブログのサイドバーのような見出しにカスタマイズする方法についてまとめておきます。
先に結論から言うと、サイドバーのh3見出しタグ「.sub-column h3」のコードを以下のように記述することで、上の画像のような見出しタグを作成できます。
.sub-column h3{
position: relative;
color: #111;
font-size: 1.143em;
font-weight: bold;
margin: 0 0 1.5em;
padding: 0.5em 0.5em 0.5em 2em;
border-bottom: 2px solid #191970; /*見出しタグ下線の指示*/}
.sub-column h3:before{
content: “○”; /*見出しタグの左に入れるマークを指定*/
font-size: 150%;
position: absolute;
color: #0000FF;
top: +0.1em;
left: 0px;
height: 12px;
width: 12px;
}
見出しタグの下線については、赤文字部分のコードにより指定できます。
また、見出し文字の左に入れるマークについては、青文字部のコードで丸印を指定しています。
見出しタグをカスタマイズする際には、参考にしてください。
では。
