ぱぱらいく~ディズニー大好きパパの育児記録~

ディズニーが大好きな年子・双子のパパがディズニーと子育ての情報を発信するブログ

ブログのスマホ表示にフォローボタンを実装してみた

f:id:itoht12:20170327104415j:image

本日はブログカスタマイズの話

いつも閲覧ありがとうございます

ブログ管理人のあっくんです

少しずつ進めているスマホ表示のカスタマイズ

スマホの見出しを変更しました - ぱぱらいく~ディズニー大好きパパの育児記録~

スマホ表示で不必要な項目を消してみた【はてなブログ】 - ぱぱらいく~ディズニー大好きパパの育児記録~

今回ははてなブログのスマホサイトにフォローボタンを実装してみたのでその内容のレビューです

 

経緯

ブログの読者、twitterのフォロアー等々を増やすのに重要になるフォローボタン

はてなブログにもデフォルトで読者登録とtwitterフォローの機能は備わっています

記事下にそれぞれ表示されて要件的には満たしてはいるのですが……

 

単純にダサい!

 

デザインのいまいち間もさるとこながらボタン高さに統一性が無い

見た目も美しくなく画面も崩れた印象に映ってしまいます

また、ボタンの大きさ的にもいまいちでスマホだと押しづらい

ユーザビリティー的にも良くはないので、オリジナルのボタンを配置しようと決めました

要件

当ブログで必要になるのは

  • 読者登録
  • twitter

の二つ

ただ、他のブロガーの方を見ると

  • freedly

が付いているブログも多いのでこちらも導入してみようと思います

  • facebook
  • Instagram
  • google+

は活用していないのでスルーします

参考にしたサイト

shunさんの運営するいつ俺を参考にさせていただきました

はてなブログに11種類から選べるSNSフォローボタンをコピペ+αで実装するカスタマイズ - いつ俺〜いつから俺ができないと錯覚していた?〜

スマホ版CSSのスマホ版1を丸パクリ

フラットデザインの3ボタン連番式が管理人のイメージとドンピシャ!

今後、facebookやgoogle+等を導入した時にも難しくなく増やせそうなので、しばらくはこちらを使わせて頂こうと思います

 

デフォルトの表示を消し忘れてワタワタしてしまったのは内緒です(笑)

結果

改訂後のフォローボタンがこちら

f:id:itoht12:20170331080539j:image

ボタンが大きくなりユーザビリティーが向上しました

また、位置も統一性があって見栄えが良くなった感じ

当ブログがまた一つおしゃれになりました

 

サイドバーへの設置記事もあったので今後はPCの方にも手をかけたいですね

ただ、スマホも上に戻るボタンの設置とかグローバルメニューの設置とかいろいろとやりたいことがたくさん……

どっちから手を付けようか迷い中です