FIT BLOG

ホームページを成功へと導くブログ

コーディング　Kota Naito / 2018.03.09

シェアされるシェアボタンとは。CSSだけで作られた12のオリジナルレスポンシブシェアボタン【無料ダウンロード】

Advertisement

ソーシャルメディアでのシェアは、そのサイトの人気を左右する非常に重要な要素であることは多くの方が認識していることだと思います。だからこそ多くのWEBページにはシェアボタンが設置されているわけですが、シェアボタンのデザイン・配置位置の違いで、クリック率(シェア率)が変化することを意識している方はそう多くはないのではないでしょうか。ただなんとなくサイトのデザインにマッチしているからという理由でシェアボタンを設置しているなら、もしかすると、この記事にある通りに配置やデザインを工夫しただで、シェア数がグンとUPするかもしれません。
今回は、多くのユーザーにシェアされやすいボタンのデザイン・配置について解説いたします。また、CSSだけで作られた12例のシェアボタンのデザインソースも併せて提供させていただきます。

シェアボタンはファーストビュー内かつ、記事タイトルのすぐ近くに

まず、最も重要なシェアボタンを設置する位置についてですが、「できるだけファーストビューの中で、尚且つ、記事タイトルの付近、もしくはアイキャッチ画像の付近」に設置しましょう。なぜこの位置が良いかというと、人はページの左上(ファーストビュー内に記事タイトルがある場合はその位置)を始点に、Fの法則に乗っ取って、ページを流し見るためです。
ユーザーは、ページの隅から隅まで熟読することはほとんどなく、特に最初の接触の時(ページに初めて訪れた時)は、重要であろうポイントを流し読むだけということが多くあります。ですが、それでも多くの場合、ページ内で最も重要な記事タイトルや、(画像の内容にもよりますが)アイキャッチ画像には視線が集まりやすく、この付近にシェアボタンを設置するだけで、その存在を認識してもらいやすくなるのです。ユーザーによっては、「とりあえず【はてぶ】しておいて、後で読むか」という人もいますので、ボタンの存在に気が付いてもらえるだけで、シェア率はぐんと上がります。

それぞれのSNSブランド”らしさ”を壊さない

例えばですが、ただ【シェア】と書かれただけのボタンをクリックしてみようという冒険者はそう多くはありませんよね。どこのSNSのシェアボタンなのかが一目でわからなければ、誰も怖くてボタンをクリックできません。インターネットの世界に慣れ親しんだ私でも、どこにリンクされているのかわからないボタンを気軽にクリックしたりはできませんから。
このような潜在的に感じる恐怖は多くのユーザーに存在します。WEB担当者やデザイナーは、こういった潜在的な恐怖をユーザーに与えてはいけません。
シェアボタンのデザインで最も大切なことは、そのSNSブランド”らしさ”を壊さないことです。Twitterであればさわやかな水色、LINEであれば鮮やかなグリーンというように、そのブランドを象徴する色は特に目立つようにするべきです。次に、ロゴマークをボタン内に掲載することで、どこのSNSのシェアボタンなのかを明確にします。色でなんとなく、「Facebookのいいねだろうな」と感じさせ、ロゴマークでそれを確かにしてあげるイメージです。
またボタンの大きさや周辺の余白も重要です。ごちゃごちゃしたページであれば、大きめの余白の中に小さめのボタンを横並びさせることでシェアボタンの存在を目立たせられるかもしれませんが、この辺りは、それぞれのページのデザインで変わってくるので、自社のスタッフ数人に意見を聞いて、どれくらいの大きさと余白であれば、シェアボタンが目立つか、また記事そのものに悪影響がないかを話し合うことが重要です。シェアボタンばかりが目立ち、記事そのものがユーザーの頭に入らないようであれば、意味がありませんからね。

これは2013年ごろのデータになるのですが、「オリジナルデザインのシェアボタンと、公式デザインのシェアボタンではどちらがよりクリックされるのだろうか」という簡単な実験を行ったことがあります。その時は公式のシェアボタンが20％ほど多くにクリックされていたのですが、最近では大きな違いが無くなってきているようです。恐らく、多くのサイトで似通ったオリジナルデザインのシェアボタンが設置されるようになり、ユーザーの学習が進んだからだと思われます。サイトの特性によっては今でも公式デザインのシェアボタンの方がクリックされるかもしれませんので、一度検討してみるのも良いかと思います。

CSSだけで作られたシェアボタンのデザインサンプル12個

最後に、オリジナルデザインのシェアボタンを12例紹介したいと思います。正確には3デザイン4パターン程度のバリエーションですが、気に入ったものがあればぜひご利用ください。
実際の表示に関しては下記のデモページをご覧ください。hoverエフェクトやactiveエフェクトもデモページで確認できます。
実際にこれから紹介するシェアボタンデザインを利用するには、下記のダウンロードボタンからデータ一式を取得していただき、icon.cssファイルとfontフォルダ内の各種WEBフォントデータを読み込んでいただく必要があります。
ダウンロードファイルのindex.htmlは下記のデモページと同じ作りになっていますので、HTMLとCSSの理解があれば、このファイルを頼りに容易に自身のサイトでご利用いただけると思います。

