イカ太郎
まずはこれを見てください👇
動きました?
ネットで情報を見る時代になってから、記事を隅から隅まで読まなくなりました。
ですから僕らブログを書く人たちも当然その読み方に合わせ、全部読まなくてもいいように
- 最初に結論を持ってくる
- 大切なところは太字にする
- もっと大切なところには下線を引く
といった方法を使って、読むべきところが分かりやすいように工夫しています。
そんなブロガーたちの要望に応えたツールMobarが先日リリースされました。
誰でも簡単にアニメーション下線を導入できるWP専用のプログラム
Mobar(ムーバー)をリリースしました😊絶対に読んでほしいテキストを効果的に演出するのに最適です。ぜひお立ち寄りください!https://t.co/ihiBL2rOuP pic.twitter.com/gxKZ05wDpJ
— ジロー@名古屋 (@JIRO_biz) February 5, 2019
イカ太郎
というわけでさっそく購入し、こうして記事に使ってみたわけです。
ちょっと多用しすぎた感はありますが、自然と目線が動いていきますよね?
今日はそんなステキなツールMoberを紹介したいと思います。
→アニメーション下線Mobar(ムーバー)公式ページ【β版】
目次
購入からインストールまで
流れはこのようになります。
- 公式ページから購入
- 購入完了画面からファイルをダウンロード
- パスワード保護されたサイトURLとパスワードをゲット
- URLのサイトを開きパスワードを入力
- functions.phpに貼り付けるコードをコピー
- (小テーマがなければ)小テーマを用意
- 小テーマ内のfunctions.phpにコードを貼り付け
あとは👇このようなショートコードを書くだけでアニメーションする下線が導入できます。
1. 公式ページから購入
購入はこちらの公式サイトからできます。
→アニメーション下線Mobar(ムーバー)公式ページ【β版】
僕がわざわざ記事にする必要がないくらい全て必要な情報がそろっています。
- デモ
- 販売価格
- 導入方法
- 動作確認が取れているワードプレステーマ
- カスタマイズ方法
- サポートについて
- etc…
ページ内にこういうボタンがあるので、そこから購入ページへ行きましょう。
2. 購入完了画面からファイルをダウンロード
移動するとこのような画面になるので、カートに入れるボタンを押します。
カート画面では料金と決済方法が載っているので確認し、レジに進みます。
購入にはピクシブのアカウントが必要なので持っていない場合には作りましょう。
3. パスワード保護されたサイトURLとパスワードをゲット
購入が終わると決済終了画面にファイルダウンロードボタンが出てくるので、そこからファイルをダウンロードします。
ダウンロードした「アニメーション下線Mobar(ムーバ−).txt」という名前のファイルに
- インストール方法の書かれたページのURL(パスワードで保護されているサイト)
- パスワード
が書いてあるので、URLをブラウザで開きます。
4. URLのサイトを開きパスワードを入力
URLのページを開くとこのような画面になるのでパスワードを入力します。
パスワードを入力するとMober導入マニュアルの中身を見ることができるようになります。
5. functions.phpに貼り付けるコードをコピー
マニュアル内にphpのプログラムコードが載っているのですべて選択してコピーします。

コードはこんな感じではじまります
6.(小テーマがなければ)小テーマを用意
ワードプレスの小テーマとは親テーマのコードを破壊せず、安全にカスタマイズするための仕組みです。
現時点でMobarが対応確認しているテーマは以下の4つ。
- SANGO
- AFFINGER
- JIN
- STORK
SANGOの製作をしたサルワカさんが恐ろしく分かりやすく小テーマの導入について説明しているので見てみてください。
→WordPressで子テーマを活用して安全にカスタマイズを行う方法
各テーマの公式ページにも小テーマの導入方法の説明があります。
7. 小テーマ内のfunctions.phpにコードを貼り付け
SANGOの場合、コードの貼り付け場所はここです。
- ワードプレスの管理画面を表示
- メニュー:外観→テーマの編集
- 小テーマになっているか確認
- functions.phpを選択
- 「function.phpへの追記は下記に」と書いてある場所へ貼り付け
これでもう使えます。
使い方
貼り付け方は冒頭に書いたとおりです。
下記のように書くだけ。
カスタマイズもできる
- color:下線の色
- sec:アニメーションの秒数
- thick:線の太さ
- away:線の位置
先程のコードにこのような形で追加すればカスタマイズが出来るのです。
通常はこのくらいが妥当な値だと思います。
でもカスタマイズして極端な値にすればこんな風にもなるのです。
効果的に使って読者の負担を減らそう!
というわけでアニメーション下線ツール・Mobarをご紹介しました。
これを使えば読者の目線を誘導できるだけでなく、ひと呼吸入れてホッとさせる効果も期待できます。
より読みやすいサイトづくりにぜひ使ってみてください。