Customize

[1]

[忍者ブログ] 独自タグ カテゴリー毎にCSSの切り替え？

2011.03.22 // Customize

カテゴリー毎にプラグインをCSSで表示の切り替えをするカスタマイズメモです。
カテゴリー１の時にプラグイン１を表示、カテゴリー２の時はプラグイン２を表示するとかに。
でも記事の表示数が1じゃないと実用性は無いので微妙で使えなさそうです。

★ポイント

エントリーブロックで使える独自タグ【記事に設定されたカテゴリのID番号】
ブログ詳細設定にある【表示する記事の数】

上記の２つでclassやidを作成して表示の切り替えを行います。

HTML

<div class="cat_mode" id="cat<!--entry--><!--$entry_category_id--><!--/entry-->">
<div class="catbox" id="catbox1">カテゴリー１の時用プラグイン１タグ</div>
<div class="catbox" id="catbox2">カテゴリー２の時用プラグイン２タグ</div>
<div class="catbox" id="catbox3">カテゴリー３の時用プラグイン３タグ</div>
</div>

CSS

.cat_mode,
.catbox {
display:none;
}

#cat3,
#cat3 #catbox3,
#cat1,
#cat1 #catbox1 {
display:block;
}

大ボックスのdivのidは【表示される記事のカテゴリーid】＋【表示されている記事数分繰り返し】
表示されてるカテゴリーidが1で表示されてる記事数が5ならidはcat11111という感じです。

カテゴリー１の時にプラグイン１－Ａ、カテゴリー２の時はプラグイン１－Ｂとかは<!--$plugin_no-->を使えば出来そう…？

CLAP

[忍者ブログ] プラグインの折りたたみ cookieによる開閉記憶

2010.08.16 // Customize

サイドメニュー折りたたみスクリプト（cookie等改善版） （小粋空間）で紹介されてることを、忍者ブログに応用してみました。

独自タグと、にらめっこしてたらプラグインIDを出力する独自タグがちゃんと用意されてたので書き直しました。

※idの識別用には独自タグ『<!--$plugin_key-->』を使います。

１～２は同じ手順です。
解説や設定詳細はサイドメニュー折りたたみスクリプト（cookie等改善版） （小粋空間）でご確認くださいね。

３.menufolder.js 配置

便利ツールのファイルアップロードからアップロードしてURLを調べます。

menufolder.jsのアップロード

こんな感じでアップロードできるはずなので、menufolder.jsのリンクをクリックしてアドレスバーにあるURLを控えます。

４．テンプレートの設定１（menufolder.js のインクルード文追加）

<script type="text/javascript" src="http://○○.jp/menufolder.js" charset="utf-8"></script>

http://○○.jp/menufolder.jsを３で控えたURLに差し替え
<head>～</head>に明記します。

５．テンプレートの設定２（各メニューに id 属性追加）

テンプレート毎に表記が異なりますが
プラグインのタイトルに相当する箇所に
id="Plugin<!--$plugin_key-->name"を付与
中身に相当する箇所に
id="Plugin<!--$plugin_key-->list"を付与

				<!--plugin2-->
				<div class="PluginInnerBlock">
					<div class="PluginTitle <!--$plugin_title_align-->" id="Plugin<!--$plugin_key-->name">
						<!--$plugin_title-->
					</div>
<div id="Plugin<!--$plugin_key-->list">
					<div class="PluginExplanation <!--$plugin_explanation_align-->">
						<!--$plugin_header_explanation-->
					</div>
					<div class="PluginContents <!--$plugin_contents_align-->">
						<!--$plugin_data-->
					</div>
</div>
				</div>
				<!--/plugin2-->

６．テンプレートの設定３（menufolder.js 実行スクリプトを追加）

実行スクリプトはこんな感じにしてみました。

<script type="text/javascript">
<!--
FoldNavigation('Plugin<!--$plugin_key-->','on',false);
//-->
</script>

手順５のと合わせるとこんな感じです。

				<!--plugin2-->
				<div class="PluginInnerBlock">
					<div class="PluginTitle <!--$plugin_title_align-->" id="Plugin<!--$plugin_key-->name">
						<!--$plugin_title-->
					</div>
<div id="Plugin<!--$plugin_key-->list">
					<div class="PluginExplanation <!--$plugin_explanation_align-->">
						<!--$plugin_header_explanation-->
					</div>
					<div class="PluginContents <!--$plugin_contents_align-->">
						<!--$plugin_data-->
					</div>
