HTML&CSSを活用したカスタマイズ集

このページでは、デザインテーマ「Brooklyn」をベースに、こんなことをしてみたい！というカスタマイズ方法を紹介します。

随時更新する予定ですので、チェックお願いします。

記事の行間

はてなブログを始めて一番気になった点は、「記事の行間」です。思いのほか広く、見やすくはあるのですが、スマホで表示した際に記事を読み進める度にスクロールが少し面倒だなぁと感じました。

そんな時に使えるCSSがこれです。

.entry-content p { margin:0}

margin:の後の数字が行間設定です。この数字を上げていくと行間が広がっていきます。

どうですか？読みやすい記事になったでしょうか。

見出しのイメージ

見出しの表示を自分好みに変える方法です。見出しは3種類あり、それぞれ、「H3（大見出し）」、「H4（中見出し）」、「H5（小見出し）」のHTMLタグになっています。

記事を書く時の編集画面で見出しのプルタグがありますが、ここのデフォルトの表示を変える場合、下記のように記述します。

/*■■■　大見出しH3　■■■*/
    .entry-content h3 {
    background: #f5fffa;
    border-bottom: 2px solid #87cefa;
    border-left: 12px solid #87cefa;
    }

    .entry-content h3:before {
    border-style: none;
    display: none;
    }

.entry-content h3でデフォルトのh3（大見出し）を指定します。backgroundは背景色で、border-bottom、leftはそれぞれ下枠、左枠のサイズ(px)と色(#)になります。

.entry-content h3:beforeはh3で始めに実施する内容になります。デフォルトでは吹き出しのイメージとなっており、これをリセットするための記述になります。書かないと吹き出しが残ってしまいます。

大見出し以外も変えたい場合は、h4、h5とそれぞれ定義すればOKです。

もしデフォルトではなく色々と定義したい場合は、h3.daimidashi {　～　のように記述すればOKです。この場合、HTML編集で直接<h3 class ="daimidashi">のように記述する必要があります。

 枠で囲う

記事の本文の一部を枠で囲う場合は、CSSでの定義でも可能ですが、HTMLを使ってやってみます。

HTML編集画面で囲いたい文章の前後に、下記のようにタグを追加します。

 <div style="border: 2px solid #87cefa; padding: 10px; display: inline-block;">
<p>枠で囲ってみました！</p>
</div>

border:は枠の太さ、solidは単線、paddingは上枠からどれだけ離すかを示しています。

マーカー（蛍光）付き文字

よく記事を見ていると強調したい所に蛍光ペンみたいにマーキングした文章を見ることがあります。これもCSSで設定することが可能です。

CSSに以下を記述します。

/*■■■　マーカー　■■■*/
strong.marker {
background: linear-gradient(transparent 60%, #ffff00 40%);
}

HTML編集で協調したい部分にタグを追加します。

天気は 

<strong class="marker">晴れ</strong>

 です。

天気は晴れです。

太字を常にデフォルトで蛍光するように固定する場合は、CSSに下記を記述すればOKです。この場合は、毎回、HTML編集する必要がありません。

.entry-content strong {
background: linear-gradient(transparent 60%, #ffff00 40%);
}

 記事の日付表示

記事に表示される日付の表示の色を変更できます。

CSSに下記の通り記述します。

/*■■■　記事一覧や各記事の日付表示　■■■*/
.date a {
color: #fff;
background-color: #daa520;
}

color:は文字の色、background-color:は背景色になります。