引用をスタイルシートで分かりやすいようにしました

2014年5月11日日曜日

引用をスタイルシートで分かりやすいようにしました

2014年5月11日日曜日 blogger, css, html

引用(転載)をスタイルシートで分かりやすいようにしました。
HTMLタグでいうblockquoteですね。

Bloggerの投稿では、赤線で囲われた部分(引用)をクリックすると引用(転載)できます。

デザインはシンプルにまとめました。
こんな感じです。

このデザインのスタイルシートは以下のコードを使います。
以下のコードを、テンプレートからhead要素の中にあるStyle要素の中へ追加します。

/* simple style for blockquote */
.post-body blockquote {
  border: 1px solid rgb(215,215,215);
  padding: 15px 10px 15px 40px;
  margin: 20px;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAASBAMAAACtCzMeAAAALVBMVEUAAAC7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7t0WFY+AAAADnRSTlMAd+n9iDMRZqxJmdUiwXv7/E8AAABgSURBVAjXYwACzhtwkm3dazgZ924BjOR895wBTIIFBODkvkcMMJL93RM4yfTuIYQEK3wBJ+XevVuGRL5zQCIfIpGPoGTdOyCAknkgESjJCFIJJRn83r1rgJE8gpIMEBIAg21Wt93GZIYAAAAASUVORK5CYII=) no-repeat scroll 10px 10px transparent;
  background-color: rgb(250, 250, 250);
}

CSSのセレクタを”.post-body blockquote”と指定しているので、スタイルシートは投稿記事内の引用にのみ適用されます。

なお、クォーテーションの画像は、スタイルシートへdata URI schemeとして埋め込んでいます。
元となった画像はこちら(クォーテーション左)で、画像の背景透過処理をしてあります。
必要な方はダウンロードして使ってください。