</div>

<script type="text/javascript">
<!--
FoldNavigation('Plugin<!--$plugin_key-->','on',false);
//-->
</script>

				</div>
				<!--/plugin2-->

以上で、応用終了です

CLAP

[忍者ブログ] 続きを読む の 折り畳み ver.2

2010.08.14 // Customize

『[忍者ブログ] 続きを読む の 折り畳み』とはまた別の方法の折りたたみです。

特徴 ≫ 他の要素も折りたためる

プラグインなど他の折り畳みと兼用したい場合は
こちらの方が1つのスクリプトで済む分、スクリプトがコンパクトにできると思います。

１.<head>～</head>に入れるソース

<script language="javascript" type="text/javascript">
<!--
function showHide(id){
var disp = document.getElementById(id).style.display;
if(disp == "block"){
document.getElementById(id).style.display = "none";
}else{
document.getElementById(id).style.display = "block";
}
return false;
}
//-->
</script>

２.非表示用のCSS

.switch {
        display:none;
}

３.テンプレート"続きを読む"の部分の修正

<!--if_not_entry-->～<!--/if_not_entry-->の中身を下記に差し替える

<!--if_ps_text-->
<div class="EntryPsText">
<script language="JavaScript">
<!--
document.writeln("<p><a href="javascript:void(0);" onClick="showHide('more<!--$entry_no-->');"><!--$entry_ps_title--></a></p>");
//-->
</script>
<noscript><p><a href="<!--$entry_link-->"><!--$entry_ps_title--></a></p></noscript>
        <div id="more<!--$entry_no-->" class="EntryText switch">
        <!--$entry_ps_text-->
        <p><a href="javascript:void(0);" onClick="showHide('more<!--$entry_no-->');">×Close</a></p>
        </div>
</div>
<!--/if_ps_text-->

解説 表示の切り替え（折り畳み）について

xxを任意のIDに書き換えることで対応する中身の切り替えを行います。

▼切り替え（折り畳み）を行うスイッチ

<a href="javascript:void(0);" onClick="showHide('xx');">スイッチ</a>

▼切り替え（折り畳み）を行う要素

<div id="xx" class="switch">切り替えを行う中身</div>

転載元≫コメントを折りたたみ表示する

CLAP

[忍者ブログ] 続きを読む の 折り畳み

2010.08.14 // Customize

記事の続きをトップページからでも読めるように
記事の続きを折り畳むカスタマイズのメモです。

元々FC2で利用していたJavascriptを忍者ブログ用に応用しました。

１.</head>の上に以下のJavaScriptを記述

headに記述するソースはFC2カスタマイズと全く一緒です

<script language="javascript">
<!--
function showMore(varA1, varB1){
var123 = ('varXYZ' + (varA1));
varABC = ('varP' + (varA1));
if( document.getElementById ) {
if( document.getElementById(var123).style.display ) {
if( varB1 != 0 ) {
document.getElementById(var123).style.display = "block";
document.getElementById(varABC).style.display = "none";
} else { document.getElementById(var123).style.display = "none";
document.getElementById(varABC).style.display = "block"; }
} else { location.href = varB1;
return true; }
} else { location.href = varB1;
return true; }
}
//-->
</script>

２."続きを読む"部分の修正

<!--if_not_entry-->～<!--/if_not_entry-->の中身を下記に差し替える

<!--if_ps_text-->
<div id="varP<!--$entry_no-->" class="EntryPsText"> 
<a href="<!--$entry_link-->#<!--$entry_no-->" onclick="showMore(<!--$entry_no-->,'<!--$entry_link-->#<!--$entry_no-->');return false;"><!--$entry_ps_title--></a>
</div>
<div id="varXYZ<!--$entry_no-->" style="display: none" class="EntryText"><!--$entry_ps_text-->
<a href="#entry<!--$entry_no-->" onclick="showMore(<!--$entry_no-->,0);return true;">×Close</a> 
</div>
<!--/if_ps_text-->

備考

記事タイトルのaタグにアンカーリンク用のnameをつけてあげると、記事の続きを閉じた時に相当記事のタイトルまで戻せるので記事タイトルにnameを追加しておきました。

<a href="<!--$entry_link-->" name="entry<!--$entry_no-->"><span class="EntryTitleFont"><!--$entry_title--></span></a>

参考 : 続きを読むを折りたたみ表示する

CLAP
[1]