CusblO |
忍者ブログテンプレートカスタマイズ ブログテンプレートCSS/HTMLカスタマイズ覚書 忍者用ブログテンプレート作成中
[2010/03/10] 2カラムを3カラムに変更 CSS (No.19)
[2010/03/09] ページ迷子ナビ (No.14)
[2010/03/07] ツリー化表示と行間変更 最新コメント (No.5)
[2010/03/07] 最新記事表示 (No.4)
2カラムを3カラムに変更 CSS
全体ブロックを中央寄せにしてサイドにプラグインを増設するタイプ
IDは忍者ブログ用
他社ブログを変更の場合はIdを書き換える
<body>
<div id="MainBlock">
<div id="WraperBlock">
<div id="PluginBlockLeft">
左側に表示するプラグインカテゴリー
</div><!--//PluginBlockLeftの閉じタグ//-->
<div id="EntryBlock">
記事部分を表示
</div><!--//EntryBlockの閉じタグ//-->
</div><!--//WraperBlockの閉じタグ//-->
<div id="PluginBlockRight">
右側に表示するプラグインカテゴリー
</div><!--//PluginBlockRightの閉じタグ//-->
</div><!--//MainBlockの閉じタグ//-->
</body>
ページ迷子ナビ
中央カラム(ブロックともいう)にプラグインが設定できる場合 サイド・記事上 などに移動できる
今開いているページに表示されている記事一覧
ナビがついているテンプレートには 必要なさそう
プラグイン⇒フリーエリアを追加⇒HTML編集にタグをコピペ
ツリー化表示と行間変更 最新コメント
Ⅰ.</body>直下に
<script type="text/javascript">
<!--
function makeTreeElements (idName,objList) {
if (!objList.innerHTML) return;
var objLink = objList.getElementsByTagName('a')[0];
var linkUrl = objLink.getAttribute('href');
if (idName.indexOf('comment') > -1 || idName.indexOf('tb') > -1) {
var tmplinkUrl = linkUrl.split("#")
var tmpText = objList.innerHTML.split("⇒");
tmpText[0] = tmpText[0].slice(0,tmpText[0].search(/<BR/i));
this.base = Array('<a href="',tmplinkUrl[0],'">',tmpText[0],'</a>').join('');
this.elem = objLink.innerHTML;
} else if (idName.indexOf('newentcate') > -1) {
var objLink1 = objList.getElementsByTagName('a')[1];
var linkUrl1 = objLink1.getAttribute('href');
var tmpText = objList.innerHTML.split("⇒");
tmpText[0] = tmpText[0].slice(0,tmpText[0].search(/<BR/i));
this.base = Array('',tmpText[0],'').join('');
this.elem = Array('',tmpText[1],'').join('');
} else if (idName.indexOf('entry') > -1) {
var tmpText = objList.innerHTML;
tmpText.match(/\((\d\d\/\d\d)\)/);
this.base = Array('[',RegExp.$1,']').join('');
this.elem = Array('<a href="',linkUrl,'">',objLink.innerHTML,'</a>').join('');
} else if (idName.indexOf('link') > -1) {
var tmpText = objList.innerHTML;
if ( tmpText.match(/\[(.+)\](.+)/) ) {
this.base = Array('<strong>[',RegExp.$1,']</strong>').join('');
this.elem = Array('<a href="',linkUrl,'" target="_blank">',RegExp.$2,'</a>').join('');
}
} else if (idName.indexOf('category') > -1) {
var tmpText = objList.innerHTML;
if ( tmpText.match(/\[(.+)\](.+)/) ) {
this.base = Array('<strong>',RegExp.$1,'</strong>').join('');
this.elem = Array('<a href="',linkUrl,'">',RegExp.$2).join('');
}
}
return this;
}
function createTreeList(idName,option) { // version 2.2
var objFocus = this.document.getElementById(idName);
if (!objFocus) return;
if (!objFocus.innerHTML) return;
var objLists = objFocus.getElementsByTagName('li');
var linkList = new Array();
var outText = new Array();
if (objLists.length > 0) {
for (i=0;i<objLists.length;i++) {
var chckFlag = true;
var elemText = new makeTreeElements(idName,objLists[i]);
if (!elemText.base || !elemText.elem) return;
for (j=0;j<linkList.length;j++) {
if ( linkList[j].base.indexOf(elemText.base) > -1 ) {
chckFlag = false;
linkList[j][linkList[j].length] = elemText.elem;
}
}
if (chckFlag) {
var tmpNum = linkList.length;
linkList[tmpNum] = new Array();
linkList[tmpNum][0] = elemText.elem;
linkList[tmpNum].base = elemText.base;
}
}
if (linkList.length > 0) {
outText[outText.length] = '<ul>\n';
for (i=0;i<linkList.length;i++) {
outText[outText.length] = Array('<li>',linkList[i].base,option.top).join('');
if (linkList[i].length > 0 && option.sort) linkList[i].reverse();
for (j=0;j<linkList[i].length;j++) {
outText[outText.length] = (j == linkList[i].length - 1) ? option.end : option.list;
outText[outText.length] = Array(linkList[i][j],option.leef).join('');
}
outText[outText.length] = Array(option.btm,'</li>').join('');
}
outText[outText.length] = '</ul>\n';
objFocus.innerHTML = outText.join('');
}
}
}
var gTreeOption = new Array;
gTreeOption['sort'] = false; /* ツリー内の表示順 true:並び替える false:そのまま */
gTreeOption['list'] = '<li>'; /* ツリー用マーク(通常) */
gTreeOption['end'] = '<li class="end">'; /* ツリー用マーク(末端) */
gTreeOption['leef'] = '</li>\n'; /* 各枝の末尾 */
gTreeOption['top'] = '<ul class="tree">\n'; /* ツリー本体の最初 */
gTreeOption['btm'] = '</ul>\n'; /* ツリー本体の最後 */
createTreeList('newentcate',gTreeOption); // 最新エントリリストのツリー化
createTreeList('entrylist',gTreeOption); // エントリリストのツリー化
createTreeList('commentlist',gTreeOption); // 最新コメントリストのツリー化
createTreeList('tblist',gTreeOption); // 最新トラックバックリストのツリー化
createTreeList('linkslist',gTreeOption); // リンクリストのツリー化
createTreeList('categorylist',gTreeOption); // カテゴリリストのツリー化
// -->
</script>
Ⅱ.CSS 一番下に
.plugin_data ul{
list-style: none;
margin: 0px;
padding: 0px;
line-height: 130%; 説明:この説明はCSSにコピペ後、削除する
行間変更好きな半角数字に変更
%低いほど行間狭い縦が短め %高いほど行間広い縦が長め
注意:記事全体の横幅指定がなく、/*全体の設定*/で横幅が設定されている場合 %が低い場合カラム落ちする場合があります。
}
.plugin_data ul.tree li{
margin: 0px;
padding: 0px 0px 0px 16px;
background-image: url(リスト用画像線URL);
background-repeat: no-repeat;
}
.plugin_data ul.tree li.end {
background-image: url(リスト用画像終わりURL);
background-repeat: no-repeat;
}
カテゴリ編集
Ⅰ.カテゴリを作る
スタイル
親カテゴリ
子カテゴリ
[親カテゴリ名]子カテゴリ を複数作る
[ ↑同じ親カテゴリ名にする ]
ツリー用画像 DL用
画像⇒ リスト用終わり線
↓リスト用線
3月16日1作目完成とどうじに愛猫天使記念日
最近自分が引っ込み思案と知った。
フリーかつ手動作成まっしぐら中