FC2ブログのテンプレート工房

カスタマイズが簡単な共有テンプレートを配布しています。テンプレートをカスタマイズして自分だけのオリジナルブログを作りませんか？

アイコン付きツリー化リンク

以前にアイコン付きツリー化カテゴリーを紹介しましたが、今回はそのリンク版であるアイコン付きツリー化リンクを紹介します。

プラグイン『フリーエリア』をダウンロードして次の記述を貼付けてください。

<style type="text/css" media="all">

</style>

<div class="tree" id="ILI">
<ul>

<li &align><a href="<%link_url>" title="<%link_name>" target="_blank"><%link_name></a></li>

<li><a href="./?admin">管理者ページ</a></li>
</ul>
</div>

<script type="text/javascript"></script>

【ツリー化の手順】
アイコン付きツリー化カテゴリーと同様です。C[n]を編集します。
例

/* ■ツリー化設定 */
C[1]="グループＡ,1,2";
C[2]="グループＢ,3,4";

この場合１番目と２番目にあったリンクが『グループＡ』、３番目と４番目にあったリンクが『グループＢ』としてツリー化されます。C[3],C[4]…と好きなだけ追加してください。

【アイコン画像設定】
アイコン画像は各リンクごとに自由に変えられます。icon[n]を編集します。
例

/* ■アイコン画像URL */
icon[1] = "http://～/A.gif";
icon[2] = "http://～/B.gif";

icon[1]に設定したアイコン画像A.gifは、C[1]のアイコンとして表示されます。これもicon[3],icon[4]…と好きなだけ追加してください。

【行間を変えたい】
グループ(ツリー)内の行間を変更したい場合

#ILI li {
background-repeat: no-repeat;
list-style-type:none;
list-style-image: none;
margin:0;
padding:2px 0;
}

グループ(ツリー)同士の間を変更したい場合

#ILI ul {
margin:2px 0 4px;
padding:0;
}

この赤い数値をお好みの間隔になるように設定してください。

【管理者ページへのリンクが必要ない場合】
リンクの一番下にある『管理者ページ』が必要なければこの部分を削除してください。

<li><a href="./?admin">管理者ページ</a></li>

【2009/08/27 追記】
【グループの大見出しの色を個別に変えたい】

