賢威でサイドバーの見出しにマークを入れる方法【備忘録】

こんにちは、ユウトです。

今回は、サイドバーの見出しを以下のようにカスタマイズする方法について、備忘録としてまとめておきます。

まずは、ワードプレスの管理画面から外観、テーマの編集へと進み、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;
}