INFORMATION

しょぼい（泣）FC2用テンプレを配布。
趣味＆日々のことを書き綴ったブログ。
HTML・テンプレ・SKINも配布中。
⇒ お気に入りに追加する

TEMPLATE FOR FC2

共有テンプレート使用上のご注意

	chocolat-308 3カラムタイププラグイン対応

	chocolat-307 3カラムタイププラグイン対応

	chocolat-306 2カラムタイププラグイン未対応

	chocolat-305 2カラムタイププラグイン未対応サイド折り畳み式

	chocolat-304 3カラムタイププラグイン未対応

APESKIN FOR BLOG

ブログ用スキン使用上のご注意

	BLOG #01 ゲスブタイプレス機能なし文字色選択可

MAIL FORM

BLOG PETの俳句集

MY BLOG LIST

chocolat*BLOGを登録

後姿ラブリー同盟

chocolat* BLOG

BLOG PET

ふじこ // みちる

お友達大募集中!

CALENDER

07 // 2008.08 // 09
S	M	T	W	T	F	S
-	-	-	-	-	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	-	-	-	-	-	-

ARCHIVES

RSSフィード

LINKS

Powerd by FC2
Material by web*citron
Photo by Rain Drop
Template by chocolat*
FC2ブログ 紹介予定派遣

追記の折り畳み

2005.09.16 (Fri) 13:54

当サポート掲示板に、追記の折り畳みに関する質問がありましたので、こちらにカスタマイズ方法を記載します。

追記の折り畳みは、当ブログにも使用しているタイプのもので、本来なら追記のリンクをクリックすると記事ページに移動して表示されるものが、クリックするだけで表示・非表示ができるというものです。

このカスタマイズ方法はアジアンビートカンケリキッズさまの「追記の展開・折りたたみ」を参考にさせて頂きました。

[READ MORE...]

[FC2ブログ]カスタマイズ // TRACKBACK(0) // COMMENT(1) [▲]

複数のBlogPetをランダム表示

2005.09.11 (Sun) 15:42

BlogPetが「ふじこ」と「みちる」の2匹に増えたので、The blog of H.Fujimoto さまの「BlogPetのランダム表示JavaScript(改良版)」＆「BlogPetのランダム表示JavaScript(アクセスログ集中化対応版)」と、KOROPPYの本棚さまの「全てのBlogPetをサイドバーでランダム表示」＆「ランダム表示スクリプトにてデフォルトのBlogPetを指定する」を参考に、FC2ブログ用に手を加えてみました。
とはいっても、殆ど何もしてないのと同じですが･･･；

複数のBlogPetを飼った場合、全てのペットをサイドバーに表示すると、長くなるだけでなく、どうしてもサーバーが重くなってしまいます；
それを解消してくれる優れもののスクリプトがこれ!
特定のペットを指定表示するリンクも付いているし、デフォルトで表示するペットを指定することも出来ちゃいますv

サンプルは、当ブログサイドメニュー部の「Blog Pet」を見てください。
デフォルトでは「ふじこ」が表示され、ペット名をクリックすることで「ふじこ」と「みちる」の表示を切り替えることができます。

[READ MORE...]

[FC2ブログ]カスタマイズ // TRACKBACK(1) // COMMENT(0) [▲]

MyBlogList （DIV編）

2005.09.08 (Thu) 01:30

当サイトでもデザイン変更に伴い導入した、BlogPeople の MyBlogList。
簡単に言うと「お気に入りに追加」のようなもので、登録したブログが更新されるとひと目で分かるという嬉しい機能が付いたもの。

その MyBlogList の表示サイズを指定して、自動的にスクロールバーが表示されるようにしちゃおうというカスタマイズです。

[READ MORE...]

MyBlogList は、ブログのHTMLに指定されたJavaScriptを挿入するだけでOK。
ブログに表示される時は、DIVタグを指定した場合、以下のようなタグを吐き出します。

