Rico + CSS のblockquote『Rico Quote』を作りました。

Rico + CSS のblockquote『Rico Quote』！Rico + CSS のblockquote『Rico Quote』！

すごくシンプルなblockquoteが作りたくなったので作りました。 Rico + CSS のblockquote『Rico Quote』です。 特長は以下の5点です。 1.ソースがシンプル！ 　blockquoteとpで構成しています。 2.WEB標準準拠 　blockquoteはWEB標準的にインライン要素をそのまま含むことができません。そのため、pタグやdivをblockquoteの中に入れる必要があります。『Rico Quote』ではblockquoteの中にpタグを入れています。 3.画像を入れ替えられる 　使用している画像は2つです。サイズとCSSのpaddingを調整することで、お好きな画像でデザインすることができます。 4.CSSでレイアウト 　シンプルにCSSでレイアウトしています。 5.Ricoで角丸 　角丸部分はrico.jsで実装しています。 以前紹介したものはソースが煩雑な作りのものだったため、可能な限りシンプルに、をコンセプトに作りました。これで毎日でも使えるblockquoteができたかな、と思います。 ■headの内容は↓ <script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/rico.js"></script> <script type="text/javascript"><!– window.onload = function() { new Rico.Effect.Round("blockquote","round"); } // –></script> ■HTMLは↓ <blockquote class="round"><p>テキストが入りますテキストが入りますテキストが入ります</p></blockquote> ■CSSは↓ .round p { padding:18px 26px 5px 26px; margin:0; color:#333; } blockquote { background:url(../img/ricoquote_up.gif) no-repeat #E0E0E0 0 3px; width:200px; } blockquote p { background:url(../img/ricoquote_down.gif) no-repeat right bottom; } ■ダウンロードは↓から可能です。

Download ZIP！

jsフォルダは空になっています。 以下のリンクからprototype.jsとrico.jsをダウンロードしてjsフォルダに入れてください。 » prototype.js » rico.js 思うように進まず。。APIに手こずっています。