U-BOX/うさぎの小箱

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

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

スポンサーサイト

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


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

サイドメニュのアコーディオン表示切り替え

U-BOXの一連のテンプレートではサイドメニュがjQueryによるアコーディオン表示になっています。
これは簡単に通常の表示に変えることができます。

テンプレート管理  > ~~のHTML編集 > < head> ~ < /head> に以下のtagがあります。

< script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">< /script>
< script type="text/javascript" src="http://blog-imgs-45.fc2.com/a/o/g/aogaras10box/scrolltopcontrol100-500.js">< /script>
< script type="text/javascript" src="http://blog-imgs-45.fc2.com/a/o/g/aogaras10box/accordion-v45.js">< /script>

赤字部分がアコーディオンに関わる部分です。
これを削除してscriptを無効にすることでメニュは表示状態になります。

他は、ページトップボタン用のスクリプトです。これを削除すると、ページトップボタンが無効になります。

削除する前に複製し、アレコレ試してみて下さい。







スポンサーサイト

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

カラムの配置(v43green)

v43green は変則3カラムで通常両サイドのカラムが右に寄せてあります。
これを両サイドに戻す方法を説明します。

ブログは以下のボックスをフロートさせることにより構成されています。
[ out ] ・・・ 全体の幅を規定、[ main ] + [ side ]
 [ main ] ・・・ [ con ] + [ side2 ] → フロート左
  [ con ] ・・・ topentry → フロート左
  [ side2 ] ・・・ プラグイン1,3 → フロート右
 [ side ] ・・・ プラグイン2 → フロート右

両サイドに配置するためには [ main ] 内の [ con ] と [ side2 ] の配置を逆にします。
  [ con ] ・・・ topentry → フロート右
  [ side2 ] ・・・ プラグイン1,3 → フロート左
*あるいは [ main ] と [ side ] の配置を逆?(プラグイン1,2,3の配置による)

とりあえずは、上記の方法を説明します。

テンプレートの設定 > U-BOXv43green のスタイルシート編集
 > 以下の2箇所のフロートを変更します。
 > それに合わせてwidthを変更、カラム間を調整しました。


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



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



/* 記事表示部分 */
#con {
background-color: #14332d;/*170-60-20*/
float: right;
width: 500px;
width: 67%;/*52.9%*/
width: 68.7%;/*54.3%*/
margin: 0;
padding: 1em 0 2em;
word-break: break-all;
border: 0px solid #333; /*0-0-20*/
}


/* -右サイドバー-------------*/
#side {
background-color: #14332d;
float: right;
width: 215px;
width: 20%;
padding: 0;
}


/* -左サイドバー--------------- */
#side2 {
background-color: #14332d;
float: left;
width: 215px;
width: 30%;/*23.7%*/
padding: 0;
/*display: none;*/
}



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




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

カスタマイズのためのアレコレ

★最近カスタマイズに関する質問を受けることがあります。
極力お応えするようにしていますが、質問の意味することをよくくみ取れないこともあります。
ご自身のブログのアドレスをお知らせいただければ状況などわかりやすく、コメント欄でその場でお聞きしたり、お応えすることもできます。ということで、URL、お知らせいただけるとうれしいです。


★以下、今更ですが、変更する前にテンプレート一覧の複製欄をクリックして必ず複製を作る習慣を。そうすれば、変更しすぎてぐちゃぐちゃになってしまったとき、元に戻れます。

★リンククリックで表示されるページは、更新していないと変更が反映されません。

★知っていると便利なこと。PCのキーボード、[ctrl]+[F]でブラウザに検索バーが表示されページ内が検索できます。


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


★どこかの背景色を変えたい場合、探すタグは [backgraund-color]  です。
それで指定されている色を、例えば、[red] 赤、などに変えてみる。そして、プレビューでどこが変化したかを確認していく、
そして該当箇所が確定できたら望みの色に変更する。
例:記事・コメント・TB 表示部分、色指定を外し、<body>の背景色( #fff )に統一してみました。 ( 参考ページ )

/ * -左サイドバー-------------*/
/* 記事表示部分 */
#con {
background-color: ;  →  色指定を外す。
float: left;
width: 63%;
margin: 0;
padding: 0 0 2em;
word-break: break-all;
border: 10px solid #fff;  →  太いワク線を白にして消す。
}



これは、背景色に限らず、容易に該当箇所を探す方法です。例えば文字指定。
タイトル、見出しなどは、<h1>、<h2>、<h3>のタグが使われています。
そのタグに関する指定の中に [ background-color: red; ] を加え、どの文字背景が赤くなるかで、該当する箇所を探す。
あるいは文字そのものを、 [ color: red; ] のように極端に変化させてても。

それ以外の文字、文字指定にはおおむね、 [ font-size: 12px; ] のようにフォント指定が含まれます。
この指定の中で,上記のように色を変えるなどして,該当する指定箇所をさがします。

ただし、リンク文字の場合は、色はリンクカラーで指定されています。サイズ変更、背景色追加などにより、確認できます。

例:記事投稿日

.dayday {
float: left;
font-size: 27px; →  17pxにしてみる。
line-height: 90%;
font-family: Georgia, "Times New Roman", Times, serif;
}




★ワク線などの色指定は [ border ] タグの中に含まれています。

 例: border-right: 1px solid #ddd;

これは右のワク線、1pxの太さの直線、色は#ddd を意味します。
どこに使われる線か、確認するには、1px → 10px、#ddd → red、のように極端に変化させ、該当箇所を探す。


★FC2の広告に関しては変更できるのは [ footer ] 内広告の文字の色、リンク色、サイズ、位置です。
ほかは有料に移行して消す以外ありません。







  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. -
  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;
}









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

記事本文内におけるラインの表示について

U-BOXのテンプレートで、
記事中でラインが表示できない件に関しまして、

当テンプレートのスタイルシートに不備があり、表示できなくなっていました。
申し訳ありませんでした。

v38flo01では、さっそく修正し再登録しましたので、
再DLしていただければと思います。
よろしくお願いいたします。




尚、以下修正点をご参考までに、、、

赤字:修正部分
U-BOXv38flo01のスタイルシート編集---------------------

/* スペース要素としてのライン --< div class="lin">< hr>< /div>-- */
.lin hr, .lin2 hr { border: 0px; width: 90%; display:none }
.lin {
background: url(http://blog-imgs-50.fc2.com/a/o/g/aogaras10box/.png) no-repeat;
background-position: 90% bottom;
padding: 0;
margin: 0;
width: 100%;
height: 170px;
}

.lin2 {
background: url(http://blog-imgs-70.fc2.com/a/o/g/aogaras10box/flo003r.png) no-repeat;
background-position: center;
padding: 0;
margin: 0;
width: 100%;
height: 100px;
}

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

修正前 → hr { border: 0px; width: 90%; display:none }
ラインをスペーサーとして使用するために非表示にしてありましたが。
.lin hr, .lin2 hr と、個々に指定すべきトコロを hr と全ラインの一括指定にしてありました。




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

本文の追記に関して

追記機能を考える。

簡易モードの記事の編集画面では以下の機能が非表示になります。
・ジャンル、テーマ、トラックバック送信の項目
・記事のツールバーの機能の一部、高機能テキストエディタ切り替えツール
・追記の編集
・記事の設定

まず追記するには、簡易モードをOFFにしなくてはならない。


NEW ENTRY  | BLOG TOP |  OLD ENTRY>>

プロフィール

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ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。