おすすめ記事ピックアップ
↑
バイラルメディアっぽい大きめのSNSボタン(Twitter、Facebook)を探したのですが、見つからず自分で作ってみました。URLの指定と、つぶやきに載せたいテキストも即席で設定できます。div classをspamで指定しています。スマホでも回りこむように作ってあります。
結構使い勝手が良かったので共有します。ご自由にお使いください。使う時は、Twitter等で呟いてもらえると嬉しいですね。bloggerで使えますよ!
記事内に記述するHTML
<a href="http://twitter.com/intent/tweet?text=「つぶやき表示テキスト入力」;url=「ここにURLを入力」"><span class="twitterbutton"> Twitterでシェア </span></a> <a href="「ここにURLを入力」"><span class="facebookbutton">FaceBookでシェア</span></a>
CSSに追加するCSSコード
/*TWITTERカスタマイズCSS*/ .twitterbutton { color: #FFFFFF; width: 100%; padding: 10px 10px 10px 10px; margin: 30px 10px 10px -10px; float: none; clear: both; font-size: 20px; height: auto; text-transform: uppercase; font-weight: normal; background: #99AEFF; cursor: pointer; line-height: 3em; } .twitterbutton a{ color: #FFFFFF; } .twitterbutton:hover{ background: #566291; } /*FACEBBOKカスタマイズCSS*/ .facebookbutton { color: #FFFFFF; width: 100%; padding: 10px 10px 10px 10px; margin: 10px 10px 30px -10px; float: none; clear: both; font-size: 20px; height: auto; text-transform: uppercase; font-weight: normal; background: #41E700; cursor: pointer; } .facebookbutton a{ color: #FFFFFF; } .facebookbutton:hover{ background: #2C9C00; }
CSSに無駄が多そうなので、誰かもっと正しくしてください。