人気ブログランキング | 話題のタグを見る

エキサイトブログで引用(blockquote)を使ってアクセントをつける

エキサイトブログで引用(blockquote)を使ってアクセントをつける_e0223652_2155155.jpg

ウチのブログでも多用している「blockquote」タグ。エキサイトブログだと記事編集エディタで超簡単に使えるので使いまくってます。




本来「blockquote」タグって、「引用」タグっていうくらいで文字通り他のサイトの記事を引用するときなどに使います。

ウチのブログでは、CSSやHTMLのタグを記事に載せるときに使ってますが、記事にアクセントをつけるためには引用以外に使ってもアリかな?とか思います。

ちなみに、エキサイトブログには禁止タグってのがあってCSSはまったく問題ないのですが、JavascriptやHTMLタグの一部は,単語すら入力しても禁止タグとしてエラーになっちゃいます。

使用方法は・・・
エキサイトブログで引用(blockquote)を使ってアクセントをつける_e0223652_2232617.jpg
記事編集画面のボタンの上のボタン(赤枠)をクリックすると挿入されます。
エキサイトブログで引用(blockquote)を使ってアクセントをつける_e0223652_2244147.jpg
公式スキンによってはCSSで設定されているかもしれませんけど、ウチのブログの設定は以下
blockquote {
position:relative;
margin:10px;
padding:50px 10px;
border: 3px solid #eee;
color: #666;
background-color: #f5f5f5;
}

blockquote:before {
position:absolute;
top:0;
left:0;
content: url(http://pds.exblog.jp/pds/1/201109/04/52/blockquote_left.png);
}

blockquote:after {
position:absolute;
bottom:0;
right:0;
content: url(http://pds.exblog.jp/pds/1/201109/04/52/blockquote_right.png);
}
使っている画像は
この2つ。

画像は、エキブロのサーバにアップしてあるのでCSSはコピペでもOKですが、私が削除したら使えなくなっちゃうんで、使いたい方は各自アップロードして画像のurlを変更してください。

これも擬似要素を使っているのでIE6未対応です。
ブログランキング・にほんブログ村へ

by killingmoon581 | 2012-02-29 02:37 | エキサイトブログ
<< エキサイトブログで気に入ってい... レイアウトの選択 >>
LINK LINK LINK LINK LINK

Page Top