このページでは、るびくる応援用のバナー画像を配布しています。るびくるのことを応援・宣伝していただける方は、ぜひこの応援バナーをあなたのWebページなどに貼り付けてください!
画像ファイル版(オススメ)
以下のHTMLタグを貼り付けていただくことで、応援バナーを貼り付けることができます。
(影なし・透過PNG版)
<a href="http://rubicle.net/"> <img src="http://deliv.rubicle.net/rubicle_support_banner.png" width="160" height="103" border="0" alt="非公式Rubyマスコットるびくるを応援しています" /> </a>
(影あり版) ※完全な白背景(#ffffff)でないと馴染みません
<a href="http://rubicle.net/"> <img src="http://deliv.rubicle.net/rubicle_support_banner_with_shadow.png" width="168" height="113" border="0" alt="非公式Rubyマスコットるびくるを応援しています" /> </a>
- 画像ファイル形式(PNG形式)のため、あらゆるブラウザで表示可能です。ただし、IE6以前のブラウザは透過PNGに対応していないため、角丸部分の背景が白く表示されてしまいます(DD_belated.jsなどのJavaScriptを使うことで防ぐこともできます)。
- クリック時用の画像(押し込み画像)も配布しています。 →影なし・透過PNG版 影あり版
CSS3版
以下のHTMLタグを貼り付けていただくことで、応援バナーを貼り付けることができます。
るびくるを応援しています
非公式Rubyマスコット
1. HTML文書内の<head>〜</head>部分に、このタグを貼り付ける
<link rel="stylesheet" href="http://deliv.rubicle.net/rubicle_support_button.css" />
2. バナーを表示させたい部分に、このタグを貼り付ける
<a class="rubicle-button-with-shadow" href="http://rubicle.net/"> <span class="rubicle-button-image"> </span> 非公式Rubyマスコット<br />るびくるを応援しています</a> </a>
- 画像ではなくCSS3を使用したボタンのため、どのような背景にも影がなじみ、表示内容を細かく調整することもできます。ただし、ブラウザによっては正しく表示されません。
- FireFox、Chrome、Opera 11以降、Safari、iOS、Androidであればほぼ確実に表示可能です。
- IE7以前では表示されません。IE8では表示されますが、角丸になりません。IE9以降では正常に表示可能です。
- クリックすると、ちゃんと「押し込まれた」表示になります。
- → ほかの顔グラフィックのバリエーションもあります。
- CSS 3 Pieの設定を行うことで、IE6〜IE8でも正しく表示させることができます。
- 注意事項
- この応援バナー画像は、桜去ほとりさんが制作された顔アイコン画像をベースにして制作したものです。クリエイティブ・コモンズ 表示-非営利 3.0ライセンスのもとで、再配布や変更などを行っていただくことができます。
- このページ内のソースコードは、CC0ライセンスのもとで、ご自由に利用していただくことができます。