今夜はロールバック!

プログラミングよりも写真が好きです。

CSShakeを使ってはてなブログの文字をブルブル震わせる方法

f:id:momogaaaa:20170823000431j:plain

どうも、ももがです。・ω・

じつは最近自分のブログをちょっとだけ変えたんですよ。

はてなブログでよく見かける、あの文字をブルブルと震えさせるCSSを適用しました!

 

こんな感じのやつです。

(☉ᴗ☉)

 

文字をブルブルとさせるだけなんですけど、ブログに動きがあって(?)、ちょっとしたアクセントになっていいですよ。

というわけで、今回はブルブルと震えさせるCSSをはてなブログに取り入れるための手順と使い方を紹介していきます!

 

今回導入したCSS

CSShakeというCSSを導入しました。

知名度としてはそこそこ高いんじゃないかと思います。

こちらは公式ページです。

elrumordelaluz.github.io

 

導入方法

はてなブログのダッシュボードを開いて、ダッシュボード>設定>詳細設定>headに要素を追加にコチラのタグを指定するだけで準備はOK。

PCもスマホも両方対応しています。

<link rel="stylesheet" type="text/css" href="http://csshake.surge.sh/csshake.min.css">

 

f:id:momogaaaa:20170823203323j:plain

 

 

使い方

使い方はいたってシンプルです。

震えさせたい文字にCSSクラスを指定するだけでブルブルと震えます。

下の震え方とCSSクラスを参考にしてみてください。()

 

<div class="shake">普通の震え</div>

 

 

<div class="shake-hard">激しく</div>

 

 

<div class="shake-slow">ゆっくりと</div>

 

 

<div class="shake-little">小刻みに</div>

 

 

<div class="shake-horizontal">よこゆれ</div>

 

 

<div class="shake-vertical">たてゆれ</div>

 

 

<div class="shake-rotate">円をかくように</div>

 

 

<div class="shake-opacity">ピカピカ</div>

 

 

<div class="shake-crazy">クレージー!</div>

 

 

<div class="shake-chunk">不規則に</div>

 

震えるアクションの種類

実はCSShakeは単純に震えさせるだけじゃなくて、マウスオーバーで震えるのを開始したり、止めてみたり、あとは常に震えさせるというアクションを指定することができます。

 

マウスオーバーで動くようにする。

<div class="shake"></div>

 

常に動くようにする。

<div class="shake shake-constant"></div>

 

 

マウスオーバーで止めるようにする。

<div class="shake shake-constant shake-constant--hover"></div>

 

 

文字以外にも使えます。

もちろん、文字だけじゃなくてどんなタグでも震えさせることができます。

吹き出しだって震えるよ

 

画像だってこの通り、見事に震えています。 

f:id:momogaaaa:20170729121056j:plain

 

さいごに

CSShakeを導入してもページの読み込みに大きな影響は今のところありません。

快適にサクサクと動きますよ。CSSがそんなに重くないのでしょうね。

 

文字がブルブルと震えるだけでも、ブログを読んでいてアクセントになっていいですね。

使いすぎると読みにくいですが、少しなら全然読みやすいです。

多用しないように気をつけて今後はブログを書いていこうと思います。

 

それでは! (☉ᴗ☉)