テンプレ、プラグインのカスタマイズを色々試しつつ、こっそりテンプレ作成などしてみたり(謎)
09月 ≪ 2017年10月 ≫11 月
12345678910111213141516171819202122232425262728293031
つぶやきぃ~♪
チェックチェック!
クリックしてね♪
ぽちっと同盟名簿へ
meromero park



タグふれんず

BlogPet

いろいろサーチ
プロフィール

あき

etc・・・
 エントリーナビ 
スポンサーサイト 
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
この記事に拍手する
スポンサー広告 * * TOP↑
ユーザータグリストをツリー化表示する 
ユーザータグリストをツリー表示させるのは、簡単です。
ちょっとめんどくさいようなめんどくさくないような。

カウント順、ランダム順、新着順、どれでもいいので、まずは表示させ、そのページのソースを開きます。



<ul>
<li><a href="タグURL1">タグネーム1</a></li>
<li><a href="タグURL2">タグネーム2</a></li>

<li><a href="タグURL10">タグネーム10</a></li>
</ul>



こんな感じに書かれてるのを見つけたら、

<ul>
<li>見出しにする文字1</li>
<li class="tree"><a href="タグURL1">タグネーム1</a></li>
<li class="tree_end"><a href="タグURL2">タグネーム2</a></li>
<li>見出しにする文字2</li>
<li class="tree"><a href="タグURL3">タグネーム3</a></li>
<li class="tree"><a href="タグURL4">タグネーム4</a></li>
<li class="tree_end"><a href="タグURL5">タグネーム5</a></li>

<li>見出しにする文字3</li>
<li class="tree_end><a href="タグURL10">タグネーム10</a></li>
</ul>



と、書き直します。

【最近の記事+コメント】で、ツリーの画像はCSSに追加してあるので、そのまま使うならこれで(≧∇≦)b OK。
違う物を使うなら、tree1、tree_end1などとして追加。

新しくタグを追加した場合は、もう一度別にユーザータグのプラグインをDLしなおして、新着順にして表示させると簡単です。

Return・‥…━━━★
スポンサーサイト
この記事に拍手する
プラグインカスタマイズ * CM(0)TB(0)TOP↑
ツリーマークを画像に変える! 
Treeシリーズにアイコンを付けるで書いたように、あきの場合は頭にアイコンが付いているので、ツリープラグインをDLした物を、あらかじめごっそり入れ替えてあります。


以下、作業メモ。


CATEGORY

<div class="tree"><ul id="CA"><!--category-->
<li>
途中省略・・・この下辺りから探してみてね!!
/*---------------------------------------------------*/
for (i=1;i<t.length;i++){if(t[i]!="" && t[i]!=undefined){A[i-1].title=t[i]}}
for (i=1;i<C.length;i++){ p=C[i].split(','); l=p.length; if(l>1){
I=I+'<li><b>'+p[0]+'</b><br />';
for (k=1;k<l;k++){ q=p[k]-1;
if(k==l-1) {I+=" └ "} else {I+=" ├ "}
I+='<a href="'+A[q].href+'" title="'+A[q].title+'">'+A[q].innerHTML+'</a><br />'; A[q].title="-";
} I+='</li>';
} }
以下省略・・・


赤字の部分を下記に変更

if(k==l-1) {I+="<li class='tree_end'>"} else {I+="<li class='tree'>"}


【最近の記事+コメント】で、ツリーの画像はCSSに追加してあるので、そのまま使うならこれで(≧∇≦)b OK。
違う物を使うなら、tree1、tree_end1などとして追加。

TBLINKCOMMENTRECENTもだいたい同じような感じでいけます。
ただ、、Archiveだけはそうはいかない(笑)
こちらはまたいつか・・・

Return・‥…━━━★
[] by トモ

そーなのー
アーカイブだけはそのままなんだよー
Σ(T▽T;) ぐわわぁぁ~ん!

次の記事・・・

