“Blockquote要素”をおしゃれに装飾

“Blockquote要素”のデザインを変更しました。

“Blockquote要素”は、cite、a、img、pなどの要素を内包して使用することができますので、これらも併せて明るめのデザインに変更しました。

完成サンプル↓

W3C, HTML5.1, cite element
seesaa-favicon-blue

ここに長い引用文の本文を記述します。3行以上のイメージです。

Blockquote要素(引用ブロック)の使い方

Blockquote要素は、外部情報を引用する際に使用するタグです。主に数行以上に渡る長めの文章を引用する際に使われます。

これに対して、1-2行程度の外部情報を引用する際は、q要素を使用します。

よく合わせて使われる、cite要素では、出展の記事名を引用する際に使用します。

用途に関する詳しい情報は、「W3C, HTML5.1, Blockquote element」をご参照ください。

Blockquote要素のHTMLの書き方

関連要素を一揃い使いたい場合は…

<blockquote>
<cite>
<a href="引用作品のURL" target="_blank">引用作品名</a></cite>
<a href="画像.png">
<img src="画像.png" alt="画像名" width="100" height="100" /></a>
<p>
ここに長い引用文の本文を記述します。3行以上のイメージです。</p>
</blockquote>

と表記すると、↓の様なデザインになります。

引用作品名
seesaa-favicon-blue

ここに長い引用文の本文を記述します。3行以上のイメージです。

要らない要素は削除しちゃってください。

“Blockquote要素”のCSS設定

CSSの設定

blockquote {
  font-size: 1rem;
  background: #ffe0e0;
  margin:0.5rem 0;
  padding: 0.5rem;
  font-style: normal;
  font-size: 1rem;
  min-height: 4rem;
  overflow: auto;
}

blockquote:before {
  display: block;
  float: left;
  font-family: FontAwesome;
  content: "\f10d";
  font-size: 2rem;
  margin-right: 0.2rem;
  color: #ffe0e0;
  background-color: #ff7f7f;
  padding: 0.1rem 0 0.2rem 0.4rem;
  width: 3rem;
  height: 3rem;
  line-height: 3rem;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}

上記の部分がblockquote要素本体のCSS記述です。

  1. 背景のピンク色は、#ffe0e0;の部分を差し替えれば他の色に変わります
  2. Twenty Seventeenは、標準のイタリックが効いているので、キャンセルしたければfont-style: normal;を追加し、そうでなければ記述しなくてOKです。
  3. 字の大きさは1rem(=16px)にしましたが、font-size: 1rem;で調整できます。
  4. 枠内に入りきれなかった場合は、overflow: auto;でブラウザ依存でスクロール設定にしています。
  5. 2段目のblockquote:beforeの部分が、右上の”(ダブルクオーテーション)部分の設定です。いらない場合はまるっと削除
  6. マークはFontAwesomeの\f10dを使っています。
  7. マークのbackground-color:は、濃い方で、font-colorが薄い方です。

“cite要素”、”img要素”、”p要素”の設定

cite要素(引用作品名)のCSS

blockquote cite {
  display: block;
  position: relative;
  text-align: right;
  font-style: italic;
  font-size: 0.8rem;
  margin: 0.8rem;
  color: #999;
}

blockquote要素内のimg要素(画像)のCSS

blockquote img {
  position: relative;
  float:right;
  margin:1rem;
}

blockquote要素内のp要素(段落)のCSS

blockquote p {
  padding:0.5rem;
  margin:0.5rem;
}

翻訳をつけたい場合の段落タグをデザイン

.translationのCSS

これは要素ではなくて、ただのクラスですから、参考まで。

.translation {
font-size: 1em;
border: 4px solid #ffe0e0;
margin: 1em 0;
padding: 1em;
}

.translationのHTML記述

繰り返し、要素でもなく、要素指定でもないので、どうとでも使えますが…

<p class="translation">ここに翻訳文を書きます。</p>

と書くと、

ここに翻訳文を書きます。

というように表現されます。

カテゴリーHTML

コメントを残す

メールアドレスが公開されることはありません。