【Brooklyn】本文の一部をBOXで囲むカスタマイズ

　

はてなブログの人気テーマである「Brooklyn」で、本文の一部をBOXで囲むカスタマイズを紹介したいと思います。

本文の要所要所をBOXで囲んであげると、記事にアクセントも出てきて読みやすくなりますよ！

Brooklynで本文の一部をBOXで囲むカスタマイズ「完成形」

まずは今回の完成形をお示しします。

今回の完成形

↑こんな感じを目指します。

※色などは自由に変更できますよ。

Brooklynで実際に本文の一部をBOXで囲むカスタマイズ「デザインCSS」

それでは全てコピペで行けるカスタマイズですので気負わずにいきましょう。

まずは

ダッシュボード→デザイン→スパナマーク→デザインCSS

に下記コードをコピペしましょう。

/*本文box*/

.box5 {

    padding: 0.5em 1em;

    margin: 2em 0;

    border: double 5px #ff4500;

}

.box5 p {

    margin: 0; 

    padding: 0;

}

.entry-content { 

line-height: 1.8em;

letter-spacing: 0.1em;

}

上記の赤字になっているコードは「カラーコード」となります。

下のページで自分好みの色を見つけてコードをコピペしてみましょう！

WEB色見本 原色大辞典 - HTMLカラーコード

Brooklynで実際に本文の一部をBOXで囲むカスタマイズ「HTML」

ここまでの過程で下準備は出来ました。

あとは、実際に記事を書いてBOXで囲みたいところに下記のようなHTMLを入力してみましょう。

<div class="box5"><p>今回の完成形</p></div>

これで実際に記事のプレビューを見てみると、冒頭でお示しした

今回の完成形

になります！

Brooklynで実際に本文の一部をBOXで囲むカスタマイズ「小ネタ」

毎回

<div class="box5"><p>今回の完成形</p></div>

を入力するのは面倒だな～と思われた方！

そのような時はPC(Windowsの話に限りますが…)の単語登録機能を使いましょう。

私は「ぼっくすまえ」と入力すると

<div class="box5"><p>

と変換され、「ぼっくすご」と入力すると

</p></div>

と変換されるように登録しています。

この設定を一度行ってしまえば作業時間はだいぶ短縮されますよ！

登録方法を知りたい方は↓↓の記事でまとめていますのでご参考まで。

brooklyn-custom.hatenablog.com
brooklyn-custom.hatenablog.com