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

プログラミング

2020.04.08 2017.02.22

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

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

♥ 見たいところを押してね♪ 戻るのは【最初から↑】♥

ブログカードの完成品
ブログカードはiframeは使わずOGP対応は見送り
Chromeの拡張Create linkとFirefoxのアドオンMake Linkの違い
ブログカードのデザインにcssでアニメーションを追加
今回、参考にしたアニメーションのサイト
ふんわりボタンも見てね♪

ブログカードの完成品

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

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

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

word-wrap:break-word; max-width:474px; width:auto; border-radius:5px;">

%text%

%title%

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

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

404 NOT FOUND | あいおんな

『医療脱毛』『脱毛サロン』『基礎化粧品』『保湿クリーム』『婚活』など女子向けコンテンツなら~ionna~

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

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

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

[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; }
}
[/css]