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

mineoおすすめ契約方法

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

2013.07.30 | カテゴリ:ブログ記事録

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

設置するものはスクロールしても固定式でついてくるボックス、その中にソーシャルボタンを設定したいと思います。当然ですが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ブログ 背景不具合 原因判明
祝ブログ二周年
ブログに最適な文字数は? 文字数チェックにオススメな「numMojiなんもじ」を紹介
Amazonアソシエイトで口座情報間違い→再支払いまでの日数
FCブログ 表示不具合

関連タグ:

 ☑FC2  ☑カスタマイズ  ☑ブログ

Fire7hklk.png   Fire7HD8300x250.jpg  

この記事へコメントする・コメントを見る (0)

今日の人気ページ

fire600.jpg

新着記事

全裸待機禁止Tシャツ企画進行中!? NifMoのTwitterが面白い [08月20日]
iPhoneのバッテリー診断アプリ「Battery Doc」と「Battery Care」 を紹介!AppStoreから削除される前に入手を [08月19日]
iPhoneのバッテリー診断アプリの決定版 「Battery Life」【悲報 再削除】 [08月18日]
Googleが警告を出すので早期のFC2ブログのSSL化を求む [08月18日]
セブンスター仕様1935レプリカZippoが当たるQRコードキャンペーンに挑戦[2017年8月1日-10月31日] [08月15日]
JTが電気加熱型たばこ『Ploom TECH』の抽選販売受付を開始【ラスト第6回目】 [08月11日]

mineo紹介キャンペーン
最新記事
2016年人気記事ランキング
Apple公式のiPhoneのバッテリー診断方法 [2017年最新版] dsgre.jpg
iPhoneのバッテリー診断アプリの決定版 「Battery Life」 rank20160605 (3)
iPhoneのホーム画面のアイコンの位置を自由に変更する裏ワザthdth.jpg
クリックポストの配達日数を実際に体験した日数と目安の調べ方を紹介rank20160605 (10)
iPhoneのバッテリーの劣化を調べるiOSアプリ 「coconutBattery」hjkh.jpg
PHILIPS(フィリップス) ソニックケアーを修理に出す60409121432820.jpg
FREETEL Simple2はまさかの3種類展開と1年間無料キャンペーン開始FREETE.jpg
iPhoneのバッテリー診断アプリ「Battery Doc」と「Battery Care」を紹介dndeth.jpg
あのiPhoneのバッテリー診断アプリ「coconutbattery」がAppStoreに復活!→【再削除】→iOS10でアプリも起動せずhjkh.jpg
ドコモ「Xiパケ・ホーダイ for iPhone」を解約(廃止)rank20160605 (6)
Amazonのタブレット Kindle Fire HDで自炊漫画を読むblog-entry-1037.jpg
iPhone最強の広告ブロックアプリ 「AdBlock」 がiOS10で復活yfyfghjv.png
docomo契約SIMカードは差し替え注意201620.jpg
メルカリ 返金までの流れを実体験 その5 「返金(取引キャンセル)編」23131.jpg
ドコモ Xiパケ・ホーダイ for iPhoneを解約(廃止)の注意点201615.jpg
mineo紹介キャンペーンの甘い罠→【再延長】2017年1月31日まで→【仕様変更】一部条件で特典がEJOICAセレクトギフトに201616.jpg
ドコモのパケットサービスを解約しようとするが問題発生201617.jpg
iPhoneバッテリー診断アプリの信憑性gufddcrt.jpg
メルカリ 返金までの流れを実体験 その1 「商品破損編」rank20160605 (9)
docomo iPhone契約SIMをガラケーに挿す201613.jpg
記事を探す
サイト内検索
  • iPhone/全般(50)
  • iPhone/アプリ(53)
  • iPhone/アイテム(39)
  • MVNO(54)
  • MVNO/mineo(124)
  • MVNO/NifMo(19)
  • MVNO/0SIM(10)
  • FREETEL/Simple/Simple2(43)
  • タブレット(29)
  • ケータイ/スマホ雑記(29)
  • ケータイ/スマホNEWS(233)
  • NM705i/6120c(2)
  • 705NK/N73(94)
  • Nokia E51(42)
  • 雑記(95)
  • ブログ記事録(105)
  • ブログ/アクセス数公開(30)
  • ブログ/カスタマイズ(34)
  • プリペイド/プリモバイル(13)
  • デジカメ(4)
  • LINE(14)
  • IQOS/PloomTECH/Zippo(23)
  • アンケート(3)
  • MVNO2台持ち用 通話専用機種(30)
  • NOKIA その他(3)

  • 月別一覧を開く

    関連ワード一覧を開く

    全記事一覧表示
    Author
    ペンギンのアイコン素材管理人:705んk
    @musiatui | Twitter

    iNoWBh.png

    管理人利用中アイテム