orangestarの雑記

小島アジコの漫画や日記や仕事情報など

スポンサードリンク

はてなブログのソーシャルボタンを変更してみた(他、おすすめ記事、サイドバースライド)


りちょうとえんさんkindle電子書籍で発売中です//となりの801ちゃん+512月24日発売予定

なんか、はてなのデフォルトのソーシャルボタンのデザインが、なんか、ちょっとダサいんじゃないの…?という気がしてきて、デザインを変更してみた。
一番最初の頃は、ブックマークボタン、フェイスブックボタンなどの、ボタンの高さとかそろってたんだけれども、ツイッターがRT数を表示しなくなったりしたせいで不揃いになって、なんかこう、子どもが散らかしたあとの積み木みたいになってるな~ってずっと思ってたんだ…。


月に数回更新するくらいだったら気にならなかったんだけど、ここ最近みたいに頻繁に更新するようになると、なんか田舎から都会に出てきたオタクが1か月くらいたって「あれ?オレ、もしかして今の恰好ヤバイ?」って思うような感じで、これは少し恥ずかしいのでは?みたいな感じに思ったので、ちょっとデザインを変更することにしました。あと、それに合わせて、あちこちちょっとずつ弄った。


もともとデザインのセンスがないので、「全然マシになってない」「むしろひどくなった」とかが実際の状態かもしれないけれども、ほら…私…田舎から出てきたオタクだから…。ちゃんとしようとして張り切ったときが一番ひどいことになるって知ってるけれども、そこを通過しないとオシャンティなシティ在住者になれないので、頑張るんだ。頑張ってはてな村出身だってばれないようにするんだ…。はてな村から、ちゃんとインターネットシティの住人になって、こう、なんかネットで成功した人たちが集まるパーティーみたいなところに呼ばれて、バーベキューとか、なんか泡がたくさん出てくるライブハウスとかプールみたいなところにいって、あと料亭とかに行くんだ…。



というわけで、今回変更したポイント

  • ソーシャルボタン(PC、スマホ表示両方)
  • 記事下に、おすすめ記事が入るようにした
  • サイドバーが、途中からスライドするようにした

ソーシャルボタン(PC、スマホ表示両方)の変更

www.ituore.com
ソーシャルボタンは、いつ俺さんのサイトのものを使わせてもらいました。
他にも、

www.yukihy.com
ゆきひーさん

bulldra.hatenablog.com
池田仮名さん

www.daipanman.com
だいぱんまんさん

webgaku.hateblo.jp
vintomさん

shiromatakumi.hatenablog.com
シロマティさん


が、コピペで追加、変更できるボタンを公開されてます。どれも、同じように簡単に設置出来て、使い勝手も変わらない(と思う、プログラムについては自分はよくわからないから)ので、お好みのデザインで。自分は、いつ俺さんのが、一番性に合ってるな、と思ったのでそれにしました。



記事下に、おすすめ記事が入るようにした

関連記事へのリンクが自動で入るといいな、と思って。
ランダムで記事を持ってくる、というようなものでなく、同じカテゴリを新しい順に引っ張ってくるくらいの、はてなデフォルトの関連記事モジュールがそのまま使うもので十分だったので、それにあったものを探して、遣わさせてもらいました。
www.dreamark.tokyo

ただ、こちらだと、スマートフォン表示の際には表示されないみたいです。レスポンシブデザインなら、表示されるらしいです。

あと、池田仮名さんの
bulldra.hatenablog.com
も便利そうでした。


psneさんの
psn.hatenablog.jp
“あわせて読みたい”が出るalso readも細かい設定ができて、ある程度できる人なら使いやすいと思われます。




関連記事をランダムで表示させるなら、デフォルトでついているZenbackをオンにするのが一番簡単みたいです。
blog.zenback.jp

ただ、なんか、以前オンにしたらむちゃくちゃ重くなった覚えがあったので…。
はてなモジュールのものを流用するのは、はてなの機能をそのまま使うので、重くならないかな、と思って……。



サイドバーが、途中からスライドするようにした(固定)

自分のサイトは、記事の長さが、本当にマチマチで、長さが安定してませんです。
なので、それにあわせて、サイドバーがスライドしてくれたらな…と思ってました。
なので、今回、それも導入してみました。

blog.yutorigoto.com

ゆとりごと、の団子さんのサイドバーの固定の方法をお借りしました。

サイドバー固定ですが、googleアドセンスを固定、フロートさせることは、アドセンス規約違反のようで、したら大変なことになるということを(id:shiromatakumi)さんから教えていただきました。ありがとうございます。



といったような点を今回変更しました。
これで、サイトのユーザビリティが上がっているのか下がっているのか、実際のところ全然わかりません。分からなくなってきました。


まあ、それでも試行錯誤です。昔は、なにも分からないなりにCSSをポチポチ打っていたりしましたが、他の人がイイモノを作って後悔してくれているので、その慈善を享受しよう。みなさん、ありがとうございました。