読者です 読者をやめる 読者になる 読者になる

黄色は止レマ

エッセイあるいはただの戯言

ブログテーマを調整しました(ソース掲載有り)

ブログテーマを調整したので、今回はブログデザインのおはなし。

ブログデザインそのものは完全にテンプレ化してますし、ほとんどの人のテーマを選ぶ基準点は"好きか嫌いか"なのではないでしょうか?
私も例に漏れず、パッと見の印象で決めてしまいました。

しかしながら、ブログを書いていく内に自分のスタイルというか、文章が定型化してきまして、そうなるとデザインの欠点が見えてきます。
現在のテーマの欠点は「見出し・本文・引用」がほとんど差別化されていない、という点でした。

本当はテーマごと変えてしまおうかとも思ってたのですが、いくつかのテーマを拝見した末に「自分で調整した方が早い」という結論に。
結局、理想を満たす物は少ない上に、あっても有料だったりするので。

というわけで、はてなブログのデザイン設定でcssに追記してみました。
具体的な調整箇所は、記事内のheadlineタグ・blockquoteタグ・hrタグ・aタグです。
それぞれ簡単な装飾を施し、aタグはオンマウスすると半透明になるよう設定しました。

h2

h3

h4

引用
引用
引用


(↑hrタグ)

調整としてはとてもシンプルなものですが、過去の記事が劇的に見易くなったので費用対効果抜群です。
併せてレスポンシブ設定もONにしたので、スマホで見た際の表示もPCと同等になりました。これは早くやっておけば良かった。

スマホアプリで記事を書いているんですが、アプリのプレビュー機能だとデフォルトテーマで表示されるみたい。
それともキャッシュなのかな…折角調整したのにガッカリ。

参考までに、ソースも公開しておきます。
以下をcssに追記すればOKです。
全てのテーマに適用できる訳ではないですが、大抵は問題ないはず。

@media screen and (min-width: 737px) {
    a {
        opacity: 1;
        transition: all 0.2s ease;
    }
    a:hover {
        opacity: 0.5;
        transition: all 0.2s ease;
    }
}

article h2 {
    position: relative;
    padding: 5px 8px;
    font-size: 20px;
    line-height: 32px;
    background-color: #efefef;
    border-left: solid 10px #aaa;
}

article h3 {
    padding: 5px 0;
    font-size: 18px;
    line-height: 30px;
    border-bottom: solid 2px #aaa;
}

article h4 {
    padding: 5px 0;
    font-size: 16px;
    line-height: 28px;
    border-bottom: dotted 1px #aaa;
}

article blockquote:before {
    content: '“';
    font-size: 20px;
    font-weight: bold;
    color: #dcdcdc;
}
article blockquote:after {
    content: '”';
    font-weight: bold;
    font-size: 20px;
    color: #dcdcdc;
}

article hr {
    margin: 30px auto;
    border-width: 0;
    border-top: 1px dashed #aaa;
}

そんなわけで、ブログテーマを調整して大変満足したのでした。まる。