DEMOページ　ダウンロード 　

共通HTML

html
  1. /*head内に下記を読み込みます。*/
  2. <link rel="stylesheet" href="css/icon.css">
  3. <link rel="stylesheet" href="css/style.css">
  4. /*サンプル7以降のデザインを利用するには下記を読み込んだほうが美しくなるはずです。*/
  5. <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:400,700,900">
  6. </head>
  7. <body>
  8. ……
  9. <ul class="shareList">
  10.   <li class="shareList__item"><a class="shareList__link icon-twitter" href="#" target="_blank" title="Twitter"></a></li>
  11.   <li class="shareList__item"><a class="shareList__link icon-facebook" href="#" target="_blank" title="Facebook"></a></li>
  12.   <li class="shareList__item"><a class="shareList__link icon-google-plus" href="#" target="_blank" title="Google+"></a></li>
  13.   <li class="shareList__item"><a class="shareList__link icon-hatebu" href="#" target="_blank" title="はてなブックマーク"></a></li>
  14.   <li class="shareList__item"><a class="shareList__link icon-pocket" href="#" target="_blank" title="Pocket"></a></li>
  15.   <li class="shareList__item"><a class="shareList__link icon-rss" href="#" target="_blank" title="RSS"></a></li>
  16.   <li class="shareList__item"><a class="shareList__link icon-feedly" href="#" target="_blank" title="Feedly"></a></li>
  17.   <li class="shareList__item"><a class="shareList__link icon-pinterest" href="#" target="_blank" title="Pinterest"></a></li>
  18.   <li class="shareList__item"><a class="shareList__link icon-linkedin" href="#" target="_blank" title="Linkedin"></a></li>
  19.   <li class="shareList__item"><a class="shareList__link icon-line" href="#" target="_blank" title="LINE"></a></li>
  20. </ul>

※HTMLは全デザイン共通となっています。 ※href=”#”となっていますが、こちらは環境に合わせて編集してください。

シェアボタンCSSデザインサンプル1

