この記事は2017年1月13日のものです。現在は状況が異なる可能性がありますのでご注意ください。
2024年10月29日 (火曜日)本日の人気記事トップ10
今日は2024年10月29日です。
目次に行く・戻る
メルカリ招待コード: 招待コードをコピー
今はインターネットにおいて欠かすことの出来ないツールとなっているSNSがあります。
そして、 そのSNSには拡散してもらう為のボタンがあります。
多くのブログやホームページなどのサイトでよく目にかけますね。
様々なデザインのSNSボタンがあります。
アドセンス336pxPC閲覧記事下表示1つ目コード
+これまでによく読まれている記事一覧クリックでOPEN+
150,737件の PV
106,741件の PV
75,752件の PV
67,240件の PV
44,824件の PV
40,747件の PV
38,216件の PV
37,259件の PV
36,629件の PV
33,450件の PV
そこで、数ヶ月間(6ヶ月間)の検証で一番SNSボタンを押して頂いたCSSデザインを紹介(備忘録)としておきたいと思います。 検証してみたSNSボタンは以下8個です。
Twitterや Feedlyや Google+や push7や LINEや はてブや Facebookや Pocket です。
WordPressに場合には多くのテーマがあります。
その中でも今現在私はStinger6を使用させていただいています。
しばらくは、 SNSボタンはStinger7やStingerPLUS+風にさせて頂いていました。
ですが、 上記したように多くのデザインのSNSボタンがあります。 (クドイですね^^;))
そして、約半年間の検証をしてみたところ今回紹介するSNSボタンのCSSによるデザインが一番多くのクリックをして頂くことができました。
まずは、これまでの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によってどのように表示されるかは、以下のようになります。
変更したことによって、おおよそ2.8倍程度SNSボタンをクリックして拡散して頂けるようになりました。
なお、 検証結果はあくまでも私のサイト・ブログにおけるものでクリック率や拡散率を保証するものではありません。
参考にしていただけましたら幸いです。
あなたにおすすめな関連記事 伝えたいこと 備忘録 時事ネタ
もう12月も中旬を過ぎてしまいました。あと2週間もすると2017年という新年を迎えます。 早いものですね・・・・・・。お正月には、おせち料理やお飾りなどいろいろと準備するものが意外と多くあります。そこ…
もっと読む
WordPress テーマ 伝えたいこと 備忘録
えーと…。 ここのところイメージ画像・アイキャッチ画像を丸くすることにこだわってしまっている私です…。 こんな感じで過去に3回もイメージ画像を丸くする方法を投稿しています。 関連記事のイメージ画像を丸…
もっと読む
PC ツール 伝えたいこと 備忘録 時事ネタ
昨日SearchConsole(旧ウェブマスターツール)にてサイトマップを確認するとサイトマップを送信する画面で「警告」という文字が表示されていました。何かいけないカスタマイズでもしたのか、それとも.…
もっと読む
伝えたいこと 備忘録
意外と知られていないのが、キッチンシンクからいつもと違う臭いや異臭や下水臭い強烈な匂いが出てくることがあります。いくらシンク内をカビキラーやキッチンハイターなどの塩素系漂白剤などできれいにしても・・・…
もっと読む
伝えたいこと 時事ネタ
まずはじめに投稿するか迷いましたが、当ブログにおいてはカテゴリーを時事ネタと伝えたいこととして投稿します。不快な方などがいましたら削除いたします。 2023年3月にイギリスのBBCにてドキュメンタリー…
もっと読む
伝えたいこと 備忘録 時事ネタ
具体的には、アマゾンが主力事業のネット通販で出店している小規模事業者に対して高額な手数料を請求したほか、事業者が他の競合サイトで安く販売した場合、アマゾンのサイトでは検索しづらくしたなどと指摘していま…
もっと読む
おすすめの記事一部広告 Total389
アドセンス336pxPC閲覧記事下表示1つ目コード
目次に戻る
-AFFINGER4Pro , SNS , STINGER PLUS+ , Stinger6 , Stinger7 , WordPress , インターネット , カスタマイズ , 伝えたいこと , 備忘録
目次に戻る
目次に戻る
Opt-out complete; your visits to this website will not be recorded by the Web Analytics tool. Note that if you clear your cookies, delete the opt-out cookie, or if you change computers or Web browsers, you will need to perform the opt-out procedure again.
You may choose to prevent this website from aggregating and analyzing the actions you take here. Doing so will protect your privacy, but will also prevent the owner from learning from your actions and creating a better experience for you and other users.
This opt out feature requires JavaScript.
The tracking opt-out feature requires cookies to be enabled.
comment