fc2ブログ

U-BOX/うさぎの小箱

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

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

v33_2reef

v33_2reef_公開(5/27申請,6/5承認)

PC版サンプル(画像をクリックするとサンプルページを見ることが出来ます)
>>DL



v33sakura3 のバリエーションです。

背景画像の変更とともに、ラインアイコン、ワンポイントアイコンを変更、配色を調整しました。

2カラム。変動幅。ウィンドウ幅の70%、最小幅固定900px。
記事部分72%。サイドバー25%。
jQuery jquery-1.7.1.min.js (pagetop300-500.js)


font-size: 80% ( デフォルト12.8px )

カラム幅を超える画像は縮小表示されます。
ヘッダーにナビメニュー、サイドにプラグインメニュー配置。


★テンプレート内の写真はゆんさんのものを使用しています。
写真を差し替えずにそのままご利用なさる場合は、ページ下部のPhoto by (c)Tomo.Yunを削除しないでください。





スポンサーサイト



テーマ : FC2ブログ共有テンプレート    ジャンル : ブログ

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

プラグインタイトルの画像

テンプレートの設定 > U-BOXv16sorahane-sam のスタイルシート編集
 > 以下がプラグインタイトルの背景画像設定箇所です

画像の変更は太字部分をファイルアップロードした画像のURLと書き換えて下さい。

*画像位置は left top のデフォルトです。(通常の背景画像と同様に指定できます)
*画像サイズは 40 x 45 以内。余白のバランスは paddingの数値で調整して下さい。
----------------------------------------------------------



/* menuの見出し(タイトル) */
#side .body3 h3, #side2 .body3 h3 {
background-image: url(http://blog-imgs-56.fc2.com/a/o/g/aogaras10box/soh301.jpg);
background-repeat: no-repeat;
font-size: 13px;
text-align: left;
letter-spacing: 0;
padding: 20px;
margin: 0;
}



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


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

ページナビ

ブログのページナビは、2箇所、2種類あります。

テンプレートの設定 > U-BOXv16sorahane-sam のHTML編集 > 以下

(1)、(3) → 個別ページに表示
(2) → 通常ページ、editページに表示

(参考ページ)

ページナビのリンクカラーはブログ全体のリンクカラーと同一です。
変えるときは個別に指定します。
(1) → U-BOXv16sorahane-sam のHTML編集 にも追記が必要です。
(2)(3) 非リンク部分
例・> U-BOXv16sorahane-sam のスタイルシート編集 >

/* ---------- リンク ----------- */
a {text-decoration: none}

