このページでは、デザインテーマ「Brooklyn」をベースに、こんなことをしてみたい!というカスタマイズ方法を紹介します。
随時更新する予定ですので、チェックお願いします。
- 記事の行間
- 見出しのイメージ
- 枠で囲う
- マーカー付き文字
- 記事の日付表示
- アイキャッチ画像形状変更 [準備中]
- 記事一覧をカード型表示 [準備中]
- Youtubeのマイチャンネルのリンクを張る [準備中]
記事の行間
はてなブログを始めて一番気になった点は、「記事の行間」です。思いのほか広く、見やすくはあるのですが、スマホで表示した際に記事を読み進める度にスクロールが少し面倒だなぁと感じました。
そんな時に使える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:は背景色になります。