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

 

イカ太郎

こんにちは、イカ太郎です

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

 

 

Mobarを使えばこの下線がニュルっと動くよ

 

 

 

動きました?

 

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

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

  • 最初に結論を持ってくる
  • 大切なところは太字にする
  • もっと大切なところには下線を引く

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

 

でも、ブログ書いてると本当にちゃんと見て欲しいところってありますよね。

 

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

これが話題になっていたのでさっそく見にいくと、通常価格2,000円がなんと2月15日まで1,500円になっているではありませんか!

 

イカ太郎

こんなすごいツール買うしかないでしょ!

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

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

 

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

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

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

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

  1. 公式ページから購入
  2. 購入完了画面からファイルをダウンロード
  3. パスワード保護されたサイトURLとパスワードをゲット
  4. URLのサイトを開きパスワードを入力
  5. functions.phpに貼り付けるコードをコピー
  6. (小テーマがなければ)小テーマを用意
  7. 小テーマ内のfunctions.phpにコードを貼り付け

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

[moveline]ここからスタートして[move]アニメーション下線がスルスルーっと動いて[/move]ストップします。[/moveline]
ここからスタートしてアニメーション下線がスルスルーっと動いてストップします。

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で子テーマを活用して安全にカスタマイズを行う方法

 

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

STORKの子テーマ導入ページ

JINの小テーマ導入ページ

AFFINGERの子テーマ導入ページ

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

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

  1. ワードプレスの管理画面を表示
  2. メニュー:外観→テーマの編集
  3. 小テーマになっているか確認
  4. functions.phpを選択
  5. 「function.phpへの追記は下記に」と書いてある場所へ貼り付け

これでもう使えます。



使い方

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

下記のように書くだけ。

[moveline]ここからスタートして[move]アニメーション下線がスルスルーっと動いて[/move]ストップします。[/moveline]
ここからスタートしてアニメーション下線がスルスルーっと動いてストップします。

カスタマイズもできる

  • color:下線の色
  • sec:アニメーションの秒数
  • thick:線の太さ
  • away:線の位置

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

[moveline color="afeeee" sec="3" thick="40" away="2"]ここからスタートして[move]アニメーション下線がスルスルーっと動いて[/move]ストップします。[/moveline]
ここからスタートしてアニメーション下線がスルスルーっと動いてストップします。

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

 

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

[moveline color="blue" sec="10" thick="100" away="50"]ここからスタートして[move]アニメーション下線がスルスルーっと動いて[/move]ストップします。[/moveline]
ここからスタートしてアニメーション下線がスルスルーっと動いてストップします。

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

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

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

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