掲載バッジの貼り方

IDEAVALUに掲載した作品は、自分のサイトにバッジを貼れます。押すとIDEAVALUの作品ページが開き、Boost数が表示されます。公開した月のランキングで10位以内に入ると、バッジに順位が出ます。

掲載バッジの見本

あなたの作品のバッジ

ログインすると、自分の作品のバッジのコードをここでコピーできます。

ログインしてコードを取得

どこに貼るといいか

  • 作品の公式サイトやLPのフッター(どのページにも出るので、1か所貼れば済みます)
  • トップページの下の方や、「メディア掲載」「紹介されたサイト」の欄
  • GitHub の README の先頭(ほかのバッジと並べて置けます)
  • 自分のポートフォリオサイトの作品紹介

同じサイトに何個も貼る必要はありません。1か所で十分です。

サイトの作り方別の手順

HTMLを自分で書いているサイト
  1. 上の「あなたの作品のバッジ」で形式「HTML」を選び、コードをコピーします。
  2. index.html などを開き、表示したい場所(<footer> の中など)に貼り付けます。
  3. ファイルを保存して公開し、バッジが出ているか確認します。
React・Next.js・Vue などで作ったサイト
  1. 形式「React・Next.js」を選んでコピーします(width と height が {224} の形になっています)。
  2. フッターなどのコンポーネントの中に貼り付けます。Vue や Svelte ではHTMLの形式をそのまま使えます。
  3. Next.js の next/image は外部画像の設定が必要になるので、コードのとおり <img> のままにしてください。
WordPress
  1. 形式「HTML」を選んでコピーします。
  2. 投稿・固定ページの編集画面で「+」を押し、「カスタムHTML」ブロックを追加して貼り付けます。全ページに出したいときは、ウィジェットやフッターの編集で同じブロックを使います。
  3. 更新して、公開ページで確認します。
STUDIO・Wix・ペライチなどのノーコードツール
  1. ツールに「HTML埋め込み」「コード埋め込み」の機能があれば、形式「HTML」のコードを貼ります。
  2. ない場合は形式「画像とリンク」を選び、画像を置いてから、画像のURL(またはアップロード)とリンク先のURLを設定します。
  3. 画像を保存してアップロードした場合、Boost数は保存した時点のまま変わりません。
GitHub の README
  1. 形式「Markdown」を選んでコピーします。
  2. README.md の先頭など、表示したい場所に貼り付けてコミットします。
App Store・Google Play だけで公開している

ストアの説明文には画像やリンクを貼れません。サポートページ、プライバシーポリシーのページ、GitHub の README など、自分で編集できるページがあればそこに貼ってください。

よくある質問

貼らないと掲載や順位に影響しますか?
影響しません。バッジは任意です。貼っていなくても、掲載・ランキング・メールでの紹介の扱いは同じです。
Boost数がすぐに変わりません
Boost数と順位は1時間ごとに更新されます。ブラウザに古い画像が残っていることもあるので、時間をおいて再読み込みしてください。
順位の表示はいつ出ますか?
公開した月(日本時間)のランキングで10位以内に入ると「2026年10月 3位」のように表示されます。その月に公開された作品が10件未満のときは出ません。貼り直す必要はありません。
色や大きさを変えられますか?
色は白と紺の2種類です。大きさは width と height の数字を同じ比率で変えれば縮小・拡大できます(例:168 と 42)。
外したいときは?
貼ったコードを消すだけです。IDEAVALU側の手続きはいりません。
掲載バッジの貼り方 | IDEAVALU