記事のデザインをカスタマイズする(見出し編)

モチベーション

見出しレベルを変えてもあまり違いがわからないからもっとわかりやすくしたい。

saruwakakun.com

これを丸ぱくりするぜ

修正していくぞ

プロパティ

.entry-content h2、.entry-content h3... って感じ

修正

修正前

@import "/css/theme/bordeaux/bordeaux.css";

.entry blockquote {
    padding: 0 1em;
    color: #6a737d;
    border-left: 0.25em solid #dfe2e5;
    border-top: none;
    border-right: none;
    border-bottom: none;
}

このように見出しのプロパティは設定されていない。

修正後

@import "/css/theme/bordeaux/bordeaux.css";

.entry blockquote {
    padding: 0 1em;
    color: #6a737d;
    border-left: 0.25em solid #dfe2e5;
    border-top: none;
    border-right: none;
    border-bottom: none;
}
    
.entry-content h2 {
   padding: 0 1em 0;/*文字周りの余白*/
   color: #494949;/*文字色*/
   border-left: solid 5px #dc143c;/*左線（実線 太さ 色）*/
   font-size: 130%;
   border-bottom: none;
}

.entry-content h3 {
   position: relative;
   border-bottom: none;
}

.entry-content h3:after {
   content: "";
   position: absolute;
   left: 0;
   bottom: 0;
   width: 100%;
   height: 7px;
   background: -webkit-repeating-linear-gradient(-45deg, #dc143c, #dc143c 2px, #fff 2px, #fff 4px);
   background: repeating-linear-gradient(-45deg, #dc143c, #dc143c 2px, #fff 2px, #fff 4px);
}

.entry-content h4 {
   border-bottom: dashed 2px #dc143c;
   /*線の種類（点線）2px 線色*/
   font-size: 100%;
}

上記Referenceの数値とか色のコードだけ適宜変更しました。(font-sizeも若干)

ネクスト

なんか手作り感が前面にでてきて嫌だなぁと思うけどこれ以上やっても仕方ないし、知識もなくできないので時間があるときちょいちょい修正してくことにする。
今更なんだけどスマホ版にはこういうのは反映されないのかな(?)

変更前のは撮り忘れたけど、だいたいこんな感じになりました。

次はmacにbosh-liteの環境を作ったことを書くつもり。