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を削除しないでください。
PC版サンプル(画像をクリックするとサンプルページを見ることが出来ます)

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ブログ共有テンプレート ジャンル : ブログ
プラグインタイトルの画像
テンプレートの設定 > U-BOXv16sorahane-sam のスタイルシート編集
> 以下がプラグインタイトルの背景画像設定箇所です
画像の変更は太字部分をファイルアップロードした画像のURLと書き換えて下さい。
*画像位置は left top のデフォルトです。(通常の背景画像と同様に指定できます)
*画像サイズは 40 x 45 以内。余白のバランスは paddingの数値で調整して下さい。
> 以下がプラグインタイトルの背景画像設定箇所です
画像の変更は太字部分をファイルアップロードした画像の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;
}
・
・
・
----------------------------------------------------------
・
・
・
/* 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編集 > 以下
(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 }
テンプレートの設定 > 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// -->
・
・
・
--------------------------------------------------------------------
・
・
・
< !--/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// -->
・
・
・
--------------------------------------------------------------------
カラムの幅とライン
ブログの横幅など、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に下記を追記します
テンプレートの設定 > 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%;
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;*/
}
・
・
・
----------------------------------------------------------
・
・
・
/* ================レイアウト設定=============== */
/* 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;*/
}
・
・
・
----------------------------------------------------------
カレンダーの位置と表示
U-BOXのテンプレートには、3種類のカレンダーが表示できるものがあります。
1.ブログトップの横カレンダー
2.サイドバーのカレンダー(HTML内に記述されたもの、タイトルなし)
3.サイドバーのカレンダー(公式プラグインのカレンダー、プラグインタイトル「カレンダー」がつきます)
1.または 2.が表示されているとき 3.は非表示の設定が必要です。
プラグインの設定 > 公式プラグイン追加 > カレンダー > 追加で表示され、
プラグイン管理 > プラグインカテゴリ1~3 > 位置、移動により好みの位置に設定、
表示、非表示もここで選択できます。
2.と3.はよくにていますが、多少ちがいがあります。
いずれもHTML内に記述されたものです。
3.を使用したいとき、あるいは、2.の表示位置を変えたいときは以下を参考にして下さい。
テンプレートの設定 > U-BOXv16sorahane-sam のHTML編集 >
1.ブログトップの横カレンダー
2.サイドバーのカレンダー(HTML内に記述されたもの、タイトルなし)
3.サイドバーのカレンダー(公式プラグインのカレンダー、プラグインタイトル「カレンダー」がつきます)
1.または 2.が表示されているとき 3.は非表示の設定が必要です。
プラグインの設定 > 公式プラグイン追加 > カレンダー > 追加で表示され、
プラグイン管理 > プラグインカテゴリ1~3 > 位置、移動により好みの位置に設定、
表示、非表示もここで選択できます。
2.と3.はよくにていますが、多少ちがいがあります。
いずれもHTML内に記述されたものです。
3.を使用したいとき、あるいは、2.の表示位置を変えたいときは以下を参考にして下さい。
テンプレートの設定 > U-BOXv16sorahane-sam のHTML編集 >
1.2.の表示、非表示は style="display: none"を記入する、しないで処理できます。
2.はコピペによって位置を変更できます。
2.はコピペによって位置を変更できます。
--------------------------------------------------------------------------
・
・
< h2><%introduction>< /h2>
< h1>< a href="<%url>"><%blog_name>< /a>< /h1>
1
・
・
・
・
・
・
< /div>< !-- body3// -->< !-- ■ -->
< !--/plugin_first-->
2
< /div>< !-- side// -->
< !--/plugin-->
・
・
・
--------------------------------------------------------------------------
・
・
< 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>
< !--/横カレンダーの設定-->
< 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 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-->
・
・
・
--------------------------------------------------------------------------
- information
- tb: 0
- cm: 3
- [ 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ブログ共有テンプレート ジャンル : ブログ
投稿画像のサイズについて
記事中の画像は管理画面、ファイルアップロードより一度アップロードされたものを表示します。
そのファイル選択画面に、
同時に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;
}
------------------------------------------------
以上、よろしくお願いいたします。
そのファイル選択画面に、
同時に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;
}
------------------------------------------------
以上、よろしくお願いいたします。
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幅罫線背景使用。
PC版サンプル(画像をクリックするとサンプルページを見ることが出来ます)

v38flo01 のバリエーションです。
2カラム。変動幅。ウィンドウ幅の80%、最小幅固定900px。
記事部分70%。サイドバー27%。
jQuery jquery-1.7.1.min.js (pagetop300-500.js)
font-size: 90% ( デフォルト14.4px )
カラム幅を超える画像は縮小表示されます。
ヘッダーにナビメニュー、サイドにプラグインメニュー配置。
26px幅罫線背景使用。
テーマ : FC2ブログ共有テンプレート ジャンル : ブログ
背景の写真を変更?
テンプレートを使用するにあたっての禁止事項は以下、
画像の加工は禁止です。
画像の二次使用は著作権表示(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;
}
*
画像の加工は禁止です。
画像の二次使用は著作権表示(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;
}
*
プロフィール
Author:usagi
FC2ブログへようこそ!
information
2015.2.8_23:12
管理人のみ閲覧のコメントを下さるみなさまへ
管理ページを見ることを忘れがちな管理人は 返事が遅れがちになることが多いため、ご注意下さい。
お急ぎの返信が必要なかたはカギなしでお願いします。
また、URL を記載していただくと、たすかります。
管理人のみ閲覧のコメントを下さるみなさまへ
管理ページを見ることを忘れがちな管理人は 返事が遅れがちになることが多いため、ご注意下さい。
お急ぎの返信が必要なかたはカギなしでお願いします。
また、URL を記載していただくと、たすかります。
最新記事
最新コメント
カテゴリ ・