本文に引用をつける ～Movable Type ～
Movable Type3.2をダウンロードするとデフォルトで付いている「引用」のボタン
は単なる<blockquote>タグを付加するだけであるため、見た目がかなり地味です。
そこで、この引用に背景色や枠線を付け足してやりたいと思います。
こんな感じで。
引用
スタイルシートに下記を追加してやります。
blockquote { }
この中に書くスタイルシートの内容が引用の見栄えに影響します。
たとえばこんな感じです。
blockquote {
margin: 15px; /* 枠線を表示する上下左右の空白 */
padding: 10px; /* 枠線から文字までの上下左右の空白 */
background: #fffff6; /* 背景色 */
border: 1px solid #999999; /* 文字色 */
font-size: 10px; /* フォントサイズ */
line-height: 150%; /* 改行幅 */
}
次にタイトルも付加してやりましょう。以下をスタイルシートのblockquote { } の後に続けて書きます。
.quotetitle {
padding: 3px;
border-bottom: 1px solid #666699;
font-weight: bold;
}
で、ブログ本文では、次のように記述してやります。
<blockquote><div class="quotetitle"><p>引用のタイトル</p></div>
<p>引用本文。</p>
</blockquote>
そうすると、下のように表示できます。
引用のタイトル
引用本文。
・人気ブログランキング←参加中です。クリックお願いします。m(_ _)m
