2014年11月10日

seesaaブログ サイドバーのパーツをフローティングさせる。

ソーシャルボタンをフローティング(固定位置)表示させていたのですが、右下は結構邪魔な感じだったのと画面サイズで左右に位置がふらふらするので、
ボタン数を減らしてサイドバーに内に入れてフローティング表示させるようにしてみました。
ちょっと手間取りましたが、割と簡単なのでメモ。
フローティングさせたいコンテンツにdivタグつけてCSSでポジション指定してあげるだけです。

フローティングさせたいコンテンツを
<div id="floating-sideA">
〜〜〜
〜〜〜
</div>
こんな感じで囲います。

CSSに下記追加
/* サイドフローティング */
#floating-sideA {
margin: 4px;
background-color:#397AC4;
position: fixed;
bottom: 10px;
}

CSSは デザイン> PC> デザイン設定 から、使用デザインの名前をクリックで編集画面が出ます。
background-colorは指定してあげないと透明なので見づらいかと思います。
bottom: 10px; ここの数値を変える事で上下に表示位置変えられます。
margin: は、いらないかもしれません。

使ってるソーシャルボタンは、忍者おまとめボタンです。


posted by みきの at 20:36 | Comment(0) | TrackBack(0) | パソコン・インターネット | このブログの読者になる | 更新情報をチェックする