＜ZELOカスタマイズ記②＞見出し（h1、h2、h3、h4）の装飾を変更！

Blogger ZELO カスタマイズ ブログ

いよいよ見た目を変更していきます！
まずは、見出し（h1、h2、h3、h4）のデザインから。


※かならずバックアップをとってからはじめてください。

ビフォーアフター

ビフォー 

ZELO見出しカスタマイズ前


アフター

ZELO見出しカスタマイズ後


h1・タイトル

記事タイトル部分です。
あえて太文字にせず、文字間をゆったりとさせています。

/* --------- 記事ページデザイン ---------- */
（省略）
    .entry-title {
    color: $(item.h1.color);
    margin: 0 !important;
    font-size: 24px;
    }

だったものを、

    .entry-title {
    color: $(item.h1.color);
    margin: 0 !important;
    font-size: 24px;
    font-weight: 400;
    letter-spacing:0.4rem;
    }

に変更。
赤字部分を追加しています。


h2・見出し

もともとWordpressで使っていたカスタマイズを流用しました。
気に入っていたのでそのまま使えてよかった。

    /* ---------- 記事ページのh2,h3,h4 */
    .entry-content h2 {
    font-size: 22px;
    padding: 0.4em;
    background-color: $(item.h2bg.color);
    color: $(item.h2.color);
    margin: 1.3em 0;
    border-radius: .25em;
    }

の部分を、下記のように変更。

    .entry-content h2 {
    position: relative;
    font-size: 22px;
    padding: 16px 25px 16px 25px;
    background-color: $(item.h2bg.color);
    color: $(item.h2.color);
    margin: 1.3em 0;
    border-radius: 3em .5em 2em .5em/.4em 2em .5em 3em;
    border-bottom: 4px solid #ae9890;
    border-right: 4px solid #ae9890;
    }


h3・小見出し

「ZELO」デフォルトだと、下線（破線）が表示されます。
もちょっと柔らかいカンジにしたかったので、蛍光ペンで下線をひいたっぽく表示されるように修正。

    .entry-content h3 {
    border-bottom: dashed 2px $(item.h3border.color);
    color: $(item.h3.color);
    }

　↓

    .entry-content h3 {
    box-shadow: 0px -6px 5px -3px #FFE082 inset,0px 8px 4px -2px $(item.h3border.color);
    color: $(item.h3.color);
    }


h4・準見出し

h3とh4はフォントサイズが一緒なので、装飾しちゃうとどっちが上の階層なのかわからなくなっちゃうんですよね。。

頭に縦２本の線をつけてみたけど、やっぱり元に戻しました。
結果、カスタマイズなし！です。


「ZELO」の見出しをカスタマイズしてみた。

いろんな見出し装飾のサイトを見て、こんなカンジで適用してみることにしました。

ひとまず、見出しのカスタマイズはこれで終了です！

0 件のコメント :

コメントを投稿

関連記事