U-BOX/うさぎの小箱

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を無効にすることでメニュは表示状態になります。

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

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

< dl class="relate_dl">
	< dt class="relate_dt">関連記事< /dt>
	< dd class="relate_dd">
		< ul class="relate_ul">
			< li class="relate_li">< a href="***">***< /a>< /li>
			< li class="relate_li">< a href="**">**< /a>< /li>
			< li class="relate_li_nolink">*< /li>
			< li class="relate_li">< a href="**">**< /a>< /li>
			< li class="relate_li">< a href="***">***< /a>< /li>
		< /ul>
	< /dd>
< /dl>

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

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

両サイドに配置するためには [ main ] 内の [ con ] と [ side2 ] の配置を逆にします。
　　[ con ] ・・・ topentry　→　フロート右
　　[ side2 ] ・・・ プラグイン１，３　→　フロート左
*あるいは [ main ] と [ side ] の配置を逆？（プラグイン１，２，３の配置による）

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

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

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


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

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

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


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


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


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

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

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

例：記事投稿日


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

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

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


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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

２．テンプレート管理　＞　U-BOXv33sakura3 のスタイルシート編集
　　＞　赤字部分 を １ の画像のURLと差し替える。（コピペ）

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

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

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




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

赤字：修正部分
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　と全ラインの一括指定にしてありました。