現在の接続環境は
です

記事内にプロモーションが含まれています。

プロモーションを含みます

AFFINGER4Pro SNS STINGER PLUS+ Stinger6 Stinger7 WordPress インターネット カスタマイズ 伝えたいこと 備忘録

SNSボタンカスタマイズ

SNSボタンCSSカスタマイズでクリック率上げて拡散してもらう方法

所要時間目安:3

This session is using  IPv4  is established in

この記事は2017年1月13日のものです。現在は状況が異なる可能性がありますのでご注意ください。

目次に行く・戻る

2025年4月4日 (金曜日)↓における週間月間人気記事トップ3は?↓

  • 本日
  • 週間
  • 月間
  1. フリー素材モデル茜さや

    つまらない…。人生とは?人間とは?生きるとは?健康とは?病気とは? 1PV

    つまらない…。そんなふうに思ったり考えたりしてしまうことは誰にでもあると思います。そんな中どうやって生きていけばよいのか。どうやって対応していけばよいのか。様々なことを考えさせられます。それが人生なの…

    もっと読む

  2. 参議院議員選挙自民党広告

    そうだ!選挙に行こう!!今回は18才以上の選挙権初の参院選です。 1PV

    (アイキャッチ画像は今回の参議院議員選挙のインターネット広告のスクリーンショットです。) いよいよ、明日7月10日は参議院議員選挙の投票日です。 投票日でもあり開票日でもあります。(投開票日) (今更…

    もっと読む

  3. Windows10無償アップグレード後もアップグレードが可能でする方法

    Windows10無償アップグレード期間過ぎてもアップグレード方法(今のところ可能) 1PV

    以前に、Windows10の無償アップグレード期間が昨年2015年7月29日にWindows10がリリースされてから、 1年間は無償アップグレード期間となっていました。 実際に、 その通りに終了した模…

    もっと読む

  1. エンジンスターターリモコン

    カーメイトのエンジンスターターでエラー15表示と対処方法 26PV

    夏冬に特に重宝するのが、エンジンスターターです。 メーカーはCARMATEやCOMTECユピテルなど各社ありますが、一番のオススメはリモコンから多くの情報を得ることができるカーメイト製品です。 なぜか…

    もっと読む

  2. アイドリングストップシステム異常警告灯表示対処方法 26PV

    2010年前後以降の車に搭載されていることの多いアイドリングストップシステム。各自動車メーカーによって呼び名は異なりますが、機能としては信号待ちが長い時や停止時間が長い時などに勝手に(自動的に)アイド…

    もっと読む

  3. エクストレイルT32運転席側バイザーメッキモール剥がれ修復方法とオススメ両面テープ 23PV

    車の購入後、乗ろうが乗らまいが経年劣化というものは付きものなのですが、特にプラスチック部分や両面テープ部分などは経年劣化がどうしても起きてきてしまいます。 そんな車でも長めにお気に入りの愛車となれば長…

    もっと読む

  1. アイドリングストップシステム異常警告灯表示対処方法 14PV

    2010年前後以降の車に搭載されていることの多いアイドリングストップシステム。各自動車メーカーによって呼び名は異なりますが、機能としては信号待ちが長い時や停止時間が長い時などに勝手に(自動的に)アイド…

    もっと読む

  2. エクストレイルT32運転席側バイザーメッキモール剥がれ修復方法とオススメ両面テープ 13PV

    車の購入後、乗ろうが乗らまいが経年劣化というものは付きものなのですが、特にプラスチック部分や両面テープ部分などは経年劣化がどうしても起きてきてしまいます。 そんな車でも長めにお気に入りの愛車となれば長…

    もっと読む

  3. エンジンスターターリモコン

    カーメイトのエンジンスターターでエラー15表示と対処方法 10PV

    夏冬に特に重宝するのが、エンジンスターターです。 メーカーはCARMATEやCOMTECユピテルなど各社ありますが、一番のオススメはリモコンから多くの情報を得ることができるカーメイト製品です。 なぜか…

    もっと読む

今日は2025年4月4日です。

メルカリ招待コード:

今はインターネットにおいて欠かすことの出来ないツールとなっているSNSがあります。

そして、
そのSNSには拡散してもらう為のボタンがあります。

多くのブログやホームページなどのサイトでよく目にかけますね。

様々なデザインのSNSボタンがあります。

アドセンス336pxPC閲覧記事下表示1つ目コード

この記事を読む方へのオススメ


そこで、数ヶ月間(6ヶ月間)の検証で一番SNSボタンを押して頂いたCSSデザインを紹介(備忘録)としておきたいと思います。

検証してみたSNSボタンは以下8個です。

  • Twitterや
  • Feedlyや
  • Google+や
  • push7や
  • LINEや
  • はてブや
  • Facebookや
  • Pocket

です。

WordPressに場合には多くのテーマがあります。

その中でも今現在私はStinger6を使用させていただいています。

しばらくは、
SNSボタンはStinger7やStingerPLUS+風にさせて頂いていました。

ですが、
上記したように多くのデザインのSNSボタンがあります。
(クドイですね^^;))

