CSS初心者のわたしがSNSボタンを作ってみたよ!お世話になった2サイトを紹介

よければシェアお願いします(。・・。)

snsのアイキャッチ画像
今日も楽しくカスタマイズ♪
コードを見すぎてちょっとお疲れ気味のべるだ(@verdad0619)です。

ピョコボのアイコン

ピョコボ

だから、カスタマイズじゃなくて記事書きなよ!

管理人のアイコン

べるだ

あっ、ピョコボさんに見つかってしまった…

ピョコボさんは、一人でブログ更新をするのがさみしいわたしの相棒です( ´ ▽ ` )ノ

ピョコボのアイコン

ピョコボ

いつから相棒扱い…

さて、本題に入ります(笑)

Facebookのいいね!などのSNSボタン。プラグインを使えば簡単に設置できますよね?ただ、プラグインを使うとブログの速度が落ちてしまったり…。

わたしが使用しているテーマ「Simplicity」には高速表示に対応したSNSボタンが標準装備されています。ただ、今回はサイドバーにちょこっと入れたいなぁーと思ったので、CSSの勉強も兼ねてSNSボタンを自作してみました。

作る過程でとてつもなくお世話になった(ほぼコード真似させてもらった)サイトさんを紹介します!

スポンサーリンク

丸型のアイコンを作りたいならオススメ!「JunkBlog」

JunkBlogのスクリーンショット
リンク 丸いSNSボタンをCSSとWebフォントで作る方法【いいね/ツイート/Pocket/LINE/はてぶ/feedly】

SNSボタンはWebフォントを使って作成するんですが、「はてなブックマーク」などのアイコンは日本独自のアイコンのためほぼ配布されていません。アイコンの配布サイトの多くが海外のサイトだからです。そこで、JunkBlogを管理しているJunkBoyさんは、Webフォントの作り方からまとめてくださってます。

ありがたやー!

作成した丸型ボタン

作成したWebフォントはご自由にお使い下さいとのことだったので、ありがたく使わせていただきました。

サイトに書いてある手順どおりに進んでいって、できたSNSボタンがコチラ▼



どうです?素人のわたしにも出来ました!(ほぼ、JunkBoyさんのコード通りだけど…)

ピョコボのアイコン

ピョコボ

あれっ?なんかおかしくない?

管理人のアイコン

べるだ

さすが!やっぱり気づいちゃいました?

そうなんです。はてなブックマークのWebフォント「B!」といくつかのフォントが、JunkBoyさんが作ったファイルをアップロードしても表示されなかったんです。表示されるものと、されないものがあるからパニック。初心者のわたしには手に負えません。

「B!」だけ、アイコンが◯に対して中心からちょっとズレてるの分かります?アイコンが読み込まれなかったんで、他の方法で表示してるからなんです。

どうやって解決したの?

コチラの記事を参考に「B!」だけ自作して、style.cssに書き込みました!

開いた口が半開きになるブログ - Font Awesome などアイコンフォントにないはてなブックマークを自力で追加する簡単な方法

コードはそのまま使わせていただきました。

なので、もしわたしみたいにJunkBoyさんのフォントが表示できないものがあったら、試してみてくださいね。今回作成した丸型のアイコンは、JunkBoyさんのコードをほぼそのまま使わせていただいているので、コードの記載は控えます。

作ってみたけど、「ここが分からない!」などあればコメントやお問い合わせから気軽に声かけてくださいね。

こんなアイコンまで作れるんだ!?って感動しちゃう「Webpark」

webparkのスクリーンショット
リンク アイコン型WebフォントをCSSでデザインしたボタン10個

CSSでデザインされたSNSボタンが10パターンもあって、その中でも動きがあるボタンには目を引かれます!アイコン型Webフォントの「Font Awesome」を使ってボタンを作成するので、Simplicityのユーザーならファイルのダウンロードなどがいらないのがうれしいところ♪

ただ、その半面はてなブックマーク「B!」などは作れないので、他の方法が必要になります。

作成したボタン

「Webpark」さんの[8. アイコンが下に消える]を参考に作ってみました▼



参考までにコード載せておきます。
あくまで初心者が書いたコードなので、間違いがあったらご了承を。

まずは、HTML。

feedlyのアイコンは「Font Awesome」にないので、JunkBoyさんが作成したアイコンをアップロードして使用させてもらっています。

次は、CSS。

border-radiusで、ボタンの角に丸みを付けて、34行目〜36行目までの記述でアイコンごとに色をつけました。

わたしはCSSの勉強のためにいろいろイジっちゃいましたが、「Webpark」さんで紹介されているボタンがシンプルで分かりやすいと思います!

まとめ

自分でいちから作るのはまだ無理だけど、作り方を紹介してくださってるサイトさんのおかげでなんとか形にすることができました!作ったボタンは見るだけでなく、ポチっと押してもらえると喜びます(笑)

そして、お知らせ。

管理人のアイコン

べるだ

「MattariLog」のFacebookページを作りました!

できたてホヤホヤ!(笑)
なのでまだ「いいね!」がありません…

ちょっとでも記事がお役に立てたら、「いいね!」してもらえるとうれしいです。よろしくお願いしまーす!

この記事が気に入ったら
いいね ! してね

Twitter でべるだを