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