動くカードの設置方法 | ぱたぱたアニメ館

デモ

ここに文章

css


.card {
  width: 240px;
  margin: 0 auto;         /* 中央配置（デモでは外しています） */
  background: #ffffff;    /* 背景色 */
  text-align: center;
}
.card img {
  display: block;
  margin: 0 auto;
}
.card-text {
  padding: 5px;
  color: #000;           /* 文字の色 */
  text-align: left;
  line-height: 1.5;
}

html


<div class="card">
  <img src="m73-line1.gif" alt="上のライン">
  <img src="m73-main.gif" alt="メイン画像">

  <p class="card-text">
    ここに文章
  </p>

  <img src="m73-icon.gif" alt="画像">
  <img src="m73-line1.gif" alt="下のライン">
</div>

使い方

携帯デコメールで作成したテンプレートをブログのサイドバーに設置されているサイトを見かけましたので、このページを作成しました。設置方法は簡単です。画像を自分のサーバーにアップロードして上記の CSS / HTML コードをコピ-＆ペーストするだけです。もちろんメイン記事にも使えます。

設置するには HTML 編集ができる環境が必要です。HTML 編集に対応していない環境（一部のブログなど）では利用できません。

コードの説明

コード	説明
`width: 240px;`	全体の横幅を`240px`にしています。数値（`240`）を変更すると横幅の大きさが変わります。
`margin: 0 auto;`	要素を中央配置にしています。（デモでは外しています）
`background: #ffffff;`	背景色を白色（`#ffffff`）にしています。数値を変更すると背景色が変わります。
`display: block; margin: 0 auto;`	画像を中央に配置するための指定です。インライン要素である画像をブロック要素として扱っています。
`color: #000000;`	文字色を黒色（`#000000`）に指定しています。数値を変更すると文字色が変わります。
`m73-line1.gif`	画像ファイル名です。別の画像を使用する場合は、この部分を変更します。
`alt="〇〇〇"`	画像の説明（代替テキスト）です。内容は自由に変更できます。