<div class='blogpeople-main'>
<span class='blogpeople-linklist'>リンクリストのタイトル</span><br />
<a href='URL' target='_blank' title='更新日:05年09月02日(Fri) 22時59分'>ブログ名</a><img src='更新マークの画像URL'><br />
</div>
<div class='blogpeople-powered-by'>
<br /><b><a href='http://www.blogpeople.net/' target='_blank'>Powered by BlogPeople</a></b><br />
</div>

スタイルシートでデザインを指定していく場合、以下のクラス名をもとに設定していきます。

【CSS用クラス名情報】
クラス名： blogpeople-main
説明： BlogPeopleが出力したリンクリスト全体

クラス名： blogpeople-update-prefixtext
説明：「更新マーク表示」で設定したリンクの前に表示するテキスト
※ 画像の場合はクラス指定なし

クラス名： blogpeople-update-suffixtext
説明：「更新マーク表示」で設定したリンクの後に表示するテキスト
※ 画像の場合はクラス指定なし

クラス名： blogpeople-linklist
説明：リンクリストのタイトル（DIV形式を選んだ場合）

クラス名： blogpeople-powered-by
説明： BlogPeopleへのリンク

クラス名： blogpeople-bb
説明：「BlogPeople BB(Birthday Blog)」全体のクラス名

クラス名： blogpeople-bb-link
説明： BlogPeople BBのリンク部分

クラス名： blogpeople-bb-credit
説明： BlogPeople BBのクレジット部分

上記のクラスタグ定義に手を加えて、デザインを指定してあげます。

ブログのCSS（スタイルシート）に、以下のようなタグを付け加えます。
下記サンプルは、DIV形式を選択し、更新マークをテキストでリンクの後ろに付ける場合の設定方法です。

/* MyBlogList */
.blogpeople-main {
  font-size:10px;  /*文字サイズ*/
  font-family:Verdana;  /*文字種*/
  height:100px;  /*高さ*/
  overflow:auto;  /*自動的にスクロールバー表示*/
  margin:0px;  /*余白*/
}

