Webサイト一覧ウィジェット

Eggplanetで生まれた5つのWebサイトを、ひとつの小さなウィジェットにまとめました。ブログのサイドバーやサイトのフッターなどに設置できます。

設置する

次のコードを、表示したい場所のHTMLに貼り付けてください。スクリプトは1ページにつき1回の読み込みで、ウィジェットは複数設置できます。

<script src="https://eggplanet.com/widgets/eggplanet-sites.js" defer></script>
<eggplanet-sites>
  <a href="https://eggplanet.com/works">EggplanetのWebサイト</a>
</eggplanet-sites>

JavaScriptが読み込めない場合は「EggplanetのWebサイト」のリンクが表示されます。各リンクは新しいタブで開きます。

幅や色を調整する

標準の最大幅は360pxです。狭い場所では設置先の幅に収まります。必要に応じてCSSの変数で見た目を変更できます。次は白い背景に合わせる例です。

eggplanet-sites {
  --eggplanet-width: 320px;
  --eggplanet-radius: 16px;
  --eggplanet-background: #ffffff;
  --eggplanet-color: #211b35;
  --eggplanet-muted: #655c75;
  --eggplanet-accent: #583398;
  --eggplanet-border: #dfd7eb;
}

サイト一覧について

掲載サイトはEggplanetの作品データと共通です。作品データを更新して公開すると、ウィジェットにも反映されます。設置先でのコードの貼り替えは不要です。

ウィジェットはShadow DOMを使用し、内部のスタイルを設置先のCSSから分離しています。追加ライブラリやAPIキーは不要です。