Loading…

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

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

本日の人気記事BEST10

所要時間目安:3


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

SNSボタンカスタマイズ

今はインターネットにおいて欠かすことの出来ないツールとなっている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ボタンをクリックして拡散して頂けるようになりました。

 

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

 

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

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


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

おすすめの記事一部広告

関連記事

塩水洗浄ダイエット(ソルトダイエット)

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

塩水洗浄ダイエットは効果なんかより危険なので医師が警告

女性なら誰しも一度は考えたことがあるダイエットかと思われます。 しかし、最近流行っている?流行ってい…

もっと読む

HDDが壊れそうか否か健康状態確認

PC 伝えたいこと 備忘録

CrystalDiscinfoでHDDが壊れそうかどうか確認方法と対処方法

以前と言っても先月末くらいからパソコンから異音が出始めました。 異音の種類によってもどこら壊れそうな…

もっと読む

大山式ボディメイクパット趾

STINGER PLUS+ Stinger6 Stinger7 WordPress カスタマイズ テーマ 備忘録

WordPress自分のショートコード備忘録

現在の自分が使用しているテーマでの、 ショートコードを用いてテンプレートからショートコードを用いて任…

もっと読む

記事上に人気記事表示

Stinger6 WordPress カスタマイズ

アイキャッチ画像設定し忘れプラグインなし自動設定方法Stinger6

WordPressを使用すると、 アイキャッチ画像の設定が簡単に可能になります。 中でも人気のテーマ…

もっと読む

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

おすすめ!!

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

おすすめ2

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

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



この記事が良かったら
いいね!お願いします(#^.^#)

WordPressデビュー津々浦々の
最新情報をお届けします

言えないことはTwitterで!!



目次に戻る


コメントを閉じる

comment

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください