ブログの下線がニュルっと動く？話題のワードプレスツールMobarを使ってみた

 

まずはこれを見てください👇

 

 

 

 

 

動きました？

 

ネットで情報を見る時代になってから、記事を隅から隅まで読まなくなりました。

ですから僕らブログを書く人たちも当然その読み方に合わせ、全部読まなくてもいいように

といった方法を使って、読むべきところが分かりやすいように工夫しています。

 

 

そんなブロガーたちの要望に応えたツールMobarが先日リリースされました。

誰でも簡単にアニメーション下線を導入できるWP専用のプログラム
Mobar（ムーバー）をリリースしました😊

絶対に読んでほしいテキストを効果的に演出するのに最適です。ぜひお立ち寄りください！https://t.co/ihiBL2rOuP pic.twitter.com/gxKZ05wDpJ

— ジロー@名古屋 (@JIRO_biz) February 5, 2019

 

というわけでさっそく購入し、こうして記事に使ってみたわけです。

ちょっと多用しすぎた感はありますが、自然と目線が動いていきますよね？

 

今日はそんなステキなツールMoberを紹介したいと思います。

購入からインストールまで

流れはこのようになります。

あとは👇このようなショートコードを書くだけでアニメーションする下線が導入できます。

1. 公式ページから購入

購入はこちらの公式サイトからできます。

→アニメーション下線Mobar（ムーバー）公式ページ【β版】

 

僕がわざわざ記事にする必要がないくらい全て必要な情報がそろっています。

ページ内にこういうボタンがあるので、そこから購入ページへ行きましょう。

 

2. 購入完了画面からファイルをダウンロード

移動するとこのような画面になるので、カートに入れるボタンを押します。

 

カート画面では料金と決済方法が載っているので確認し、レジに進みます。

 

購入にはピクシブのアカウントが必要なので持っていない場合には作りましょう。

3. パスワード保護されたサイトURLとパスワードをゲット

購入が終わると決済終了画面にファイルダウンロードボタンが出てくるので、そこからファイルをダウンロードします。

ダウンロードした「アニメーション下線Mobar（ムーバ−）.txt」という名前のファイルに

が書いてあるので、URLをブラウザで開きます。

4. URLのサイトを開きパスワードを入力

URLのページを開くとこのような画面になるのでパスワードを入力します。

 

パスワードを入力するとMober導入マニュアルの中身を見ることができるようになります。

5. functions.phpに貼り付けるコードをコピー

マニュアル内にphpのプログラムコードが載っているのですべて選択してコピーします。

6.（小テーマがなければ）小テーマを用意

ワードプレスの小テーマとは親テーマのコードを破壊せず、安全にカスタマイズするための仕組みです。

現時点でMobarが対応確認しているテーマは以下の4つ。

SANGOの製作をしたサルワカさんが恐ろしく分かりやすく小テーマの導入について説明しているので見てみてください。

→WordPressで子テーマを活用して安全にカスタマイズを行う方法

 

各テーマの公式ページにも小テーマの導入方法の説明があります。

→STORKの子テーマ導入ページ

→JINの小テーマ導入ページ

→AFFINGERの子テーマ導入ページ

7. 小テーマ内のfunctions.phpにコードを貼り付け

SANGOの場合、コードの貼り付け場所はここです。

これでもう使えます。

使い方

貼り付け方は冒頭に書いたとおりです。

下記のように書くだけ。

カスタマイズもできる

先程のコードにこのような形で追加すればカスタマイズが出来るのです。

通常はこのくらいが妥当な値だと思います。

 

でもカスタマイズして極端な値にすればこんな風にもなるのです。

効果的に使って読者の負担を減らそう！

というわけでアニメーション下線ツール・Mobarをご紹介しました。

これを使えば読者の目線を誘導できるだけでなく、ひと呼吸入れてホッとさせる効果も期待できます。

より読みやすいサイトづくりにぜひ使ってみてください。