こんにちは、皆さんWordPressしてますか?
今回は、WordPress初心者の方でも簡単に記事内の文字部分を震わせることができる、少し変わり種のおもしろ設定をご紹介します。

「そう、こんなふうにね!」
スポンサーリンク




WordPressで目立たせたい文字の時は?

WordPressで文字であるテキスト部分を強調したい時には、ボールド(太文字設定)にしたり、フォントカラーやサイズを変更したり、下線を引いたりなど、いくつか方法があります。

ただ、それも記事をたくさん量産していると、少し変化を加えたいもの。
そんな時は文字を震わせてみましょう!
以下の方法で、WordPressがそこまで詳しくない方でも、プログラムの記述無しで簡単に設定を加えることができます。

「CSShake」を使用して文字をブルブル前工程

使用するのは、「csshake」というスタイルシート(CSS)を使用します。

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

まずは、上部の記述を全てコピーします。
その後、WordPressの管理画面から、外観>テーマ編集を順次選択し、右側にある、テーマヘッダー(header.php)をクリックします。

次に、header.phpの<head></head>の間に先ほどコピーしておいた上記のコードを追記します。
分からなくなるようであれば、</head>の直前に貼り付けてOKです。
ここにコードを追記することで、WordPress内のどのページを開いても文字を震わせる設定にしてくれます。

僕の場合は、対象のページのみ(このページのみ)CSSを設定できるテーマを使用しているため、このページだけhttps://cdnjs.cloudflare.com/ajax/libs/csshake/1.5.1/csshake.min.css
先のCSSを設定しています。

HTMLを記述して文字を震わせてみよう!

次に文字を震わせたいページを作成します。投稿、固定どちらでも構いません。

ただし、HTMLでの記述が必要なため、ビジュアルモードではなく必ず『テキストモード』に変更しておきましょう!

テキストモードに変更したら、以下HTMLコードを記述し、好きなブルブル感を見てみましょう!
おそらくお気に入りのブルブル感があると思います。

動き別コード集

<!– 震える文字 –>
<div class=”shake shake-constant”>震える文字</div>

<!– 小刻みにブルブル震える文字 –>
<div class=”shake-little shake-constant”>小刻みにブルブル震える文字</div>

<!– 縦方向にブルブル震える文字 –>
<div class=”shake-vertical shake-constant”>縦方向にブルブル震える文字</div>

<!– 横方向に震える文字 –>
<div class=”shake-horizontal shake-constant”>横方向に震える文字</div>

<!– 超高速ブランコのように震える文字 –>
<div class=”shake-rotate shake-constant”>超高速ブランコのように震える文字</div>

<!– ぐわんぐあん震える文字 –>
<div class=”shake-hard shake-constant”>ぐわんぐあん震える文字</div>

<!– ふわふわ浮いてる感じの震える文字 –>
<div class=”shake-slow shake-constant”>ふわふわ浮いてる感じの震える文字</div>

<!– 点灯付き震える文字 –>
<div class=”shake-opacity shake-constant”>点灯付き震える文字</div>

<!– もはや何書いているか読めねぇ震える文字 –>
<div class=”shake-crazy shake-constant”>もはや何書いているか読めねぇ震える文字</div>

文字動き確認

震える文字

小刻みにブルブル震える文字

縦方向にブルブル震える文字

横方向に震える文字

超高速ブランコのように震える文字

ぐわんぐあん震える文字

ふわふわ浮いてる感じの震える文字

点灯付き震える文字

もはや何書いているか読めねぇ震える文字

まとめ

今回は少し変わり種のWordPressで文字を震わせる設定について、ご紹介しました。
実は「AddQuicktag」というプラグインを使用しても、同様のように設定はできますが、プラグインは、ウィルスなどのセキュリティ面で、なるだけ避けたいというのが個人的にあります。

このくらいの簡単に設定できるのであれば、できるだけプラグインは使用せず、コードを直書きをおすすめします!

最後までお読みいただきありがとうございました。

スポンサーリンク