Bloggerの引用blockquoteのCSSレイアウトデザイン方法

おすすめ記事ピックアップ

質問を頂いたので、Bloggerの引用blockquoteのCSSレイアウトデザイン方法について、説明いたします。blockquoteは引用記事を紹介するときに使います。引用や転記の文章を掲載するときにblockquoteするのが良いそうです。

個人的には、見栄えが良いので使っています。blockquoteを何用途に利用するかは、個人の好みだと思います。何か強調してみせたり、引用の言い訳っぽい感じで使いやすいですよね。

Bloggerの投稿画面では、blockquoteボタンがあります。「”」のボタンです。これを押せば、blockquoteしてくれます。

もちろんHTMLコードを直接入力してもOKです。こんな感じで。

<blockquote>引用表記</blockquote>

blockquoteもCSSで記述されています。デザインしたCSS例を紹介します。単純にこれを張り付ければ、四角枠で囲まれたblockquoteが表示されます。簡単ですね。borderで囲み線を設定したりpaddingで内側の幅、marginで外側の幅を設定したりできます。

.post-body blockquote {
 border: 1px solid #cbd4d7;
 padding: 15px 10px 15px 40px;
 margin:20px;
}

記述は、Bloggerの管理画面のテンプレート→HTMLの編集で、CSSエリアの好きな所に追記しましょう。たぶん「post-body blockquote」と書かれたCSSがすでにあると思うので、そこにデザインの指定を追記しても良いと思います。

さらにカスタマイズしたい人は、

フォントサイズの指定を追加してみたり
例：font-size:20px;

行間を調整してみたり
例：line-height:1.3em;

背景の色を付けてみたり
例：background-color:#777;

背景画像をつけてみたり
例：background:url(http://xxxxx) no-repeat 10px 10px;

いろいろ設定してみてください。

追記：bloggerのblockquoteは癖があるので、把握しておきましょう。結構面倒くさいのです。まず実際にblockquoteします。