SNSからのアクセスを増やす!CSSでフォローボタン周りを美しくする方法

記事下に表示しているFacebookページやtwitterフォローの導線部分がダサくてどうしようもなかったので、レイアウトを整えてかっこよくしてみました。その際に実践した方法を紹介していきます。

改善前のSNSフォロー呼びかけ部分

これがBefore。
SNSシェアボタンやLike boxをかっこ良くカスタマイズしてシェアを増やす
クソダサい。というか汚い。そして、facebookのlike box下になぜか重複してfacebookページリンクがある。我ながら恥ずかしい。
これをきれいにしていきます。

スポンサーリンク

SNSフォロー呼びかけ部分改善の流れ

下記の流れで作業を進めていきます。

・Like boxとSNSボタンをブロックに分ける
・Like boxのレイアウトを変える
・全体を吹き出しで囲む

これだけです。
では、1つずつ説明していきます。

スポンサーリンク

Like boxとSNSボタンをブロックに分ける

まず、Like Boxを色を使ってブロックにします。divでLike boxを囲ってあげましょう。

<div id="like_box_top">
<!-- Like boxのコード -->
</div><!-- like_box_top END -->

そして、以下のCSSを効かせる。

#like_box_top {
    background-color: #ececec;
    padding: 20px; /*  ブログに会わせて変化させる */
    text-align: center;
    width: 576px; /*  ブログに会わせて変化させる */
    margin-left: 20px; /*  ブログに会わせて変化させる */
}

次に、twitter, Feedly, Google+のボタンをブロック化する。
もともと、tableにしていたので、以下のように変更する。

<table cellspacing="20"> <!-- cellspacingはブログによって変化させる -->
  <tr>
    <td class="sns_share"><a href="リンク" target="_blank" title="ブログで稼ぎたいと思っている方はTwitterでらふらく^^さんをフォローしましょう"><imgタグ></a><br>Twitter</td>
    <td class="sns_share"><a href="リンク" target="_blank" title="Feeldyでらふらく^^をフォロー"><imgタグ></a><br>Feedly</li></td>
    <td class="sns_share"><a href="リンク" target="_blank" title="Follow ブログで生活したい人に向けた情報源らふらく^^'s public updates"><imgタグ></a><br>Google+</li></td>
</tr>
</table>

tableにcellspacingを指定してtdの隙間を調整し、tdにsns_shareというclassを追加して以下のCSSを効かせます。

td.sns_share {
	padding: 10px 50px;
	font-size: 14px;
	line-height: 25px;
	background-color: #ececec;
	margin: 20px;
	border:none;
}

これでブロック分けは終了。

Like boxのレイアウトを変える

これも簡単で、まずはこちらのサイトからLike boxを作り直します。FacebookページのURL、width(横幅)とheight(縦幅)を入力します。
ここまでは、通常通り。

しかし、ここからが重要。

「Show Header」と「Show Border」のチェックを外しましょう
SNSシェアボタンやLike boxをかっこ良くカスタマイズしてシェアを増やす

これは好みなんですが、枠で囲んでいると(Show Border)、かっこ良くないですし、facebookもチェック(Show Header)の文字が入っているとレイアウトを壊すようでイヤなのです。ですので、私はチェックを入れないようにしました。

この状態でコードを生成し、

<div id="like_box_top">

で囲った中に貼付けます。
すると、こんな感じになります。
SNSシェアボタンやLike boxをかっこ良くカスタマイズしてシェアを増やす
いい感じですよね!

これでLike box作業も終了。
あとは吹き出しを作る作業のみ。あと少し!がんばりましょう!

全体を吹き出しで囲む

吹き出しはすぐできます。
イケてる吹き出しの作り方で紹介したジェネレーターを使います。
利用方法は記事を参考にしてください。
ジェネレーターで生成されるCSSをコピーして、style.cssに貼付けます。
かっこいい吹き出しをcssで作成する方法

.arrow_box {
	position: relative;
	background: #ffffff;
	border: 3px solid #000000;
	margin: 18px 0 12px 0;
}
.arrow_box:after, .arrow_box:before {
	bottom: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.arrow_box:after {
	border-color: rgba(255, 255, 255, 0);
	border-bottom-color: #ffffff;
	border-width: 20px;
	margin-left: -20px;
}
.arrow_box:before {
	border-color: rgba(0, 0, 0, 0);
	border-bottom-color: #000000;
	border-width: 26px;
	margin-left: -26px;
}

あとは、Like boxとSNSシェアボタンを生成しているtableをdivで囲ってarrow_boxというclassをつけてあげればOKです。

<div class="arrow_box">
<!-- Like Boxのコード -->
<!-- SNSフォロー呼びかけボタンのコード -->
</div>

これまでの作業により完成したのがこちら。
SNSシェアボタンやLike boxをかっこ良くカスタマイズしてシェアを増やす
はい。相当よくなりました。
Beforeと比べてみてください。全然違いますね!
シェアしたくなったでしょ?w

これにて作業は全て完了です。

まとめ

・SNSでファンを増やすにはシェアしてもらう導線部分をかっこよくしなきゃいけない
・そのためには、色分けしてブロックで区切る
・FacebookのLike boxはデフォルトではなく、線を消すとCool
・CSSで吹き出しも簡単に作れるのでぜひ利用しよう

今回作成したSNSシェア導線部分はもうちょっとスクロールさせたら見えますので、ぜひご確認ください。

そしてフォローボタンをポチってみてください!
それでは。

CSSを勉強したいなら

いつもシェア感謝です!今回もぜひ

※ 微妙だったら、そっと閉じるか、ほかの記事を見ていただけるとうれしいです!

SNSでも自分の得意なことで収入を得る方法を発信しています。フォローすれば更新をチェックできますので、ぜひフォローを。
仕事依頼などのお問い合わせは「iwgp545@yahoo.co.jp」か、「TwitterのDM」、「Facebookのメッセージ」からお願いします。