2005年07月17日

開閉スクリプトを改良(Seesaaで超簡単設置)

最近会社でMTをいじくっている関係で、 色々なカスタマイズ指南ページを見ています。そんな中で開閉スクリプトを見つけました。
今までも開閉スクリプトを使っていましたが、開閉部分のカスタマイズにはスクリプト自体を書き換える必要があるために、ちょっと面倒でした。
ところが、今回見つけたものだと、テンプレート(デザイン、コンテンツ)の変更で対応することができ、臨機応変に対応できそうなので、挑戦してみました。

情報元はARTIFACT ―人工事実― | Movable Type作業メモ

しかし、いまいち良くわからない……おバカなもんで(^_^;)

半日以上、いろんなサイトを覗いて、ようやく構造を理解できました。

ほとんどのサイトがMT、ですから説明もほとんどがMT用なわけで、はたしてSeesaaで使うことが出来るのだろうか・・・と心配でしたが、結果なんなく使うことができました。

まずはshowhide.jsを読み込んで、seesaaの適当な場所にアップします。
私の場合はデフォルトの場所にそのままアップしました。

そしたら次にWebのはじめでスクリプトを読み込ませます。
Seesaa管理画面のコンテンツで新たなコンテンツを自由形式として作成します。表示順は基本的に最初の方にしたほうが良いでしょう。

そして、その中の入力欄には

<script type="text/javascript" src="http://monohonblog.seesaa.net/image/showhide.js"></script> 

を書き込みます。src=の内容は、各自で書き換えてください。あくまでもこのブログの場合になってます。

次に、いよいよ折りたたみを実施したい場所の改造です。
ここでは過去ログを例にしたいと思います。
とりあえず、過去ログの設定画面に入ります。

この中で上部に

<a href="javascript:void(0);" onClick="showHide('hide1');" title="クリックする毎に伸び縮みします">▼続きを見る⇔折りたたむ▲</a>
<div class="sidehide" id="hide1">

そして下部に</div>を書き込めば完成。ま、簡単です。

でも、私はどうしても□のチェックボックスでやりたかったので、ちょっと改良しました。

入力欄は空のままでコンテンツHTML編集へ移動して、HTMLをもろに改造しちゃいます。

<div class="sidetitle">
<input type="checkbox" onClick="showHide('Hidearchives');">
<% content.title %>
</div>
<div class="side">
<div class="sidehide" id="Hidearchives">
<% content.header -%>
<% loop:list_archives -%>
<% if:archives.article_count -%>
<a href="/archives/<% archives.createstamp | date_format("%Y%m") %>.html"><% archives.createstamp | date_format("%Y年%m月") %></a>(<% archives.count | __or__ |  echo('0') %>)<br />
<% /if -%>
<% /loop -%>
<% content.footer -%>
</div>
</div>

こんな感じでチェックボックスでの動作を実現しました。
赤字部分が追加した部分です。
赤部分の1行目がチェックボックスを設置している部分です。
その下の赤字部分<div></div>間が折りたたまれる部分です。
上下にあるHidearchivesという文字を変える事で、複数箇所に対応します。
当然上下で一致させないと、正常動作しませんので、ご注意を。

どうぞseesaa利用の方は参考にしてみてくださいな。

posted by 若旦那 at 10:17 | 東京 🌁 | Comment(0) | TrackBack(2) | Blog Tips | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス: [必須入力]

コメント: [必須入力]

この記事へのトラックバックURL
http://blog.seesaa.jp/tb/5147007

この記事へのトラックバック

■サイドバーの開閉スクリプト
Excerpt:  ■T-Back【開閉スクリプトを改良(Seesaaで超簡単設置)】by ものづくり本音ブログ@若旦那    あぁ、やっとできた。  長くなる一方のサイドバーを、ボタンで開閉できるようになったよ。  ..
Weblog: sketch-book
Tracked: 2005-08-19 13:03

■サイドバーの開閉スクリプト・決定版
Excerpt:  T-Back【開閉スクリプトを改良(Seesaaで超簡単設置)】by ものづくり本音ブログ@若旦那    さて、性懲りもなく再度若旦那さんにT-Back。  これはもう、お知らせ機能そのまんまのT-..
Weblog: sketch-book
Tracked: 2005-08-22 13:23
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。