まってる♪(´vωv`*)。o0○ ポワン
[] by あき

>トモちん

アーカイブはねー、手ごわいのだ!!
あきも悩んで悩んで悩みまくって、結局出来なかったの(泣)
そのうちアップしまする!!
コメントを閉じる▲
この記事に拍手する
プラグインカスタマイズ * CM(2)TB(0)TOP↑
ブログピープルをカスタマイズ 
blog*citronさん。
div出力に設定して、素敵にカスタマイズできちゃいます。

あきの場合は、テーブル出力にしてます。
CSSに下記を追加。
プラグインの編集で、ブログピープルのタグをdivタグで囲みます。

.bp { margin-left:10px; padding:0px;}

.blogpeople-tr-linklist {
font-size: 12px;
font-weight: bolder;
padding:10px 0px 0px 0px;}



こんな感じで、テーブルの<tr>部分の文字を大きくし、太くしてます。
これだけでも、ちょっとスッキリするざんしょ??
後はブログピープルの方の設定で、リンク先の頭にアイコンを付けてるので、プラグインのリストと同じような感じに出来ました~♪

neko*dofuさんを参考にすると、トラックバックピープルもカスタマイズできちゃいますよ♪


カバチタレ(笑)のつりぼり様。
こちらで、以前ブログピープルをツリー化する。という記事を書かれていたのを参考に、試行錯誤したのですが、出来ませんでした・・・
どなたか、教えて下さい~~!!

Return・‥…━━━★
[] by トモ

トモはdiv出力でやってるよぉ~
結構見やすくて愛用してる(= '艸')ムププ

んでさ・・・
ツリー化の記事、見てみようと思ったらパスワード聞かれたよ~(ノд-。)クスン
見れなかった…|ω-)ジィィ

ツリー化なんてできたら素敵ね~♪
[] by あき

>トモちん

そそ、なんかパスワード制限かかちゃったのよね・・・
ツリー化したいねぇ。
コメントを閉じる▲
この記事に拍手する
プラグインカスタマイズ * CM(2)TB(0)TOP↑
ツリーシリーズ続き。 
ツリーシリーズにアイコンを付ける!の続き。

共有プラグインNewMarkに対応版。
毎度毎度のFCafeのdanielさんですよ~♪



TB編

<div class="tree"><ul id="RT">
<!--rtrackback--><li>
<a href="<%rtrackback_link>#trackback<%rtrackback_no>" title="<%rtrackback_etitle>"
class="time<%rtrackback_year><%rtrackback_month><%rtrackback_day><%rtrackback_hour>">
<span><%rtrackback_month>/<%rtrackback_day></span>
<%rtrackback_blog_name></a>
</li><!--/rtrackback-->
</ul></div>

<script type="text/javascript"><!--
var A=document.getElementById('RT').getElementsByTagName('A');
I=""; L=A.length;
for (i=0;i<L;i++){ E=A[i].title; if (E!="") {
var C=new Array(); c=-1; I+='<li><b>'+E+'</b><br />';
for (j=i;j<L;j++){if (A[j].title==E) {c++; C[c]=j}}
for (j=0;j<=c;j++){
k=C[j]; A[k].title="";p=A[k].innerHTML.split(' '); q=A[k].className;
if (j<c) {I+=' ├'} else {I+=' └'}
I+='<a href="'+A[k].href+'" class="'+q+'">'+p[1]+'</a><br />';
} I+='</li>';
} } document.getElementById('RT').innerHTML=I;
--></script>



RECENT編

<div class="tree"><ul id="RE">
<!--recent--><li>
<span><%recent_month>/<%recent_day></span>
<a href="<%recent_link>" title="<%recent_month>月<%recent_day>日" class="time<%recent_year><%recent_month><%recent_day><%recent_hour>">
<%recent_title></a>
</li><!--/recent-->
</ul></div>

<script type="text/javascript"><!--
var A=document.getElementById('RE').getElementsByTagName('A');
var I=""; var E=""; var L=A.length;
for (i=0;i<L;i++){
if (A[i].title!=E){ E=A[i].title; I+='<li><b>'+E+'</b><br />'}
if (i==L-1 || A[i+1].title!=E){ I+=' └';k='</li>';
} else {I+=' ├';k=""}
I+='<a href="'+A[i].href+'" class="'+A[i].className+'">'+A[i].innerHTML+'</a><br />'+k;
}
document.getElementById('RE').innerHTML=I;
//--></script>



COMMENT編

<div class="tree"><ul id="RC">
<!--rcomment--><li>
<a href="<%rcomment_link>#comment<%rcomment_no>" title="<%rcomment_etitle>"
class="time<%rcomment_year><%rcomment_month><%rcomment_day><%rcomment_hour>">
<span><%rcomment_month>/<%rcomment_day></span>
<%rcomment_name></a>
</li><!--/rcomment-->
</ul></div>

<script type="text/javascript"><!--
var A=document.getElementById('RC').getElementsByTagName('A');
I=""; L=A.length;
for (i=0;i<L;i++){ E=A[i].title; if (E!="") {
var C=new Array(); c=-1; I+='<li><b>'+E+'</b><br />';
for (j=i;j<L;j++){if (A[j].title==E) {c++; C[c]=j}}
for (j=0;j<=c;j++){
k=C[j]; A[k].title=""; p=A[k].className;
if (j<c) {I+=' ├'} else {I+=' └'}
I+='<a href="'+A[k].href+'" class="'+p+'">'+A[k].innerHTML+'</a><br />';
} I+='</li>';
} } document.getElementById('RC').innerHTML=I;
--></script>



Return・‥…━━━★
この記事に拍手する
プラグインカスタマイズ * CM(0)TB(0)TOP↑
Treeシリーズにアイコンを付ける 
FCafeのdanielさん作、プラグインTreeシリーズ、使わせていただいてます♪
簡単にツリー化できて、見た目もスッキリ♪
大好きでぇす!!

すっごくすっごく頑張って、アイコン付けたり、ツリーマークを画像にしたり・・・
いや、マジで色々悩んでるんですよ!!信じて!!!(・m・ )クスッ
最終的には、ぜぇ~~んぶ師匠に助けてもらってるんだけどさ・・・・・・・・○┼< バタッ・・・・・

treeTB、treeArchive、treeCATEGORY、treeLINK、4つ使わせていただいてるのですが、そんなこんなで、リストにアイコンを付けて、ツリーマークを画像に変えるカスタマイズを!!
と、思ったけど、danielさんのブログで裏ページ(笑)を発見しちゃったのです!!!
まずは、そちらの覚え書きのみ。

カスタマイズについては、また次回。



プラグインtreeシリーズにアイコンを付ける script by FCafe

作業メモ

①プラグインをDLしてある場合は、中身を下記とごっそり入れ替える。
DLしていない場合は、フリーエリアを作り、入れる。以上。

CATEGORY

<div class="tree"><ul id="CA"><!--category-->
<li>
<a href="<%category_link>" title=""><%category_name> (<%category_count>)</a>
</li>
<!--/category--></ul></div>

<script type="text/javascript"><!--
var A=document.getElementById('CA').getElementsByTagName('A');
var C=new Array(); var t=new Array(); I="";
/*--------------------- 各カテゴリの説明 -------------*/
t[1]="";
t[2]="";
t[3]="";
t[4]="";
t[5]="";
t[6]="";
t[7]="";
t[8]="";
t[9]="";
/*---------------------- グループ(大カテゴリ) --------*/
C[1]="GROUP-A,1,2,3";
C[2]="GROUP-B";
/*---------------------------------------------------*/
for (i=1;i<t.length;i++){if(t[i]!="" && t[i]!=undefined){A[i-1].title=t[i]}}
for (i=1;i<C.length;i++){ p=C[i].split(','); l=p.length; if(l>1){
I=I+'<li><b>'+p[0]+'</b><br />';
for (k=1;k<l;k++){ q=p[k]-1;
if(k==l-1) {I+=" └ "} else {I+=" ├ "}
I+='<a href="'+A[q].href+'" title="'+A[q].title+'">'+A[q].innerHTML+'</a><br />'; A[q].title="-";
} I+='</li>';
} }
for (i=0;i<A.length;i++){if (A[i].title!="-") {
p= A[i].innerHTML.split(' ');
I+='<li><a href="'+A[i].href+'" title="'+A[i].title+'"><b>'+p[0]+'</b> '+p[1]+'</a></li>';
} }
document.getElementById('CA').innerHTML=I;
--></script>



TB

<div class="tree"><ul id="RT">
<!--rtrackback--><li>
<a href="<%rtrackback_link>#trackback<%rtrackback_no>" title="<%rtrackback_etitle>"
name="<%rtrackback_year>/<%rtrackback_month>/<%rtrackback_day>/<%rtrackback_hour>">
<span>>%rtrackback_month>/<%rtrackback_day></span>
<%rtrackback_blog_name></a>
</li><!--/rtrackback-->
</ul></div>

<script type="text/javascript"><!--
var A=document.getElementById('RT').getElementsByTagName('A');
I=""; L=A.length;
for (i=0;i<L;i++){ E=A[i].title; if (E!="") {
var C=new Array(); c=-1; I+='<li><b>'+E+'</b><br />';
for (j=i;j<L;j++){if (A[j].title==E) {c++; C[c]=j}}
for (j=0;j<=c;j++){
k=C[j]; A[k].title="";p=A[k].innerHTML.split(' '); q=A[k].name;
if (j<c) {I+=' ├'} else {I+=' └'}
I+='<a href="'+A[k].href+'" title="'+q+'" name="'+q+'">'+p[1]+'</a><br />';
} I+='</li>';
} } document.getElementById('RT').innerHTML=I;
--></script>



LINK

<div class="tree"><ul id="LK"><!--link-->
<li>
<a href="<%link_url>" title="<%link_url>" target="_blank"><%link_name></a>
</li>
<!--/link--></ul></div>

<script type="text/javascript"><!--
var A=document.getElementById('LK').getElementsByTagName('A');
var C=new Array(); var t=new Array(); I="";
/*--------------------------- 各リンクの説明 ----------------*/
t[1]="";
t[2]="";
t[3]="";
t[4]="";
t[5]="";
t[6]="";
t[7]="";
t[8]="";
t[9]="";
/*-------------------------- 分類グループ -------------------*/
C[1]="Group-A,1,2,3";
C[2]="Group-B";
C[3]="Group-C";
OTHER="others"; // 「未分類」グループ名
/*-------------------------------------------*/
for (i=1;i<t.length;i++){if(t[i]!="" && t[i]!=undefined){A[i-1].title=t[i]}}
for (i=1;i<C.length;i++){
p=C[i].split(','); l=p.length; if(l>1){
I=I+'<li><b>'+p[0]+'</b><br />';
for (k=1;k<l;k++){ q=p[k]-1;
if(k==l-1) {I+=" └ "} else {I+=" ├ "}
I+='<a href="'+A[q].href+'" title="'+A[q].title+'">'+A[q].innerHTML+'</a><br />';
A[q].title="";
} I+='</li>';
} }
l=-1; var C=new Array();
for (i=0;i<A.length;i++){if (A[i].title!="") {l++; C[l]=i}}
if(l>=0){ I+='<li><b>'+OTHER+'</b><br />';
for (i=0;i<l;i++){
k=C[i]; if (i<l-1) {I+=' ├'} else {I+=' └'}
I+='<a href="'+A[k].href+'" title="'+A[k].title+'">'+A[k].innerHTML+'</a><br />';
} I+='</li>'
}
document.getElementById('LK').innerHTML=I;
--></script>



Archive

<div class="tree"><ul id="AR"><!--archive-->
<li>
<a href="<%archive_link>" title="<%archive_year>">
<%archive_year>年<%archive_month>月 (<%archive_count>)
</a>
</li>
<!--/archive--></ul></div>

<script type="text/javascript"><!--
var A=document.getElementById('AR').getElementsByTagName('A');
L=A.length; Y=0; YN=0; I="";
function yc(k) {
for (i=0;i<YN;i++){document.getElementById('y'+i).style.display="none"}
document.getElementById("y"+k).style.display="block";
}
for (i=0;i<L;i++){
E=A[i].title; k="";
if(E!=Y){I+='<li><b onclick="yc('+YN+')">'+E+'年</b><br /><span id="y'+YN+'">'; Y=E; YN++}
if(i==L-1 || A[i+1].title!=E ) {I+=" └ ";k='</span></li>'} else {I+=" ├ "}
I+='<a href="'+A[i].href+'">'+A[i].innerHTML.split('年')[1]+'</a><br />'+k;
}
document.getElementById('AR').innerHTML=I;
for (i=1;i<YN;i++){document.getElementById('y'+i).style.display="none"}
//--></script>



使ってないけど、おまけ・・・

COMMENT

<div class="tree"><ul id="RC">
<!--rcomment--><li>
<a href="<%rcomment_link>#comment<%rcomment_no>" title="<%rcomment_etitle>"
name="<%rcomment_year>/<%rcomment_month>/<%rcomment_day>/<%rcomment_hour>">
<span><%rcomment_month>/<%rcomment_day></span>
<%rcomment_name></a>
</li><!--/rcomment-->
</ul></div>

<script type="text/javascript"><!--
var A=document.getElementById('RC').getElementsByTagName('A');
I=""; L=A.length;
for (i=0;i<L;i++){ E=A[i].title; if (E!="") {
var C=new Array(); c=-1; I+='<li><b>'+E+'</b><br />';
for (j=i;j<L;j++){if (A[j].title==E) {c++; C[c]=j}}
for (j=0;j<=c;j++){
k=C[j]; A[k].title=""; p=A[k].name;
if (j<c) {I+=' ├'} else {I+=' └'}
I+='<a href="'+A[k].href+'" title="'+p+'" name="'+p+'">'+A[k].innerHTML+'</a><br />';
} I+='</li>';
} } document.getElementById('RC').innerHTML=I;
--></script>



RECENT

<div class="tree"><ul id="RE">
<!--recent--><li>
<span><%recent_month>/<%recent_day></span>
<a href="<%recent_link>" title="<%recent_month>月<%recent_day>日" name="<%recent_year>/<%recent_month>/<%recent_day>/<%recent_hour>">
<%recent_title></a>
</li><!--/recent-->
</ul></div>

<script type="text/javascript"><!--
var A=document.getElementById('RE').getElementsByTagName('A');
var I=""; var E=""; var L=A.length;
for (i=0;i<L;i++){
if (A[i].title!=E){ E=A[i].title; I+='<li><b>'+E+'</b><br />'}
if (i==L-1 || A[i+1].title!=E){ I+=' └';k='</li>';
} else {I+=' ├';k=""}
I+='<a href="'+A[i].href+'" name="'+A[i].name+'">'+A[i].innerHTML+'</a><br />'+k;
}
document.getElementById('RE').innerHTML=I;
//--></script>



Return・‥…━━━★
この記事に拍手する
プラグインカスタマイズ * CM(0)TB(0)TOP↑
【最近の記事+コメント】 
【最近の記事+コメント】にアイコンを付けてキレイなツリー画像を使う!!

ブログ開設当初、アイコン付きツリー化カテゴリーというプラグインを使用してました。(今は使ってません。)
大カテゴリにアイコンが付けられるのが魅力で、お気に入りだったのですが、作者様はカテゴリしか作っていなかったようです。(実は、danielさんのツリーカテゴリが元になっていたのは・・・今日知ったのですが・・・(*´-ω-)σォィォィ…)

FCafe】danielさん作の他のツリー化プラグインを使うようになり、バランスに納得がいかなくなりました。
今になって思えば、marginやpaddingの指定でいくらでも納得の行く形に出来たと思うのですが、その時は、作者さんが違うんだから仕方ない!!などと思っていたのです。
そして、danielさん作のツリー化シリーズで揃えた訳です。

少したって、最近の記事+コメントというプラグインを見つけ、これはいい!!とDLしました。
作者様は、【30歳目前。肉体改造計画。】のらぐさん。
こちらのページでも詳しく解説して下さっています。

あきの場合、ブログの機能よりもまず見た目!!なので、自己満足の世界なのですが、まずツリーマーク(├ ← これや、└ ← これ)を画像に変える事にしました。
らぐさんのブログでも紹介されている、【小粋空間】yujiroさんの記事を参考にカスタマイズ完了!!

のはずが、ここでリストマークをアイコンに変えて記事リストの頭に付けたくなったのです!!
そう、アイコン付きカテゴリと同じ形にしたくなったのですよ!!!



カスタマイズへ!!


「最近の記事+コメント」プラグインをきれいなツリーにする カスタマイズ by 【小粋空間

作業メモ

①スクリプト内の変更。

var FMT_HEAD = '<UL>';
var FMT_PARENT_HEAD = ' <LI style="text-align:left">';
var FMT_PARENT_BODY = ' %ENTRY% %EXTRA%';
var FMT_COMM_HEAD = '';
var FMT_COMM_BODY = ' <BR />├ %COMMENT%';
var FMT_COMM_TAIL = '';
var FMT_PARENT_TAIL = ' </LI>';
var FMT_TAIL = '</UL>';
var FMT_PARENT_BODYL = FMT_PARENT_BODY;
var FMT_COMM_BODYL = ' <BR />└ %COMMENT%';

       ↓

var FMT_HEAD = '<UL>';
var FMT_PARENT_HEAD = ' <LI style="text-align:left">';
var FMT_PARENT_BODY = ' %ENTRY% %EXTRA%';
var FMT_COMM_HEAD = '<UL>';
var FMT_COMM_BODY = ' <LI class="tree"> %COMMENT%</LI>';
var FMT_COMM_TAIL = '</UL>';
var FMT_PARENT_TAIL = ' </LI>';
var FMT_TAIL = '</UL>';
var FMT_PARENT_BODYL = FMT_PARENT_BODY;
var FMT_COMM_BODYL = ' <LI class="tree_end"> %COMMENT%</LI>';



②CSSに以下を追加。

.tree {
margin-left: 3px;
padding: 0 0 0 15px;
background: url(├←このマークの変わりに使う画像URL) no-repeat 2px 0;
list-style: none;}

.tree_end {
margin-left: 3px;
padding: 0 0 0 15px;
background: url(└←このマークの変わりに使う画像URL) no-repeat 2px 0;
list-style: none;}



更にカスタマイズ!!記事の頭にアイコンを付ける。 by KAZU

作業メモ

①スクリプト内(FMT_HEAD、FMT_PARENT_HEAD、FMT_COMM_HEAD、FMT_PARENT_TAIL)の変更。

var FMT_HEAD = '<UL>';
var FMT_PARENT_HEAD = ' <LI style="text-align:left">';
var FMT_PARENT_BODY = ' %ENTRY% %EXTRA%';
var FMT_COMM_HEAD = '<UL>';
var FMT_COMM_BODY = ' <LI class="tree"> %COMMENT%</LI>';
var FMT_COMM_TAIL = '</UL>';
var FMT_PARENT_TAIL = ' </LI>';

      ↓

var FMT_HEAD = '<UL class="ul1">';
var FMT_PARENT_HEAD = ' <p style="text-align:left"><img src="アイコン画像URL">';
var FMT_PARENT_BODY = ' %ENTRY% %EXTRA%';
var FMT_COMM_HEAD = '<UL class="ul1">';
var FMT_COMM_BODY = ' <LI class="tree"> %COMMENT%</LI>';
var FMT_COMM_TAIL = '</UL>';
var FMT_PARENT_TAIL = ' </p>';



②CSSのリストの設定部分に以下を追加する。

.ul1 { margin:2px 0 5px 0;
padding:0;
list-style-image: url(); }



Return・‥…━━━★
[] by ★トモ★

ほぉ♪
細かいところにもきをつかってますのぅ!
あきしやんのテンプレはかわいくて見やすいねー!!
参考にさせてもらいまするぅぅぅ~(*∩ω∩)
[] by あき

>トモちん

見やすい・・・
オペラで見たらすごい事になってたよ(泣)
IE限定っつうのはねぇ???(`ー´) クククッ
いいのだ。自己満足なのだ!!
[管理人のみ閲覧できます] by -

コメントを閉じる▲
この記事に拍手する
プラグインカスタマイズ * CM(3)TB(1)TOP↑


登録してね♪
おこづかいゲット~!
宿・ホテル予約ならじゃらんnet セシール セシール - デジタルカタログ テニス365 オンライン書店 boople.com(ブープル) e87.com(株式会社千趣会イイハナ) ジャパネットたかた メディアミックスショッピング みんなが気になるあなたのブログ レビューブログ
最近のコメント
カテゴリ
アーカイブ
リンク
List Me! by BlogPeople
ユーザータグ
トラックバック
テンプレ一覧

* デザイン変更 *
(トップに飛ぶと 元に戻ります)


Style Changer(改)
Script by FCafe
Arrange by ウェビンブログ

カウンター

今ここに:人います!
今日の献立
Yahoo!オークション
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。