css
  1. .shareList {
  2. 	list-style:none;
  3. 	display: flex;
  4. 	justify-content: flex-end;
  5. 	flex-wrap:wrap;
  6. 	width:100%;
  7. 	margin:0;
  8. 	padding:0;
  9. }
  10. .shareList__item {
  11. 	flex-grow: 1;
  12. 	height:50px;
  13. 	line-height:50px;
  14. 	min-width:100px;
  15. 	text-align:center;
  16. }
  17. .shareList__link {
  18. 	display:block;
  19. 	color:#ffffff;
  20. 	text-decoration: none;
  21. }
  22. .shareList__link::before{
  23. 	font-size:20px;
  24. 	display:block;
  25. 	transition: ease-in-out .2s;
  26. }
  27. .shareList__link:hover::before{
  28. 	background:#ffffff;
  29. 	transform: scale(1.2);
  30. 	box-shadow:1px 1px 4px 0px rgba(0,0,0,0.15);
  31. }
  32.  
  33. .shareList__link.icon-twitter{background:#55acee;}
  34. .shareList__link.icon-twitter:hover::before{color:#55acee;}
  35.  
  36. .shareList__link.icon-facebook{background:#3B5998;}
  37. .shareList__link.icon-facebook:hover::before{color:#3B5998;}
  38.  
  39. .shareList__link.icon-google-plus{background:#dd4b39;}
  40. .shareList__link.icon-google-plus:hover::before{color:#dd4b39;}
  41.  
  42. .shareList__link.icon-hatebu{background:#008FDE;}
  43. .shareList__link.icon-hatebu:hover::before{color:#008FDE;}
  44.  
  45. .shareList__link.icon-pocket{background:#EB4654;}
  46. .shareList__link.icon-pocket:hover::before{color:#EB4654;}
  47.  
  48. .shareList__link.icon-rss{background:#ff9900;}
  49. .shareList__link.icon-rss:hover::before{color:#ff9900;}
  50.  
  51. .shareList__link.icon-feedly{background:#6cc655;}
  52. .shareList__link.icon-feedly:hover::before{color:#6cc655;}
  53.  
  54. .shareList__link.icon-pinterest{background:#cb2027;}
  55. .shareList__link.icon-pinterest:hover::before{color:#cb2027;}
  56.  
  57. .shareList__link.icon-linkedin{background:#0e76a8;}
  58. .shareList__link.icon-linkedin:hover::before{color:#0e76a8;}
  59.  
  60. .shareList__link.icon-line{background:#1dcd00;}
  61. .shareList__link.icon-line:hover::before{color:#1dcd00;}

シェアボタンCSSデザインサンプル2

css
  1. .shareList {
  2. 	list-style:none;
  3. 	display: flex;
  4. 	justify-content: flex-end;
  5. 	flex-wrap:wrap;
  6. 	padding:0;
  7. 	margin:-5px 0 0 -5px;
  8. }
  9. .shareList__item {
  10. 	flex-grow: 1;
  11. 	height:50px;
  12. 	line-height:50px;
  13. 	min-width:100px;
  14. 	text-align:center;
  15. 	margin:5px 0 0 5px;
  16. }
  17. .shareList__link {
  18. 	display:block;
  19. 	color:#ffffff;
  20. 	text-decoration: none;
  21. }
  22. .shareList__link::before{
  23. 	font-size:20px;
  24. 	display:block;
  25. 	transition: ease-in-out .2s;
  26. }
  27. .shareList__link:hover::before{
  28. 	background:#ffffff;
  29. 	transform: scale(1.2);
  30. 	box-shadow:1px 1px 4px 0px rgba(0,0,0,0.15);
  31. }
  32.  
  33. .shareList__link.icon-twitter{background:#55acee;}
  34. .shareList__link.icon-twitter:hover::before{color:#55acee;}
  35.  
  36. .shareList__link.icon-facebook{background:#3B5998;}
  37. .shareList__link.icon-facebook:hover::before{color:#3B5998;}
  38.  
  39. .shareList__link.icon-google-plus{background:#dd4b39;}
  40. .shareList__link.icon-google-plus:hover::before{color:#dd4b39;}
  41.  
  42. .shareList__link.icon-hatebu{background:#008FDE;}
  43. .shareList__link.icon-hatebu:hover::before{color:#008FDE;}
  44.  
  45. .shareList__link.icon-pocket{background:#EB4654;}
  46. .shareList__link.icon-pocket:hover::before{color:#EB4654;}
  47.  
  48. .shareList__link.icon-rss{background:#ff9900;}
  49. .shareList__link.icon-rss:hover::before{color:#ff9900;}
  50.  
  51. .shareList__link.icon-feedly{background:#6cc655;}
  52. .shareList__link.icon-feedly:hover::before{color:#6cc655;}
  53.  
  54. .shareList__link.icon-pinterest{background:#cb2027;}
  55. .shareList__link.icon-pinterest:hover::before{color:#cb2027;}
  56.  
  57. .shareList__link.icon-linkedin{background:#0e76a8;}
  58. .shareList__link.icon-linkedin:hover::before{color:#0e76a8;}
  59.  
  60. .shareList__link.icon-line{background:#1dcd00;}
  61. .shareList__link.icon-line:hover::before{color:#1dcd00;}

シェアボタンCSSデザインサンプル3

css
  1. .shareList {
  2. 	list-style:none;
  3. 	display: flex;
  4. 	flex-wrap:wrap;
  5. 	width:100%;
  6. 	margin:-5px 0 0 -5px;
  7. 	padding:0;
  8. }
  9. .shareList__item {
  10. 	height:30px;
  11. 	line-height:30px;
  12. 	width:30px;
  13. 	margin:5px 0 0 5px;
  14. 	text-align:center;
  15. }
  16. .shareList__link {
  17. 	display:block;
  18. 	color:#ffffff;
  19. 	text-decoration: none;
  20. 	border-radius: 5px;
  21. }
  22. .shareList__link::before{
  23. 	font-size:16px;
  24. 	display:block;
  25. 	transition: ease-in-out .2s;
  26. 	border-radius: 5px;
  27. }
  28. .shareList__link:hover::before{
  29. 	background:#ffffff;
  30. 	transform: scale(1.2);
  31. 	box-shadow:1px 1px 4px 0px rgba(0,0,0,0.15);
  32. }
  33.  
  34. .shareList__link.icon-twitter{background:#55acee;}
  35. .shareList__link.icon-twitter:hover::before{color:#55acee;}
  36.  
  37. .shareList__link.icon-facebook{background:#3B5998;}
  38. .shareList__link.icon-facebook:hover::before{color:#3B5998;}
  39.  
  40. .shareList__link.icon-google-plus{background:#dd4b39;}
  41. .shareList__link.icon-google-plus:hover::before{color:#dd4b39;}
  42.  
  43. .shareList__link.icon-hatebu{background:#008FDE;}
  44. .shareList__link.icon-hatebu:hover::before{color:#008FDE;}
  45.  
  46. .shareList__link.icon-pocket{background:#EB4654;}
  47. .shareList__link.icon-pocket:hover::before{color:#EB4654;}
  48.  
  49. .shareList__link.icon-rss{background:#ff9900;}
  50. .shareList__link.icon-rss:hover::before{color:#ff9900;}
  51.  
  52. .shareList__link.icon-feedly{background:#6cc655;}
  53. .shareList__link.icon-feedly:hover::before{color:#6cc655;}
  54.  
  55. .shareList__link.icon-pinterest{background:#cb2027;}
  56. .shareList__link.icon-pinterest:hover::before{color:#cb2027;}
  57.  
  58. .shareList__link.icon-linkedin{background:#0e76a8;}
  59. .shareList__link.icon-linkedin:hover::before{color:#0e76a8;}
  60.  
  61. .shareList__link.icon-line{background:#1dcd00;}
  62. .shareList__link.icon-line:hover::before{color:#1dcd00;}

シェアボタンCSSデザインサンプル4

css
  1. .shareList {
  2. 	list-style:none;
  3. 	display: flex;
  4. 	flex-wrap:wrap;
  5. 	width:100%;
  6. 	margin:-5px 0 -4px -5px;
  7. 	padding:0;
  8. }
  9. .shareList__item {
  10. 	height:30px;
  11. 	line-height:30px;
  12. 	width:30px;
  13. 	margin:5px 0 4px 5px;
  14. 	text-align:center;
  15. }
  16. .shareList__link {
  17. 	display:block;
  18. 	color:#ffffff;
  19. 	text-decoration: none;
  20. 	border-radius: 5px;
  21. }
  22. .shareList__link::before{
  23. 	font-size:16px;
  24. 	display:block;
  25. 	transition:.2s;
  26. }
  27. .shareList__link:hover{opacity: 0.75;}
  28.  
  29. .shareList__link.icon-twitter{background:#55acee; border-bottom: solid 4px rgba(0,0,0,0.25);}
  30.  
  31. .shareList__link.icon-facebook{background:#3B5998; border-bottom: solid 4px rgba(0,0,0,0.25);}
  32.  
  33. .shareList__link.icon-google-plus{background:#dd4b39; border-bottom: solid 4px rgba(0,0,0,0.25);}
  34.  
  35. .shareList__link.icon-hatebu{background:#008FDE; border-bottom: solid 4px rgba(0,0,0,0.25);}
  36.  
  37. .shareList__link.icon-pocket{background:#EB4654; border-bottom: solid 4px rgba(0,0,0,0.25);}
  38.  
  39. .shareList__link.icon-rss{background:#ff9900; border-bottom: solid 4px rgba(0,0,0,0.25);}
  40.  
  41. .shareList__link.icon-feedly{background:#6cc655; border-bottom: solid 4px rgba(0,0,0,0.25);}
  42.  
  43. .shareList__link.icon-pinterest{background:#cb2027; border-bottom: solid 4px rgba(0,0,0,0.25);}
  44.  
  45. .shareList__link.icon-linkedin{background:#0e76a8; border-bottom: solid 4px rgba(0,0,0,0.25);}
  46.  
  47. .shareList__link.icon-line{background:#1dcd00; border-bottom: solid 4px rgba(0,0,0,0.25);}
  48.  
  49. .shareList__link:active {
  50. 	-ms-transform: translateY(4px);
  51. 	-webkit-transform: translateY(4px);
  52. 	transform: translateY(4px);
  53. 	border-bottom: none;
  54. }
  55.  

シェアボタンCSSデザインサンプル5

css
  1. .shareList {
  2. 	list-style:none;
  3. 	display: flex;
  4. 	flex-wrap:wrap;
  5. 	width:100%;
  6. 	margin:-5px 0 0 -5px;
  7. 	padding:0;
  8. }
  9. .shareList__item {
  10. 	height:60px;
  11. 	line-height:60px;
  12. 	width:60px;
  13. 	margin:5px 0 0 5px;
  14. 	text-align:center;
  15. }
  16. .shareList__link {
  17. 	display:block;
  18. 	color:#ffffff;
  19. 	text-decoration: none;
  20. 	border-radius: 5px;
  21. }
  22. .shareList__link::before{
  23. 	font-size:16px;
  24. 	display:block;
  25. 	transition: ease-in-out .2s;
  26. 	border-radius: 5px;
  27. }
  28. .shareList__link:hover::before{
  29. 	background:#ffffff;
  30. 	transform: scale(1.2);
  31. 	box-shadow:1px 1px 4px 0px rgba(0,0,0,0.15);
  32. }
  33.  
  34. .shareList__link.icon-twitter{background:#55acee;}
  35. .shareList__link.icon-twitter:hover::before{color:#55acee;}
  36.  
  37. .shareList__link.icon-facebook{background:#3B5998;}
  38. .shareList__link.icon-facebook:hover::before{color:#3B5998;}
  39.  
  40. .shareList__link.icon-google-plus{background:#dd4b39;}
  41. .shareList__link.icon-google-plus:hover::before{color:#dd4b39;}
  42.  
  43. .shareList__link.icon-hatebu{background:#008FDE;}
  44. .shareList__link.icon-hatebu:hover::before{color:#008FDE;}
  45.  
  46. .shareList__link.icon-pocket{background:#EB4654;}
  47. .shareList__link.icon-pocket:hover::before{color:#EB4654;}
  48.  
  49. .shareList__link.icon-rss{background:#ff9900;}
  50. .shareList__link.icon-rss:hover::before{color:#ff9900;}
  51.  
  52. .shareList__link.icon-feedly{background:#6cc655;}
  53. .shareList__link.icon-feedly:hover::before{color:#6cc655;}
  54.  
  55. .shareList__link.icon-pinterest{background:#cb2027;}
  56. .shareList__link.icon-pinterest:hover::before{color:#cb2027;}
  57.  
  58. .shareList__link.icon-linkedin{background:#0e76a8;}
  59. .shareList__link.icon-linkedin:hover::before{color:#0e76a8;}
  60.  
  61. .shareList__link.icon-line{background:#1dcd00;}
  62. .shareList__link.icon-line:hover::before{color:#1dcd00;}

シェアボタンCSSデザインサンプル6

css
  1. .shareList {
  2. 	list-style:none;
  3. 	display: flex;
  4. 	flex-wrap:wrap;
  5. 	width:100%;
  6. 	margin:-5px 0 -4px -5px;
  7. 	padding:0;
  8. }
  9. .shareList__item {
  10. 	height:60px;
  11. 	line-height:60px;
  12. 	width:60px;
  13. 	margin:5px 0 4px 5px;
  14. 	text-align:center;
  15. }
  16. .shareList__link {
  17. 	display:block;
  18. 	color:#ffffff;
  19. 	text-decoration: none;
  20. 	border-radius: 5px;
  21. }
  22. .shareList__link::before{
  23. 	font-size:16px;
  24. 	display:block;
  25. 	transition:.2s;
  26. }
  27. .shareList__link:hover{opacity: 0.75;}
  28.  
  29. .shareList__link.icon-twitter{background:#55acee; border-bottom: solid 4px rgba(0,0,0,0.25);}
  30.  
  31. .shareList__link.icon-facebook{background:#3B5998; border-bottom: solid 4px rgba(0,0,0,0.25);}
  32.  
  33. .shareList__link.icon-google-plus{background:#dd4b39; border-bottom: solid 4px rgba(0,0,0,0.25);}
  34.  
  35. .shareList__link.icon-hatebu{background:#008FDE; border-bottom: solid 4px rgba(0,0,0,0.25);}
  36.  
  37. .shareList__link.icon-pocket{background:#EB4654; border-bottom: solid 4px rgba(0,0,0,0.25);}
  38.  
  39. .shareList__link.icon-rss{background:#ff9900; border-bottom: solid 4px rgba(0,0,0,0.25);}
  40.  
  41. .shareList__link.icon-feedly{background:#6cc655; border-bottom: solid 4px rgba(0,0,0,0.25);}
  42.  
  43. .shareList__link.icon-pinterest{background:#cb2027; border-bottom: solid 4px rgba(0,0,0,0.25);}
  44.  
  45. .shareList__link.icon-linkedin{background:#0e76a8; border-bottom: solid 4px rgba(0,0,0,0.25);}
  46.  
  47. .shareList__link.icon-line{background:#1dcd00; border-bottom: solid 4px rgba(0,0,0,0.25);}
  48.  
  49. .shareList__link:active {
  50. 	-ms-transform: translateY(4px);
  51. 	-webkit-transform: translateY(4px);
  52. 	transform: translateY(4px);
  53. 	border-bottom: none;
  54. }
  55.  

シェアボタンCSSデザインサンプル7

css
  1. .shareList {
  2. 	list-style:none;
  3. 	display: flex;
  4. 	justify-content: flex-end;
  5. 	flex-wrap:wrap;
  6. 	padding:0;
  7. 	margin:-5px 0 0 -5px;
  8. }
  9. .shareList__item {
  10. 	flex-grow: 1;
  11. 	height:50px;
  12. 	line-height:50px;
  13. 	min-width:180px;
  14. 	text-align:center;
  15. 	margin:9px 0 0 5px;
  16. }
  17. .shareList__link {
  18. 	display:block;
  19. 	color:#ffffff;
  20. 	text-decoration: none;
  21. 	transition: .2s;
  22. 	border:2px solid;
  23. 	border-radius: 5px;
  24. }
  25. .shareList__link::before{
  26. 	font-size:16px;
  27. }
  28. .shareList__link::after{
  29. 	content:attr(title);
  30. 	font-size:14px;
  31. 	font-weight:700;
  32. 	vertical-align: top;
  33. 	margin-left:5px;
  34. }
  35.  
  36.  
  37. .shareList__link.icon-twitter{background:#55acee;}
  38. .shareList__link.icon-twitter:hover{color:#55acee; background:#ffffff; border-color:#55acee;}
  39.  
  40. .shareList__link.icon-facebook{background:#3B5998;}
  41. .shareList__link.icon-facebook:hover{color:#3B5998; background:#ffffff; border-color:#3B5998;}
  42.  
  43. .shareList__link.icon-google-plus{background:#dd4b39;}
  44. .shareList__link.icon-google-plus:hover{color:#dd4b39; background:#ffffff; border-color:#dd4b39;}
  45.  
  46. .shareList__link.icon-hatebu{background:#008FDE;}
  47. .shareList__link.icon-hatebu:hover{color:#008FDE; background:#ffffff; border-color:#008FDE;}
  48.  
  49. .shareList__link.icon-pocket{background:#EB4654;}
  50. .shareList__link.icon-pocket:hover{color:#EB4654; background:#ffffff; border-color:#EB4654;}
  51.  
  52. .shareList__link.icon-rss{background:#ff9900;}
  53. .shareList__link.icon-rss:hover{color:#ff9900; background:#ffffff; border-color:#ff9900;}
  54.  
  55. .shareList__link.icon-feedly{background:#6cc655;}
  56. .shareList__link.icon-feedly:hover{color:#6cc655; background:#ffffff; border-color:#6cc655;}
  57.  
  58. .shareList__link.icon-pinterest{background:#cb2027;}
  59. .shareList__link.icon-pinterest:hover{color:#cb2027; background:#ffffff; border-color:#cb2027;}
  60.  
  61. .shareList__link.icon-linkedin{background:#0e76a8;}
  62. .shareList__link.icon-linkedin:hover{color:#0e76a8; background:#ffffff; border-color:#0e76a8;}
  63.  
  64. .shareList__link.icon-line{background:#1dcd00;}
  65. .shareList__link.icon-line:hover{color:#1dcd00; background:#ffffff; border-color:#1dcd00;}

シェアボタンCSSデザインサンプル8

css
  1. .shareList {
  2. 	list-style:none;
  3. 	display: flex;
  4.     justify-content: flex-end;
  5. 	flex-wrap:wrap;
  6. 	padding:0;
  7. 	margin:-5px 0 -4px -5px;
  8. }
  9. .shareList__item {
  10.     flex-grow: 1;
  11. 	height:50px;
  12. 	line-height:50px;
  13. 	min-width:180px;
  14. 	text-align:center;
  15. 	margin:5px 0 4px 5px;
  16. }
  17.  
  18. .shareList__link {
  19. 	display:block;
  20. 	color:#ffffff;
  21. 	text-decoration: none;
  22. 	border-radius: 5px;
  23. }
  24. .shareList__link::before{
  25. 	font-size:16px;
  26. }
  27. .shareList__link::after{
  28. 	content:attr(title);
  29. 	font-size:14px;
  30. 	font-weight:700;
  31. 	vertical-align: top;
  32. 	margin-left:5px;
  33. }
  34. .shareList__link:hover{opacity: 0.75;}
  35.  
  36.  
  37. .shareList__link.icon-twitter{background:#55acee; border-bottom: solid 4px rgba(0,0,0,0.25);}
  38.  
  39. .shareList__link.icon-facebook{background:#3B5998; border-bottom: solid 4px rgba(0,0,0,0.25);}
  40.  
  41. .shareList__link.icon-google-plus{background:#dd4b39; border-bottom: solid 4px rgba(0,0,0,0.25);}
  42.  
  43. .shareList__link.icon-hatebu{background:#008FDE; border-bottom: solid 4px rgba(0,0,0,0.25);}
  44.  
  45. .shareList__link.icon-pocket{background:#EB4654; border-bottom: solid 4px rgba(0,0,0,0.25);}
  46.  
  47. .shareList__link.icon-rss{background:#ff9900; border-bottom: solid 4px rgba(0,0,0,0.25);}
  48.  
  49. .shareList__link.icon-feedly{background:#6cc655; border-bottom: solid 4px rgba(0,0,0,0.25);}
  50.  
  51. .shareList__link.icon-pinterest{background:#cb2027; border-bottom: solid 4px rgba(0,0,0,0.25);}
  52.  
  53. .shareList__link.icon-linkedin{background:#0e76a8; border-bottom: solid 4px rgba(0,0,0,0.25);}
  54.  
  55. .shareList__link.icon-line{background:#1dcd00; border-bottom: solid 4px rgba(0,0,0,0.25);}
  56.  
  57. .shareList__link:active {
  58. 	-ms-transform: translateY(4px);
  59. 	-webkit-transform: translateY(4px);
  60. 	transform: translateY(4px);
  61. 	border-bottom: none;
  62. }

シェアボタンCSSデザインサンプル9

css
  1. .shareList {
  2. 	list-style:none;
  3. 	display: flex;
  4. 	flex-wrap:wrap;
  5. 	padding:0;
  6. 	margin:-5px 0 0 -5px;
  7. }
  8. .shareList__item {
  9. 	height:50px;
  10. 	line-height:50px;
  11. 	text-align:center;
  12. 	margin:9px 0 0 5px;
  13. }
  14. .shareList__link {
  15. 	display:block;
  16. 	color:#ffffff;
  17. 	padding:0 20px;
  18. 	text-decoration: none;
  19. 	transition: .2s;
  20. 	border:2px solid;
  21. 	border-radius: 5px;
  22. }
  23. .shareList__link::before{
  24. 	font-size:16px;
  25. }
  26. .shareList__link::after{
  27. 	content:attr(title);
  28. 	font-size:14px;
  29. 	font-weight:700;
  30. 	vertical-align: top;
  31. 	margin-left:5px;
  32. }
  33.  
  34.  
  35. .shareList__link.icon-twitter{background:#55acee;}
  36. .shareList__link.icon-twitter:hover{color:#55acee; background:#ffffff; border-color:#55acee;}
  37.  
  38. .shareList__link.icon-facebook{background:#3B5998;}
  39. .shareList__link.icon-facebook:hover{color:#3B5998; background:#ffffff; border-color:#3B5998;}
  40.  
  41. .shareList__link.icon-google-plus{background:#dd4b39;}
  42. .shareList__link.icon-google-plus:hover{color:#dd4b39; background:#ffffff; border-color:#dd4b39;}
  43.  
  44. .shareList__link.icon-hatebu{background:#008FDE;}
  45. .shareList__link.icon-hatebu:hover{color:#008FDE; background:#ffffff; border-color:#008FDE;}
  46.  
  47. .shareList__link.icon-pocket{background:#EB4654;}
  48. .shareList__link.icon-pocket:hover{color:#EB4654; background:#ffffff; border-color:#EB4654;}
  49.  
  50. .shareList__link.icon-rss{background:#ff9900;}
  51. .shareList__link.icon-rss:hover{color:#ff9900; background:#ffffff; border-color:#ff9900;}
  52.  
  53. .shareList__link.icon-feedly{background:#6cc655;}
  54. .shareList__link.icon-feedly:hover{color:#6cc655; background:#ffffff; border-color:#6cc655;}
  55.  
  56. .shareList__link.icon-pinterest{background:#cb2027;}
  57. .shareList__link.icon-pinterest:hover{color:#cb2027; background:#ffffff; border-color:#cb2027;}
  58.  
  59. .shareList__link.icon-linkedin{background:#0e76a8;}
  60. .shareList__link.icon-linkedin:hover{color:#0e76a8; background:#ffffff; border-color:#0e76a8;}
  61.  
  62. .shareList__link.icon-line{background:#1dcd00;}
  63. .shareList__link.icon-line:hover{color:#1dcd00; background:#ffffff; border-color:#1dcd00;}

シェアボタンCSSデザインサンプル10

css
  1. .shareList {
  2. 	list-style:none;
  3. 	display: flex;
  4. 	flex-wrap:wrap;
  5. 	padding:0;
  6. 	margin:-5px 0 -4px -5px;
  7. }
  8. .shareList__item {
  9. 	height:50px;
  10. 	line-height:50px;
  11. 	text-align:center;
  12. 	margin:5px 0 4px 5px;
  13. }
  14. .shareList__link {
  15. 	display:block;
  16. 	color:#ffffff;
  17. 	padding:0 20px;
  18. 	text-decoration: none;
  19. 	border-radius: 5px;
  20. }
  21. .shareList__link::before{
  22. 	font-size:16px;
  23. }
  24. .shareList__link::after{
  25. 	content:attr(title);
  26. 	font-size:14px;
  27. 	font-weight:700;
  28. 	vertical-align: top;
  29. 	margin-left:5px;
  30. }
  31. .shareList__link:hover{opacity: 0.75;}
  32.  
  33. .shareList__link.icon-twitter{background:#55acee; border-bottom: solid 4px rgba(0,0,0,0.25);}
  34.  
  35. .shareList__link.icon-facebook{background:#3B5998; border-bottom: solid 4px rgba(0,0,0,0.25);}
  36.  
  37. .shareList__link.icon-google-plus{background:#dd4b39; border-bottom: solid 4px rgba(0,0,0,0.25);}
  38.  
  39. .shareList__link.icon-hatebu{background:#008FDE; border-bottom: solid 4px rgba(0,0,0,0.25);}
  40.  
  41. .shareList__link.icon-pocket{background:#EB4654; border-bottom: solid 4px rgba(0,0,0,0.25);}
  42.  
  43. .shareList__link.icon-rss{background:#ff9900; border-bottom: solid 4px rgba(0,0,0,0.25);}
  44.  
  45. .shareList__link.icon-feedly{background:#6cc655; border-bottom: solid 4px rgba(0,0,0,0.25);}
  46.  
  47. .shareList__link.icon-pinterest{background:#cb2027; border-bottom: solid 4px rgba(0,0,0,0.25);}
  48.  
  49. .shareList__link.icon-linkedin{background:#0e76a8; border-bottom: solid 4px rgba(0,0,0,0.25);}
  50.  
  51. .shareList__link.icon-line{background:#1dcd00; border-bottom: solid 4px rgba(0,0,0,0.25);}
  52.  
  53. .shareList__link:active {
  54. 	-ms-transform: translateY(4px);
  55. 	-webkit-transform: translateY(4px);
  56. 	transform: translateY(4px);
  57. 	border-bottom: none;
  58. }
  59.  

シェアボタンCSSデザインサンプル11

css
  1. .shareList {
  2. 	list-style:none;
  3. 	display: flex;
  4. 	flex-wrap:wrap;
  5. 	width:100%;
  6. 	margin:-5px 0 0 -5px;
  7. 	padding:0;
  8. }
  9. .shareList__item {
  10. 	height:28px;
  11. 	line-height:28px;
  12. 	margin:5px 0 0 5px;
  13. 	text-align:center;
  14. }
  15. .shareList__link {
  16. 	display:block;
  17. 	padding:0 10px;
  18. 	color:#ffffff;
  19. 	text-decoration: none;
  20. 	border-radius: 5px;
  21. }
  22. .shareList__link::before{
  23. 	font-size:14px;
  24. 	transition: ease-in-out .2s;
  25. 	border-radius: 5px;
  26. }
  27. .shareList__link::after{
  28. 	content:attr(title);
  29. 	font-size:12px;
  30. 	vertical-align: top;
  31. 	margin-left:5px;
  32. }
  33. .shareList__link:hover{opacity: 0.75;}
  34.  
  35. .shareList__link.icon-twitter{background:#55acee;}
  36.  
  37. .shareList__link.icon-facebook{background:#3B5998;}
  38.  
  39. .shareList__link.icon-google-plus{background:#dd4b39;}
  40.  
  41. .shareList__link.icon-hatebu{background:#008FDE;}
  42.  
  43. .shareList__link.icon-pocket{background:#EB4654;}
  44.  
  45. .shareList__link.icon-rss{background:#ff9900;}
  46.  
  47. .shareList__link.icon-feedly{background:#6cc655;}
  48.  
  49. .shareList__link.icon-pinterest{background:#cb2027;}
  50.  
  51. .shareList__link.icon-linkedin{background:#0e76a8;}
  52.  
  53. .shareList__link.icon-line{background:#1dcd00;}
  54.  

シェアボタンCSSデザインサンプル12

css
  1. .shareList {
  2. 	list-style:none;
  3. 	display: flex;
  4. 	flex-wrap:wrap;
  5. 	width:100%;
  6. 	margin:-5px 0 -3px -5px;
  7. 	padding:0;
  8. }
  9. .shareList__item {
  10. 	height:30px;
  11. 	line-height:30px;
  12. 	margin:5px 0 3px 5px;
  13. 	text-align:center;
  14. }
  15. .shareList__link {
  16. 	display:block;
  17. 	color:#ffffff;
  18. 	padding:0 10px;
  19. 	text-decoration: none;
  20. 	border-radius: 5px;
  21. }
  22. .shareList__link::before{
  23. 	font-size:14px;
  24. 	transition: ease-in-out .2s;
  25. 	border-radius: 5px;
  26. }
  27. .shareList__link::after{
  28. 	content:attr(title);
  29. 	font-size:12px;
  30. 	vertical-align: top;
  31. 	margin-left:5px;
  32. }
  33. .shareList__link:hover{opacity: 0.75;}
  34.  
  35. .shareList__link.icon-twitter{background:#55acee; border-bottom: solid 3px rgba(0,0,0,0.25);}
  36.  
  37. .shareList__link.icon-facebook{background:#3B5998; border-bottom: solid 3px rgba(0,0,0,0.25);}
  38.  
  39. .shareList__link.icon-google-plus{background:#dd4b39; border-bottom: solid 3px rgba(0,0,0,0.25);}
  40.  
  41. .shareList__link.icon-hatebu{background:#008FDE; border-bottom: solid 3px rgba(0,0,0,0.25);}
  42.  
  43. .shareList__link.icon-pocket{background:#EB4654; border-bottom: solid 3px rgba(0,0,0,0.25);}
  44.  
  45. .shareList__link.icon-rss{background:#ff9900; border-bottom: solid 3px rgba(0,0,0,0.25);}
  46.  
  47. .shareList__link.icon-feedly{background:#6cc655; border-bottom: solid 3px rgba(0,0,0,0.25);}
  48.  
  49. .shareList__link.icon-pinterest{background:#cb2027; border-bottom: solid 3px rgba(0,0,0,0.25);}
  50.  
  51. .shareList__link.icon-linkedin{background:#0e76a8; border-bottom: solid 3px rgba(0,0,0,0.25);}
  52.  
  53. .shareList__link.icon-line{background:#1dcd00; border-bottom: solid 3px rgba(0,0,0,0.25);}
  54.  
  55. .shareList__link:active {
  56. 	-ms-transform: translateY(3px);
  57. 	-webkit-transform: translateY(3px);
  58. 	transform: translateY(3px);
  59. 	border-bottom: none;
  60. }
  61.  

今より満足できるサイトを作りませんか？

無料とは思えない
LIONテーマイメージ画像

FITでは、誰もが良質なコンテンツをインターネット上に公開できるようにWordPress用無料テーマ「LION」を提供しています。

テーマの特徴

  • ・W3Cの規格に基づくマークアップでエラー無し
  • ・簡易お問い合わせ機能が標準で備わっている
  • ・関連記事表示機能が標準で備わっている
  • ・記事ランキング機能が標準で備わっている
  • ・必要十分な細かな内部SEO対策が施せる
  • ・OGPの設定もカスタマイズが可能
  • ・表示速度アップが期待されるAMPに対応

LIONテーマを使えば、SEO対策はもちろん、ユーザビリティに強化された美しいデザインのWEBサイトを作ることができます。
広告収益や売上に結びつけるためのマーケティング動線が強化されたLIONテーマを利用して、あなたのビジネスにお役立てください。

テーマの無料ダウンロードページへ

関連するおすすめ記事

kota naito

内藤 康太クリエイティブディレクター / フィット代表

2008年にWEBデザイナーとして独立し、フリーとして活動。その後、WEBディレクターとして一部上場企業とベンチャー企業で経験を積み、2016年から再びフリーのクリエイティブディレクターとして活動。 現在は、関東圏内で企業のWEBコンサルティング、WEB制作、コンテンツマーケティング支援、SEO対策を行っています。

WORKS

PRODUCTION RESULTS

すべての制作実績を見る

NEWS

すべてのニュースを見る

CONTACT

ご相談・お見積り無料

お気軽にお問い合わせください。

消費者が求めているものを理解し、価値あるコンテンツを届けることが、今ホームページには求められています。他社に無い、御社ならではの強みを生かしたWEB戦略を提案いたします。

メールアイコン
メールでお問い合わせをする

個人事業主/中小企業にこそ必要な「選ばれる理由のある」ホームページを提案します。

“We propose a website that will be chosen by consumers for SMEs.”