サイドバーの絶対配置の left について | リアナのカスタマイズ日記(CSS編集用デザイン)

リアナのカスタマイズ日記(CSS編集用デザイン)

アメブロ 新CSS CSS編集用デザイン 無料
カスタマイズ アメブロカスタマイズ 初心者
CSS スタイルシート デザイン
javascript jQuery

★ サイドバーの絶対配置の left について

● 現象

① 現在、既に選択しているスキン(デザイン)は問題ないですが、
新しくCSS編集用デザインを選択した場合、サイドバーの絶対配置
する場合に left 指定がうまく行かなくなったので、 right
使用するしかありません。
(新しくCSS編集用デザインを選択した場合は、カラムを変えた場合も同じ)

尚、カラムに関係なくどのカラムでも同じ現象です。



② skinSubA に left:auto !important がどこかのアメブロのスクリプトで
付加されるためと考えられますが、どのスクリプトか不明です。
(調査に時間がかかるため、どこかは現在不明)


▲ 覚書

下記の様なスクリプトが発行されていると推測されます。(jQueryの場合の例)
$(".skinSubA").css("cssText","left:auto!important");

ローカル(HTML部分をPCに持ってきて行う)で行うとこの現象は発生しない。




③ FireFoxのFireBugで見ると下記のようにHTML部分がなっています。


リアナのカスタマイズ日記(CSS編集用デザイン)








● 対応方法

① left ではなく right を使う。

② 下記の素材屋さん風改造の記事を変更
http://ameblo.jp/new-blue-777/entry-10971561482.html



▲ 変更前

/* ------------------------------------------------------- */
/* サイドバー(右)                    */
/* ------------------------------------------------------- */
.skinSubA {
position:absolute;/* 絶対配置 */
left:980px;/* 左からの位置 */
top:0px;/* 上からの位置 */
width:350px !important;/* 幅 */
background-color:#ffffff;/* 背景色 */
height:480px;/* 高さ */
overflow:auto;/* スクロール */
z-index:100;
}


▲ 変更後

/* ------------------------------------------------------- */
/* サイドバー(右)                    */
/* ------------------------------------------------------- */
.skinSubA {
position:absolute;/* 絶対配置 */
right:-100px;/* 右からの位置 */
top:0px;/* 上からの位置 */
width:350px !important;/* 幅 */
background-color:#ffffff;/* 背景色 */
height:480px;/* 高さ */
overflow:auto;/* スクロール */
z-index:100;
}