「引用」に装飾を施す｜Materializing [マテリアライジング]

引用ボタンスクリーンショットエントリー編集画面には、「引用」ボタンがあります。
Blogの記事を書く際に、説明文を引用して掲載する際に、他の文章との区分を行う際に用いられるものですが、これに装飾を施してみます。

ボタンの使い方

文章を選択する
ボタンを押す

となります。単にボタンを押すだけでは、引用文を示すHTMLタグである

<blockquote> ～～～ </blockquote>

は挿入されません。

CSSファイル追記

使用しているCSSファイルに下記コードを記述します。

blockquote {
	color: #CC3300;
	font-size: 12px;
	background: #FFEACA;
	margin: 5px 0px 10px 20px;
	padding: 5px;
	border-top: 1px solid #FF6600;
	border-right: 1px solid #FF6600;
	border-bottom: 1px solid #FF6600;
	border-left: 7px solid #FF6600;
}

上記を編集する事で、線の太さやマージン等の調整が出来ます。好みに改変して下さいね。

参考例

こんな具合になります。

余談

引用元を明示する際には

<cite> ～～～ </cite>

を使います。このタグは通常、斜体文字になります。

参考例

引用元
引用参考例

以上

2006/11/02 04:39:32：記事書き直し

「引用」に装飾を施す

ボタンの使い方

CSSファイル追記

参考例

余談

参考例

カテゴリ

トラックバック(0)

About This Site