そして、約半年間の検証をしてみたところ今回紹介するSNSボタンのCSSによるデザインが一番多くのクリックをして頂くことができました。

 

まずは、これまでのSNSボタンのデザインは以下のような感じでした。

SNSボタンカスタマイズ前

 

このSNSボタンを以下のCSSによってデザインを変更してみました。

 

/*--------------------------------
SNS
---------------------------------*/

.sns{
margin-bottom: 20px;
margin-top: 20px;
border-top: 1px dotted #ccc;
}

.sns p{
margin-top: 20px;
font-weight: bold;
}

.snstext{
font-size: 15px;
vertical-align: middle;
padding-left: 10px;
padding-right: 10px;
}

.sns ul {list-style:none;padding:0px;margin-left:15px;}
.sns li {width:31%;float:left;padding:5px;text-aligh:center;list-style:none;}


@media
only screen and (max-width : 900px){
.sns li {
width:45%;}

}
@media
only screen and (max-width : 413px){
.sns li {
width:45%;}

}


.sns li a {
font-size: 20px;
position: relative;
display: block;
padding: 10px;
color: #fff;
border-radius: 6px;
text-align: center;
text-decoration: none;
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
}
.sns li a:hover {
-webkit-transform: translate3d(0px, 5px, 1px);
-moz-transform: translate3d(0px, 5px, 1px);
transform: translate3d(0px, 5px, 1px);
box-shadow:none;
}

