忍者ブログ

刻ノ深淵

低周波音と耳鳴りに悩まされ不眠状態に陥る日々とアンチエイジング。只今、現状打破を試み奮闘中。

[PR]

[編集] 
×

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

[ブログカスタマイズ]忍者ブログ

ページ下部(フッター部分)の空間をなくす。

[編集] 
■ページ下部(フッター部分)の空間をなくす。
ページ下部(フッター部分)には規定により忍者ブログの広告が入るようになっていますが、その広告の下に異様に空間があるのが何となく気持ち悪くて嫌でした。

□CSSの81～90行目辺り。
/*一番下のブロック（著作権表示が書かれる場所）の設定*/
#FooterBlock {
clear:both;
height: 200px;
text-align: center;
}

赤文字部分を削除。

了


拍手[0回]

PR

[ブログカスタマイズ]忍者ブログ

挿入テーブルに背景色をつける。

[編集] 

■挿入テーブルに背景色をつける。
前に記事の引用の為に『blockquote』タグを反映させるということをやったのですが、高性能エディタにしても簡素版のエディタにしても使い難くて、手っ取り早くテーブルを挿入しそのテーブルに背景色を付けることにしました。
 
□CSSの15～18行目辺り。
/*table全ての設定*/
table{
border-collapse: collapse;
background-color: #f0f3ff;
}

□CSSの265～270行目辺り。
/*コメントフォーム用テーブル*/
.CommentFormTable{
background-color: #ffffff;
width:90%;
margin:10px auto 0px auto;
}

□CSSの385～402行目辺り。
/*カレンダー日付移動用テーブル（前月、次月へのリンクなど）*/
.CalendarMoveTable {
background-color: #ffffff;
font-size:11px;
margin:0px auto;
text-align: center;
width:80%;
}
/*カレンダー日付移動用テーブル、<tr>タグ部分のデザイン*/
.CalendarMoveTr {
background-color: #ffffff;
text-align: center;
}
/*カレンダー表示用テーブル*/
.CalendarTable {
background-color: #ffffff;
font-size:11px;
width:80%;
margin:0px auto;
text-align: center;
}

赤文字部分を追加。
色はお好みのままで。
透明化する場合は、
background-color: transparent;

拍手[0回]

[ブログカスタマイズ]忍者ブログ

カテゴリのツリー化。

[編集] 
■カテゴリのツリー化。
色々考えた末にカテゴリのツリー化に踏み切りました。
画像を使わないVer.にしようと思ったのですが、上手くいかず。。。
JavaScriptは変更なしで使用させて頂きました。
また、前記事で紹介した『JavaScriptを外部ファイルにする』も利用してみました。
JavaScript部分が長いですし、テンプレートを変えてしまっても此方の方が変更しやすいと思った為です。

■ニンブロラボ.
http://shinobibloglab.blog.shinobi.jp/Entry/2/

■忍者ブログカスタマイズ
http://ninjacustomize.blog.shinobi.jp/Entry/5/

■Cat's-Paw*
http://necote.blog.shinobi.jp/Entry/15/

□以下のJavaScriptをメモ帳にコピーペーストした後、保存(ファイル名は適当に分かりやすいもので)。
拡張子を『.txt』→『.js』に変更し、管理画面のファイルアップロードで.jsファイルをアップロードする。

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('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,'</a>').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('newentrylist',gTreeOption); // 最新エントリリストのツリー化
createTreeList('entrylist',gTreeOption);    // エントリリストのツリー化
createTreeList('commentlist',gTreeOption);  // 最新コメントリストのツリー化
createTreeList('tblist',gTreeOption);       // 最新トラックバックリストのツリー化
createTreeList('linkslist',gTreeOption);     // リンクリストのツリー化
createTreeList('categorylist',gTreeOption); // カテゴリリストのツリー化

□以下の記述を</body>の前に追加。
この場合、<head>～</head>内ではないことに注意すること。
<script type="text/javascript" src="http://file.***.blog.shinobi.jp/sinobi_java.js"></script>

□ツリー化で使用する下記の2つの画像を右クリック→[名前をつけて画像を保存]し、管理画面のファイルアップロードでアップロードする。
tree_end.gif←これと
 tree_lst.gif



















←この画像です。
 
□CSSの一番下に下記の記述を追加。
.plugin_data ul{
list-style: none;
margin: 0px;
padding: 0px;
}
.plugin_data ul.tree li{
margin: 0px;
padding: 0px 0px 0px 16px;
background-image: url(http://file.*****.blog.shinobi.jp/tree_lst.gif);
background-repeat: no-repeat;
}
.plugin_data ul.tree li.end {
background-image: url(http://file.*****.blog.shinobi.jp/tree_end.gif);
background-repeat: no-repeat;
}

 
□管理画面プラグインの設定でカテゴリーのHTML編集部分を全て削除し下記の記述に書き換える。

<div class="plugin_data" id="categorylist">
<ul>
<!--plugin_category-->
<li><a href="<!--$plugin_category_link-->"><!--$plugin_category_title-->(<!--$plugin_category_num-->)</a></li>
<!--/plugin_category-->
</ul>
</div>

 
□管理画面の環境設定のカテゴリーの編集で、各カテゴリーの名称を［親カテゴリー］子供カテゴリーという感じに全て変更する。
※[ ]は半角にすること。
[親1]子供A
[親1]子供B
[親2]子供C
 
とすると、

親1
tree_end.gif子供A
tree_end.gif子供B
親2
tree_end.gif子供C

このように表示されます。

了

拍手[1回]

[ブログカスタマイズ]忍者ブログ

JavaScriptを外部ファイルにする。

[編集] 
■JavaScriptを外部ファイルにする。
利用出来そうでしたので。

■Cat's-Paw*
http://necote.blog.shinobi.jp/Entry/15/ 

1) メモ帳にJavaScriptをコピペします。
    その際、スクリプト部分だけの記述でいいので、  下記の部分は除きます。

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

// -->
</script>

2) 拡張子を「.js」に変更し、適当にわかりやすい名前をつけて保存し、ファイルアップロードで.jsファイルをアップロードします。

3) HTML内のあとは<head>～</head>に下記のように記述。
<script type="text/javascript" src="http://file.***.blog.shinobi.jp/sinobi_java.js"></script>

 了

拍手[0回]

[ブログカスタマイズ]忍者ブログ

記事から直接編集画面に行けるようにする。

[編集] 

■記事から直接編集画面に行けるようにする。
[管理画面]→[過去の記事を編集]で編集したい記事を検索し探し当ててから編集画面に行き編集という手順がとても面倒でした。

■助太刀忍者 [カスタマイズBBS] - 過去記事の編集について
http://csbbs.ninja.co.jp/Thread_View/18513/?q=%E9%81%8E%E5%8E%BB%E8%A8%98%E4%BA%8B%E3%81%AE%E7%B7%A8%E9%9B%86

□98～102行目辺り。
<!--if_cm_receipt-->
<span class="EntryComment">
<a href="<!--$entry_link-->#comment">Comment(<!--$entry_comment_num-->)</a></span>
<!--/if_cm_receipt-->
<a href="/hoge/EditEntry/<!--$entry_no-->/" target="_blank">編集</a>

赤文字部分を追加。

場所はお好みのまま。
<!--entry-->～～～<!--/entry-->の間であれば良いようです。
この場合は、コメントへのリンク部分の隣に持って行きました。

拍手[0回]