赤ライン.png

インラインCSSで、
タイトル下にSNSボタンを配置してみよう!


SNSボタンは、Seesaaブログから提供されているものを表示することができますが、記事ページのずうーーっと下の方に表示されるので、効果はどーなんだろ?って感じてました。

「ZENBACK」を利用されている方も多いと思います。
表示させる位置ですが、やはり記事下が多いのではないでしょうか。
 
 

リストを横並びにする方法が一般的なようですが…


ネット検索してみると、リストを使って横並びに配置する方法が紹介されています。
>>ホームページ作成 - リストを横に並べる
>>SNSボタン(twitter/facebook/はてブ/google+)を横一列に並べる方法 - ~旅とアート~

当ブログでは、SEOテンプレートのKAETEN-X(カエテンクロス)を使用しています。このテンプレートとの相性なのか、うまく表示することができませんでした。

そこで、HTMLインラインCSSにトライ!

CSSレイアウトで段組構成し、横一列に配置してみました!


「floatプロパティ」で段組、回り込み表示で横一列に!


<p>
<div style="margin:10px 0px;">
<div style="float:left;margin-right:30px;"><はてブボタンのコード></div>
<div style="float:left;width:130px;"><ツイートボタンのコード></div>
<div style="float:left;width:90px;"><google+1ボタンのコード></div>
<div style="float:left;width:150px;"><facebookいいねボタンのコード></div>
<br style="clear:both;" /></div>
</p>
※上のコード例では改行を入れて見やすくしていますが、改行コードが入ってしまうと横に並ばず縦並びになってしまいます。
※各ボタンブロックのマージン(margin)や幅(width)は任意


  • ポイントは「floatプロパティ

各ブロックに「float:left;」を指定することにより、
ブロックを左に寄せて、次のブロックを右側に回り込ませ、
全体を一列に配置します。



各SNSボタンのコード入手


  • はてなブックマークボタン
>>はてなブックマークボタンの作成・設置について
>>seesaaブログで新しいはてなブックマークボタンを設置する方法 | 駄文と書評

  • ツイートボタン
>>Twitter / Twitterボタン

  • google +1ボタン
>>+1 Button - Google+ Platform — Google Developers

  • facebookいいね!ボタン
>>Like Button - Facebook開発者


最後にまとめ


今回の記事では、CSS「floatプロパティ」の使い方を覚えました。

floatプロパティを活用することにより、ブロックを好きなように段組レイアウトすることができるのではないでしょうか。

今後は、記事レイアウトで上手く活用してみたいと思います。

↓こちらのサイトを参考にさせていただきました。
>>float段組の基本|floatレイアウトホームページ作成講座
情報提供ありがとうございます。

↓CSSレイアウトについて詳しく書かれています。
>>CSSでレイアウトするなら絶対覚えておきたいブロックレベル要素のクセとかいろいろ

最後までご覧いただきましてありがとうございます。

このエントリーをはてなブックマークに追加



SEOテンプレートのKAETEN-X(カエテンクロス)の紹介


  • カエテンクロスの特徴

 ・ブログ訪問者を第一に考えた「ユーザビリティ」対策
 ・検索エンジン好みのブログが作れる「SEO」対策
 ・ブログ各箇所に「インフォメーションスペース」を設置
 ・専用ソースに変更するだけ「簡単&スピーディ」設置
 ・デザイン画像は未使用「CSS3」デザインで軽量化


  • 5つの無料ブログに対応

 ・FC2ブログ
 ・Seesaa(シーサー)ブログ
 ・さくらブログ
 ・Livedoor(ライブドア)ブログ
 ・JUGEM(ジュゲム)ブログ

kx-1.0_seesaa_img_infobiz_2カラム右サイド-オレンジ_.pngkx-1.0_seesaa_img_infobiz_2カラム右サイド-グリーン_.pngkx-1.0_seesaa_img_infobiz_2カラム右サイド-パープル_.pngkx-1.0_seesaa_img_infobiz_2カラム右サイド-ピンク_.pngkx-1.0_seesaa_img_infobiz_2カラム右サイド-ブラック_.pngkx-1.0_seesaa_img_infobiz_2カラム右サイド-ブルー_.pngkx-1.0_seesaa_img_infobiz_2カラム右サイド-レッド_.png
SEOに強い無料ブログテンプレート カエテンクロスSEOテンプレート
スポンサード・リンク