U-BOX/うさぎの小箱

FC2ブログのテンプレートを配布しています

  1. スポンサー広告
  2. [ edit ]

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。


  1. -
  2. tb: 0
  3. cm: 2
  4. [ edit ]

カラムの幅とライン

ブログの横幅など、16sorahane を例に説明します。 → (参考ページ)


テンプレートの設定 > U-BOXv16sorahane-sam のスタイルシート編集
 > 以下の3箇所が、ブログ幅、各カラム幅、を、緑箇所が左右のラインを指定します。

左右のラインは 1px → 0px で非表示になります。

1out・・・ブログ幅
4side,5side2・・・左右のサイドバー幅
2main・・・3con(中央カラム)+5side2(右サイドバー)
 → 1 = 4 + 2 ・・・ この数式を保持すれば1~5の数値は自由に設定できます。
これは固定幅になっていますが、%で設定すればブラウザの幅に応じて変化するものにできます。
*(例)
 1・・・90% → ブラウザ幅の90%
 2、4 → 1を100%として算出
 3、5 → 2を100%として算出
注・1、2は100%で計算するとマージン、パディング、ボーダーの幅による誤差のため入らないことがあります。
 → ブラウザの最小幅を想定した誤差分の%を加算して100%にします。
 → このとき、想定した最小幅(例・1024px)より狭いブラウザの時はブログ幅が固定されるように、1に下記を追記します
 
1,
width: 90%;
min-width: 920px;
2.
width: 76%;
3,
width: 63%;
4,
width: 23%;
5,
width: 34%;

----------------------------------------------------------



/* ================レイアウト設定=============== */
/* out{ main(con + side2[right(p2,3)]) + side[left(p1)] } */

#out {
width: 950px; → 1
margin: 0 auto;
pading: 0;
border-right: 1px solid #ddd;
border-left: 1px solid #ddd;

}



/* 記事,menu表示部分------(side+con) */
#main {
float: right;
width: 735px; → 2
margin: 0;
padding: 0;
}



/* -左サイドバー-------------*/
/* 記事表示部分 */
#con {
background-color: #eee;
float: left;
width: 500px; → 3
margin: 0;
padding: 0 0 2em;
word-break: break-all;
border: 10px solid #eee;
}
#side {
float: left;
width: 215px; → 4
padding: 0;
}

/* -右サイドバー--------------- */
#side2 {
float: right;
width: 215px; → 5
padding: 0;
/*display: none;*/
}



----------------------------------------------------------

関連記事
スポンサーサイト


  1. 2014.05.31 (土) 19:08
  2. [ edit ]

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
  1. 2014.06.01 (日) 02:50
  2. URL
  3. usagi
  4. [ edit ]

Re: オーバーレイに広告削除

共有登録PCテンプレートには < %ad_overlay > のタグは含まれていません。
(このタグはスマートフォンテンプレート専用のものです)
16sorahaneはPCテンプレートですから、該当タグはありません。

 管理者にだけ表示を許可する
 

trackback


プロフィール

usagi

Author:usagi
FC2ブログへようこそ!

information

2015.2.8_23:12
管理人のみ閲覧のコメントを下さるみなさまへ

管理ページを見ることを忘れがちな管理人は 返事が遅れがちになることが多いため、ご注意下さい。

お急ぎの返信が必要なかたはカギなしでお願いします。
また、URL を記載していただくと、たすかります。

カレンダー

03 | 2017/04 | 05
- - - - - - 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 - - - - - -

ユーザータグ

* 



上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。