更新日: 2013年4月22日
HTML & CSS

引用・blockquote タグの CSS

HTML の引用文で使う blockquote タグ用の CSS を設定したので備忘録。以下のように表示します。

背景色：#EEEEEE
引用文と出典元のリンク先をダブルクオート画像（”…”）で囲む。
下部に出典元のリンク先を表示。

【お知らせ】英単語を画像イメージで楽に暗記できる辞書サイトを作りました。英語学習中の方は、ぜひご利用ください！

画像付き英語辞書 Imagict | 英単語をイメージで暗記
【開発記録】
英単語を画像イメージで暗記できる英語辞書サービスを作って公開しました

実際のブラウザ上での表示

1. 画面の明るさを暗くする。
2. 使わないウィジェットを削除する。
3. 省電力モードのタイマーモードを使って、夜12時〜朝7時は全部OFFに。
4. 使わないアプリを思い切ってアンインストール or 無効化。
5. バッテリー節約アプリ、高級タスクマネージャー、Deep Sleep Battery Saver をインストール。

Xperia AX SO-01E（ドコモ Android スマートフォン）のバッテリー消費改善のためにやった対策5つ | EasyRamble

HTML & CSS

本文の HTML は以下のようなっています。

<blockquote>
<div>
<p>1. 画面の明るさを暗くする。
2. 使わないウィジェットを削除する。
3. 省電力モードのタイマーモードを使って、夜12時〜朝7時は全部OFFに。
4. 使わないアプリを思い切ってアンインストール or 無効化。
5. バッテリー節約アプリ、高級タスクマネージャー、Deep Sleep Battery Saver をインストール。</p>
</div>
<div class="via">
<a href="https://easyramble.com/improve-xperia-battery.html">Xperia AX SO-01E（ドコモ Android スマートフォン）のバッテリー消費改善のためにやった対策5つ | EasyRamble</a>
</div>
</blockquote>

<div>

<p>1. 画面の明るさを暗くする。

2. 使わないウィジェットを削除する。

3. 省電力モードのタイマーモードを使って、夜12時〜朝7時は全部OFFに。

4. 使わないアプリを思い切ってアンインストール or 無効化。

5. バッテリー節約アプリ、高級タスクマネージャー、Deep Sleep Battery Saver をインストール。</p>

</div>

<a href="https://easyramble.com/improve-xperia-battery.html">Xperia AX SO-01E（ドコモ Android スマートフォン）のバッテリー消費改善のためにやった対策5つ | EasyRamble</a>

</div>

</blockquote>

CSS は以下の通り。

blockquote {
  background-color: #EEEEEE;
  padding:15px 15px 15px 15px;
  margin-bottom:25px;
}
 
blockquote div {
  padding-left: 25px;
  background: url(images/quote_left.png) left top no-repeat;
}

blockquote .via {
  padding-right: 25px;
  background: url(images/quote_right.png) right bottom no-repeat;
}