作成講座 =Realization=
tag:realization-power.com,2008:/customization//4
2007-05-18T05:55:11Z
ジュゲム、ロリポ、FC2、Movable Typeなどのブログカスタマイズ方法や初心者向けホームページ作成講座
Movable Type 3.33-ja
記事一覧を作るブログカスタマイズ（ＦＣ２）
tag:realization-power.com,2007:/customization//4.379
2007-05-18T05:46:47Z
2007-05-18T05:55:11Z
カテゴリ内の記事が一覧で出てくるので、そのページにどんな記事があるのか、わざわざ...
カテゴリ内の記事が一覧で出てくるので、そのページにどんな記事があるのか、わざわざスクロールしなくてもすぐにわかるようにしたい場合に便利です＾＾
<!--カテゴリ一覧表示はじめ-->
<!--index_area-->
<h2>最近の記事</h2>
<!--/index_area-->
<!--not_permanent_area-->
<h2><%sub_title></h2>
<ol>
<!--topentry-->
<!-- ひとつめ -->
<li><a href="#<%topentry_no>"><%topentry_title></a>(<%topentry_month>/<%topentry_day>)</li>
<!--/topentry-->
</ol>
<!--prevpage-->
<a href="<%prevpage_url>">前のページ</a>
<!--/prevpage-->
<!--nextpage-->
<a href="<%nextpage_url>">次のページ</a>
<!--/nextpage-->
<!--/not_permanent_area-->
<!--カテゴリ一覧表示おわり-->
これでカテゴリ内での記事一覧ができると思います。
【一覧をクリックしても記事へジャンプしない方】
<a id="<%topentry_no>" name="<%topentry_no>"></a>
っていうのを「 <!--topentry--> 」の次へ追加してみてください。
これで一覧から記事へジャンプできるはず・・・。
topページでは「最近の記事」と表示されるようになります。
]]>
カテゴリーのリスト化 （ジュゲム）
tag:realization-power.com,2007:/customization//4.365
2007-03-03T06:20:32Z
2007-03-03T06:33:50Z
ブログのカテゴリーってたまに・・リスト化されてるのを見ますよね。 そんな、カテゴ...
ブログのカテゴリーってたまに・・リスト化されてるのを見ますよね。
そんな、カテゴリーのリスト化の方法を紹介します。
１、スクリプト本体を記述します。</body>の直前(htmlテンプレートの最後の方ですよ。)に以下のようなJavaScriptを挿入します。
ではコピーして、貼り付けてください。
<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 tmpText = objList.innerHTML.split("⇒");
tmpText[0] = tmpText[0].slice(0,tmpText[0].search(/<BR/i));
this.base = Array('<a href="',linkUrl,'">',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('<strong>[',RegExp.$1,']</strong>').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('');
}
} else if (idName.indexOf('archive') > -1) {
var tmpText = objList.innerHTML;
tmpText.match(/¥((¥d+)¥)/);
var tmpCnt = Array(' (', RegExp.$1, ')').join('');
tmpText = objLink.innerHTML;
tmpText.match(/(.+) (¥d+)/);
this.base = Array('<strong>[',RegExp.$2,']</strong>').join('');
this.elem = Array('<a href="',linkUrl,'">',RegExp.$1,'</a>', tmpCnt).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'] = '├ '; /* ツリー用マーク(通常) */
gTreeOption['end'] = '└ '; /* ツリー用マーク(末端) */
gTreeOption['leef'] = '<br />¥n'; /* 各枝の末尾 */
gTreeOption['top'] = '<br />¥n'; /* ツリー本体の最初 */
gTreeOption['btm'] = ''; /* ツリー本体の最後 */
createTreeList('newentrylist',gTreeOption); // 最新エントリリストのツリー化
createTreeList('entrylist',gTreeOption); // エントリリストのツリー化
createTreeList('commentlist',gTreeOption); // 最新コメントリストのツリー化
createTreeList('tblist',gTreeOption); // 最新トラックバックリストのツリー化
createTreeList('linklist',gTreeOption); // リンクリストのツリー化
createTreeList('categorylist',gTreeOption); // カテゴリリストのツリー化
createTreeList('archivelist',gTreeOption); // アーカイブリストのツリー化
// -->
</script>
２、各リストにidを付けます。ここからはテンプレートによって少し違いますよ。以下のタグは例です。必要な部分は。idの部分ですよ。
<!-- ▼ JUGEMの独自タグを使用しています。ロリポブログ場合はお使いのブログのタグと置き換えてください。 -->
<!-- BEGIN calendar -->
<div class="linktitle"><a href="./?month={calendar_prev_yearmonth}" title="前月">▼</a> {calendar_str_yearmonth} <a href="./?month={calendar_next_yearmonth}" title="次月">▲</a></div>
<div class="calendar">{calendar_only}</div>
<!-- END calendar -->
<!-- ▲ JUGEMの独自タグを使用しています。ロリポブログ場合はお使いのブログのタグと置き換えてください。 -->
<!-- search -->
<div class="linktitle" id="searchname">SEARCH</div>
<div class="linktext" id="searchlist">
<form method="get" action="" class="search_form">
<input id="search" name="search" size="20" style="width:140px" class="form" />
<input type="submit" value="?" class="button2" />
</form>
</div>
<!-- /search/ -->
<!-- BEGIN latest_entry -->
<div class="linktitle" id="entryname">ENTRIES</div>
<div class="linktext" id="entrylist">{latest_entry_list}</div>
<!-- END latest_entry -->
<!-- BEGIN category -->
<div class="linktitle" id="categoryname">CATEGORIES</div>
<div class="linktext" id="categorylist">{category_list}</div>
<!-- END category -->
<!-- BEGIN link -->
<div class="linktitle" id="linkname">LINKS</div>
<div class="linktext" id="linklist">{link_list}</div>
<!-- END link -->
<!-- BEGIN profile -->
<div class="linktitle" id="profilename">PROFILE</div>
<div class="linktext" id="profilelist">{user_list}</div>
<!-- END profile -->
<!-- BEGIN archives -->
<div class="linktitle" id="archivename">ARCHIVES</div>
<div class="linktext" id="archivelist">{archives_list}</div>
<!-- END archives -->
<!-- BEGIN recent_comment -->
<div class="linktitle" id="commentname">COMMENTS</div>
<div class="linktext" id="commentlist">{recent_comment_list}</div>
<!-- END recent_comment -->
<!-- BEGIN recent_trackback -->
<div class="linktitle" id="tbname">TRACKBACK</div>
<div class="linktext" id="tblist">{recent_trackback_list}</div>
<!-- END recent_trackback -->
<div class="linktitle" id="reconame">RECOMMEND</div>
<!-- BEGIN amazon -->
<div class="linktext" id="recolist">{amazon_item}</div>
<!-- END amazon -->
<!-- フリースペース -->
<!-- BEGIN freespace1 -->
<div class="linktitle" id="fs1name">{freespace_title1}</div>
<div class="linktext" id="fs1list">{freespace_contents1}</div>
<!-- END freespace1 -->
<!-- BEGIN freespace2 -->
<div class="linktitle" id="fs2name">{freespace_title2}</div>
<div class="linktext" id="fs2list">{freespace_contents2}</div>
<!-- END freespace2 -->
<!-- BEGIN freespace3 -->
<div class="linktitle" id="fs3name">{freespace_title3}</div>
<div class="linktext" id="fs3list">{freespace_contents3}</div>
<!-- END freespace3 -->
<!-- BEGIN freespace4 -->
<div class="linktitle" id="fs4name">{freespace_title4}</div>
<div class="linktext" id="fs4list">{freespace_contents4}</div>
<!-- END freespace4 -->
<!-- BEGIN freespace5 -->
<div class="linktitle" id="fs5name">{freespace_title5}</div>
<div class="linktext" id="fs5list">{freespace_contents5}</div>
<!-- END freespace5 -->
<!-- /フリースペース/ -->
３、完了
と、手順は二つですね・・・更新が出来たら確認してみてください。
手順が完了したら
この分類分けの使用法は、
下の画像のようにカテゴリーを分けてください。
分類を [ ] で囲う様にしてその分類に入るカテゴリーの文頭に付ける感じです。』
]]>
カテゴリーのスクリプト化 （ジュゲム）
tag:realization-power.com,2007:/customization//4.364
2007-03-03T06:10:36Z
2007-03-03T06:18:54Z
カテゴリーのスクリプト化にはイロイロと方法があります。 スクリプト（隠れたり・・...
カテゴリーのスクリプト化にはイロイロと方法があります。
スクリプト（隠れたり・・出て来たり・・・）を紹介します。
ｃｓｓ も方法の一つですが、今回は javascript を利用した方法になります。
１、スクリプト本体を記述します。</body>の直前(htmlテンプレートの最後の方ですよ。)に以下のようなJavaScriptを挿入します。
ではコピーして、貼り付けてください。
<script type="text/javascript">
<!--
function InitFoldNavi() {
FoldNavigation('newentry','off',false); // 最新エントリ
FoldNavigation('entry' ,'off' ,false); // ページエントリ
FoldNavigation('comment' ,'off' ,false); // 最新コメント
FoldNavigation('tb' ,'off' ,false); // 最新トラックバック
FoldNavigation('archive' ,'off',false); // アーカイブ
FoldNavigation('link' ,'off' ,false); // リンク
FoldNavigation('profile' ,'off',false); // プロファイル
FoldNavigation('category' ,'off' ,false); // カテゴリー
FoldNavigation('reco' ,'off',false); // オススメ
FoldNavigation('search' ,'off' ,false); // 検索
FoldNavigation('fs1' ,'off',false); // フリースペース1
FoldNavigation('fs2' ,'off',false); // フリースペース2
FoldNavigation('fs3' ,'off',false); // フリースペース3
FoldNavigation('fs4' ,'off',false); // フリースペース4
FoldNavigation('fs5' ,'off',false); // フリースペース5
}
function FoldNavigation(idName,initMode,viewNum) {
var openMark = 'I open out '; /* 閉じている場合に開くためのマーク */
var closeMark = 'I close it '; /* 開いている場合に閉じるためのマーク */
var preMark = true; /* マークの挿入位置。タイトルの前なら true、タイトルの後ろなら false */
var idTitle = Array(idName,'name').join('');
var idList = Array(idName,'list').join('');
var objTitle = this.document.getElementById(idTitle);
var objLists = this.document.getElementById(idList);
if (!objTitle || !objLists) return;
var dispMode = objLists.style.display;
if (!dispMode) {
var tmpText = Array('FoldNavigation(',"'",idName,"','chng','');return(false);").join('');
var insMark = new Array();
var insText = new Array();
insMark[insMark.length] = Array('<a class="foldmark" href="#" onclick="',tmpText,'" onkeypress="',tmpText,'">').join('');
insMark[insMark.length] = (initMode == 'off') ? openMark : closeMark;
insMark[insMark.length] = '</a>';
if (preMark) insText[insText.length] = insMark.join('');
insText[insText.length] = objTitle.innerHTML;
if (viewNum) {
var objItems = objLists.getElementsByTagName('li');
insText[insText.length] = Array(' <span>(',objItems.length,')</span>').join('');
}
if (!preMark) insText[insText.length] = insMark.join('');
objLists.style.display = (initMode == 'off') ? 'none' : 'block';
objTitle.innerHTML = insText.join('');
} else if (initMode == 'chng') {
var objMarks = objTitle.getElementsByTagName('a');
for (i=0;i<objMarks.length;i++) {
if (objMarks[i].className == 'foldmark') {
objMarks[i].firstChild.nodeValue = (dispMode == 'none') ? closeMark : openMark;
}
}
objLists.style.display = (dispMode == 'none') ? 'block' : 'none';
}
}
InitFoldNavi(); // ナビゲーションの折り畳み
// -->
</script>
２、各リストにidを付けます。ここからはテンプレートによって少し違いますよ。以下のタグは例です。必要な部分は。idの部分ですよ。
<!-- ▼ JUGEMの独自タグを使用しています。ロリポブログ場合はお使いのブログのタグと置き換えてください。 -->
<!-- BEGIN calendar -->
<div class="linktitle"><a href="./?month={calendar_prev_yearmonth}" title="前月">▼</a> {calendar_str_yearmonth} <a href="./?month={calendar_next_yearmonth}" title="次月">▲</a></div>
<div class="calendar">{calendar_only}</div>
<!-- END calendar -->
<!-- ▲ JUGEMの独自タグを使用しています。ロリポブログ場合はお使いのブログのタグと置き換えてください。 -->
<!-- search -->
<div class="linktitle" id="searchname">SEARCH</div>
<div class="linktext" id="searchlist">
<form method="get" action="" class="search_form">
<input id="search" name="search" size="20" style="width:140px" class="form" />
<input type="submit" value="?" class="button2" />
</form>
</div>
<!-- /search/ -->
<!-- BEGIN latest_entry -->
<div class="linktitle" id="entryname">ENTRIES</div>
<div class="linktext" id="entrylist">{latest_entry_list}</div>
<!-- END latest_entry -->
<!-- BEGIN category -->
<div class="linktitle" id="categoryname">CATEGORIES</div>
<div class="linktext" id="categorylist">{category_list}</div>
<!-- END category -->
<!-- BEGIN link -->
<div class="linktitle" id="linkname">LINKS</div>
<div class="linktext" id="linklist">{link_list}</div>
<!-- END link -->
<!-- BEGIN profile -->
<div class="linktitle" id="profilename">PROFILE</div>
<div class="linktext" id="profilelist">{user_list}</div>
<!-- END profile -->
<!-- BEGIN archives -->
<div class="linktitle" id="archivename">ARCHIVES</div>
<div class="linktext" id="archivelist">{archives_list}</div>
<!-- END archives -->
<!-- BEGIN recent_comment -->
<div class="linktitle" id="commentname">COMMENTS</div>
<div class="linktext" id="commentlist">{recent_comment_list}</div>
<!-- END recent_comment -->
<!-- BEGIN recent_trackback -->
<div class="linktitle" id="tbname">TRACKBACK</div>
<div class="linktext" id="tblist">{recent_trackback_list}</div>
<!-- END recent_trackback -->
<div class="linktitle" id="reconame">RECOMMEND</div>
<!-- BEGIN amazon -->
<div class="linktext" id="recolist">{amazon_item}</div>
<!-- END amazon -->
<!-- フリースペース -->
<!-- BEGIN freespace1 -->
<div class="linktitle" id="fs1name">{freespace_title1}</div>
<div class="linktext" id="fs1list">{freespace_contents1}</div>
<!-- END freespace1 -->
<!-- BEGIN freespace2 -->
<div class="linktitle" id="fs2name">{freespace_title2}</div>
<div class="linktext" id="fs2list">{freespace_contents2}</div>
<!-- END freespace2 -->
<!-- BEGIN freespace3 -->
<div class="linktitle" id="fs3name">{freespace_title3}</div>
<div class="linktext" id="fs3list">{freespace_contents3}</div>
<!-- END freespace3 -->
<!-- BEGIN freespace4 -->
<div class="linktitle" id="fs4name">{freespace_title4}</div>
<div class="linktext" id="fs4list">{freespace_contents4}</div>
<!-- END freespace4 -->
<!-- BEGIN freespace5 -->
<div class="linktitle" id="fs5name">{freespace_title5}</div>
<div class="linktext" id="fs5list">{freespace_contents5}</div>
<!-- END freespace5 -->
<!-- /フリースペース/ -->
３、完了
と、手順は二つですね・・・更新が出来たら確認してみてください。
スクリプトにはイロイロと種類があるので・・・
また、いつか紹介したいと思います(^^;
]]>
ブログのトップページの作成方法 （FC2）
tag:realization-power.com,2007:/customization//4.363
2007-03-03T06:07:25Z
2007-03-03T06:10:04Z
ブログをイロイロと見ているとトップページの時には、 記事の最初に表示されていたと...
ブログをイロイロと見ているとトップページの時には、
記事の最初に表示されていたところが、個別の記事になると、消えている。
そんなブログたまに見ますよね。
では、トップページ作成法を紹介します。
<!--index_area-->
トップの時のみに表示するブロック(フラグ)
<!--/index_area-->
<!--not_index_area-->
トップの時以外に表示するブロック(フラグ)
<!--/not_index_area-->
今回紹介したタグのようにブログには各サービスにより異なりますが、
独自タグと言うのがあります。この独自タグの使い方しだいで、
ブログはＨＰに近い事ができますし、しかもブログだから更新が簡単。
]]>
ブログのトップページの作成方法 （ジュゲム）
tag:realization-power.com,2007:/customization//4.362
2007-03-03T06:00:47Z
2007-03-03T06:05:49Z
ブログをイロイロと見ているとトップページの時には、 記事の最初に表示されていたと...
ブログをイロイロと見ているとトップページの時には、
記事の最初に表示されていたところが、個別の記事になると、消えている。
そんなブログたまに見ますよね。それでは、トップページ作成法を紹介します。
#month,#cid,#eid,#day,#pid
{
display: none;
}
２．次にトップページ専用に記事を作ります。
以下のタグをＨＴＭＬ欄のトップページを作るところに記入してください。
<div id="{month}{cid}{eid}{day}{pid}{search}">
ここにトップページの内容を記入する
ここに記入した内容はトップページ以外では表示されない
<div>
３．以上で完了です。
]]>
カテゴリーのスクリプト化 （ＦＣ２ブログ）
tag:realization-power.com,2007:/customization//4.361
2007-03-03T05:45:55Z
2007-03-03T05:54:54Z
スクリプト（隠れたり・・出て来たり・・・）の ＦＣ２ブログでの方法を紹介します。...
スクリプト（隠れたり・・出て来たり・・・）の
ＦＣ２ブログでの方法を紹介します。
また、ジュゲムでも同じですが、今現在使用中のテンプレートによって表示のされ方が異なるため、スタイルシートの微調整が必要な場合もあります。
<script type="text/javascript">
<!--
function dd(id){
if(document.all)OBJ = document.all(id).style; else if(document.getElementById)OBJ = document.getElementById(id).style; if(OBJ) OBJ.display=='none'?OBJ.display='':OBJ.display='none';
}
//--></script>
②次に各プラグインの変更です。もとのタグを緑のタグのように変更してください。また、タグの黄色い部分は各テンプレートによって違いますので、
使っているテンプレートのスタイルシートに従って変更してください。
<!--plugin_first-->
<div class="sidetitle" style="text-align:<%plugin_first_talign>"><a href="javascript:void(0)" onclick="dd('<%plugin_first_title>')" title="<%plugin_first_title>"><%plugin_first_title></a></div>
<!-- 折りたたみの初期設定変更は以下のスタイル属性を変更して下さい。（display: ;オープン display: none;非表示） -->
<div class="sideblock" id="<%plugin_first_title>" style="display: none;text-align:<%plugin_first_align>">
<p style="text-align:<%plugin_first_ialign>">
<%plugin_first_description>
</p>
<p style="text-align:<%plugin_first_align>">
<%plugin_first_content>
</p>
<p style="text-align:<%plugin_first_ialign>">
<%plugin_first_description2>
</p>
</div>
<!--/plugin_first-->
ココからもともとのタグ例
<!--plugin_first-->
<div class="sidetitle"><%plugin_first_title></div>
<div class="sideblock">
<div class="plugin_margin">
<p style="text-align:<%plugin_first_ialign>">
<%plugin_first_description>
</p>
<%plugin_first_content>
<p style="text-align:<%plugin_first_ialign>">
<%plugin_first_description2>
</p>
</div>
</div>
<!--/plugin_first-->
<!--plugin_second-->
<div class="sidetitle2" style="text-align:<%plugin_second_talign>"><a href="javascript:void(0)" onclick="dd('<%plugin_second_title>')" title="<%plugin_second_title>"><%plugin_second_title></a></div>
<!-- 折りたたみの初期設定変更は以下のスタイル属性を変更して下さい。（display: ;オープン display: none;非表示） -->
<div class="sideblock2" id="<%plugin_second_title>" style="display: none;text-align:<%plugin_second_align>">
<p style="text-align:<%plugin_second_ialign>">
<%plugin_second_description>
</p>
<p style="text-align:<%plugin_second_align>">
<%plugin_second_content>
</p>
<p style="text-align:<%plugin_second_ialign>">
<%plugin_second_description2>
</p>
</div>
<!--/plugin_second-->
ココからもともとのタグ例
<!--plugin_second-->
<div class="sidetitle2"><%plugin_second_title></div>
<div class="sideblock2">
<div class="plugin_margin">
<p style="text-align:<%plugin_second_ialign>">
<%plugin_second_description>
</p>
<%plugin_second_content>
<p style="text-align:<%plugin_second_ialign>">
<%plugin_second_description2>
</p>
</div>
</div>
<!--/plugin_second-->
<!--plugin_third-->
<div class="entrybox" style="text-align:<%plugin_third_talign>"><a href="javascript:void(0)" onclick="dd('<%plugin_third_title>')" title="<%plugin_third_title>"><%plugin_third_title></a></div>
<!-- 折りたたみの初期設定変更は以下のスタイル属性を変更して下さい。（display: ;オープン display: none;非表示） -->
<div class="plugin_margin" id="<%plugin_third_title>" style="display: none;text-align:<%plugin_third_align>">
<p style="text-align:<%plugin_third_ialign>">
<%plugin_third_description>
</p>
<p style="text-align:<%plugin_third_align>">
<%plugin_third_content>
</p>
<p style="text-align:<%plugin_third_ialign>">
<%plugin_third_description2>
</p>
</div>
<!--/plugin_third-->
ココからもともとのタグ例
<!--plugin_third-->
<div class="entrybox">
<div class="plugin_margin">
<p style="text-align:<%plugin_third_ialign>">
<%plugin_third_description>
</p>
<%plugin_third_content>
<p style="text-align:<%plugin_third_ialign>">
<%plugin_third_description2>
</p>
</div>
</div>
<!--/plugin_third-->
]]>