WordPressテーマ「Nirvana」カスタムCSS設定(見出し編)

WordPressテーマ「Nirvana」では、見出しの見栄えがよろしくありません。h3タグなどの見出しは文章構造を判りやすくする為にも重要になります。

そこで、テーマの style.css を参照して見出しタグのCSSをカスタマイズしてみます。

※ 今回はあくまでもタグカスタマイズのサンプルとしてh5, h6 タグをカスタマイズしてみました。

style.css に記述のある h1 から h6の.entry-contentクラスセレクターをカスタマイズすると、それぞれのhタグフォントを変更出来ることが判ります。

今回、下記の記事を参考にして先頭に四角形の入った見出しにカスタマイズしようと思います。

【CSS】先頭に四角形が入った見出しのデザインを真似してみました | キノめも

上記記事をもとに、下記をテーマの設定にある「カスタムCSS」に追記します。


/* heading h5 */
.entry-content h5 {
    position: relative;
    padding-left: 30px;
    border-bottom: 3px solid #0bd;
    color: #666;
    font-size: 23px !important;
    line-height: 32px !important;
}
.entry-content h5:before {
    position: absolute;
    top: -8px;
    left: 7px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    height: 12px;
    width: 12px;
    background: #8BE0FE;
    content: "";
}
.entry-content h5:after {
    position: absolute;
    top: 8px;
    left: 2px;
    transform: rotate(15deg);
    -webkit-transform: rotate(15deg);
    height: 8px;
    width: 8px;
    background: #8BE0FE;
    content: "";
}
/* heading h6 */
.entry-content h6 {
    position: relative;
    padding-left: 38px;
    color: #333;
    font-size: 18px !important;
    line-height; 26px !important;
}
.entry-content h6:before {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 10px;
    height: 10px;
    border: 3px solid #B2E0FF;
    content: "";
}
.entry-content h6:after {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
    border: 3px solid #0099FF;
    content: "";
}

このカスタムCSSによって h5タグの見出しは下記のようになります。

これはh5グの見出しです。

 

h6タグの見出しは下記のようになります。

これはh6タグの見出しです。

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

  • ad