ウェイクで行く車中泊の旅

軽自動車ウェイクでの車中泊日記やアイテムを紹介していきます


車中泊 ドライブ グルメ ウェイク アイテム ブログライフ その他 全記事一覧

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

 広告 

f:id:pisukechin:20190303212627p:plain

このページでは、デザインテーマ「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:は背景色になります。