はてなブログの<h3>タグのデザインをCSSでちょっとだけ変更させてみた

はてな記法で「*」を使うと、自動的に見出しタグである「h3」を使用することができる。現在、このブログで使っているテーマではh3は太字で大きく表示されるだけなので、少しCSSを書いてデザインを加えることにした。

変更後のh3タグ

書いたコードはこちら。

h3{
    padding-left:8px;
    padding-bottom:5px;
    border-left:solid 8px #61BDE8;
    border-bottom:solid 1px #61BDE8;
}

CSSでボーダーを左と下に設定して、パディングで余白を設定しているだけ。

色を選択するときに利用しているサービス

デザインを変更する際に、色の選び方は重要。そのときに使っているサービスを挙げてみる。

0to255
同系色で微妙に色を変えたいときに重宝するサイト。クリックすればそのままカラーコードがコピーされるので便利。

#80a931 | 0to255

colorZilla
見ているページで使われている色情報を取得できるクローム拡張。かっこいいサイトで使われている色を参考にしたいときに重宝する。
ColorZilla - Chrome ウェブストア

Color Scheme Designer
なんかカラフルにしたいから、カラーコード適当にプリーズというときに役立つサイト笑。jsdoitでデモを公開するときなどに便利。

Paletton - The Color Scheme Designer