.blogpeople-linklist {
  font-size:10px;  /*文字サイズ*/
  font-family:Verdana;  /*文字種*/
  margin:3px 0px 4px 0px;  /*余白（上右下左）*/

.blogpeople-powerd-by {
  text-aling:right;  /*表示位置*/
  margin:0px 8px 5px 0px;  /*余白（上右下左）*/

.blogpeople-update-suffixtext {
  color:red;  /*文字色*/
  padding-left:5px;  /*文字末尾からの余白*/
}

例えば自動的にスクロールバーが表示される時の、スクロールバーの色を変更したいときは、「blogpeople-main」のクラスタグにスクロールバーの色をCSSにて付け加えてあげればOK。

自分好みになるように、色々と試してみてねv

[...HIDE MORE]

[FC2ブログ]カスタマイズ // TRACKBACK(0) // COMMENT(0) [▲]

サイドメニューの折り畳み

2005.08.25 (Thu) 20:59

サイドメニューの折り畳み方法に関してご質問がありましたので、「chocolat-306」を例にあげて説明させて頂きます。
このカスタマイズ方法は、JUGEMカスタマイズ講座様のナビゲーションの折り畳みを参考にさせて頂いたものです。

サイドメニューの折り畳みに関する機能は以下の通り。

※ リスト部分を閉じたり開いたりできる
※ リストに含まれるアイテム数をカウントして表示する
※ 折り畳み用ボタンを開いた状態・閉じた状態で設定できる

[READ MORE...]

[FC2ブログ]カスタマイズ // TRACKBACK(1) // COMMENT(1) [▲]

トラックバック・ピープルの表示変更

2005.08.23 (Tue) 12:56

トラックバック・ピープル（BlogPeople）の表示スタイルを、Benjamins Forum Site さまの「トラックバック・ピープル　レイアウトを少し調整」を参考にし、デザインを変更してみました。
ブログのCSS（スタイルシート）に、あるタグを付け加えてあげるだけで、表示スタイルを変更することができます。

表示スタイルを変更した表示例は、当ブログサイドメニューの「後姿ラブリーピープル」を参考にしてください。

まずは、トラックバック・ピープルのリンクリストで使用されているCSS用のクラス名の説明から。

【CSS用クラス名情報】
クラス名： blogpeople-tbp
説明：リンクリスト全体に割り当てられたクラスです。

クラス名： blogpeople-tbp-link
説明：各リンクタグに割り当てられたクラスです。

クラス名： blogpeople-tbp-credit
説明：バナー画像に割り当てられたクラスです。

上記のクラスタグ定義に手を加えて、リストの文頭に画像を付け加え、見栄えを良くしてみました。

※ 当サイトのトラックバック・ピープルで使用している画像は MINE CHANNEL! さまよりお借りしています。

[READ MORE...]

ブログのCSS（スタイルシート）に、以下のタグを付け加えます。

.blogpeople-tbp {
　margin-right:8px;
　height:200px;
　overflow:auto;
}

.blogpeople-tbp-link {
　line-height:130%;
　margin-top:3px;
　margin-right:2px;
　margin-left:10px;
　padding-left:11px;
　padding-right:2px;
　background-image:url(http://～リスト文頭の画像URL.gif);
　background-position:0px 4px;
　background-repeat:no-repeat;
}

.blogpeople-tbp-credit {
　margin-top:8px;
　text-align:right;
}

上記の設定は、7×7ピクセルの画像を使用し、文字サイズを10pxに設定している場合のタグになります。
以下に各タグの解説を記載しておきますので、ご自分のブログデザインに合わせて、設定の変更をしてください。

▽ トラックバック・ピープルのリスト全体の設定
.blogpeople-tbp {
　margin-right:8px; /* ① */
　height:200px;　/* ② */
　overflow:auto; /* ③ */
}

① 「margin-right:8px;」は、リストを表示するボックスを右側からどれくらいのスペースを空けるかの設定です。

② 「height:200px;」は、リストを表示するボックスの高さの設定です。

③ 「overflow:auto;」は、上記の「height:200px;」を超えた場合、自動的にスクロールバーが表示するように設定しています。

▽ 各リンクタグの設定
.blogpeople-tbp-link {
　line-height:130%; /* ① */
　margin-top:3px; /* ② */
　margin-right:2px; /* ③ */
　margin-left:10px; /* ④ */
　padding-left:11px; /* ⑤ */
　padding-right:2px; /* ⑥ */
　background-image:url(http://～リスト文頭の画像URL.gif); /* ⑦ */
　background-position:0px 4px; /* ⑧ */
　background-repeat:no-repeat; /* ⑨ */
}

① 「line-height:130%;」は、行間を設定しています。

② 「margin-top:3px;」は、リスト全体の開始文字を上からどのくらいあけるかを設定しています。

③ 「margin-right:2px;」は、リスト文頭の画像を右側からどのくらいあけるかを設定しています。

④ 「margin-left:10px;」は、リスト全体の文字を左側からどのくらいあけるかを設定しています。

⑤ 「padding-left:11px;」は、画像を省いたリスト文頭文字を、右側からどのくらいあけるかを設定しています。
画像の横幅＋画像から文頭文字までの幅をピクセルで設定してください。

⑥ 「padding-right:2px;」は、左側からどのくらいあけるかを設定しています。

⑦ 「background-image:url(http://～リスト文頭の画像URL.gif);」の()内に、リストの文頭につける画像URLを記述します。（例： http://blog-imgs-1.fc2.com/c/h/o/chocolatblog/icon.gif）

⑧ 「background-position:0px 4px;」は、リスト文頭の画像の表示位置を設定しています。

⑨ 「background-repeat:no-repeat;」は、画像を繰り返さないよう設定しています。

▽ バナー画像の設定
.blogpeople-tbp-credit {
　margin-top:8px; /* ① */
　text-align:right; /* ② */
}

① 「margin-top:8px;」は、リスト最終行からバナー画像を表示するまでに、どれくらいあけるかを設定しています。

② 「text-align:right;」は、バナー画像を右寄せに表示するように設定しています。
左寄せにする場合は「text-align:left;」、中央寄せにする場合は「text-align:center;」とします。

[...HIDE MORE]

[FC2ブログ]カスタマイズ // TRACKBACK(0) // COMMENT(0) [▲]

//　BLOT TOP　//　