Blockquote CSS

一つ前の記事で自己満足な Bookmarklet を紹介したわけですが、今度はその blockquote を便利に使うためのCSSソースを紹介。このソースとBookmarkletを使えば簡単に引用先の紹介をすることが出来ます。色とか形とかは各自でカスタマイズしてもらえばいいのですが引用の最後に入れているciteはblockしておくことをおすすめします。とりあえずはこんな感じで使っていく予定です。

blockquote {
    clear:both;  /* 無くてもいい */
    margin:.5em 1em;
    padding:.5em;
    border: 1px solid #666;
    background: #BFCFFF;
    color: #333;
    }
blockquote > cite {
    margin-top: 5px;
    padding-left: 1em;    
    border-top: 1px solid #0033CC;
    text-align: right;
    display:block;
    }
blockquote > cite:before {
    content: "- "; /* citeの前に-を加える */
    }
blockquote > cite:after {
    content: " -"; /* citeの後ろに-を加える */
    }

まだCSSやJavascriptばっかでプログラムを全く書いてませんがそのうち載せていく予定だったりします。