ブログカードのデザインにcss3でアニメーションを追加しました!

あいおんな(i-onna)テクニカル担当のすくねえです。(*´∇`*)

あたしはプログラムよりデザインに興味がある人間なのですよね。だからどうしても見た目のおしゃれかが気になります。

ブログカードの完成品

今回は簡単なブログカードでですいませんが、こちら完成品になります。はてぶも対応しています。

12436288584_94d6bc46d2_b.jpg
ネット系からリアルまで有名な恋活・婚活サイトを全部まとめていきますね。

ブログカードはiframeは使わずOGP対応は見送り

はてなのブログカードは参照元(リファー)がiframe内のはてなドメインになるためGoogleやアクセス解析的にどうなの?という点に加えて、iframeは遅いようなので、最初から選択肢には入りませんでした。

また、OGP対応は結構、プラグインを入れてfunctions.phpをさらに書き換えるなど2重の対応が必要になり、管理が複雑になるため、今回は簡単な方法にして見送りました。ショートコードは投稿する管理画面では綺麗に見えますが、プラグインを外した場合にもすべてリンク切れになってしまいます。リンクでショートコードを使うのはちょっと危険かも、という気もしました。

OGP対応してもいいかもしれませんし、いろいろなやり方があるため、あまりそう思わない方は使ってもいいかもしれませんね。

ブログカードはただのリンクなのですけど、どれもメリットとデメリットがあって、いまいちどれにするのか迷うんですよね。。そっち方面は1年ぐらい様子見をすることにして、アニメーションに走りました。(*´∇`*)

Chromeの拡張Create linkとFirefoxのアドオンMake Linkの違い

ブログカードはChromeの拡張Create link、もしくはFirefoxのアドオンMake Linkで作成します。

Chromeの拡張Create linkとFirefoxのアドオンMake Linkの違いは、Make Linkはディスクリプション(説明文)が取れます。私は両方のブラウザを使っていて、ディスクリプションがとりたかったため、今回はMake Linkを採用しました。

また、画像にはheartrailsを採用していますが、今までトラブルが少なかった点に加えて、ブログカードなので万が一画像が表示されなくても小さいので、それほど影響はないだろうと判断しました。

<div class="blog-card" style="padding:12px;margin:15px 0;border:1px solid #ddd;
word-wrap:break-word; max-width:474px; width:auto; border-radius:5px;">
<div class="blog-card-thumbnail" style="float:left;">
<a href="%url%" class="blog-card-thumbnail-link" target="_blank">
<img src="http://capture.heartrails.com/120x120/shorten?%url%" class="blog-card-thumb-image wp-post-image" alt="12436288584_94d6bc46d2_b.jpg" style="width:100px;height:100px;"
</a>
</div>
<div class="blog-card-content" style="margin-left:110px;line-height:120%;">
<div class="blog-card-title" style="margin-bottom:5px;">
<a href="%url%" class="blog-card-title-link" style="font-weight:bold;text-decoration:none;color:#111;" target="_blank">%text%</a>
</div>
<div class="blog-card-excerpt" style="color:#333;font-size:90%;">%title%
</div>
</div>
<div class="blog-card-footer" style="font-size:70%;color:#777;margin-top:10px;clear:both;">
<span class="blog-card-hatena">
<a href="http://b.hatena.ne.jp/entry/%url%" target="_blank">
<img border="0" src="http://b.hatena.ne.jp/entry/image/%url%" border="0" alt="" />
</a>
</span>
</div>
</div>

外部リンクと内部リンク共に、この方法です。1つですむためすっかりとしています。

ただし、ディスクリプションが指定されていないと、このようにdescになってしまいます。あとから好きな文字列を入れればいいだけですけど。

ブログカードのデザインにcssでアニメーションを追加

アニメーションはスタイルシートで追加するだけです。アニメーションはいろいろなアイデアがありますが、まずは基礎の基礎ということで簡単なグラデーションにしました。

あいおんなのテーマカラーであるかわいい水色から赤い色に変えてみます。

/************************************
** ブログカードのスタイル
************************************/
.blog-card {
	background-color: #72b6af;
}
.blog-card:hover {
	animation: gradation 1s .5s;
	animation-fill-mode: forwards;
}
@-webkit-keyframes gradation {
	0% { background-color: #72b6af; }
	100% { background-color: #d67070; }
}
@keyframes gradation {
	0% { background-color: #72b6af; }
	100% { background-color: #d67070; }
}

今回、参考にしたアニメーションのサイト

アニメーションで今回参考にしたサイトです。ありがとうございます。

12436288584_94d6bc46d2_b.jpg
なんだかCSSでできる事がどんどん増えてきました。以前はJavaScriptを使って実装していた動くコンテンツも、CSSだけで表現できるようになりました。そんなわけで、CSSで動かすエフェクトについてのまとめです:)。

アニメーションはまだまだいろいろできそうですよね。

うさちゃんがかわいいです。うちのサイトもローディング画面は入れているんですけど、そのうち動物にしようかな。

ふんわりボタンも見てね♪

ふんわりボタンも作成したのでよかったので、見てください。影の動きにこだわりましたよ。(*´∇`*)

12436288584_94d6bc46d2_b.jpg
今回はふんわりと押せるボタンを作ってみますね。ボタンを押すと、ぺこんとへこむ感じです。

この記事がよかったら「いいね!」「シェア♪」をお願いしますヽ(=´▽`=)ノ