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を削除しないでください。

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

テンプレートの設定　＞　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;
}
・
・
・
----------------------------------------------------------

ページナビ

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

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

（１）、（３）　→　個別ページに表示
（２）　→　通常ページ、editページに表示

（参考ページ)

ページナビのリンクカラーはブログ全体のリンクカラーと同一です。
変えるときは個別に指定します。
（１）　→　U-BOXv16sorahane-sam のHTML編集　にも追記が必要です。
（２）(３）　非リンク部分
例・＞　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（１）< /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（２）< /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（３）< /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// -->
・
・
・
--------------------------------------------------------------------

カラムの幅とライン

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


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

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

１out・・・ブログ幅
４side，５side2・・・左右のサイドバー幅
２main・・・３con（中央カラム）＋５side2(右サイドバー)
　→　１ = ４ + ２　・・・ この数式を保持すれば１～５の数値は自由に設定できます。
これは固定幅になっていますが、％で設定すればブラウザの幅に応じて変化するものにできます。
*（例）
　１・・・90%　→　ブラウザ幅の90％
　２、4　→　１を100％として算出
　３、５　→　２を100％として算出
注・１、２は100%で計算するとマージン、パディング、ボーダーの幅による誤差のため入らないことがあります。
　→　ブラウザの最小幅を想定した誤差分の％を加算して100%にします。
　→　このとき、想定した最小幅(例・1024px)より狭いブラウザの時はブログ幅が固定されるように、１に下記を追記します
　

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;　→　１
margin: 0 auto;
pading: 0;
border-right: 1px solid #ddd;
border-left: 1px solid #ddd;
}
・
・
・
/* 記事,menu表示部分------(side+con) */
#main {
float: right;
width: 735px;　→　２
margin: 0;
padding: 0;
}
・
・
・
/* -左サイドバー-------------*/
/* 記事表示部分 */
#con {
background-color: #eee;
float: left;
width: 500px;　→　３
margin: 0;
padding: 0 0 2em;
word-break: break-all;
border: 10px solid #eee;
}
#side {
float: left;
width: 215px;　→　４
padding: 0;
}

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

カレンダーの位置と表示

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

１．ブログトップの横カレンダー
２．サイドバーのカレンダー（HTML内に記述されたもの、タイトルなし）
３．サイドバーのカレンダー（公式プラグインのカレンダー、プラグインタイトル「カレンダー」がつきます）

１．または　２．が表示されているとき　３．は非表示の設定が必要です。

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

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

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

１．２．の表示、非表示は style="display: none"を記入する、しないで処理できます。
２．はコピペによって位置を変更できます。

--------------------------------------------------------------------------
・
・
< 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>&ｌt；&ｌt；< /li>
< !--calender2-->
< li>< %days>< /li>
< !--/calender2-->
< li>&ｌt；&ｌt；< /li>
< li>< a href="< %next_month_link>">< %next_year>_< %next_month>< /a>< /li>
< /ul>
< !--/横カレンダーの設定-->

・
・
・





・
・
・
< /div>< !-- body3// -->< !-- ■ -->
< !--/pｌugin_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// -->

< !--/pｌugin-->
・
・
・
--------------------------------------------------------------------------

修正報告

kurage03-3.jpg
1920x1080

2014.9.1_2:12

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

2014.5.11_11:32
U-BOXv01～38 のスタイルシート、以下２点を修正いたしました。
１．記事内の画像が、縦長に表示される.
２．記事内にラインが表示されない.
ご迷惑をおかけいたしました。
再ＤＬしていただければと思います。
よろしくお願いいたします。



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 }

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

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

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

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

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

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


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

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

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

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

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

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



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

１．縮小表示で全体を入れたい場合。

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

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

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

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

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

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

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

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幅罫線背景使用。

背景の写真を変更?

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

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

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

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

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

２．テンプレート管理　＞　U-BOXv33sakura3 のスタイルシート編集
　　＞　赤字部分 を １ の画像の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;
}

＊