カテゴリを改造する [技術系]
本日はblog改造系の記事でございまする。
実は、このカテゴリの記事が一番得意なんです…最近はプログラムを作る機会が
全然ありませんが、曲がりなりにも本職ですしね('`)
という事で、本日はカテゴリを改造します！
左側に「マイカテゴリー」ってのがありますよね、これはデフォルトのパーツでは
上から順につらつらと表示されるだけなので、カテゴリを系統毎に分けられず
ちょっと見辛いんですよね。
そこで、カテゴリをグループ毎に分けられるよう改造しましょう！
変更すべき箇所は以下の通りです。
これらを変更した上で、ブログパーツのコンテンツHTMLに貼り付ければOKス。
赤文字は必須変更部分。
青文字は任意変更部分。
赤文字部分は、カテゴリのグループを定義しています。
配列の先頭がグループ名、その後方に属するカテゴリ名を設定してください。
例えば [new Array("トレーニング","筋トレ","減量","増量")] ならば、[トレーニング] という
グループに [筋トレ] [減量] [増量] というカテゴリが含まれるという事です。
グループが増減する場合、 [new Array(...),] という文を追加/削除して下さい
この時、一番最後のグループについては終端の カンマ[,] を削除して下さい。
青文字部分は、文字色とグループの先頭文字、連結文字列の定義をしております
特に変更する必要が無ければ、このままでOKです。
<div class="sidebar" id="category">
<h3 class="sidebar-title"><% content.title | html %></h3>
<div class="sidebar-body" id="categoryBody" style="color:#006598;">
<ul>
<% loop:list_category -%>
<% unless:category.no_category %>
<li><a href="<% category.page_url %>"><% category.name | html %></a>
(<% category.article_count | __or__ | echo("0") %>)</li><% /unless %>
<% /loop -%>
</ul>
</div>
<div class="sidebar-end"></div>
</div>
<script type="text/javascript">
<!--
createCategoryGroup();
/**
* function : カテゴリをグループ化する
* param : なし
* return : なし
*/
function createCategoryGroup()
{
// カテゴリリストを定義
// 各配列の第一要素をグループ名とし、以降に対象となるカテゴリを定義する。
// 最終要素(その他)には、全てのグループに該当しないカテゴリが含まれる
// グループの名称を定義する。
var categoryList = new Array(
new Array("トレーニング","筋トレ","減量","増量"),
new Array("ピアノレッスン","1年目"),
new Array("ピアノ動画","バイエル","聖剣伝説"),
new Array("音楽 - その他","クラシック","音楽活動"),
new Array("その他")
);
// グループ名見出し文字
var strHead = "■";
// 連結部文字(中間)
var strCon = " ┣ ";
// 連結部文字(末尾)
var strFoot = " ┗ ";
// 出力用文字列
var htmlStr = "";
// エレメントを取得
var elmCategory = document.getElementById("categoryBody");
var elmList = elmCategory.getElementsByTagName("li");
var elmHref = elmCategory.getElementsByTagName("a");
// 空のタグリストを生成(初期化処理は省略可)
var htmlStrArr = new Array(categoryList.length);
for(var i = 0; i < htmlStrArr.length; i++)
{
htmlStrArr[i] = new Array();
}
// カテゴリ数回、処理を行う
for(var i = 0;i < elmHref.length; i++)
{
// カテゴリリスト数回、処理を行う
for(var j = 0; j < categoryList.length; j++)
{
// カテゴリリストに存在するか、全てのリストに存在しない場合(その他の場合)
if(cmpCategory(elmList[i].innerHTML, categoryList[j]) ||
j == categoryList.length - 1)
{
// リンクタグを生成する
htmlStrArr[j][htmlStrArr[j].length] =
createLinkStr(elmList[i].innerHTML, elmHref[i].href);
break;
}
}
}
// タグリスト数回、処理を行う
for(var i = 0; i < htmlStrArr.length; i++)
{
// グループ名を付与
htmlStr += createGroupStr(strHead + categoryList[i][0]);
// 各グループに存在するタグ数回、処理を行う
for(var j = 0; j < htmlStrArr[i].length; j++)
{
// 連結部文字を付与
if(j == htmlStrArr[i].length - 1)
{
// 末尾
htmlStr += strFoot;
}
else
{
// 中間
htmlStr += strCon;
}
// タグを出力
htmlStr += htmlStrArr[i][j] + "<br>";
}
// 最終グループ以外の場合、改行を設定
if(i != htmlStrArr.length - 1)
{
htmlStr += "<br>";
}
}
elmCategory.innerHTML = htmlStr;
}
/**
* function : カテゴリがリストに存在するか確認を行う
* param : name カテゴリ名
* param : list カテゴリリスト
* return : 有無
*/
function cmpCategory(name, list)
{
var ret = false;
for(var i = 0; i < list.length; i++)
{
if(name.indexOf(list[i]) > 0)
{
ret = true;
break;
}
}
return ret;
}
/**
* function : カテゴリリンクタグを生成する
* param : name カテゴリ名
* param : url カテゴリURL
* return : 生成されたリンクタグ
*/
function createLinkStr(name, url)
{
return "<a href=\"" + url + "\">" + name + "</a>";
}
/**
* function : グループ名テキストを生成する
* param : name グループ名
* return : 生成されたグループ名テキスト
*/
function createGroupStr(name)
{
return "<b>" + name + "</b><br>";
}
// -->
実は、このカテゴリの記事が一番得意なんです…最近はプログラムを作る機会が
全然ありませんが、曲がりなりにも本職ですしね('`)
という事で、本日はカテゴリを改造します！
左側に「マイカテゴリー」ってのがありますよね、これはデフォルトのパーツでは
上から順につらつらと表示されるだけなので、カテゴリを系統毎に分けられず
ちょっと見辛いんですよね。
そこで、カテゴリをグループ毎に分けられるよう改造しましょう！
変更すべき箇所は以下の通りです。
これらを変更した上で、ブログパーツのコンテンツHTMLに貼り付ければOKス。
赤文字は必須変更部分。
青文字は任意変更部分。
赤文字部分は、カテゴリのグループを定義しています。
配列の先頭がグループ名、その後方に属するカテゴリ名を設定してください。
例えば [new Array("トレーニング","筋トレ","減量","増量")] ならば、[トレーニング] という
グループに [筋トレ] [減量] [増量] というカテゴリが含まれるという事です。
グループが増減する場合、 [new Array(...),] という文を追加/削除して下さい
この時、一番最後のグループについては終端の カンマ[,] を削除して下さい。
青文字部分は、文字色とグループの先頭文字、連結文字列の定義をしております
特に変更する必要が無ければ、このままでOKです。
<div class="sidebar" id="category">
<h3 class="sidebar-title"><% content.title | html %></h3>
<div class="sidebar-body" id="categoryBody" style="color:#006598;">
<ul>
<% loop:list_category -%>
<% unless:category.no_category %>
<li><a href="<% category.page_url %>"><% category.name | html %></a>
(<% category.article_count | __or__ | echo("0") %>)</li><% /unless %>
<% /loop -%>
</ul>
</div>
<div class="sidebar-end"></div>
</div>
<script type="text/javascript">
<!--
createCategoryGroup();
/**
* function : カテゴリをグループ化する
* param : なし
* return : なし
*/
function createCategoryGroup()
{
// カテゴリリストを定義
// 各配列の第一要素をグループ名とし、以降に対象となるカテゴリを定義する。
// 最終要素(その他)には、全てのグループに該当しないカテゴリが含まれる
// グループの名称を定義する。
var categoryList = new Array(
new Array("トレーニング","筋トレ","減量","増量"),
new Array("ピアノレッスン","1年目"),
new Array("ピアノ動画","バイエル","聖剣伝説"),
new Array("音楽 - その他","クラシック","音楽活動"),
new Array("その他")
);
// グループ名見出し文字
var strHead = "■";
// 連結部文字(中間)
var strCon = " ┣ ";
// 連結部文字(末尾)
var strFoot = " ┗ ";
// 出力用文字列
var htmlStr = "";
// エレメントを取得
var elmCategory = document.getElementById("categoryBody");
var elmList = elmCategory.getElementsByTagName("li");
var elmHref = elmCategory.getElementsByTagName("a");
// 空のタグリストを生成(初期化処理は省略可)
var htmlStrArr = new Array(categoryList.length);
for(var i = 0; i < htmlStrArr.length; i++)
{
htmlStrArr[i] = new Array();
}
// カテゴリ数回、処理を行う
for(var i = 0;i < elmHref.length; i++)
{
// カテゴリリスト数回、処理を行う
for(var j = 0; j < categoryList.length; j++)
{
// カテゴリリストに存在するか、全てのリストに存在しない場合(その他の場合)
if(cmpCategory(elmList[i].innerHTML, categoryList[j]) ||
j == categoryList.length - 1)
{
// リンクタグを生成する
htmlStrArr[j][htmlStrArr[j].length] =
createLinkStr(elmList[i].innerHTML, elmHref[i].href);
break;
}
}
}
// タグリスト数回、処理を行う
for(var i = 0; i < htmlStrArr.length; i++)
{
// グループ名を付与
htmlStr += createGroupStr(strHead + categoryList[i][0]);
// 各グループに存在するタグ数回、処理を行う
for(var j = 0; j < htmlStrArr[i].length; j++)
{
// 連結部文字を付与
if(j == htmlStrArr[i].length - 1)
{
// 末尾
htmlStr += strFoot;
}
else
{
// 中間
htmlStr += strCon;
}
// タグを出力
htmlStr += htmlStrArr[i][j] + "<br>";
}
// 最終グループ以外の場合、改行を設定
if(i != htmlStrArr.length - 1)
{
htmlStr += "<br>";
}
}
elmCategory.innerHTML = htmlStr;
}
/**
* function : カテゴリがリストに存在するか確認を行う
* param : name カテゴリ名
* param : list カテゴリリスト
* return : 有無
*/
function cmpCategory(name, list)
{
var ret = false;
for(var i = 0; i < list.length; i++)
{
if(name.indexOf(list[i]) > 0)
{
ret = true;
break;
}
}
return ret;
}
/**
* function : カテゴリリンクタグを生成する
* param : name カテゴリ名
* param : url カテゴリURL
* return : 生成されたリンクタグ
*/
function createLinkStr(name, url)
{
return "<a href=\"" + url + "\">" + name + "</a>";
}
/**
* function : グループ名テキストを生成する
* param : name グループ名
* return : 生成されたグループ名テキスト
*/
function createGroupStr(name)
{
return "<b>" + name + "</b><br>";
}
// -->
変更しないで貼り付けちゃおうかな？
ピアノ弾くのはいいけど、筋トレするわたし・・・ぷっ。
（増量ばっかり？！）
by tamanossimo (2010-03-31 01:29)
ゴメンナサイ。オイラには怖くて出来ないっす＾＾；
自宅に来てくれてやっていただけるのなら、ガンガンブログ改造したいとは思ってるのですが（他人任せです♪）
by ちょいのり (2010-03-31 02:30)
凄い・・・こうやって改造出来るんですね〜
HTML・・・以前、すこーし勉強しましたが
難しいです〜
by oko (2010-03-31 05:32)
おぉ、これは便利です！
早速使わせて頂こうと思っています。
JavaScript、勉強しようかな。
by nyankome (2010-03-31 06:38)
凄いですね。ご自分でプログラム作っちゃうんですね。流石です。
自分のブログ確認したらカテゴリーすら分けてませんでした＾＾；
朝からクラクラしてしまいました。
by 雨香 (2010-03-31 07:12)
スマートです。想像していたより相当複雑ですね。Javaは仕事で必要になったことがないので未だ勉強したことがありませんが、こうして見ると何とか手が届きそうな気もしてきます。コメントがたくさんあり感謝です。しかし問題が！私のブログは音楽専用ブログなのでカテゴリーにグループがない！！！
by yablinsky (2010-03-31 07:41)
すごい・・・
62歳のわたしには・・・分かったような分からないような・・・です！
また、いろいろ教えてください！
by 亜彩美 (2010-03-31 08:16)
貧血になりそうです＾＾；
by デルフィニウム (2010-03-31 08:50)
すごいなぁ・・・結局自分は面倒なのでそのまんま・・
もうちょっと手を入れないといけないなぁ・・
反省であります。
by ★まっと★ (2010-03-31 09:40)
お～凄い。変更できるのですね。
挑戦してみます。
あっの前にカテゴリー作らなきゃ。
by K-ya (2010-03-31 10:12)
目まいがしてきました。
by ゆうみ (2010-03-31 11:27)
こうすると、カテが綺麗に収まるので便利ですね。
私はプログラムの方は勉強中で、ほとんど分かっていません。
なので、すごく有り難いです。
非常に図々しいのですが、真似してもいいでしょうか？
すぐには書く時間がないのですが。。。
by まるまる (2010-03-31 12:22)
FF13が終わったら，やってみます。
（まだ，ラスボスの第2形態に
やられちゃってるので，
エンディングを見てません^^;）
カテゴリの階層化って欲しいですよね。
助かります。
by アイスっこ (2010-03-31 13:54)
こんばんは、勝手に改蔵Caelumです(゜д゜)
>>tamanossimoさん
筋トレをすると顔は引き締まるわ、腰はくびれるわ、尻は上がるわ
いい事ばっかりですよ！さぁ、今すぐジャージに着替えて下さい！！
着替え終わりましたか？え、まだ？
じゃあもう着なくていいです！筋トレしましょう(゜д゜)9
by Caelum (2010-03-31 19:35)
>>ちょいのりさん
怖くないよ、怖くないよ、ほ～らさわｔ（略
デザインを大幅に変えるようなスクリプトだと、どうしてもこれくらい
複雑になってしまいますから、ちょっと抵抗ありますよね('`)
もう少し細かに説明出来ると良いのですが…
>自宅に
パソコンを持ってきて頂ければ、ガンガン改造しますぞー('w`)
by Caelum (2010-03-31 19:40)
>>okoさん
結構長くなってしまいましたね('`)
やっている事は [グループ条件判定] と [タグ生成] を
延々ループしているだけなので、意外とシンプルっス。
テキストエディタに貼り付けて、フォントを等幅に整えると
割とスッキリしてますよ('ー`)
by Caelum (2010-03-31 19:49)
>>nyankomeさん
色々なカテゴリの記事があると、こういった機能が便利ですよね('ー`)
こちらで確認した限りでは、特に不具合は見つかっておりませんが
もしも何かありましたら、ご指摘願いますー
>JavaScript
ブラウザさえあれば、ササっと色々なモノが作れるので
なかなか楽しいですよね('ー`)
定番ですが、とほほのサイトをば。
http://www.tohoho-web.com/js/index.htm
by Caelum (2010-03-31 19:56)
>>雨香さん
コレ関係の技術で給料貰ってますからねー('w`)
最近は仕事でプログラムを書く事も減ってきましたけれども
やっぱり「モノを作り出す」ってのは楽しいです。
それは音楽であり、プログラムであり、イラストであり…
by Caelum (2010-03-31 20:11)
>>yablinskyさん
文法こそ違えど、全ての言語は通じる所が多分にありますからネ
きっと、yablinskyさんならソッコーで習得されるかと思います。
>コメント
ズバリ、職業病であります！
細かにコメントを書かないと、落ち着かないコト無いですか('w`)
by Caelum (2010-03-31 20:13)
>>亜彩美さん
一見すると難しいように見えますけれども、よくよく見ると
あまり難しい処理ではないので、宜しければお試し下さいねー
また何か思いつきましたら、ご紹介致しますね('ー`)
by Caelum (2010-03-31 20:18)
>>デルフィニウムさん
処理が長いので、ちょっと拒否反応があるかもしれませんね('`)
でも、お手元のPCはもっと難しい処理で動いておりますぞー('w`)
by Caelum (2010-03-31 20:20)
>>★まっと★さん
blogデザインの手入れって、なかなか難しいですよね('`)
見やすく、機能的で、それでいてデザインが優れている…と
こだわり始めると、なかなか終わらなくなりますネ
ウチも、もう少し手を入れたいなぁ…と、思っております('ー`)
by Caelum (2010-03-31 20:36)
>>K-yaさん
がっつりカテゴリ分けが行われてますね('w`)
後々、自身の記録を確認する際にも便利だったりしますよネ
スクリプトは、恐らくエラーは起きないと思いますが…どうでしょうか('`)
by Caelum (2010-03-31 20:43)
>>ゆうみさん
日夜このようなプログラムを書いていると、目が慣れてくるせいか
この文字の羅列が美しく見えてくるのです('w`)
by Caelum (2010-03-31 20:46)
>>まるまるさん
どうぞどうぞ、ガンガンお使い下さい('ー`)
拙いプログラムですが、お役に立てられましたら何よりであります。
十分なテストはできておりませんが、いくつかのケースを実施しました所
特に問題はありませんでしたので、多分大丈夫だと思います…('`)
by Caelum (2010-03-31 20:52)
>>アイスっこさん
今回はラスボスが強いのですね('w`)
ラスボス後の追加要素が結構なボリュームらしいので
そちらも攻略が大変かもしれませんぞー！
>カテゴリの階層化
標準パーツに搭載されていてもいいんじゃないかと思うんですけどねぇ('`)
親カテゴリ-子カテゴリみたいなパラメータを持てば良いだけではないかと
思うんですが、どんな実装なんでしょうね…
by Caelum (2010-03-31 20:55)
Caelumさん、スゴイ！！
タグをすらすら書けるなんて。
うちはＤＷのソフトがないとやっていけません！！
まだまだ、勉強不足です・・・。
by ぷち (2010-03-31 23:42)
>>ぷちさん
むっふっふ、職業軍人ですからな('w`)
ぷちさんはDreamWeaverっスかー、あれ使いやすいらしいですネ
俺はサクラエディタ(ただのテキストエディタ)でございますよ('ー`)
慣れると意外とイケますだ。
by Caelum (2010-04-01 21:11)
ありがとうございます。
勉強させて戴きます。＾＾
by まるまる (2010-04-02 11:27)
>>まるまるさん
また新たなネタを考えたら、ご紹介致しますねー('ー`)
by Caelum (2010-04-02 23:01)