今回は、誰でも簡単にHTMLとCSSをコピー＆ペーストするだけで表示させることが可能な、SNSシェアボタンを5つ自作してみたので、この記事でご紹介させて頂ければと思います。
SNSシェアボタンは、SEO対策においてとても重要です。誰もが読みたくなるような記事を書いても、多くの人に共有してもらえなければ、それに見合ったアクセス数は見込めません。誰でも1分で表示させることができるので、ぜひ参考にしていただければ幸いです。
リゾートバイトで生活しながらブログを書いている20代の男です。2023年中に、ブログで収益を得ながら車中泊生活をすることを夢見ています。
【コピペでOK！】CSSとHTMLだけで表示が可能なSNSシェアボタン5種【はてなブログのカスタマイズ】
ここで紹介しているボタンデザインは、Twitter、Facebook、Instagram、Youtube、pocket、Line、tumblr、Evernote、pinterest、linkedinの10個のみです。
しかしながら、ここで紹介しているHTMLコードとCSSコードを応用することで、他のSNSのシェアボタンも作成することが可能です。
また、はてなブログの読者登録ボタンのカスタマイズについては、下記の記事でご紹介しているので、ぜひ参考にして頂ければ幸いです。
はてなブログの「読者になる」ボタンをカスタマイズしてみた【はてなブログのカスタマイズ】 - リゾートバイトブログ「きういの日記」 (hatenablog.com)
カスタマイズをする前にFont Awesomeを導入する
この記事では、無料で利用が可能なwebアイコンフォント、「Font Awesome」を利用して、SNSシェアボタンを作成しています。
ここで紹介している方法であれば、HTMLのスクリプトコードで、Font Awesomeのアイコンフォントを読み込んでいるため、わざわざブログに導入する必要はありませんが、当ブログでは、頻繁にFont Awesomeのアイコンフォントを使用していますので、この機会に導入しておくことをお勧めします。
下記の記事を参考にすれば、5分程度で導入させることが可能です。
はてなブログに「Font Awesome」を導入する方法【はてなブログのカスタマイズ】 - リゾートバイトブログ「きういの日記」
また、そもそも、はてなブログのカスタマイズについて全くわからない方は、下の記事で、このブログでカスタマイズした部分を全てまとめていますので、ぜひ参考にしていただければ幸いです。
デザイン①：オーソドックスなロゴだけのSNSボタン
See the Pen SNSボタン：ロゴだけ by Kiwimelon (@Kiwimelon) on CodePen.
まずは、オーソドックスなロゴだけのSNSボタンです。ユーザーはロゴさえ見れば、SNSを判別することが可能なので、よりシンプルなブログデザインにしたい方にオススメです。
デザイン②：カーソルを合わせると大きくなるボタン
See the Pen Untitled by Kiwimelon (@Kiwimelon) on CodePen.
続いて、デザイン①を応用した、カーソルを合わせると、ボタン全体が浮き上がるデザインです。普通のデザインよりも、少し変わったSNSボタンを表示させたい方にお勧めです。
デザイン③：文字の付いたオーソドックスなSNSボタン
See the Pen Untitled by Kiwimelon (@Kiwimelon) on CodePen.
オーソドックスな、文字付きのSNSボタンです。デザイン①に、文字を足しただけなので、こちらもシンプルなデザインになっています。
デザイン④：カーソルを合わせるとロゴが浮かび上がるSNSボタン
See the Pen Untitled by Kiwimelon (@Kiwimelon) on CodePen.
このブログでも使用しているデザインです。カーソルを合わせると、ロゴだけ浮かび上がります。ちょっと凝ったデザインなので、ブログのカスタマイズが好きな方にはこちらをお勧めします。
デザイン⑤：カーソルを合わせると色が反転するデザイン
See the Pen Untitled by Kiwimelon (@Kiwimelon) on CodePen.
こちらのデザインは、カーソルを合わせると色が反転するようになっています。透明感のあるブログデザインにしたい方にお勧めです。
