カードデザイン作成くん

今回はカードデザインの使い方とどんなふうにカスタマイズができるか説明していきます。

URL : https://k-editor.com/editor/card/

## 基本

カードデザインは文字通りカードを作るためのものです。SNSでよく見る画像+テキストをまとめてカードっぽくしたものを作ることができます。デフォルトでは以下のコードが出力されます。

<div style="margin:auto;max-width:335px;"><div style="margin:0;padding:0;border:1px solid #a1a1a1;background:#ffffff;"><div style="margin:0;padding:8px;font-size:14px;line-height:1.4;color:#a1a1a1"><span style="font-weight:bold;color:#222222;">タイトル</span>

<span style="color:#a1a1a1;">ここに本文を入力</span></div></div></div>

デフォルトでは画像は入ってなくて、単に太字のタイトルと本文が表示されるだけになっています。

画像を入れると以下のようになります。

こんな感じのカードを作ることができます。

画像を入れた時のコードは以下のようになります。

<div style="margin:auto;max-width:335px;"><div style="margin:0;padding:0;border:1px solid #a1a1a1;background:#ffffff;"><img src="https://22980.mitemin.net/userpageimage/viewimage/icode/i463340/" alt="i" width="700px" /><div style="margin:0;padding:8px;font-size:14px;line-height:1.4;color:#a1a1a1"><span style="font-weight:bold;color:#222222;">タイトル</span>

<span style="color:#a1a1a1;">ここに本文を入力</span></div></div></div>

それぞれの意味は以下の通り。

・margin:外余白

・max-width:最大幅

・padding：内余白

・color: 文字色

・background:背景色

・border：枠線

・font-size: 文字サイズ

・line-height：行間

構造は以下のようになります。

<div>

　<div><img>

　　<div><span>タイトル</span><span>本文</span></div>

　</div

</div>

一番外側のdivでサイズ設定と中央寄せ。その次のブロックで枠線、その中に画像。その次にテキストブロックを入れています。テキストブロックの中にタイトルと本文のためのspanを入れています。

ちょっと複雑ですが、まぁ致し方ないです。こういった構造が理解できるようになるとある程度複雑なものも作れるようになります。

詳細設定を開くと、文字サイズ、余白、枠線、色の変更が可能になります。またリンクURLも設定することが可能です。リンクの当たり判定は画像と文字に設定されます。

## コード説明

max-width:335px;を指定しているのは見た目を統一するためです。

PC版とスマホ版の割烹では横幅が異なります。何も指定しない場合、PC版は670px程度まで広がります。スマホはせいぜい400px程度です。その場合意図していない見た目になってしまうので幅を制限しています。

画像はみてみんのURLのみ対応しています。URLは,この画像のＵＲＬの項目をコ(・)ピ(・)ペ(・)して画像URLのところに貼り付けてください。コ(・)ピ(・)ペ(・)に(・)し(・)か(・)対(・)応(・)し(・)て(・)い(・)ま(・)せ(・)ん(・)。(・)

-　-　- ✂切り取り✂ -　-　-

ということでカードデザイン作成くんの使い方でした。もしよくわからない点などあれば感想などでお知らせください。