CSSで引用をデザインする。

admin — Thu, 25 Jan 2007 20:14:59 +0000

「言及リンクのないトラックバックはお断りします。」的なブログが多いような気がする。

まぁ、大半がSEOを目的として、関連性のない記事に一方的にトラックバックを送信してくるような、ブログが多くなってきたための対処ということなのでしょう。。。

しかし。。。なかなか言及リンクって言われてもねぇ。。

要は、トラックバック元の記事にトラックバック送信先のリンクがあればいいわけですが・・・
それだけじゃぁ味気ないので・・・

どうせなら、大々的に引用したろう。っちゅう結論に達しました。。

「オールスターという夢のドリームゲーム」、「1年目のルーキー」、「今年初めての開幕戦」、「体験を経験」、「疲労からくる疲れ」、「秋の秋季キャンプ」、「始まりのスタート」、「バースデー誕生日」、「打率のパーセントテージ」、「ブルーな青空」など・・・

ウィキペディア長島茂雄のページより

例えば→のように書いてしまえば、このブログの文章ではなく、リンク先の文章っちゅうことが一目で分かりますよねぇ。。

しかし、すごいですなぁ。。。長島氏。。。神いわゆるゴッドですな。。←（あ。。これも引用せなあかん？）

とにかく・・・こんな風に書いておけば、読者にも、引用された文章を書いた筆者にも印象がよさげ？

っちゅうわけで、今回使用しましたCSS（スタイルシート）、html、イメージファイルをご紹介。

CSS（スタイルシート）

.quote_block {
float: right;
margin: 10px;
padding: 10px;
width: 250px;
font-size: 12px;
background: #F9FFEE;
border: 1px dotted #99CC33;
}

.bqstart {
float: left;
margin: 0 10px 5px 0;
padding: 0;
width: 35px;
height: 25px;
background: url(images/bqstart.gif) no-repeat;
}

.bqend {
float: right;
margin: 0 0 5px 10px;
padding: 0;
width: 35px;
height: 25px;
background: url(images/bqend.gif) no-repeat;
}

.quote_block blockquote {
margin: 0;
padding: 0;
}

.quote_block p {
margin: 0;
padding: 5px 0 10px 5px;
}

.quote_block cite {
float: right;
margin: 0;
padding: 0;
font-size: 10px;
font-style: normal;
}

ｈｔｍｌ




引用文




引用タイトル

イメージファイル（↓のイメージを保存してくださいな。）

DesignWalker » blockquote

CSSで引用をデザインする。