テケオは眠くても頑張るぞ!

便利なサービスや製品紹介、スマホゲームや動画視聴のレビュー、ブログのカスタマイズ方法などを書く雑記ブログ

【CSS初心者】はてなブログで内部リンクを強くしたいと思ってアニメーションを入れてみた

f:id:tektekeo:20170618115453g:plain

こんにちは。テケオです。

自分のブログにもっと訴求力のある何かが欲しい。

そう思いたち、アイキャッチみたいなのをCSSで記述してみました。

結構簡単にできたのでご紹介したいと思います。

きっかけ

どうやってるのか教えろ!

そんな人はこの章を飛ばしてくださいw

以前、ブログ運営1ヶ月の時点で振り返り記事を書きました。

www.kouritsu30.com

この中で、バズることよりも良質なコンテンツを作り、内部リンクをしっかりと作ることが重要だと結論づけ、試行錯誤してみたのですが、

直帰率が悪いまま変わらない...

という壁にぶち当たる。

おすすめ記事や関連記事などを掲載してみるも、格段に効果を実感するわけでもなかった。冷静に考えると同じような記事を見慣れすぎて、読者に対して訴求できてないのではないかと思いました。

そこでアニメーションを導入することしました。

コードと出力結果

HTML:

<ul><li class="chumoku"><a href="http://www.kouritsu30.com/entry/2017/05/27/123000">【商品レビュー】中古で購入した洗濯機を買って1週間経過したので以前の洗濯機と評価してみた</a></li></ul>
CSS:
.entry-content ul li.chumoku{margin-top:-20px;}.entry-content ul li.chumoku:before {content: "トクする";top:20px;left: -55px;font-size: 11px;font-weight: bold;position: relative;display: block;text-align: center;width: 50px;height: 14px;color: #ffffff;background: #cc2543;border-radius: 5px;padding: 2px;-webkit-animation-duration: 1.5s;-webkit-animation-timing-function: ease-in-out;-webkit-animation-iteration-count: infinite;-webkit-transform-origin: middle center;-webkit-animation-name: yurayura;-webkit-transform: rotate(0deg);}@-webkit-keyframes yurayura {0%{-webkit-transform: rotate(0deg);bottom: 0;}50% {-webkit-transform: rotate(0deg);bottom: 0;}60% {-webkit-transform: rotate(5deg);bottom: 5px;}70% {-webkit-transform: rotate(-5deg);}80% {-webkit-transform: rotate(4deg);}90% {-webkit-transform: rotate(-3deg);}100% {-webkit-transform: rotate(0deg);}}

HTMLは「li」にクラス「chumoku」を付与。

CSSの「@-webkit-keyframes」で動きを決定している。

上記のコードで以下のような動きをしてくれる。

狙い通りに表示された。(上記のコードのみでは橙色部分は反映されません)

良いかどうかわからないけど、chumokuクラスを「position:relative」にしてmarginで強引に調整した

position:absoluteにするとulタグの最上位に位置してしまい、常に一番上のコラムに目的のタグが表示されてしまう

管理人自身そんなに詳しくなく頑張りたくなかったし、今のコードを用いて、複数のブラウザで見て綺麗に表示できていたので良しとしよう(笑)

まとめ

CSSのアニメーションを用いて訴求力の高いタグを作ってみた。

まあ、訴求力が高いかどうかは今後Google Analyticsなどから検証していきたい。

一番言いたいこととしては、アニメーションは自体は結構簡単ってこと。

cssの@-webkit-keyframesを編集するだけで、好きなアニメーションが作れる。

0%~100%が時間軸になっていて、何パーセントの時にどういう状態になっているか記述すればいいだけ。最初はめんどくさく思うけど、書き方は思うほど多くない。

要はパターンだけ

どういう時にどういう状態に遷移するかだけ。つまり、時間さえかければ多分誰でもできる。時間がある人は是非色んなパターンをチャレンジして色々作って欲しい。

そして記事として出してください。是非使いたいです。

(自分で色々試すのが面倒なので...)

また、重すぎるアニメーションを作らないように注意しないといけませんね...