忍者ブログ

CusblO

忍者ブログテンプレートカスタマイズ ブログテンプレートCSS/HTMLカスタマイズ覚書 忍者用ブログテンプレート作成中

HOMEカラムとサイドバーとプラグインの記事
[2024/04/19] [PR] (No.)
[2010/03/10] 2カラムを3カラムに変更 CSS (No.19)
[2010/03/09] ページ迷子ナビ (No.14)
[2010/03/07] ツリー化表示と行間変更 最新コメント (No.5)
[2010/03/07] 最新記事表示 (No.4)

[PR]

04/19(Fri)  YESR2024

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

2カラムを3カラムに変更 CSS

03/10(Wed)  YESR2010

中央寄せタイプ
全体ブロックを中央寄せにしてサイドにプラグインを増設するタイプ

IDは忍者ブログ用
他社ブログを変更の場合はIdを書き換える

 
HTML
<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>

拍手

PR

ページ迷子ナビ

03/09(Tue)  YESR2010

推薦プラグイン フリーエリア
 中央カラム(ブロックともいう)にプラグインが設定できる場合 サイド・記事上 などに移動できる

今開いているページに表示されている記事一覧
ナビがついているテンプレートには 必要なさそう

プラグイン⇒フリーエリアを追加⇒HTML編集にタグをコピペ



拍手

ツリー化表示と行間変更 最新コメント

03/07(Sun)  YESR2010

 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用 

画像⇒ツリー終わり リスト用終わり線
↓リスト用線
ツリー縦線 


拍手

最新記事表示

03/07(Sun)  YESR2010

最新記事プラグインをすっきり見せる
縦幅を少しは短くできる
など良い感じになった。

カスブロは日付なしでカスタマイズ

拍手

前のページ« HOME

最新コメント
[04/23 管理人]

最新トラックバック

Yurapisは、Twitterとmyspace同期中

ブログ:
ネーム:
かすぽ
趣味:
美しい・綺麗なものの鑑賞
自己紹介:
CusBloスタート:2010.03.07
3月16日1作目完成とどうじに愛猫天使記念日

最近自分が引っ込み思案と知った。
フリーかつ手動作成まっしぐら中

素材配布サイト様へ:リンク漏れが有る場合以下の専用ページにコメントください



Copyright (C) CusblO
TEMPLATE by CusBlo
     忍者ブログ [PR]
 | 管理 | 新記事