ヒビコレ

iPhone使いの携帯・スマホ関連の雑記ブログ

2717930.jpg

FC2ブログ スクロールしても付いてくるコンテンツ設置

ブログ』カテゴリの関連記事

スポンサードリンク

サイトにソーシャルリンクボタンを追加しようと設定してみました。アクセス数の多いブログは総じてこの辺の足回りがしっかりと設定してあります。当ブログでも記事下にソーシャルリンクボタンを数個設置していますが、さらにマークしてもらえるように今回設定します。

設置するものはスクロールしても固定式でついてくるボックス、その中にソーシャルボタンを設定したいと思います。当然ですがHTMLを弄る前は、間違えた時用にテンプレートの複製を作っておきましょう。

[参考サイト]
⇒スクロールしてもついてくる!ブログにソーシャルボックスをつけよう。|ウェビメモ

まずはHTMLに下記を設置。設置箇所は<!--topentry-->の中に設置してみました。

 <li>お好きなソーシャルボタンのコード</li> の中の、お好きなソーシャルボタンのコードの所に設置したいソーシャルボタンのリンクを上記に入れてください。今回は何も入れずに設置だけします。

HTML

<div id="wrap">
<ul id="social_box">
<li>お好きなソーシャルボタンのコード</li>
<li>お好きなソーシャルボタンのコード</li>
<li>お好きなソーシャルボタンのコード</li>
</ul> <div id="main"></div>
<div id="side"></div>
</div>


次にスタイルシートに下記を設置。設置箇所はどこでもいいと思います。私は一番下に設置。

CSS

#wrap{
width:960px;
margin:10px auto;
}

#social_box{
background:#fff;
width:60px;
padding:15px;
margin-left:-100px;
text-align:center;
position:fixed;
bottom:30px;
list-style-type:none;
}

#main{
width:660px;
float:left;
}

#side{
width:300px;
float:left;
}


上記設定で下記のように左側にスクロールしてもついてくるボックスが出現。

スクロール (1)

応用でアフィリンクも貼れるかもしれない。私はそのたぐいがウザいのでやりませんが。これで取り敢えず第一段階完了。後はソーシャルリンクの設定ですが、後日やります。

【追記】
Chromeではうまく表示されていますが、IEですと下記の様に設置箇所がおかしくなってます。

スクロール1 (1)

なので一旦表示を消します。

 ブログ

FC2カスタマイズブログ

スポンサードリンク

今日の人気ページ

Fireタブレットが4,000円OFF-

0 Comments

コメント *クリック