WEB関連 WordPress

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

2016年10月11日

wapuu-296x300

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

こんにちは、ぶんちょう(@onion_za)です。プラグインほど簡単ではありませんがすぐに使えますよ。

 

初心者もコピペで簡単!ワードプレスで文字が震えるスタイルシート「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 カエレバ

 

 

まとめ

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

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

 

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


2020/11/16

Apple iPadシリーズで、無印・Air・Pro・miniのどれを買うか迷ったら、読んで欲しいiPadの選び方

仕事やプライベートで多くのiPad(アイパッド)を買って使ってきました。周りの人から「iPadっていくつか種類があるけど、私はどれを買ったら幸せになれるの?」と聞かれることが多いので、iPadの選び方をまとめてみました。

続きを読む

2020/11/19

有料オンラインライブ・コンサートを家庭用大型テレビで楽しむ方法をまとめたよ

先日、ジャニーズタレントである嵐のコンサートライブ「アラフェス」のオンラインコンサートを有料配信したところ、1000万人が視聴したという報道がありました。我が家でも家族揃って視聴しました。 コロナ禍では、有名大物アーティストに限らず、街のライブハウスでもこうした有料配信ライブがますます増えてきます。しかし、スマホの小さい画面、A4サイズほどのパソコン画面で観てもあまり面白くありません。どうせならテレビに映し出したいですよね。 当記事をご覧になると、ご自宅にパソコンがなく、スマホとテレビしかない人でも、大画 ...

続きを読む

2020/7/19

低価格帯(5,000円以下)で超オススメなカナルイヤホン「final E3000」のマイク付きモデル「E3000C」を買ってみたよレビュー

これまで多くの中華イヤホンレビュー記事を書いてきた中で、何度か「もし国内メーカーの低価格帯イヤホンを買うならFinal(ファイナル)がオススメ」とお伝えしました。しかし実は自分で買っておらず、店頭で数回試聴しての判断でした。リファレンスイヤホンはオーディオテクニカのATH-IM03&ATH-IM04だし、奇想天外ながらハズレの少ない中華イヤホンKZを買うことが多かったから、あまり他の低価格帯イヤホンを購入する機会がなかったのです。 そんなある日、中学生になる娘から「iPhoneのイヤホンが壊れたから、新し ...

続きを読む

2020/6/18

iPad Proでイヤホンを使いながら充電する方法は、便利なUSB Type-Cアダプターやハブを使うべし

2018年以降に発売されたiPad Pro 11/12.9インチにはイヤホンジャックが無く、USB Type-Cポートが一つあるだけです。USB Type-Cからイヤホンジャックへ変換するケーブル・アダプターは存在しますが、充電しながらイヤホンが使えないと思ってしまっている方はいらっしゃらないでしょうか。 実際に家電量販店やケータイショップ、はたまたAppleストアを見ていても、充電しながらイヤホンを使えるアダプターは見つけることが出来ません。しかし、Amazonや楽天、Yahoo!などのネットショップで ...

続きを読む

2020/6/8

ドコモケータイ補償サービスでAndroidスマホを交換修理したけど、もう二度と使わないと思った話

この記事では、ドコモスマートフォンのケータイ補償サービスを実際に使ってみて、申し込み手続き方法や設定環境移行について、故障品の返却について、そして分かりにくいケータイ補償サービスの違いをレポートします。 毎月、保険料のようなかたちでケータイ補償サービスの掛け金を払ってきましたが、今回試してみてかなり残念な一面もありましたので参考になればと思います。

続きを読む

人気記事

1

この記事では、新発売のFire TV Stick4K(第3世代)で、前機種Fire TV Stick無印と同じようにスマートフォンのミラーリングができるかどうかを使い方を試してみました。また前機種との ...

2

Macbook Air 2013 Earlyを長らく使っていましたが、ついに新しいMacノートを買いました。Macbook Air 13inch 2018です。ついでにWindows10をインストール ...

3

先日、スマホで使えるAudible (オーディブル)というオーディオブックサービスが1ヶ月無料という情報を聞いたので、実際に申し込んで本を購入してみました。ついでに解約方法も確認しておきました。 新型 ...

-WEB関連, WordPress
-

Copy Protected by Chetan's WP-Copyprotect.

© 2020 パパママ世代応援ブログ:オニオン座