-> English version



るびくる応援バナー

このページでは、るびくる応援用のバナー画像を配布しています。るびくるのことを応援・宣伝していただける方は、ぜひこの応援バナーをあなたのWebページなどに貼り付けてください!

画像ファイル版(オススメ)

以下のHTMLタグを貼り付けていただくことで、応援バナーを貼り付けることができます。

非公式Rubyマスコットるびくるを応援しています

(影なし・透過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>

非公式Rubyマスコットるびくるを応援しています

(影あり版) ※完全な白背景(#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">&nbsp;</span>
                非公式Rubyマスコット<br />るびくるを応援しています</a>
</a>
  • 画像ではなくCSS3を使用したボタンのため、どのような背景にも影がなじみ、表示内容を細かく調整することもできます。ただし、ブラウザによっては正しく表示されません。
    • FireFox、Chrome、Opera 11以降、Safari、iOS、Androidであればほぼ確実に表示可能です。
    • IE7以前では表示されません。IE8では表示されますが、角丸になりません。IE9以降では正常に表示可能です。
  • クリックすると、ちゃんと「押し込まれた」表示になります。
  • → ほかの顔グラフィックのバリエーションもあります。
  • CSS 3 Pieの設定を行うことで、IE6〜IE8でも正しく表示させることができます。
注意事項
  • この応援バナー画像は、桜去ほとりさんが制作された顔アイコン画像をベースにして制作したものです。クリエイティブ・コモンズ 表示-非営利 3.0ライセンスのもとで、再配布や変更などを行っていただくことができます。
  • このページ内のソースコードは、CC0ライセンスのもとで、ご自由に利用していただくことができます。

一言メッセージフォーム

るびくるへの質問や、やってほしい企画のリクエスト、Webサイト管理スタッフへの感想・意見・質問など、なんでもお気軽にどうぞ。