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

何もかも面倒臭い。そんなテケオの生き方や考え方をつづるブログ

【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%が時間軸になっていて、何パーセントの時にどういう状態になっているか記述すればいいだけ。最初はめんどくさく思うけど、書き方は思うほど多くない。

要はパターンだけ

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

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

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

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