初心者もコピペで簡単!ワードプレスで文字が震えるスタイルシート「CSShake」を使ってみた

2016/10/17

wapuu-296x300

久しぶりのワードプレスネタです。勤務先ではWEBの専門家ってことになっていますが、CSSとかコードを書くのは苦手な私。簡単で楽しい装飾ができないかと探していたところ、スタイルシートで遊べる「CSShake」を試してみたら面白かったのでご紹介します。

Sponsored Link

 

初心者もコピペで簡単!ワードプレスで文字が震えるスタイルシート「CSShake」を使ってみた

百聞は一見に如かずってことで、どんなものかというと・・・

どかーん!

 

とか

♪└( ̄◇ ̄)┐♪└( ̄◇ ̄)┐♪└( ̄◇ ̄)┐♪

 

さらに・・・

   /  __ ___ \     /  __ ___ \
/  /_/    |  \   ./  /_/    |  \
|   _/   \/    |   |   _/   \/    |
|   / ___ /\    |   |   / ___ /\    |
|   _____.     |   |    _____.    |
\   / | \    /  \   / | \    /
\______/     \______/
\||||||||||||||||/        \||||||||||||||||/
 ̄ | |  ̄お祭りワッショイ!. ̄! !  ̄
\\    │ |   お祭りワッショイ! │ |     //
\\  │ |  お祭りワッショイ!  | |   //
.      +  | ∧__∧  ∧__∧ ∧_∧ |  +
|( ´∀`∩(´∀`∩)( ´∀`) O
+ ((  O (    ノ(つ  丿(つ   | |  ))  +
| ヽ ( ノ ( ヽノ  ) ) )│
|__|(_)し' し(_) (_)_)_.|

 

ということが、プログラムなど書かなくてもコピペレベルでできてしまうというものです。

 

CSSの読み込みコードを配置する

csshake_headerphp

まずはスタイルシートを指定します。ワードプレスの管理画面を開いて、外観>テーマの編集 からテーマヘッダー(header.php)を開きます。できれば「子テーマ」に書くことをお薦めします。※「子テーマって何?」って人は気にしないでください。

header.phpの<head></head>の中に以下のコードを追記します。私は</head>の直前に置きました。

<!-- csshakeここから -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/csshake/1.5.1/csshake.min.css">
<!-- csshakeここまで -->

こうすることで、ワードプレス上のどのページを開いても、CSShakeのスタイルシートを読み込んでくれるようになります。

 

HTMLソースに書く

文字を震わせたい記事を開いて「投稿の編集」で編集します(もちろん「投稿」だけでなく「固定ページ」でも使えます)。
HTMLコードを用いますので、ビジュアルモードではなくテキストモードに切り替えることをお忘れなく。

ちなみに改行タグを入れるのは邪道かもしれませんが、こうすると震えた文字と下の行の行間がちょうどよくなったので。。嫌な人はスタイルシートで調整してください。

<!-- 震える文字 -->
<div class="shake shake-constant">震える文字</div></ br>

<!-- 微妙に震える文字 -->
<div class="shake-little shake-constant">微妙に震える文字</div></ br>

<!-- タテに震える文字 -->
<div class="shake-vertical shake-constant">タテに震える文字</div></ br>

<!-- ヨコに震える文字 -->
<div class="shake-horizontal shake-constant">ヨコに震える文字</div></ br>

<!-- 回るように震える文字 -->
<div class="shake-rotate shake-constant">回るように震える文字</div></ br>

<!-- かなり震える文字 -->
<div class="shake-hard shake-constant">かなり震える文字</div></ br>

<!-- フワフワ震える文字 -->
<div class="shake-slow shake-constant">フワフワ震える文字</div></ br>

<!-- ピカピカ震える文字 -->
<div class="shake-opacity shake-constant">ピカピカ震える文字</div></ br>

<!-- 読めないレベルで震える文字 -->
<div class="shake-crazy shake-constant">読めないレベルで震える文字</div></ br>

 

震える文字を簡単に入力する方法

csshake_addquicktags

ワードプレスのプラグイン「AddQuicktag」を使います。管理画面のプラグイン>新規追加で検索してみてください。

「Button Label」に「震える文字」などを入力して、開始タグには「<!-- 読めないレベルで震える文字 --><div class="shake-crazy shake-constant">」、終了タグには「</div></ br>」を入力します。最後に一番右のチェックボックスにチェックを入れて保存します。

こうすると、指定した文字を簡単に震わせることができます。

 

( ゚∀゚)o彡°おっぱい!おっぱい!

 

by カエレバ

 

 

まとめ

以上のように使い方は簡単ですが、どのように使うかはセンスが問われると思います。

先ほどから「震える文字」と書いてますが、実際には画像も震わせることができますので、よかったら試してみてください。

 

以上、最後までご覧くださり誠にありがとうございます。ほかにもワードプレスネタをご紹介していますので、どうぞごゆっくり。

-WEB関連, WordPress
-