はてなブログカード iframなしに-blocard.sinkatu.com

上記のサイトより、はてなブログカードを取得し書き換えています。

右）はてなブログ風ブログ（シェア）カード　（サンプル）

コードを新しいWindoで見る。

書き換えている場所について

まず：タイトルと説明文の部分を

<div class="embed-wrapper-inner" style="padding:12px;">の下に移動させる。

<div class="embed-content with-thumb">

<div class="thumb-wrapper">

<span class="entry-title"><a href="サイトURL" target="_blank">サイトタイトル</a></span>

<div class="entry-content">

サイト説明文

</div>

</div>

画像のソースをタイトルと説明文の下に移動させる。

<div class="entry-body">

<a href="サイトURL" target="_blank"><img src="サムネイル画像URL"

class="thumb" style="float:left; padding-top: 20px; width: 230px;" alt="" /></a>

<div class="entry-content">

</div>

</div>

</div>

float:left;　右に寄せる、または左に

padding-top: 20px;　画像とタイトルと説明との間の調節

width: 230px; ：画像の大きさ

サイトに合わせて幅と高さの調節をする。

<div class="embed-wrapper" style="border:solid 1px rgba(0,0,0,.1); max-width:820px; height: 250px;">

max-width:820px; height: 250px;　：重要

フッターの小さいサイトアドレス表示を右に寄せる。

<div align="right">

</div>

右）はてなブログ風ブログ（シェア）カード　（サンプル）

コードを新しいWindoで見る。

CSSの記述

CSSソースを新しいWindoで開く。