読者です 読者をやめる 読者になる 読者になる

太陽がまぶしかったから

C'etait a cause du soleil.

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

プログラミング プログラミング-はてなブログカスタマイズ

f:id:bulldra:20150120213838j:plain

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

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

 このボタンについて、マウスオーバーでちょっとした演出ができないかと思いつつ、わざわざ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/モバイル/ソーシャルメディアマーケティングの教科書 教科書シリーズ

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

  • 作者: 櫻沢信行(大倉ウェブマーケティング事業部),林なほ子(パララックス)
  • 出版社/メーカー: マイナビ
  • 発売日: 2013/04/23
  • メディア: Kindle版
  • この商品を含むブログを見る

関連記事