はてブを震え上がらせる!無意味にはてブボタンを震えさせてみたよ


はてぶ 震える

はい、タイトルの通り「はてブが震え上がっているでしょう?

はてブを震え上がらせる」はスマホのみでしかしていません。PCは↓で震えています。

 

わずか1行でブログの記事が終わってしまうのもあれなので、くだらないことをババッーと書いて、ドリャー!と終わらせることにします。

それでは、いってみよう。

なぜ『はてブ』を震え上がらせるのか?

そもそもなぜ『はてブ』を震えるようにしたかというと、以前はてなブックマークの記事でブロガーさんが
[CSShake]について書いていたからです。

【参考】【コピペOK!】めっちゃ秘密にしたかったけどCSSで文字を震えさせる方法を大公開するよ!

 

これを読んで「面白そうだなー!どっかで使ってみたいなー!」と思っていたので、はてブのシェアに使ってみることにしました。

詳しい[CSShake]のコードに関しては、上記の記事を参照してみてください。

 

そんなわけで、この[CSShake]を使って『はてブ』を震え上がらせてみましょう!

SPONSORED LINK

『はてブ』を震え上がらせる方法

2016-10-07_15-21-54_000

2016-10-07_15-21-54_000

こんな感じです。簡単に説明すると・・・

  1. はてブボタンの画像を用意する
  2. 「はてブボタン」のカスタマイズ
  3. [CSShake]のコードで画像を震えさせる

上記の方法で、はてブリンク用の画像を震えさせているだけなんですけどね・・・

ちなみに、わたしは「ゆっくり震わせる」というやつで画像を震えさせています。

はてブ用の画像を用意する

これはなんでもいいので、適当な画像を作って用意してみてください。

なんにもないよ!という人は上記の画像でOKなので、練習がてら試してみてください。

「はてブボタン」のカスタマイズ

SNSボタンを自前の画像にする必要があります。

はてブボタンのカスタマイズ」についてはこちらの記事がわかりやすかったです↓

【参照】SNSボタンをカスタマイズ!はてなブログにオリジナル画像のSNSボタンを設置する方法

[CSShake]のコードで画像を震わせる

画像に[CSShake]を使いたいのでコードを使います。

<!-- ゆっくり震わせる -->
<div class="shake-slow shake-constant">ゆっくり震わせる</div>

まとめ

以上の手順で、はてブを震え上がらせてみたのですが、特にこれと言って効果はありません。

そして、もはやボタンでもなくただの画像です・・・

まさに「肉を切らせて骨を断つ!

 

違うか・・・笑

 

肉を切らせて大出血!

 

無意味なことに興味がある人はぜひ試してみましょう。

Take it Easy!

SPONSORED LINK

関連記事

この記事の著者

KOHEI SHIRAI

KOHEI SHIRAI管理人

85年生まれの神戸在住。ブログ運営やWebサイト制作、iPhoneアプリ開発、物販などしています。ミニサイト(http://workoutmeshi.com)現在は田舎で民泊をする準備中・・・気ままにやっていますので、よろしくどうぞー!

この著者の最新の記事

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


インテリアとしても魅力の「AURA STUDIO」

煙の出ないロースター「ザイグル」

薄くて軽いデジカメ「Canon PowerShot G9」

最高級メンズシェーバー「フィリプス9000」

筋質点数がわかる体組成計「インナースキャンデュアル」

ふわとろ雪のかき氷器「電動ふわふわとろ雪」

ハイグレード・ロボット掃除機「ルンバ880」

Facebookページ

▼過去記事を見る▼

ページ上部へ戻る