本文へ移動

Fuda Cards札

画像やライブ3Dを入れるコレクション用のカード枠です。本物の厚み、縁、箔、山、傷み、バインダーを、2つのWebコンポーネントで使えます。

「札(ふだ)」は、カードや札を指す日本語です。 名前について(英語)

目次

やり方

iframeに埋め込む

自分で作らないページにカードを載せる方法です。埋め込みページのiframeを使い、設定はそのアドレスに入れます。

demo/embed.htmlは、<iframe>に入れるために作ったページで、カード以外は何もなく、アドレスに書かれた内容を描きます。何も追跡せず、訪れた人の端末に何も残さず、指定された絵以外は何も読み込みません。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>A Fuda card in an iframe</title>
  </head>
  <body>
    <iframe
      src="https://johnmorrisdotca.github.io/fuda-cards/demo/embed.html?title=Explorer+One&variant=sport&finish=foil&stack=10&card-spin=center"
      title="Explorer One, a silver card on a stack of ten"
      width="340"
      height="480"
      loading="lazy"
      style="border: 0"
    ></iframe>
  </body>
</html>

アドレス

<fuda-card>の設定はどれも、属性名のままパラメーターにできます。title、variant、finish、stack、wear、material、card-spinなどで、残りはカード要素にあります。スイッチは1にします。imageは絵のアドレスで、指定しなければスターシップの絵になります。ビルダーは、選んだ設定から、幅と高さを含めたiframeを書き出します。

コレクションには専用のページdemo/embed-collection.htmlがあり、コレクションの属性(view、cover、pockets)をパラメーターにでき、見本のカード18枚か、cardsで指定したJSONファイルを表示します。

大きさ

ページはiframeに合わせます。カードはiframeが許す幅まで、最大300ピクセルの幅になり、縦横の比は保ちます。例のように、iframeの高さは幅の1.4倍に、影の分の余裕を少し足してください。

ソースを見るGitHub で編集@johnmorrisdotca/fuda-cards 0.11.0 のソースから作成しました。

この日本語は、まだ日本語を母語とする方の確認を受けていません。訂正を歓迎します。