Google+
読者です 読者をやめる 読者になる 読者になる

Minority Photographer

日々の中で撮影した写真や動画、タイムラプスを公開してます

【はてなブログ】SNSボタン、シェアボタンを調整しつつデザインを変えました

ノウハウ

以前、SNSボタンとシェアボタンのデザインをリニューアルしてそれからも少しずついじってる日々でした。じーっと見てるとああでもない、こうでもない、と気になりだして止まらないものですね。SNSボタンやシェアボタンを参考にしたサイトは以下の記事にあります。(検索したらすぐ見つかるものばかり)



今回はよりシンプルに目立つもの、を色々やってみました。主にいじったのはPCサイトとモバイルサイトのボタンです。別々にいじらなきゃいけないのが結構面倒ですね…。╭( ・ㅂ・)╮

PCサイトはサイドバーと記事ページ下のボタン

PCサイトではサイドバーと記事ページ下にあるボタンです。

今回、こんな風にしました。色は各SNSのブランドカラーを全面に押し出すかどうか少し悩みましたが、各ボタンの隙間をなくしてくっつけて文字もすっくりさせたらいい感じなのかな〜と。でも、また飽きたら変えられるのがCSSのいいところですね。


サイドバーはこんな感じに。
f:id:pc-price:20160419160827j:plain:w200

記事ページ下はこんな感じに。
f:id:pc-price:20160419160834j:plain:w500


モバイルサイトは記事ページ下のボタンと画面下に出るボタン

モバイルサイトは記事ページ下と画面下に出るボタンです。画面下に出るのは他のサイトを見てていいなぁ、と思い設定をしてみました。参考にしたのは以下のサイトです。SNSボタン・シェアボタンをいじったことのある方でしたらすぐできると思います。こういうのは自力ではできないので本当に感謝いっぱいです。m(_ _)m



そして、実際に調整を繰り返しながらこんな風に完成しました。モバイルサイトは手持ちの iPhone 6 でしか表示テストをしていないので、Androidとか解像度が違う画面で見ると崩れたりしてるんだろうなぁ〜と思いつつ、もうこれでいい。いいのだ、うん。

モバイルサイトでは記事の上にシェアボタンをつけるサイトも多いですが、画面下に固定して出しておくのもよさそうですね。ページ上にも戻れるように「UP ↑」のボタンもつけました。はい、完全に自己満足仕様です。ヾ( ・ㅂ・)ノ


画面下にシェアボタンが固定で表示されるように。
「この記事シェアする」って…。
記事を公開してから誤字に気づくなんて…。(修正済み)
f:id:pc-price:20160419161511j:plain:w330

記事下にもボタンがあるので並べるとこんな感じに。
f:id:pc-price:20160419161520j:plain:w330


デザイン変更で効果は出てるの?

まだ実装したばかりなのとそもそもアクセスがそんなにない…げふげふっ。このボタンでシェアやフォローが増えたら嬉しいですね。完全な自己満足のブログですが、過去のFacebookで動画の次再生をオフにする記事がいまだにアクセスあるので、そこのシェアなどに役立てばいいなぁ〜と思っています。



もう2年前の記事になるのか…。(たまに追記してた)
Facebookの自動再生に困ってる方にどんどん届けば嬉しいです。ヾ( ・ㅂ・)ノ


Webデザイン基礎トレーニング 現場で使うテクニックをひとつずつ、しっかり。〈HTML、CSS、jQuery、SVG、Webフォント〉

Webデザイン基礎トレーニング 現場で使うテクニックをひとつずつ、しっかり。〈HTML、CSS、jQuery、SVG、Webフォント〉

  • 作者: 大野謙介,北川貴清,佐藤とも子,高橋としゆき,錦織幸知,原一宣。,矢野みち子,境祐司
  • 出版社/メーカー: エムディエヌコーポレーション
  • 発売日: 2016/03/25
  • メディア: 単行本
  • この商品を含むブログを見る