子テーマとか全然わかってない私が、CSS で h3 と h4 を装飾してみた

スポンサーリンク

ずっと小見出しのデザインをどうにかしたいと思ってましたが、ようやく解決。

子テーマというのを作るといいらしい、とあちこちで聞きますが、いまいちわからない。
というわけで、代わりに My Custom CSS というプラグインを入れてみました。

My Custom CSS を使うと安心で簡単

2016年7月5日1:15 追記:
My Custom CSS を使わなくても、プラグインいらずで簡単にCSSカスタマイズできるようになりました。
参考→Macの画面のどこかから、色を拾って使いたい。デフォルトで入ってるカラーピッカーが便利

プラグインの新規追加で「My Custom CSS」を探すと出てきます。
あるいはこちらから直接ダウンロード。
WordPress › My Custom CSS « WordPress Plugins

サイドバーからアクセス左側にMy Custom CSSメニューが追加されるのでクリックして、 追加というか上書きしたい内容を書いていきます。

思わず上書きと言ってしまいましたが、ここに書いたCSSは元のテーマのCSSファイルを変更しないので、安心していじってください。

左側にボックス、点線でアンダーラインを入れてみる

ちなみに私は今回、こんな風に追加しました。

.entry-content h2,
.comment-entry h2 {
font-size: 17px;
border-left: 8px solid #40bfb0;/*文字の左横のマーク*/
border-bottom:dotted 2px #CCCCCC;/*文字の下に点線*/
width:600px;/*横幅*/
line-height: 27px;/*高さ*/
padding-left: 5px;/*左のスペース*/
margin-top: 40px;/*上のスペース*/
margin-bottom: 3px;/*下のスペース*/
}
.entry-content h3,
.comment-entry h3 {
font-size: 14px;
background-color:#f5f5f5;
border-left: 6px solid #808080;/*文字の左横のマーク*/
width:600px;/*横幅*/
line-height: 27px;/*高さ*/
padding-left: 5px;/*左のスペース*/
color:#808080; /*文字色*/
margin-top: 35px;/*上のスペース*/
margin-bottom: 1px;/*下のスペース*/
}

これで素っ気なさすぎて単なる太字にしか見えなかった以前の見出しが

以前の小見出し

少しそれらしくなりました(´∀`)

CSSいじった現在

左側の色はすでにブログ内で使ってる色にしてみた。

また今回もプラグインに助けてもらっちゃった☆

コメント