忍者ブログ
[449] [448] [447] [446] [445] [444] [443] [442] [441] [440] [439
2017.12.14,Thu
×

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

2005.04.06,Wed
シーサーでのサイドバーコンテンツ開閉スクリプト設置方法

一番下の参考リンク先も参照しながらやってみてください。

デザイン>コンテンツ>新しいコンテンツの追加
種類:「自由形式」
追加先ページ:必要に応じて(僕は「全ページ」)
配置/並び順:できるだけ後のほう
(3カラムなら右サイドバーの高数値)

を選択。

以下を自由形式の入力欄にコピペ

<script type="text/javascript">
<!--
/* コラム開閉スクリプト */
function toggleOpenClose(id,val){
if(val == "▲"){
document.getElementById(id).style.display = "none";
document.getElementById('btn' + id).value = "▼";
}
else{
document.getElementById(id).style.display = "block";
document.getElementById('btn' + id).value = "▲";
}
}

function getButton(obj, i , sInner , bDefaut){
var ret;
var val;
if ( bDefaut ) {
val = "▲";
}
else {
val = "▼";
}
ret = '<div align="left">'+'<label for="btncolumn' + i + '" class="columntitle">' + sInner + '</label>'+'<input type="button" value="' + val + '" id="btncolumn' + i + '" class="btncolumn" onclick="toggleOpenClose('column' + i + '',this.value);"/>' + '</div>';
obj.setAttribute("id", 'column' + i);
return ret;
}

var aryTitle = new Array();
var aryDefault = new Array();

/* ここから2行ずつひとまとまり */
/*----ここから----*/

aryTitle[1] = "自分について";
aryDefault[1] = false;

aryTitle[2] = "最近UPした記事";
aryDefault[2] = true;

aryTitle[3] = "月別ログ";
aryDefault[3] = false;

aryTitle[4] = "最近のコメント";
aryDefault[4] = true;

aryTitle[5] = "最近のトラックバック";
aryDefault[5] = true;

aryTitle[6] = "カテゴリ別ログ";
aryDefault[6] = false;

aryTitle[7] = "MyblogList";
aryDefault[7] = false;

aryTitle[8] = "有名人BLOG LIST";
aryDefault[8] = false;

aryTitle[9] = "BlogPeople LIST";
aryDefault[9] = false;
/*----ここまで----*/

var aryDiv = document.getElementsByTagName("div");
var sTmpInner;
for(var j = 0; j < aryDiv.length; j++){
if(aryDiv[j].getAttribute("class") == "sidetitle" ||aryDiv[j].getAttribute("className") == "sidetitle"){
sTmpInner = aryDiv[j].innerHTML;
for(var i = 0; i < aryTitle.length ; i++){
if (sTmpInner.indexOf(aryTitle[i]) != -1 ) {
aryDiv[j].innerHTML = getButton(aryDiv[j+1], i , sTmpInner , aryDefault[i]);
}
}
}
}

if(document.getElementById){
document.writeln('<style type="text/css" media="all">');
document.writeln('<!--');
for(var i = 0; i < aryDefault.length ; i++){
if( aryDefault[i] ){
document.writeln('#column' + i + '{display:block;}');
}
else {
document.writeln('#column' + i + '{display:none;}');
}
}
document.writeln('-->');
document.writeln('</style>');
}
// -->
</script>
ただしこれをこのままにしてても何の効果もないので一部編集しなければならない箇所がある。

それが

/* ここから2行ずつひとまとまり */
/*----ここから----*/

aryTitle[1] = "自分について";
aryDefault[1] = false;

aryTitle[2] = "最近UPした記事";
aryDefault[2] = true;

aryTitle[3] = "月別ログ";
aryDefault[3] = false;

aryTitle[4] = "最近のコメント";
aryDefault[4] = true;

aryTitle[5] = "最近のトラックバック";
aryDefault[5] = true;

aryTitle[6] = "カテゴリ別ログ";
aryDefault[6] = false;

aryTitle[7] = "MyblogList";
aryDefault[7] = false;

aryTitle[8] = "有名人BLOG LIST";
aryDefault[8] = false;

aryTitle[9] = "BlogPeople LIST";
aryDefault[9] = false;
/*----ここまで----*/


『" "』と『[ ]』の部分。
" "の中は自分のコンテンツで開閉させたいコンテンツ名を記入。
[ ]の中は見たとおり、順番はどうでもいいですがコンテンツごとの番号と思っていただけばいいです。開閉したいコンテンツが3個しかなければ当然3つしかなくていい。
必要に応じて加減してください。
ちなみに、この記述のなかにあるfalseやtrueの意味は
false=閉じてる状態
true=開いてる状態

したがって、各々の状態から開閉することになるわけです。

ここで一旦「保存」>「変更(コンテンツの一番下のボタン)」

そしてもうひとつ。
スタイルシート>タイトル(現在使用しているタイトルをクリック)

以下2つのタグをコピペしてください。
場所はどこでもいいですが、わかりやすく
.sidetitle {}
の下がいいでしょう。

.columntitle{
background-color:#66CCCC;
background-repeat:no-repeat;
color:#FFF;
font-size:12px;
font-weight:bolder;
padding:10px 10px 5px 30px;
margin-bottom:10px;
text-align:center;
}

▲開閉ボタンまわり(コンテンツタイトル)のデザイン
.sidetitle {}と同じ設定にした方がいいと思います。

.btncolumn{
font-size:10pt;
color:#0066FF;
text-align:center;
border:0px solid #0105CF;
background-color:#66CCCC;
height:14px;
width:14px;
}

▲開閉ボタン自体のデザイン

上記はあくまでも僕のブログのデザインですので各編集箇所は貴ブログにあわせていろいろ弄ってください。


【参考リンク】
CHU*CHU 
思いの袖丈 
PR
Comments
Post a Comment
Name :
Title :
E-mail :
URL :
Comments :
Pass :   Vodafone絵文字 i-mode絵文字 Ezweb絵文字
TrackBack URL
TrackBacks
サイドバーをカスタマイズ。
Blog Peopleに登録しました。 で、関連ツールを設置するために、 サイドバーをいじりました。
サンフランのもっとお日さまサンサンサン - URL 2005.06.05,Sun at 22:16:48
Photos
最新コメント
from[またべえ 05/13]
from[ちぇぶ 05/13]
from[またべえ 04/01]
from[けーや 04/01]
from[またべぇ 03/17]
from[またべぇ 03/17]
from[じょり 03/17]
from[ちぇぶ 03/17]
ブログ内検索
最新トラックバック
プロフィール
HN:
またべぇ
性別:
男性
BlogPeople
QRコード
アクセス解析
Template by mavericyard*
Powered by "Samurai Factory"
忍者ブログ [PR]