どうも、沖縄在住ニートブロガーのケンヂ（@neetblogman）です。
実は最近、僕のブログで使用しているとある機能について問い合わせを受けることがちょくちょく出てきました。
まぁ既にタイトルにも記載しているんですが、文字が震える機能のことです。
この機能が僕のブログに独自性を持たせていたともいえるため、この方法を周りのブロガーに紹介してしまうと僕の存在が消えてしまうのではないかという恐れがありますが、今回はそこについて気にしない方向で行きたいと思います。
何故なら、一度はIT業界に携わった身ですからアウトプットの大切さを僕は知っているのです。アウトプットがあるから新たなインプットが生まれる、これの繰り返して人間という生き物は成長していくのですよ。
というわけで！！誰でもサクッと簡単に使うための方法を教えちゃうよ―(‘ω‘ )
CSSなどの導入方法はこちらのページでも説明していますが、英語が苦手という方の為に今回は僕の方でエントリーを作成しています。
参照元⇓
スポンサーリンク
まずはCSSの読み込みコードを導入！
とりあえず下記のコードを ダッシュボード > 設定 > 詳細設定 > headに要素を追加 部分に挿入して下さい。
<!-- csshake --> <link rel="stylesheet" type="text/css" href="http://csshake.surge.sh/csshake.min.css">
コイツを挿入しないと、どれだけ頑張ってコードを書いても文字が震えることはないので注意！
追記
先人がCDNから読み込んだほうが良いらしいとのアドバイスが有りました。こんなサービスもあったのね！流石博識なお方id:musignさん、ありがとう！
後はソースのコピペで簡単反映！
いやもうホントめっちゃ簡単なんですよ、簡単すぎて『コイツ大したことねぇな』って思うかもしれませんが、僕が大したことないんじゃなくてCSSが凄いんですよ、多分。
<!-- 普通に震わせる --> <div class="shake shake-constant">普通に震わせる</div> <!-- 小刻みに震わせる --> <div class="shake-little shake-constant">小刻みに震わせる</div> <!-- だいぶ震わせる --> <div class="shake-hard shake-constant">だいぶ震わせる</div>
上記のコードを実際に反映させるとこうなります。
ね、めっちゃ簡単でしょ？いちいちコピペするのが面倒くさい人は辞書登録しておくとスムーズに貼り付けできると思います。
もしくは、過去記事で紹介したGoogle Chromeの拡張機能を使ってみるのもありかも。
変わり種も色々あるから合わせて紹介します
上記で紹介した3種類だけだと物足りないよ馬鹿！！っていう人のためにちゃんと別の震わせ方も紹介します。
<!-- 縦方向に震わせる --> <div class="shake-vertical shake-constant">縦方向に震わせる</div> <!-- 横方向に震わせる --> <div class="shake-horizontal shake-constant">横方向に震わせる</div> <!-- ゆっくり震わせる --> <div class="shake-slow shake-constant">ゆっくり震わせる</div> <!-- チカチカさせつつ震わせる --> <div class="shake-opacity shake-constant">チカチカさせつつ震わせる</div> <!-- アホみたいに震わせる --> <div class="shake-crazy shake-constant">アホみたいに震わせる</div>
あんまり凄まじく震わせすぎると文字が読めなくなっちゃう可能性があるから注意ですｗ
まとめ
最後に1つ、こんなことも出来ますよ。
太字だけだと何か強調っぷりが足りないなぁ…と思っている方は是非震えさせてみてはいかがでしょうか！
さて、僕の唯一の武器を晒してしまったので次なる武器を探しに旅へ出るとしますか……ほな、また…。
おわりっ！
⇓今の僕にぴったりな一曲がこちら
スポンサーリンク
