ブログのトップページなどで一覧を表示する時に一つ一つの記事をブロック状に並べたりすると思いますが、
複数繰り返すパーツなのでシンプルでわかりやすいものがいいですよね。
そのパーツに使えそうな、ブログカードやニュースカードをご紹介。

The post コピペでできる！cssとhtmlのみで作る記事などのニュースカード/ブログカード 7選 first appeared on コピペっと copypet.jp｜パーツで探す、web制作に使えるコピペサイト。.

ブロガーさん必見。記事のシェアなどで使えるブックマークレットを作りました。
ブログなどで他のサイトを紹介するときに面倒くさいからって単純にタイトルとリンクだけで済ませちゃいがちです。
でもこのブックマークレットなら、紹介したいサイトを開いてポチっとすればあら不思議。
貼り付けるソースコードがピロっとでてきます。
出てきたコードをコピーしてペッと貼って記事完成。忙しいブロガーさんでもパッと見やすいブログカードがすぐにできちゃいますよ。

吐き出されるコードは２種類です。

紹介したいサイトにogpの設定がある場合

<div class="ogp_card clearfix"><img src="ogp設定の画像URL" alt="サイト名" width="100" height="100"><p class="title"><a href="サイトURL" >サイトタイトル</a></p>サイトのディスクリプション…<p class="copy"><a href="サイトURL" >サイト名</a></p><p class="card_bt"><a class="card_link" href="サイトURL" >ホームページを見る</a></p></div>

紹介したいサイトにogpの設定がない場合

<div class="html_card"><p class="title"><a class="card_link" href="サイトURL" >サイトタイトル</a></p>サイトのディスクリプション …<p class="copy"><a class="card_link" href="サイトURL" >サイトURL</a></p><p class="card_bt"><a class="card_link" href="サイトURL" >ホームページを見る</a></p></div>

下記のステップでブラウザのツールバーやお気に入りに追加してご利用ください。

The post ブロガーさん必見！！簡単にできるブックマークレット＆ブログカードデザイン first appeared on コピペっと copypet.jp｜パーツで探す、web制作に使えるコピペサイト。.