はてなブログでバイラルメディア風シェアボタンを回転させるCSS

バイラルメディア風シェアボタンを回転させる

　このブログでは、文字ベースのバイラルメディア風のシェアボタンを設置しています。

　このボタンについて、マウスオーバーでちょっとした演出ができないかと思いつつ、わざわざJavaScriptを使うのも「面倒だな」となっていたら、以下のサイトでCSSによる回転アニメーションが解説されていたので実装することにしました。

くるくるっと

https://vine.co/v/OIZLZV5vI1z

設置方法

　記事下にバイラルメディア風のHTMLを設置します。

<div class="snsshare">
  <a class="share_bookmark" href="http://b.hatena.ne.jp/entry/{Permalink}" target="_blank"><i class="blogicon-bookmark lg"></i> はてなブックマーク</a>
  <a class="share_tw" href="https://twitter.com/intent/tweet?url={Permalink}&text={URLEncodedTitle}" target="_blank"><i class="blogicon-twitter lg"></i> Twitterでシェア</a>
  <a class="share_fb" href="https://www.facebook.com/sharer/sharer.php?u={URLEncodedPermalink}" target="_blank"><i class="blogicon-facebook lg"></i> Facebookでシェア</a>
  <a class="share_rss" href="http://cloud.feedly.com/#subscription%2Ffeed%2F{BlogURL}feed" target="_blank"><i class="blogicon-rss lg"></i> Feedlyでフォロー</a>
</div>

　CSSを以下のように記述します。

div.snsshare {
  width: 100%;
  height: 108px;
  margin-bottom:10px;
}

.snsshare a {
  width: 50%;
  margin-bottom: 0px;
  padding: 8px 0;
  float: left;
  font-size: 24px;
  font-weight: bold;
  color: #ffffff !important;
  text-align: center;
  display: inline-block;
  text-decoration: none;
}

.snsshare a:hover {
  color: #ffffff;
  text-decoration: none;
  opacity: 0.6 !important;
  -webkit-animation: rotateLink 0.7s;
  animation: rotateLink 0.7s;
}

@-webkit-keyframes rotateLink {
  from { -webkit-transform: rotateY(0deg); transform: rotateY(0deg);}
  to { -webkit-transform: rotateY(360deg); transform: rotateY(360deg);}
}

@keyframes rotateLink {
  from { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); }
  to { -webkit-transform: rotateY(360deg); transform: rotateY(360deg);}
}

要素技術の解説

　CSSの「animation: rotateLink 0.7s;」と「@keyframes rotateLink」(webkitでも動作可能に定義)においてアニメーションが定義されています。元の解説では縦回転でしたが、横回転にアレンジしています。

.snsshare a:hover {
  animation: rotateLink 0.7s;
}

@keyframes rotateLink {
  from { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); }
  to { -webkit-transform: rotateY(360deg); transform: rotateY(360deg);}
}

　以前にボタンを作った時よりも記事下で使用可能な変数が増えているため、自サイト用に修正する必要がなくなりました。他のサービスを使いたい場合は任意の編集をお願いします。

変数	説明
{Title}	記事タイトル
{Permalink}	記事URL
{BlogTitle}	ブログタイトル
{BlogURL}	ブログURL
{URLEncodedTitle}	URLエンコードされた記事タイトル
{URLEncodedPermalink}	URLエンコードされた記事URL
{URLEncodedBlogTitle}	URLエンコードされたブログタイトル
{URLEncodedBlogURL}	URLエンコードされたブログURL

　はてなブログで使用可能なアイコン絵文字については、以下に解説しています。

　Google+やPocketなどのアイコンも利用されたい場合については、id:goule さんが解説されています。FeedlyよりもPocektのがよいのかな。

http://goule.hatenablog.com/entry/2014/12/09/204353

まとめ

　以上のようにすることで、バイラルメディア風シェアボタンがマウスオーバーでくるくる回転するようになります。最近はブラウザのスタイルシートだけで、色々とできるので、無理にJavaScriptを使う必要はなくなってきているのかもしれませんね。なお、設置サポートや表示スタイル／アルゴリズムのカスタマイズ等のご依頼がありましたらサポートライセンスの購入をお願いいたします。

よくわかるWeb/モバイル/ソーシャルメディアマーケティングの教科書 教科書シリーズ

関連記事