見出しに吹き出しつける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を選んでみました。
この色はこれまでもモバイルメニューのアイコン・文字の色にしていました。


最近思うのは、やっぱりデザインってメリハリだと思うんですよね
色があっちこっちにあると、どうしても目移りしてしまって、落ち着いて文章が読めません。
読みやすくなるとよいなぁ。
こちらもどうぞ


「:not()」で複数のclassを指定するには 〜 擬似クラス[CSS]
プログラミングには論理演算というのがあって、条件を組み合わせることがよくあります。条件を組み合わせたい(論理積)ことは多い例えば、擬似コードですが、if(day ≠ "日" ∧ day ≠ "土") retu...


CSSのクラス指定の空白の意味 知っていますか?子孫結合子と除外の方法
CSSのクラス指定が複雑になったときの意味を調べてみました。散々、迷って出来上がったCSSのコードは以下です。.article :not(div.toc-content) li { font-size: 115%; ...
QRコードを読み込むと、関連記事を確認できます。