a:link { color:#bbb } /*0-0-73*/
a:visited { color:#aaa } /*0-0-66*/
a:hover { color: #ccc } /*0-0-80*/
a:active { color: #4a85f9 } /*220-70-98*/

a:hover { text-decoration: underline }

#back-next,#back-next2 { color:#fff }

#back-next a:link { color:red }
#back-next a:visited { color:pink }
#back-next a:hover { color: green }
#back-next a:active { color: 0cc }

#back-next2 a:link { color:red }
#back-next2 a:visited { color:pink }
#back-next2 a:hover { color: green }
#back-next2 a:active { color: 0cc }


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



< !--/topentry-->

< !--comment_area-->
 
< div id="back-next2" style="text-align: center">
< !--preventry--><<< a href="< %preventry_url>">< %preventry_title>< /a>< !--/preventry--> | < a href="< %url>">BLOG TOP(1)< /a> | < !--nextentry-->< a href="< %nextentry_url>">< %nextentry_title>< /a>>>< !--/nextentry-->
< div class="lin2">< hr>< /div>
< h3>< a name="comment">comment< /a>< /h3>
< /div>< !-- style="text-align: center"-->

< !--comment-->



< !--/trackback_area-->

< div id="back-next" style="text-align: center">

< p class="prev-next-navi">
< !--not_permanent_area-->
< !--prevpage--><<< a href="< %prevpage_url>" title="NEW ENTRY">< !--/prevpage-->NEW ENTRY< !--prevpage-->< /a>< !--/prevpage-->
< span> | < /span>< a href="< %url>" title="トップへ戻る">BLOG TOP(2)< /a>< span> | < /span>
< !--nextpage-->< a href="< %nextpage_url>" title="OLD ENTRY">< !--/nextpage-->OLD ENTRY< !--nextpage-->< /a>>>< !--/nextpage-->
< !--/not_permanent_area-->

< !--permanent_area-->
< !--preventry--><<< a href="< %preventry_url>" title="NEW ENTRY">< !--preventry-->< %preventry_title>< !--/preventry-->< /a>< !--/preventry-->
< span> | < /span>< a href="< %url>" title="トップへ戻る">BLOG TOP(3)< /a>< span> | < /span>
< !--nextentry-->< a href="< %nextentry_url>" title="OLD ENTRY">< !--nextentry-->< %nextentry_title>< !--/nextentry-->< /a>>>< !--/nextentry-->
< !--/permanent_area-->
< /p>
< /div>< !-- back-next -->

< /div>< !-- con// -->



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



  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-->



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





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

修正報告


kurage03-3.jpg
1920x1080







2014.9.1_2:12

v34kamiW
記事一行目におけるかってな改行
及び、ページ下部の不要なnavi表示について、
スタイルシート上の不備を修正、再登録いたしました。





2014.5.11_11:32
U-BOXv01~38 のスタイルシート、以下2点を修正いたしました。
1.記事内の画像が、縦長に表示される.
2.記事内にラインが表示されない.

ご迷惑をおかけいたしました。
再DLしていただければと思います。
よろしくお願いいたします。



2014.5.8_2:37

ブログ内に縦長に表示されてしまう画像がある場合
スタイルシートの修正を。
参考記事

以下修正

/* 記事内の画像 */
.body img {
max-width: 100%;
height: auto;
margin: 0 10px 0 0;
}





2014.5.6

v37kurage
背景画像を明るめに修正いたしました。





2014.4.23_23:13

v38flo01
記事本文内におけるラインの表示について、
スタイルシート上の不備を修正いたしました。
参考記事

以下修正

/* スペース要素としてのライン --< div class="lin">< hr>< /div>-- */
.lin hr, .lin2 hr { border: 0px; width: 90%; display:none }







テーマ : FC2ブログ共有テンプレート    ジャンル : ブログ

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

投稿画像のサイズについて

記事中の画像は管理画面、ファイルアップロードより一度アップロードされたものを表示します。

そのファイル選択画面に、

同時に5ファイル、1ファイルあたり2MBまで

とあります。
その、、2MB、それがファイルサイズの上限となります。

で、表示サイズはというと、スタイルシートにより、最大がカラム幅になるよう、縮小表示指定してあります。
ので、実サイズで表示したいときはスタイルシートの変更が必要です。


以下、該当箇所を削除することで可能です。

なお、縮小表示するとき、サイズ指定がされている画像がある場合のために、追加指定が必要でした。

当テンプレートのスタイルシートの不備のため、表示に乱れが生じ、
申し訳ありませんでした。

テンプレートの設定 >  ○○○のスタイルシート編集 
-----------------------------------------------------

/* 記事内の画像 */
.body img {
max-width: 100%;
height: auto;
margin: 0 10px 0 0;
}

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



[まとめ]
ブログ内に縦長に表示されてしまう画像がある場合
以下のようにお願い致します。

1.縮小表示で全体を入れたい場合。

スタイルシートの縮小表示指定に、
height: auto;
を、追記して下さい。


2.ブログの枠を超えても実寸表示にしたい場合。

スタイルシートの縮小表示指定
max-width: 100%;
を、削除して下さい。
さらにスタイルシートの以下を削除してください。

このとき右カラムがある場合、サイズによっては上または下に重なり、横スクロールバーが表示されます。
------------------------------------------------

/* 記事本文 */
.write {
line-height: 1.8em;
font-family: ;
margin: 0 0 30px;
padding: 0 11px;
overflow-x: hidden;
clear: both;
}

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

以上、よろしくお願いいたします。



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

v39flo02

v39flo02_公開(5/6申請,5/15承認)

PC版サンプル(画像をクリックするとサンプルページを見ることが出来ます)
>>DL


v38flo01 のバリエーションです。


2カラム。変動幅。ウィンドウ幅の80%、最小幅固定900px。
記事部分70%。サイドバー27%。
jQuery jquery-1.7.1.min.js (pagetop300-500.js)


font-size: 90% ( デフォルト14.4px )

カラム幅を超える画像は縮小表示されます。
ヘッダーにナビメニュー、サイドにプラグインメニュー配置。
26px幅罫線背景使用。





テーマ : FC2ブログ共有テンプレート    ジャンル : ブログ

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

背景の写真を変更?

テンプレートを使用するにあたっての禁止事項は以下、

画像の加工は禁止です。
画像の二次使用は著作権表示(Photo by U-BOX)でOKです。
画像・テンプレートの再配布は禁止です。
著作権表示(Template by usagi 等)を消すことは禁止です。
テンプレートのカスタマイズはOKです。

なので、画像の差し替えは自由です。

では具体的にどうすればよいのかを、
sakura3のテンプレートを例に説明します。

1.使用する画像を ファイルアップロード する。→ URLをコピー。

2.テンプレート管理 > U-BOXv33sakura3 のスタイルシート編集
  > 赤字部分 を 1 の画像のURLと差し替える。(コピペ)

* {
margin: 0;
pading: 0;
}


body {
background-color: #fff; /*0-0-100*/
color: #333; /**/
font-size: 12px;
line-height: 160%;
font-family: Georgia,Bookman Old Style,Verdana,Courier,Times New Roman;
-font-family:Verdana, 'Hiragino Kaku Gothic Pro W3', 'ヒラギノ角ゴ Pro W3','メイリオ', sans-serif;
margin: 0;
pading: 0;
}

#bg {
background: url(http://blog-imgs-50.fc2.com/a/o/g/aogaras10box/beiz-sakura.jpg) no-repeat;
background-position: center 90%;
background-attachment: fixed;/**/
margin: 0;
pading: 0;
}










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

ユーザータグ

*