ノウハウ

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

以前、SNSボタンとシェアボタンのデザインをリニューアルしてそれからも少しずついじってる日々でした。じーっと見てるとああでもない、こうでもない、と気になりだして止まらないものですね。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

http://www.yukihy.com/embed/fixed-btn-custom

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

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

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

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

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

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

【簡単】Facebookで動画の自動再生をオフにする方法(追記あり:2015.9.2)Facebookのフィードに動画があると自動的に再生されるようになってますよね。私、これがちょっとイヤでして自分のタイミングで再生したい...

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

 

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

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

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

POSTED COMMENT

  1. サワ より:

    いつも参考にさせて頂いてます。
    このボタンが気に入ったたまワードプレスのブログにも設置しようと四苦八苦しています。
    はてなブログでない場合に変更すべき箇所などありますでしょうか?
    ご教授頂ければ幸いです。

  2. pc-price より:

    サワさん
    お返事遅くなりすみません!
    仕事が忙しくサイトに手を出せない状態でして…。
    ボタン気に入って頂いて嬉しいです。
    WordPressへの設置ですが正直こうしたらいい、というのが分かりませんが
    違うところはURLやタイトルを読み込む部分かと思います。
    以下のは実際に私がここで設置してる内容です。
    「URLEncodedPermalink」や「Title」ははてなで取得してくれるURLやタイトルのタグの部分になります。
    これがWordPressだとどうなるんだろう…というのが分かりませんでした。
    <Facebook>
    [a href=”http://www.facebook.com/share.php?u={URLEncodedPermalink}” onclick=”window.open(this.href, ‘FBwindow’, ‘width=650, height=450, menubar=no, toolbar=no, scrollbars=yes’); return false;” class=”facebook-button”>[/i] [span class=”facebook-count small-text”][i class=”fa fa-spinner fa-spin”][/i][/span][/a]
    <Twitter>
    [a href=”http://twitter.com/intent/tweet?text={Title} {URLEncodedPermalink}” class=”twitter-button” target=”_blank”][i class=”blogicon-twitter lg”][/i][/a]
    ※タグを入れると非表示になるので<>を[ ]にしてます。
    またjQueryも使用してますのでデザインや動作にも必要になると思います。
    …といってもここを参考にコピペしたりしたのでjQueryって何って状態のまま使ってます(^_^;
    コピペのみではてなブログのソーシャルボタンをシェア数付きでおしゃれにするカスタマイズvol.2
    http://www.yukihy.com/entry/vol2-hatenablog-share-btn-custom
    その他、以下のようなサイトも見つけました。
    ご参考になれば幸いです。
    (すでにご存知でしたらごめんなさい)
    【WordPress】今更ですが、フラットな感じのカウント付ソーシャルボタンを設置しました
    http://hayakuyuke.jp/archives/16715
    【WordPress】8種類の自作SNSボタンのコードをご紹介!カウントも表示するよ
    http://shufulife.com/8type-snsbutton/