Twitter、FacebookなどのSNSボタンを設置しました。

photo credit: Generation Y via photopin (license)
スポンサーリンク

どうも、リョウ(@ryskyshd)です。

昨日に引き続き、新しくなったテーマに○○を設置、追加しましたシリーズです。
今日は、記事をシェアしやすくするSNSボタンを設置しましたよというお話です。

昨日の記事はこちら。

トップに戻るボタンを追加しました。

2015.05.18

SNSボタンとは

SNSボタンとはトップページや個別記事ページの一番下に設置した以下のようなボタンのことです。
sns-button-image

各種SNSにその記事をシェアするために使うボタンです。
プラグインを入れると超簡単に導入できるんですが、前にも書いたようにできるだけプラグインは使わない方向でいきたいので、今回は多少手間でも自分でCSSを弄れば何とかゴニョゴニョできる仕様にしたいと思いました。

早速検索

見つけたのが以下の記事。

この方、本当にただの主婦なんでしょうか(失礼)。
うちの奥さんは超が付くほどアナログな人なのでちょっと驚きました。
本当に素晴らしい。
私がやりたいことの8割が解決しました。

私がこだわりたかったポイントは4つ。

  1. レスポンシブ対応。
  2. アイコンフォント(しかもFont Awesomeならよりグッド)使用。
  3. シェア数が表示される。
  4. マウスオンでペコッと凹むデザイン。

ほとんど解決ですね。

ここからもうひとこだわり

これでもうお腹いっぱいなほど十分なんですが、今ひとつな点を唯一挙げるとすると、アイコンフォントが全サービス対応でないこと。
と思ったら記事の下の方にicomoonとか言う何か別のサービスを使ってみなさいと書いてありましたので、即検索するとさらにこんな記事が出てきました。

ドンピシャですね。
これでPocketやはてブのアイコンフォントも使えるようになります。

その他にもこんな記事を参考にしました。

はてブのロゴを自力で何とかするっていう発想が面白かったです。
確かに「B!」は文字ですね(笑)

最終的こうなりました

まずはHTML。
スーパー主婦のちゅんこ(@shufulife)さんのコードを採用させていただきました。

PCとスマホでリンクの方法を変えています。
PCでは一部ポップアップ、スマホではポップアップしないようになっています。
細かいところが好きですね。

そして次にCSS。

最後のメディアクエリはまだよくわかっていないのですが、上手く動いているのでよしとしています。

全体的に色々と弄ったので完全にデフォルトの状態ではないと思いますが、ほぼご紹介されているのと同じだと思います。
アイコンフォントは全てicomoonで統一しました。

最後に

いかがでしたでしょうか。
PCでは横4つの2列表示ですが、スマホから見ると横2つの4列表示なんです。
これがレスポンシブってやつですか、素晴らしい!
表示のチェックに最適なサイトも見つけましたので載せときます。

スポンサーリンク

この記事をシェアする

コメントを残す

メールアドレスが公開されることはありません。