見出しに吹き出しをつけるスタイルをやめた

見出しに吹き出しつけるCSSを入れていたんですが、やめることにしました。

こんな見た目でした

/** 見出しに吹き出しをつける */

@media screen {
  #container h2 {
    position: relative;
    padding: 0.6em 1em !IMPORTANT;
  }
  #container h2:not(.entry-card-title):not(.related-entry-heading):after {
    position: absolute;
    content: '';
    top: 100%;
    left: 50px;
    border: 15px solid transparent;
    border-top: 15px solid #ffac05;
    width: 0;
    height: 0;
  }
  .widget h2 {
    font-size: 24px;
    width: 100%;
  }
}

:after擬似クラスで、空白文字を追加して、そこに▼を輪郭線で追加しています。

なんでやめるかというと

見出しなのに画像っぽくて、読み飛ばしやすい気がしたからです。

目立つわりに読まないんですよね。自分で書いているからかな。

これはサイトのメインカラーをオレンジ（#F8AC09）にしているからもあります。

そこで、こんなふうに見出しのスタイルを変えました

ボーダーをすっきりさせて、文字サイズを大きくしてみました。

/** 見出しをすっきり */
#container .article h2 {
    background-color: transparent;
    color: black;
    font-size: 160%;
	padding-left: 12px;
    border-left: solid 8px #a08010;/*左線*/
}

#container .article h3 {
    border: solid 2px #a08010;
    border-left: transparent;
    border-right: transparent;
}
#container .article h4 {
    border-bottom: solid 2px #a08010;
    border-top: transparent;
}

ねらいとしては、なるべく文字を読みやすく、集中できるようにすることです。

色もあえてサイトカラーより渋めの#a08010を選んでみました。

この色はこれまでもモバイルメニューのアイコン・文字の色にしていました。

最近思うのは、やっぱりデザインってメリハリだと思うんですよね

色があっちこっちにあると、どうしても目移りしてしまって、落ち着いて文章が読めません。

読みやすくなるとよいなぁ。