/* ツイッター */
.sns .twitter a {background:#00acee;box-shadow:0 5px 0 #0092ca;}
.sns .twitter a:hover {
background:#0092ca;
}

/* Facebook */
.sns .facebook a {
background:#3b5998;
box-shadow:0 5px 0 #2c4373;
}
.sns .facebook a:hover {
background:#2c4373;
}


/* グーグル */
.sns .googleplus a {
background: #dc4e41;
box-shadow: 0 5px 0 #d51e31;
}
.sns .googleplus a:hover {
background:#bb4237;
}


/* はてぶ */
.sns .hatebu a {
background:#00a5de;
box-shadow: 0 5px 0 #0081b8;
}

.sns .hatebu a:hover {
background: #008cbd;

}


/* LINE */
.sns .line a {
background:#25af00;
box-shadow:0 5px 0 #219900;
}
.sns .line a:hover {
background:#219900;
}

/* Pocket */
.sns .pocket a {
background:#f03e51;
box-shadow:0 5px 0 #c0392b;
}
.sns .pocket a:hover {
background:#c0392b;
}

/*push7*/
.sns .p7-b a {
background:#FFD700;
box-shadow:0 5px 0 #DAA520;
}
.sns .p7-b a:hover {
background:#DAA520;
}

/* feedly */
.sns .feedly a {
background:#87c040;
box-shadow:0 5px 0 #008000;
}
.sns .feedly a:hover {
background:#74a436;
}

 

このCSSによってどのように表示されるかは、以下のようになります。

SNSボタンカスタマイズ

変更したことによって、おおよそ2.8倍程度SNSボタンをクリックして拡散して頂けるようになりました。

 

なお、
検証結果はあくまでも私のサイト・ブログにおけるものでクリック率や拡散率を保証するものではありません。

 

参考にしていただけましたら幸いです。

Windows10サポート終了まで

【AmazonタイムセールSALE車&バイク】!


人気の商品が日替わりで登場。毎日お得なタイムセール「Amazonタイムセール全体」

出展:Amazonタイムセール

人気の商品が日替わりで登場。毎日お得なタイムセール

あなたにおすすめな関連記事

アイキャッチ画像女性

伝えたいこと 備忘録

アイキャッチ画像の設定は必要か?

ここ数年でよく見たり聞いたりする「アイキャッチ」という言葉があります。言葉通り、「目(目線・視線)をキャッチ(掴む)」という意味合いかと思われます。ですが、そのアイキャッチ画像って本当に必要なのか?時…

もっと読む

インフィード広告アドセンス

熊本城

伝えたいこと 備忘録 時事ネタ

熊本城石垣崩れるが復元可能ロンブー淳さんお手伝いしたいと。

昨日の熊本地震にて、 震度7という大きな揺れの地震で歴史的建造物であり3大名城(4大名城とも言われるが)である熊本城の石垣が壊れた・崩れてしまいました。熊本城の別名「銀杏城(ぎんなんじょう)」。ちなみ…

もっと読む

インフィード広告アドセンス

新型コロナワクチン予診票ジェネレータ

インターネット カスタマイズ ツール 伝えたいこと 備忘録 時事ネタ 治療

新型コロナワクチンの予診票ジェネレーター。これは便利!?

今月に入り急激に新型コロナウイルス感染症のPCR検査陽性者が急激に激減しました。そして、政府(国)は、ワクチンの摂取を推奨してはいます。ワクチンはファイザー社製かモデルナ製の2択でしたが、アストラゼネ…

もっと読む

インフィード広告アドセンス

brotherプリンター純正インク

PC 伝えたいこと 時事ネタ

brotherプリンターインクが新型コロナの影響で品薄状態に

新型コロナでの影響で工業製品にも品薄状態商品や入荷未定商品が・・・。 brotherプリンターのインクやbrotherプリンター自体が中国工場などにて製造を行っていたりした為(らしい。家電量販店の店員…

もっと読む

インフィード広告アドセンス

FTPツールWinSCPにてサーバー上の削除できないファイルやフォルダ削除方法

PC WordPress 伝えたいこと 備忘録 設定

サーバ上のファイルやフォルダ削除できない時に削除する方法

えーっ、(汗)。この度WordPressのバージョンアップ後にjetpackが連携できなくなってしまいまして…。 その詳細は次回にしますが、結果しっかりと連携できました。(#^.^#) そして、その連…

もっと読む

インフィード広告アドセンス

RSSフィード画像

STINGER PLUS+ Stinger6 Stinger7 WordPress カスタマイズ 伝えたいこと 備忘録

正式版!?検証中です。RSSにアイキャッチ画像を出力する方法Stinger6、Stinger7、StingerPLUS+

先程の記事にて、試してみたのですがBloggerのRSSフィードには・・・・・・。 やはり、アイキャッチ画像はひょうじされずそのまま「image」となっていました。 がーんガ━━(= ̄□ ̄=)━━ン!…

もっと読む

あなたが訪問してから

0 秒経過 🎉

AFFINGER4Pro, SNS, STINGER PLUS+, Stinger6, Stinger7, WordPress, インターネット, カスタマイズ, 伝えたいこと, 備忘録」の人気記事

入学入社まであと…入学入社祝いはどんなPresent(プレゼント)でどのように過ごされますか?

ホワイトデープレゼントは以下などの豊富なキャンペーン商品から選ぶと良いと思います。

おすすめ!!

世界中でNo.1のシャアを誇るAmazonでのお得なお買い物でお得をしよう!!ネット通販なので、もちろん24時間年中無休です。健康商品から食品、車カスタマイズ商品、大手家電メーカー商品やパソコンの自作サプライ商品、その他アマゾン・プライムでは映画やドラマなど多くの作品や番組を見ることができます。マスクなど衛生商品も今では必須アイテム。一番信用できて一番商品数の多いAmazonでの買い物が絶対にオススメ!!

おすすめ2

楽天による季節特集です。それぞれの季節ごとにお得なお買い物商品やお得な旅行商品、その他にもAmazon同様に国内最大の買い物ポータルサイトです。楽天をメインにお買い物されている方はポイントやSPUも貯まりさらにお得に!!楽天カードや宇佐美系列のガソリンスタンドでも楽天ポイントが今では貯まります。それらのポイントを貯めてお得にお買い物や旅行商品その他にもパソコンサプライや車カスタマイズ商品など楽天も充実しています。

ブログサービスが始まってから:


カウントダウンタイマー

おすすめの記事一部広告

お小遣い稼ぎにアンケート。

Multiplex 広告

Total585


アドセンス336pxPC閲覧記事下表示1つ目コード

目次に戻る

よろしかったらシェアよろしくお願いします。

-AFFINGER4Pro, SNS, STINGER PLUS+, Stinger6, Stinger7, WordPress, インターネット, カスタマイズ, 伝えたいこと, 備忘録

目次に戻る

目次に戻る


コメントを閉じる

comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です


This site uses Akismet to reduce spam. Learn how your comment data is processed.