WebサイトでVcardを提示する方法
vCardは、メールクライアント、またはOutlook、Thunderbird、アドレス帳などの連絡先データをインポートするその他のプログラムによって解釈されるように設計されたデジタル名刺です。ウェブサイトにvCardを含めることで、訪問者があなたの情報を簡単にダウンロードし、将来簡単に連絡できるようになります。ただし、vCardには視覚的なコンポーネントがないため、そのためのページのデザインは完全にあなたの裁量に委ねられています。あなたは好きなだけワイルドまたは控えめに行くことができます。従来の名刺の外観を模倣した基本的な外観が必要な場合は、div要素といくつかの単純なCSSスタイルを使用してこれを行うことができます。
1
vCardファイルをWebサイトにアップロードします。vCardには、オンラインで配布しても問題のない専門的なデータのみが含まれていることを確認してください。
2
名刺を表すdiv要素を作成します。「vcard」などの一意のIDを指定し、カードに表示する詳細を入力します。基本的なカードには、名前、ウェブサイト、メールアドレスを含める必要があります。Facebookページ、Twitterアカウント、またはその他のソーシャルネットワーキングWebサイトにリンクすることもできます。vCardをダウンロードするためのリンクを含めることを忘れないでください。基本的なdivは次のようになります。
（555）555-5555
//www.yourwebsite.com
vCardをダウンロードする
3
vcard IDをスタイルシートに追加して、divの表示方法を変更します。白い背景と黒い境界線を使用した比較的大きなカードプレゼンテーションが必要な場合、IDは次のようになります。
div＃vcard {幅：400px; 高さ：200px; オーバーフロー：非表示; 背景：#FFFFFF; ボーダー：1px実線＃000000; }
「オーバーフロー：非表示;」コンテンツがサイズを超えた場合にカードの幅または高さが拡大するのを防ぎます。フォントのサイズと色を定義することもできます。たとえば、14ポイントですべてにダークグレーのTimes New Romanフォントを使用する場合、IDは次のようになります。
div＃vcard {幅：400px; 高さ：200px; オーバーフロー：非表示; 背景：#FFFFFF; ボーダー：1px実線＃000000; font-family： 'Times New Roman'; フォントサイズ：14pt; 色：＃3B3131; }
4
div＃vcard h1要素を追加して、名前を大きく、目立たせます。これは、vCarddiv内のH1タグのみを変更します。22ポイントのフォントを使用して小さな灰色の影を追加する場合、CSSは次のようになります。
div＃vcard h1 {font-size：22pt; テキストシャドウ：1px 1px #CCCCCC; }
text-shadow要素は、x軸オフセット、y軸オフセット、および色によって定義されます。わずかにぼやけた影が必要な場合は、3番目の値をピクセル単位で追加して、ぼかしを定義します。
テキストシャドウ：1px 1px 4px #CCCCCC;
5
vCard要素を目立たせたいその他の視覚的または装飾的な要素を追加します。画像を追加したり、段落の行の高さと配置を変更したり、色を変更したりできます。デザインが視覚的に魅力的であればあるほど、目立つようになります。
6
WebサイトでvCardダウンロードリンクをテストして、リンクが正確であることを確認します。
