最近会社で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>
こんな感じでチェックボックスでの動作を実現しました。
赤字部分が追加した部分です。
赤部分の１行目がチェックボックスを設置している部分です。
その下の赤字部分<div></div>間が折りたたまれる部分です。
上下にあるHidearchivesという文字を変える事で、複数箇所に対応します。
当然上下で一致させないと、正常動作しませんので、ご注意を。
どうぞseesaa利用の方は参考にしてみてくださいな。
posted by 若旦那 at 10:17
| 東京 🌁
|
Comment(0)
|
TrackBack(2)
|
Blog Tips
|
|
