Loading…

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

SNSボタンカスタマイズ

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

このセッションは  IPv4  で確立しています

本日の人気記事BEST10

所要時間目安:3

This session is using  IPv4  is established in

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

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ボタンをクリックして拡散して頂けるようになりました。

 

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

 

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

41


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

関連記事

アドセンス新コード遅延読み込みモバイルでページスピード最高値

AdSense WordPress カスタマイズ 伝えたいこと 備忘録

AdSense(アドセンス)新コードの遅延読み込み2つの方法

Googleのサービスを利用されている方々は多いと思います。さまざまサービスがありますが、今回はグーグルアドセンス(Google AdSense)の新しいコードの遅延読み込みコードの2種類の方法につい…

もっと読む

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

フリー素材モデル茜さや

インターネット 伝えたいこと 備忘録

フリー素材モデルが誰なのか調べてみた…。

ここのところ(ここ数年)よく見かけるアイキャッチ画像があると思います。 そんなアイキャッチ画像や文章の途中に画像を表示したりして、読者にアクセントをつけて飽きさせない効果もあると言われる画像(フリー素…

もっと読む

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

マクロミルスキマ時間

インターネット スマホ 伝えたいこと 備忘録

空いてる時間を有効活用し、スキマ時間にお金を稼ぐそんな1つの方法

(アイキャッチ画像はマクロミルサイトのスクリーンショットです。) 私が13年前にとあるメーカーを退社したのと同時くらいに多くの正社員の募集人員があったマクロミルという会社があります。 現在では、インタ…

もっと読む

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

熱中症応急処置対処方法

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

熱中症の症状と予防方法。そして応急処置および対処方法

さて…。いつの間にか既に7月です。 まだ梅雨のはずなのに、大雨による被害が発生してしまっている地域や関東などは水不足の懸念などで10%の取水制限?節水制限とかが出ているようです。 そんな中、熱中症にな…

もっと読む

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


おすすめの記事一部広告

    Multiplex 広告

アクセスランキング

目次に戻る

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

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

目次に戻る

目次に戻る


コメントを閉じる

comment

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

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