はてなブログを簡単カスタマイズ！⑤引用文の変更編

■はじめに

ブログを始めると、レイアウトやカラーリングなど、デザインも自分なりのものに変更したくなりますよね。はてなブログでは、スタイルシートを編集することができるので、かなり自由にカスタマイズすることが可能になっています。

一からスタイルシートを勉強して…というと気が遠くなりますが、実はある程度はコピペと少しの修正作業で充分なカスタマイズができるものです。
筆者が自分で行った簡単なカスタマイズ方法は、順に整理して記事にまとめています。今回は、引用文のデザインを変更する方法です。

■具体的なコード

では、さっそく具体的な方法を紹介します。次のコードをコピーしてください。

.entry-content blockquote {
    font-size: 80%;
    padding: 10px 20px;
    background: #F0F8FF;
    color: #006400;
    border : none;
    border-left: solid 15px #006400;
    margin: 3px 3px;
}

次にダッシュボードから「デザイン」メニューを開いてスパナマークのアイコンをクリックすると、次の画面が表示されます。さらに「デザインCSS」をクリックすると、スタイルシート編集欄が開きます。ここに、先ほどのコードを貼り付けます。

これで、引用文のデザインが変更になっているはずです。

いかがでしょうか？

■少し解説

では、もう少し踏み込んで解説させていただきたいと思いますので、先ほどのコードを再掲します。

.entry-content blockquote {
    font-size: 80%;
    padding: 10px 20px;
    background: #F0F8FF;
    color: #006400;
    border : none;
    border-left: solid 15px #006400;
    margin: 3px 3px;
}

●「font-size」で引用文の文字のサイズを指定します。上記はパーセント指定ですが、「○px」で具体的なサイズを指定することもできます。

●「padding」は引用文のエリア内の上下／左右の余白の指定です。

●「background」が引用文エリアの背景色、「color」が文字の色の指定です。

●「border」「border-left」は引用文エリアの境界線の指定です。「border-left」のところで「solid」と書いていますが、これが線の種類を意味しています。「dotted」にすると点線、「double」にすると二重線になります。その後は線の太さ、線の色の指定です。

●上記の例では「border」は「none」としていますが、こちらに線種、太さ、色を指定すると、引用文エリアの全体を四角囲みする形になります。

●最後の「margin」は、引用文エリアの外側の余白設定です。

実際の画面表示を確認しながら、それぞれ調整してみてください。

■慣れたら簡単なものです！

いかがでしょうか？すでにパート②で、見出しを変更する方法を記事にしています。

こちらと合わせてご覧いただくと、だいたい同じようなものだとお分かりになると思います。

■最後に

引用文をほとんど、もしくは全く使わないという人もいるでしょうが、逆にかなりの頻度で使っている人もいると思います。ブログ全体でカラーリングに統一感を持たせるなら、こうした引用文にもこだわって色調を合わせると、デザイン性がアップすると思いますので、お試しください。