/* ■ツリー化設定 */
C[1]="グループＡ,1,2";
C[2]="グループＢ,3,4";
/* ■見出しの色設定 */
var col=new Array(); var r=1;
col[1]="#ff0000";
col[2]="#0000ff";
/* ■アイコン画像URL */
～
for (i=1;i<C.length;i++){ p=C[i].split(','); l=p.length; if(l>1){
I=I+'<p><img src='+icon[n++]+' align="absmiddle" border="0"> <b style="color:'+col[r++]+'">'+p[0]+'</b></p>';

この赤い部分の記述を加えてください。col[1]の色がC[1]の見出しの色に対応しています。
col[2],col[3]…と増やしてそれぞれの見出しの色を個別に設定できます。

【関連記事】

関連記事

[ 2008/06/15 18:00 ] カスタマイズ共通カスタマイズ | TB(0) | CM(57)

≪ 戻りました　m(__)m | HOME | 記事に投稿したリンク画像だけ枠を変える ≫

[ 3404 ]

お忙しい中、ありがとうございました。
また勉強に伺わせて下さい。

[ 2008/06/16 14:19 ] [ 編集 ]

[ 3410 ] 管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

[ 2008/06/23 00:07 ] [ 編集 ]

[ 3411 ] ページ下の未分類・page topを消したい

はじめまして、あきと申します。
ヨガ教室のホームページをFC2ブログで作っています。
やっとホームページらしくなってきたような気がしますが、
どうしても、ページ右下にある「未分類・page top」を消して、下部広告までのスペースを縮めることができません。
テンプレートを自分なりに色々調べたのですが、
どうしても分かりません。
アドバイスをお願いできるでしょうか？
どうぞよろしくお願いいたします。

[ 2008/06/23 12:37 ] [ 編集 ]

[ 3413 ] > あきさん

HTMLに次のようなところがあるはずです。

<div class="entry_state">
～
| <a href="#pagetop">page top↑</a>
</div>

この部分を削除すると「未分類・page top」を消せると思います。ただカスタマイズミスをしても元に戻せるように今のテンプレートを別名でコピー、保存してからカスタマイズすることをお勧めします。

いまお使いのものは公式テンプレートをカスタマイズしたものでしょうか？

[ 2008/06/24 01:40 ] [ 編集 ]

[ 3416 ] ありがとうございます

本当にありがとうございます。
今使っているものは、たしか公式テンプレートではなくて、
栗原明則さんのご著書で「ブログカスタマイズリファレンス」の中で、
使われているテンプレートです。

早速、コピーして保存し、やってみました。
一人でやっているときは、枠が崩れて全然駄目でしたが、
アドバイス頂いた通りにしたら、きれいにできて、
本当に嬉しいです。ありがとうございました。
これからもよろしくお願いいたします。

[ 2008/06/26 13:37 ] [ 編集 ]

[ 3421 ] ブログパーツの配置

こんにちは。
お知恵を拝借したいのですが、ブラウザをＩＥから、FirefoxとSafariに変更したらブログに貼ってあったブログパーツが左によってしまいました。
プラグイン設定では中央揃えに設定しています。
何か良い方法はないでしょうか？

[ 2008/06/28 21:59 ] [ 編集 ]

[ 3423 ] > k2さん

ブログパーツを次のタグで囲んでみてください。

<div align="center">
～
</div>

あと、IE6でみると左カラムが落ちています。
スタイルシートの #center の幅をもう2pxほど縮めてみてください。
あまりにもギリギリまで幅を使うとブラウザによりカラム落ちすることがあるようです。

[ 2008/06/29 03:43 ] [ 編集 ]

[ 3424 ]

できました。
ありがとうございます。

[ 2008/06/29 04:22 ] [ 編集 ]

[ 3425 ] 管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

[ 2008/06/29 13:08 ] [ 編集 ]

[ 3427 ] 管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

[ 2008/06/29 21:58 ] [ 編集 ]

[ 3428 ] 管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

[ 2008/06/30 00:48 ] [ 編集 ]

[ 3434 ] 管理人さんに相談が。

いつも見させていただいています。
某ゲームブログの管理人BLACKといいます。
このブログに幾度となく助けられました。
ホント感謝しています。
そこで、
なんとかしていたおさんの役に立ちたいと思いました。
まだ相談段階なのですが、タイトルバナーは要りませんか?
サイズを指定していただければできる限り作ります。

ちょっと私のブログに訪れてみてください。
大体バナーのイメージがつくと思うので。

もしタイトルバナーが欲しかったら、メールでもmyブログへのコメントでもいいので、連絡ください。作らせていただきます。

メールアドレス
whiteranpos@yahoo.co.jp

余計なおせっかいでｽｲﾏｾﾝm(__)m

[ 2008/06/30 19:39 ] [ 編集 ]

[ 3437 ] > BLACKさん

ありがとうございますBLACKさん。
そのお気持ちだけ受け取っておきます＾＾

コメントにあるメールアドレスは削除しておいたほうが良いと思います。スパムメールが届くと行けませんので。

[ 2008/07/06 02:44 ] [ 編集 ]

[ 3442 ] 管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

[ 2008/07/08 14:03 ] [ 編集 ]

[ 3460 ]

いつも見させていただいています。
テンプレート利用させてもらっています。
1つ疑問なのですが、Firefoxでは正常にされるのですが、なぜか他のブラウザだとブログ幅がおかしくなってしまいます。
お忙しいとは思いますが教えていただけると嬉しいです。

[ 2008/07/17 20:04 ] [ 編集 ]

[ 3463 ] > ZENOさん

IE6とサファリで見たところ、特に問題はないようなのですが解決されたのでしょうか？

[ 2008/07/20 00:29 ] [ 編集 ]

[ 3466 ]

すいません。
解決しました。

[ 2008/07/20 18:29 ] [ 編集 ]

[ 3505 ]

いつもお世話になってます。
ご指摘いただいてから、Firefox3以外にＩＥ６・ＩＥ７でも確認をするようにしたんですが、IE6Eolasで確認すると中・大文字の表示がやけに大きく表示されて段落が変わってしまいます。
あと中文字でも大文字と同じ大きさで表示されてる感じが・・・
！Ｅ６でもある程度Firefox3やＩＥ７と同じサイズで表示されるようスタイルシートを追記する方法はないでしょうか？

[ 2008/08/25 20:48 ] [ 編集 ]

[ 3532 ] ライトフレームに変更しました。

いたおさんお久しぶりです。長い間使用していたスタンダードからライトフレームに変更しました。

[ 2008/09/14 19:48 ] [ 編集 ]

[ 3539 ] 管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

[ 2008/09/22 22:31 ] [ 編集 ]

[ 3592 ] 管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

[ 2008/11/28 10:51 ] [ 編集 ]

[ 3598 ] 記事のタイトルだけ別ページへ表示

はじめましてもぐらと申します。FC2ブログのカスタマイズで困っています。お助けいただけると幸せます。HPを作ってブログのページを作ったときに、ブログのページは作れたのですが、可能であればブログの各記事のタイトルだけ、3件とか4件を別のHPのトップページへ新着情報として表示させたいのですが、どうしてもわからずに困っています。ご指導いただけると助かります。どうぞ宜しくおねがいいたします。

[ 2008/12/03 09:00 ] [ 編集 ]

[ 3607 ] かどりん様へ

連絡が遅れて申し訳ございません。有難うございます。早速練習してみます。大変うれしかったです。またわからないことがあればよければ教えてくださいませ。

[ 2008/12/05 08:09 ] [ 編集 ]

[ 3609 ]

はじめましてD.T.BLACKと申します。

実は自分のサイトを以下のようにしたいと思っております。
http://blog-imgs-31.fc2.com/f/x/j/fxjcfhjgc/20081207005137.jpg

色々このサイト様を見させてもらって、参考にさせていただいているのですが
この様な事はちょっと分からないのです
この様に出来るやり方をお知りの方、どうかご教授願います。

[ 2008/12/07 01:19 ] [ 編集 ]

[ 3610 ] ↑の方へ

枠はプラグインカテゴリー３で対応できると思います
中身の方でしょうか？

[ 2008/12/07 01:33 ] [ 編集 ]

[ 3612 ]

ご返事ありがとうございます。

中も画像のようにしたいのですが(スクロール部分)
カテゴリ3が右側一番下に表示されてしまうのです。

ご返事お願いします。

[ 2008/12/07 06:33 ] [ 編集 ]

[ 3614 ] ありがとうございます。

ご返事ありがとうございます。

この度はお手数掛けまして、すみませんでした。

無事テンプレート編集し上部に表示させることが出来ました。
ありがとうございます。

すみませんが後ひとつ、タイトルは表示出来るのでしょうか。
また、タイトル部分を、黒く塗りたいのでスタイルシートか
HTMLどちらを編集すればよいのかご教授お願いします。

[ 2008/12/07 17:21 ] [ 編集 ]

[ 3616 ]

ご教授ありがとうございます。

少し欲を言うと記事とは別の色にしたいのですが
これは仕方が無いものと思うので、これで満足しています。

これでブログ一周年を迎えられます、ありがとうございました。

[ 2008/12/07 21:02 ] [ 編集 ]

[ 3653 ] あーちゃんさん

nnowen2ｱｯﾄyahoo.co.jp

[ 2009/01/05 21:23 ] [ 編集 ]

[ 3679 ] カテゴリ別のサイトマップが作れません

お初にお目にかかります。
いたお様のテンプレートとは別のテンプレートを使用しているのですが、カテゴリ別にサイトマップを作りたく検索していたところ、こちらにたどり着きました。

ＰＣ初心者なもので、見よう見まねでトライしてみたのですが、上手く作れません(泣)

私の使用しているテンプレートでは、こちらの方法ではムリなのでしょうか。ＰＣ初心者なこともあり、カスタマイズがたくさん出来るテンプレートは、まだ技術的に無理だと思い、現在のテンプレートを使用しています。

ご指導、よろしくお願いいたします。

[ 2009/02/14 23:57 ] [ 編集 ]

[ 3688 ]

プラグインや記事などの枠の角を丸くする事は可能なのでしょうか？

[ 2009/02/24 20:05 ] [ 編集 ]

[ 3689 ] テンプレートの作り方がわかりません

いたおさんとははじめましてお会いになります

私はパソコン自体初心者なんです

ほとんどは人の作ったテンプレートを

使っていたのですが、自分でも作りたいと思い、

　　　　　　　ここにきました

いろいろコピペしてプレビューしたのですが、

ほとんど真っ白で特に何もなかたのです；；

これはどういうことなのでしょうか???

教えてください!

[ 2009/02/24 22:09 ] [ 編集 ]

[ 3700 ] カテゴリ

　これはいいですね。さっそく試してみます。

[ 2009/03/06 19:41 ] [ 編集 ]

[ 3703 ] テンプレートの変更方法について

はじめまして。

FC2ブログのテンプレートを自分でカスタマイズしてみたいと思い、こちらのHPに辿り着いたのですが、パソコン初心者なもので、どうしたらいいのかわからず困っています…。
（テンプレートは、lightframe_whiteを使用したいと思っています。）

ご指導の程、よろしくお願いいたします。

[ 2009/03/09 11:08 ] [ 編集 ]

[ 3715 ] ▼takaさん

管理画面に入り、
テンプレートの設定→共有テンプレート追加→「名前」部分に「lightframe_white」を入力→検索→詳細→ダウンロード

カスタマイズをする場合には先程と同じく管理画面の、
「テンプレートの設定」
そこにダウンロードしたテンプレート一覧があります。
HTMLやスタイルシートを変更・追加・削除等の手を加え、カスタマイズをしていきます。

[ 2009/03/16 01:30 ] [ 編集 ]

[ 3720 ] ありがとうございました！

無事、テンプレートを変更することが出来ました！
これから少しずつブログについて勉強していきたいと思います。
ちゃんさん、ありがとうございました！！

[ 2009/03/17 20:36 ] [ 編集 ]

[ 5471 ] ツリー化リンク

こんにちは^^またまたスミマセンが

リンクのツリー化でフリーエリアをダウンロードして
上記の<style type="text/css" media="all">～--></script>までをコピペしました。

グループAの所を親題目（リンク先の系統別）に書き換えましたが
リンク化出来ませんでした（T.T)何か作業が足りませんでしょうか？
ご教授宜しくお願いします！

[ 2009/08/16 12:25 ] [ 編集 ]

[ 5473 ] > 歩さん

作業はそれで十分のはずですが、現状を見てみないと原因が解りません。URLを教えてもらえますか。

[ 2009/08/16 13:14 ] [ 編集 ]

[ 5634 ] 記事一覧の背景

カテゴリを選択してページを移動し、移動したページの上にはそのカテゴリの記事一覧が表示されますよね、そのことについて質問したいのですが....

①その一覧の背景の色と文字の色の変更方法

②一覧を消すことは可能ですか？

長々とすいませんがよろしくおねがいします。

[ 2009/08/25 16:31 ] [ 編集 ]

[ 5636 ] >tomoさんへ

答えになっているのかが疑問なのでフォローお願いします。
テンプレートのバックアップを残されてから、

カテゴリの記事一覧を消すのであれば、

：


を削除すれば、ダイレクトに記事が表示されます。一応テストしてみました。①の色部分と背景色は、この状況でのお話でしょうか？

[ 2009/08/25 16:59 ] [ 編集 ]

[ 5638 ] > tomoさん、通行人さん

> tomoさん
その部分を削除したいのであれば、通行人さんが教えてくれた箇所を削除してください。

背景と文字の色を変えるには、スタイルシートの末尾に以下を加えてください。

.various_body {
background-color:#333333; /* 便利ナビの背景色 */
}
.various_body a {
color:#cccccc; /* 便利ナビのリンクの色 */
}

> 通行人さん
皆さんの疑問に答えてくれてありがとうございます＾＾

[ 2009/08/25 18:22 ] [ 編集 ]

[ 5640 ] ありがとうございました。

無事自分の思っているとうりにできました。

通行人さんいたおさん素早い回答ありがとうございました。

[ 2009/08/25 18:35 ] [ 編集 ]

[ 5642 ] > tomoさん

解決して良かったです＾＾

[ 2009/08/25 23:13 ] [ 編集 ]

[ 5668 ] 管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

[ 2009/08/26 22:26 ] [ 編集 ]

[ 5681 ] ツリー化（親）のカラー

いたおさん、ちゃんさん、ご無沙汰してます^^

↑遅くなりましたが自己解決できました！リンクの数が少なかったのと
設定をクリックせずにプレビューだけでは駄目だったのかも？です！

で又ご相談ですが、ツリー化リンクの親の色だけを少し目立つ色に変える方法がありますか？

もし駄目なら他の方法とか在りますかね？例えば下線を入れる方法とか、何かアイコン的な物を表示するとか・・・？
スイマセンが宜しくお願いします。

[ 2009/08/27 15:50 ] [ 編集 ]

[ 5690 ] > 歩さん

記事を追記したのでこちらを参考にしてください。

アイコン付きツリー化リンク【2009/08/27 追記】
http://10plate.blog44.fc2.com/blog-entry-168.html#a20090827

[ 2009/08/27 19:48 ] [ 編集 ]

[ 5862 ]

はじめまして。
いきなりで申し訳ないのですが、

｢アイコン付きツリー化リンク｣と、
｢アイコン付きツリー化カテゴリー｣の違いは何なのでしょうか。

違いがよくわからず困っています...。
よろしければ教えてください。

[ 2009/09/05 22:23 ] [ 編集 ]

[ 5866 ] ▼慧さん

管理画面で言うと、
リンクは「リンクの設定」
カテゴリーは「カテゴリの編集」
に繋がるものです。

[ 2009/09/05 23:35 ] [ 編集 ]

[ 5870 ] > 慧さん、ちゃんさん

> ちゃんさん
いつもありがとうございます＾＾

> 慧さん
もしちゃんさんの説明で解らなければ、URLを教えてくれれば具体的にどの部分がカテゴリなのか教えられますよ。

[ 2009/09/06 00:27 ] [ 編集 ]

[ 5876 ] >ちゃんさん、いたおさん

理解できました。
早速挑戦してみますね＾＾

ありがとうございました。

[ 2009/09/06 11:10 ] [ 編集 ]

[ 5879 ] > 慧さん

理解できて良かったです＾＾

[ 2009/09/06 12:26 ] [ 編集 ]

[ 5965 ] リンクのツリー化で

こんにちわ、早速で恐縮ですがツリー化で
リンクの下側にメモ帳の様な点線を入れる事が出来ますか？

[ 2009/09/10 15:45 ] [ 編集 ]

[ 5977 ] > Q太郎さん

スタイルシートの末尾にこれを追加してみてください。

#ILI a {
text-decoration: none;
border-bottom: dashed 1px #cccccc;
padding-bottom: 1px; /* 破線までの余白 */
}

色や太さ等の設定値はお好みにあわせて設定してください。

[ 2009/09/10 22:58 ] [ 編集 ]

[ 6236 ] ツリーのアイコンずれ

サイトマップなど、いろんなことにお世話になっております。
今回もツリー化リンクでお世話になりました。

それで、ツリーの親の部分にだけアイコンを付けたのですが
微妙にアイコンがずれてしまいます。
(FireFox3.5です。IE6ではあまりずれている様に感じませんが…)
これを修正する方法がどうしてもわからず、ご相談にまいりました。
もしおわかりになれば教えていただきたいのです
よろしくお願い致します；

[ 2009/09/26 16:45 ] [ 編集 ]

[ 6250 ] > ねいさん

スタイルシートの末尾にこれを加えてください。

html:not([lang*=""]) #ILI p img {
margin-top:-3px;
}

[ 2009/09/27 00:50 ] [ 編集 ]

[ 6257 ] ありがとうございました！

ズレが直りました！
ありがとうございました。

[ 2009/09/27 10:08 ] [ 編集 ]

[ 6263 ] > ねいさん

直って良かったです＾＾

[ 2009/09/27 21:51 ] [ 編集 ]

コメントの投稿