カエレバ・ヨメレバのボタン化により、ユーザビリティの向上を図りました。

友達とシェアする

こんにちは♪

今回は当ブログの運営についてお話します。

施策を講じて、ユーザビリティの向上を図りました

おすすめアイテムの紹介に使用している「カエレバ」「ヨメレバ」をカスタマイズし、各ネットショップへのリンクをボタン化しました。

スポンサーリンク

カエレバ・ヨメレバのリンクのボタン化

カエレバ」「ヨメレバ」とは、ブロガーのかん吉さんが開発したブログパーツです。

これを利用するとAmazonや楽天といったネットショップへのリンクが簡単に作成できる魔法のツールで、多くのブロガーやアフィリエイターが利用しています。

これまでこのブログではこのような表示でした。

カエレバ縦

パソコンではまあまあクリックしやすいですが、リンクどうしが近すぎて、スマホだと非常にタップしづらい状態でした。間違えて他のショップを押しそうです。スマホからの訪問者の方もかなり多いので、改善が必要かなと思いました。

それで試行錯誤してCSS(ウェブサイトのスタイルを指定するための言語)というものをいじって、リンクをボタン化しました。

simplicityでカエレバ・ヨメレバのリンクをボタン化する方法

ボタン化の結果

パソコンではこうなります(今スマホで見ている方は小さく見えると思います。実際はパソコンの記事幅の80%程の幅です)。

カエレバPC

スマホ表示ではこんな感じに。

wpid-20151103_144309.jpg

どうでしょう?スペースは取ってしまいますが、クリックあるいはタップしやすくなったのではないかと思います。

実際に配置してみると…
(これはリンクが生きています)

カエレバ

ヨメレバ

このようになります。パソコンはパソコン用の表示に、スマホはスマホ用に表示されていると思います。

まとめ

かねてから使いづらいと思っていたので、リンクのボタン化は前々からしたかったことです。

こんな具合にブログの見やすさなど、読者から見てどうだろう?と考えてみて、ユーザビリティを向上させてみました。

これからも問題があれば改善していきます。

カエレバ・ヨメレバのボタン化の具体的な方はこちらに書いています
simplicityでカエレバ・ヨメレバのリンクをボタン化する方法

  • いいね (2)
  • 読んだよ (2)
スポンサーリンク
読んでくださりありがとうございます♪

友達とシェアする

フォローすると更新情報が届きます♪

この記事をお届けした
下町メダカ日のFacebookページを
いいねしてチェック!
スポンサーリンク