サイドバー(右)を広げる為の覚書 - 蒼い凝り人の独り言

サイドバー(右)を広げる為の覚書

| コメント(0)
 試行錯誤の末、小粋空間さんの説明を読んで、サイドバーに230pxのブログパーツを入れることが出来ました。good
スタイルシートの内容を一部書き換えました。
 
/* 3カラムリキッド */
.layout-three-column-liquid #content {
    width: 100%;
    margin: 0 -230px;  /*←元の数値は-200*/
    height: 100%; /* for IE6 リサイズで中央カラムが右寄りになるのを防止 */
}
.layout-three-column-liquid .blog {
    margin: 0 230px;  /* ←元の数値は200 */
    padding: 18px 15px 10px;
    border-bottom: 1px solid #669;
    border-left: 1px solid #669;
    border-right: 1px solid #669;
    height: 100%; /* for IE6 */
}
html>body.layout-three-column-liquid .blog {
    padding: 10px 15px;
}
 
/* 3カラムリキッド(右サイドバー) */
.layout-three-column-liquid-right #content {
    width: 100%;
    margin-right: -385px;
    /* height: 100%; *//* for IE6 リサイズで中央カラムが右寄りになるのを防止 */
}
.layout-three-column-liquid-right .blog {
    margin-right: 385px;
    padding: 18px 15px 10px;
    border-bottom: 1px solid #669;
    border-right: 1px solid #669;
    height: 100%; /* for IE6 */
}
html>body.layout-three-column-liquid-right .blog {
    padding: 10px 15px;
}
 
/* 2カラムリキッド(右サイドバー) */
.layout-two-column-liquid-right #content {
    width: 100%;
    margin-right: -200px;
    /* height: 100%; *//* for IE6 リサイズで中央カラムが右寄りになるのを防止 */
}
.layout-two-column-liquid-right .blog {
    margin-right: 200px;
    padding: 18px 15px 10px;
    border-bottom: 1px solid #669;
    border-right: 1px solid #669;
    height: 100%; /* for IE6 */
}
html>body.layout-two-column-liquid-right .blog {
    padding: 10px 15px;
}
 
/* 2カラムリキッド(左サイドバー) */
.layout-two-column-liquid-left #content {
    width: 100%;
    margin-left: -200px;
    /* height: 100%; *//* for IE6 リサイズで中央カラムが右寄りになるのを防止 */
}
.layout-two-column-liquid-left .blog {
    margin-left: 200px;
    padding: 18px 15px 10px;
    border-bottom: 1px solid #669;
    border-left: 1px solid #669;
    height: 100%; /* for IE6 */
}
html>body.layout-two-column-liquid-left .blog {
    padding: 10px 15px;
}
 
/* for IE7 */
*:first-child+html .layout-three-column-liquid-right .blog,
*:first-child+html .layout-three-column-liquid .blog,
*:first-child+html .layout-two-column-liquid-right .blog,
*:first-child+html .layout-two-column-liquid-left .blog {
    padding-top: 18px;
}
 
/* リキッドレイアウト・サイドバー */
.layout-three-column-liquid #links-left-box {
    top: 15px;
    left: 0px;
    width: 200px;
}
.layout-three-column-liquid-right #links-left-box {
    top: 15px;
    right: 0px;
    width:200px;
}
.layout-three-column-liquid #links-right-box,
.layout-three-column-liquid-right #links-right-box,
.layout-two-column-liquid-right #links-right-box,
.layout-two-column-liquid-left #links-left-box {
    top: 15px;
    right: 0px;
    width: 230px;   /* ←ここがブログパーツの幅にあたる・・・*/
}

コメントする

月別 アーカイブ

ブログランキング・にほんブログ村へ
にほんブログ村
Yoshirou Ogino

バナーを作成
OpenID対応しています OpenIDについて
Powered by Movable Type 6.2.4

月送りカレンダー

スマートフォン対応3G携帯電話端末用『蒼い凝り人の独り言』はこちら

携帯(ガラケー)リンク

アイテム

  • 3530A251-D95F-4400-B05B-15CF02B9CA4B.jpeg
  • 4C6F87B9-BC36-4BA2-B4CB-A33DC0B7BE2B.jpeg
  • C79C6851-CAA4-4A66-8952-CB85C72E903E.jpeg
  • C6DF0AD6-7653-4BC0-8196-897F06D6A842.jpeg
  • E244FB84-3948-4F14-87BC-AFCFDC1744D3.jpeg
  • 40DEDAD7-585C-41F1-9BB2-591410A7D946.jpeg
  • 18596CEB-C258-4270-B6DD-6C110C647C33.jpeg
  • 2165F646-D3D7-47AF-9218-82997EEAA7B9.jpeg
  • AACF4CFA-25AA-4C0C-844B-4B9982B95B4B.jpeg
  • 1BCFE5FD-E1EA-4DA0-9D06-4F2E45E711B8.jpeg

この記事について

このページは、yoshirouが2014年1月26日 11:25に書いた記事です。

ひとつ前の記事は「blogレイアウト」です。

次の記事は「風の音」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。

ランキング