WEB関連 WordPress

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

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 カエレバ

 

 

まとめ

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

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

 

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


ハードウェア Amazonレビュー iPad-iPhone オーディオビジュアル スマートフォン

2020/7/3

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

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

続きを読む

Amazonレビュー iPad-iPhone スマートフォン

2020/6/18

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

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

続きを読む

iPad-iPhone スマートフォン

2020/6/8

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

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

続きを読む

Amazonレビュー iPad-iPhone スマートフォン

2020/6/1

iPhone/iPad/Android/Mac/Windowsの画面をモニターディスプレイやパソコンへ映し出すミラーリング方法まとめ

iPhoneやiPadシリーズ、あるいはAndroidスマホ・タブレットなどの画面を他の人に見せたいと思ったことはありませんか。また自宅の大型テレビでパソコンの画面を映し出したり、プレゼンなどで会議室の大型ディスプレイやプロジェクターに出力したいと思ったことはありませんか? これら携帯端末やパソコンの画面を大きな家庭用テレビや大型PCディスプレイに映し出すことをミラーリングと言いますが、端末やコネクタージャックの種類、無線か有線かによっても方法が異なり、それぞれメリット・デメリットが存在します。 ネット検 …

続きを読む

Amazonレビュー iPad-iPhone スマートフォン

2020/5/6

PUBGモバイルなどのゲームと、Discordなどのボイスチャットアプリを併用する方法が分かったよ

音声ミキサーやパソコンを使わずに、PUBGモバイルの音を聞きながらDiscordなどのボイスチャットアプリで仲間と話せる方法をご紹介します。その解決方法は、意外なイヤホンを使うというものでした。 PUBGモバイルが楽しすぎて5シーズン連続でエースランクを取り続け、次シーズンこそ征服者になってみようと頑張っていますが、一つだけ悩みがありました。それはPUBGモバイルとDiscordを併用すると、PUBGモバイルの音声がモノラルで聞こえてしまうことでした。

続きを読む

オニオン座のオススメ記事

1

この記事では、Amazonプライム会員になるメリットとデメリットを整理してご紹介します。配送料無料やAmazonビデオ、Amazonミュージックなどのサービスははたして会費に見合うものなのでしょうか。 …

2

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

3

Fire TV Stick 4Kを購入して幸せになった私が、調子に乗ってFire HDタブレットを初めて買ってみましたのでレビューしたいと思います。Fire HD8の使い勝手だけでなく、iPadとの比 …

-WEB関連, WordPress
-

Copy Protected by Chetan's WP-Copyprotect.

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