忍者ブログ
手探りでパソコンの事を勉強するブログです。 何か覚えたら記録していきます。
2017 . 10
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  •   

    [PR]



    このエントリーをはてなブックマークに追加
    ×

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

    サイドメニューウジェットの折りたたみ方法



    このエントリーをはてなブックマークに追加
    MT4.2でウェジェットの折りたたみをする方法です。

    1、javascriptのダウンロード

    小粋空間からmenufolder.jsスクリプトをダウンロードします。

    http://www.koikikukan.com/scripts.php

    ダウンロードしたファイルはそのままMTのindexディレクトリにアップロードします。



    2、<head>~</head>に以下の行を追加します。

    ※menufolder.jsが置いてあるディレクトリにパスを合わせて下さい。
    <script type="text/javascript" src="<$mt:BlogURL$>menufolder.js"></script>



    3、CSSの追加
    ※以下のスタイルシートを追加します。

    .fold-header a {
    width: 100%;
    }
    .fold-header a:link,
    .fold-header a:visited {
    display: block;
    padding-top: 2px;
    padding-bottom: 2px;
    text-decoration: none;
    }
    .fold-header a:hover {
    color:#fff;
    background: #AB0404;
    text-decoration: none!important;
    }


    4、ウェジェットのソースを書き換える。

    ※以下のコードは月間アーカイブを書き換えた場合です。

    <mt:IfArchiveTypeEnabled archive_type="Monthly">
        <mt:ArchiveList archive_type="Monthly">
            <mt:ArchiveListHeader>
    <div class="widget-archive-monthly widget-archive widget">
    <div style="text-align: center; ">
        <h3 class="widget-header" fold-header" id="tukianame"><$mt:ArchiveTypeLabel$> <a href="<$mt:Link template="archive_index"$>">アーカイブ</a></h3>
    </div>
        <div class="widget-content" id="tukialist">
            <ul>
            </mt:ArchiveListHeader>
                <li><a href="<$mt:ArchiveLink$>"><$mt:ArchiveTitle$> (<$mt:ArchiveCount$>)</a></li>
            <mt:ArchiveListFooter>
            </ul>
        </div>
    </div>
            </mt:ArchiveListFooter>
        </mt:ArchiveList>
    </mt:IfArchiveTypeEnabled>

    <script type="text/javascript">
    <!--
    FoldNavigation('tukia','off',false);
    //-->
    </script>

     

    黄色い文字が追加で赤い文字はidです。
    赤い文字は好きな文字を決めて下さい。
    ※ただし、同じページ内で同じidは使えませんので2箇所目以降は違うidを設定して下さい。

    以上で設定は終了ですので、再構築して作動を確認してください。



    5、折りたたみオープン時とクローズ時の画像を設定する場合。


    menufolder.jsの280行目付近を以下のように設定して下さい。
    ※画像ファイルのパスは絶対パスにして下さい。


    271 //-----------------------
    272 // 折りたたみマーク関連
    273 //-----------------------
    274
    275 // 折りたたみマーク表示(メニュータイトル枠全体をリンクにする場合のみ有効)
    276 // 表示する:true
    277 // 表示しない:false
    278 var displayMark = true;
    279
    280 // 折りたたみマーク
    281 // 上:閉じている状態で表示されるマーク
    282 // 下:開いている状態で表示されるマーク
    283 // 画像を設定する場合は右辺を '<img src="[画像のURL]" />'; と書いてください
    284 var openMarkForSideBarMenu  = '<img src="http://www.hoge.hohe/d.gif">';
    285 var closeMarkForSideBarMenu = '<img src="http://www.hoge.hoge/u.gif">';
    286
    287 // 折りたたみマーク位置(折りたたみマークを表示する場合のみ有効)
    288 // タイトル前に折りたたみマークを配置:true
    289 // タイトル後に折りたたみマークを配置:false
    290 // 左端または右端に折りたたみマークを配置:true
    291 var preMarkForSideBarMenu = true;
    292
    293 // 折りたたみマーク画像(リンク方式が 'block' の場合のみ使われます)
    294 // 画像を使用する:true
    295 // 画像を使用しない:false
    296 // var image = false;

     


    6、サンプル画像

    ・クローズ状態
    クローズ状態

    ・オープン状態
    オープン状態



    PR




    ■ この記事にコメントする
    お名前
    タイトル
    文字色
    URL
    コメント
    パスワード
    Vodafone絵文字 i-mode絵文字 Ezweb絵文字
    ■ コメント一覧
    ■ この記事のトラックバック
    この記事にトラックバックする:
    MT4.2 記事ごとのはてなブックマークを表示させる方法 HOME MT4.2対応のアクセスカウンタ
    ©パソコン手探り all rights reserved.
    Powered by ニンジャブログ  Designed by ピンキー・ローン・ピッグ
    忍者ブログ / [PR]