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. -
  2. tb: 0
  3. cm: 0
  4. [ edit ]

カレンダーの位置と表示

U-BOXのテンプレートには、3種類のカレンダーが表示できるものがあります。

1.ブログトップの横カレンダー
2.サイドバーのカレンダー(HTML内に記述されたもの、タイトルなし)
3.サイドバーのカレンダー(公式プラグインのカレンダー、プラグインタイトル「カレンダー」がつきます)

1.または 2.が表示されているとき 3.は非表示の設定が必要です。

 プラグインの設定 > 公式プラグイン追加 > カレンダー > 追加で表示され、
 プラグイン管理 > プラグインカテゴリ1~3 > 位置、移動により好みの位置に設定、
 表示、非表示もここで選択できます。

2.と3.はよくにていますが、多少ちがいがあります。
いずれもHTML内に記述されたものです。
3.を使用したいとき、あるいは、2.の表示位置を変えたいときは以下を参考にして下さい。

テンプレートの設定 > U-BOXv16sorahane-sam のHTML編集 >
1.2.の表示、非表示は style="display: none"を記入する、しないで処理できます。
2.はコピペによって位置を変更できます。

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


< h2><%introduction>< /h2>
< h1>< a href="<%url>"><%blog_name>< /a>< /h1>

1
< !--横カレンダーの設定-->
< ul class="yokocal" style="display: none">
< li>< a href="< %prev_month_link>">< %prev_year>_< %prev_month>< /a>< /li>
< li>&lt;&lt;< /li>
< !--calender2-->
< li>< %days>< /li>
< !--/calender2-->
< li>&lt;&lt;< /li>
< li>< a href="< %next_month_link>">< %next_year>_< %next_month>< /a>< /li>
< /ul>
< !--/横カレンダーの設定-->













< /div>< !-- body3// -->< !-- ■ -->
< !--/plugin_first-->

2
< !-- 以下のカレンダーを表示しないときはstyle="*"style="display: none"に置き換えて下さい。-->
< div class="body3" style="*">< !-- ■ -->
< !--========== calender ==========-->
< div id="cal2">
< table border="0" cellpadding="0" cellspacing="0" summary="Calendar" class="calender2">
< caption>
< a href="< %prev_month_link>" title="< %prev_year>-< %prev_month>">«< /a>



< td>< %calender_fri>< /td>
< td>< %calender_sat>< /td>
< /tr>
< !--/calender-->
< /table>
< /div>
< !--==========// calehder ==========-->
< /div>< !-- body3// -->< !-- ■ -->

< /div>< !-- side// -->

< !--/plugin-->



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






NEW ENTRY  | BLOG TOP |  OLD ENTRY

プロフィール

usagi

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

information

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

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

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

カレンダー

04 | 2014/05 | 06
- - - - 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 31

ユーザータグ

* 



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