CSSでSNSボタンをキレイに作る方法/レスポンシブデザイン対応/ブログのシェアボタン




今回はCSSでブログのSNSボタンを作る方法をまとめてみた。
iPhoneやAndroidなどのスマートフォンでもキレイに表示されるように、レスポンシブデザインに対応するところまで説明する。
コピペで済ますのも問題ないが、仕組みを理解できれば自分なりにアレンジできて楽しいと思うので、ぜひこの機会に覚えてみてはいかがだろうか。








SNSボタン(シェアボタン)の基本のHTML


CSSの設定の前に、次のようなHTMLを準備しておこう。



今回設置するSNSは「Twitter」「Facebook」「はてなブログ」「Pocket」の4つ。


ちなみに上のHTMLに表示されている {{ ... }}は独自タグである。

{{ default_page_url }}サイトURL
{{ default_site_title }}ページタイトル
に置き変えて自分のブログに合わせてもらいたい。





ボタンをCSSで横並びにする


floatで横並びを実現する詳しい方法は、以前記事に書いたのでこちらを参考にしてほしい。
CSSで横並びのメニューボタンを配置する方法【HTML初心者向け】

こんな感じで、コードはできるだけシンプルになるようにしてみた。
見栄えを変えたい人は、これをコピペして改造していけば大丈夫。




記事の横幅が720pxなので4で割ると、一つあたりのボタンが180pxに収まるようにしている。
ここら辺は自分のブログに合わせて修正してほしい。

ブラウザで表示させるとこんな感じで、キレイに記事の横幅に合わせて収めることができた。


このままでも十分使えるが、今回はこれをさらにレスポンシブデザインに対応させていく。





SNSボタン(シェアボタン)のレスポンシブデザイン版


このブログはレスポンシブデザインで作っているので、このままだとスマートフォンで表示するとせっかくキレイに作ったSNSボタンのレイアウトが崩れてしまう。
そこで先程のCSSをさらに改造して、レスポンシブデザインにしていく。

なんだかレスポンシブデザインめんどくさそうだなと思っている方に朗報。
レスポンシブデザインの対応はとっても簡単!

先ほどのスタイルシートを下のように少しだけ修正する。
aタグの横幅指定 width: 180px; を削除し、liタグを position: relative;width: 25%; で指定してあげる。
なんとこれだけでスマホデザインに対応できてしまう。


レスポンシブデザインに対応したCSSがこちら。




スマホで確認してみると下の画像のように、キレイにボタンが画面内に収まった。




以上で「CSSでSNSボタンをキレイに作る方法」の説明を終わりとしたいところだが、実はしれっと流して説明しなかった事がある。

それは、SNSのアイコン表示。

「アイコンの表示ってどうやるの?」という方は次で説明するので、さらに読み進めてもらいたい。





IcoMoonを使ってSNSのアイコンを表示する


SNSのアイコンを表示するために、下のリンクのIcoMoonという無料のサービスを使っている。
» Icon Font & SVG Icon Sets ❍ IcoMoon

IcoMoonから使いたいアイコンを選びダウンロードするだけ。


ダウンロードしたfonticon.cssを自分のサイトに設置し、class="icon-twitter" のようにアイコンを表示させたい要素にクラスを追加するだけ。
IcoMoonは必要なアイコンのみをダウンロードするので、サイトアクセスも重くならないで済むので気に入っている。


もしうまく表示できなかった場合は、つぎの二つを確認してみてほしい。

  • fontディレクトリのパスが間違っていないか
  • CSSのキャッシュがブラウザーに残っていていないか


特にCSSのキャッシュは強力なので要注意だ。自分はそれに気づかず数時間費やした経験がある。


Chromeの開発者ツールを使っている場合は、Network項目の Disable chache をオンにすればキャッシュからの読み込みをなくすことができるので覚えておこう。


ちなみに自分のサイトでは、公開後のサイト閲覧者にも新しいCSSファイルを読み込ませたいので、CSSのURLのクエリに変更日のタイムスタンプを付け加えている。




IcoMoonでうまく表示できなかった場合はこれらのことを参考にしてみて欲しい。
以上で「CSSでSNSボタンをキレイに作る方法」の説明を終わる。


Web制作者のためのCSS設計の教科書

モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法 Web制作者のための教科書シリーズ

KindleAmazon


あなたにおすすめ