ホームページテンプレートを無料配布中
商用利用もWEB制作業者様利用も全て無料

テンプレートパーティー

レスポンシブタイプの更新欄をスマホ環境でのみ開閉ブロック式に変更

2014/04/22以前にレスポンシブテンプレートをダウンロードされた方で、更新情報欄を開閉ブロック式に変更したい方は以下をご参照下さい。

補足:レスポンシブを配布しだした当初、cssファイルでの開閉ブロックを設置していましたが、iphoneで動作しないと報告があり、今回の方法に変更されました。

設定方法

  • まず、ご利用時と同じレスポンシブテンプレートを再度ダウンロードして解凍下さい。
  • jsフォルダからopenclose.jsをコピーし、ご利用中のテンプレートのjsフォルダに移動して下さい。jsフォルダがない場合は作って下さい。
  • imagesフォルダからbtn_minus.pngbtn_plus.pngをコピーし、ご利用中テンプレートのimagesフォルダに移動して下さい。
  • ご利用中のテンプレートのindex.htmlを開き、</head>(※<head>でなく</head>です)の上の行に以下を追加。
    <script type="text/javascript" src="js/openclose.js"></script>
    続いて、下の方の</body>(※<body>でなく</body>です)の上の行に以下を追加。
    <script type="text/javascript">
    // 表示の幅で設定・PCはウィンドウサイズを反映 */
    if (OCwindowWidth() < 480) {
    open_close("newinfo_hdr", "newinfo");
    }
    </script>

    続いて、<h1>更新情報・お知らせ</h1>となっているのを以下に変更。
    <h1 id="newinfo_hdr" class="close">更新情報・お知らせ</h1>
    その下の行を以下に変更。
    <dl id="newinfo">
  • 続いて、cssフォルダのstyle-s.cssを開き、「トップページ内「更新情報・お知らせ」ブロック」の設定内に以下を追加。
    (※「●●●●●●」部分はテンプレートごとに入力文字が変わります。下の説明を読んで下さい。)
    section#new h1.open {
    background: url(../images/btn_minus.png) no-repeat right center, -webkit-gradient(linear, left top, left bottom, from(#●●●●●●), to(#●●●●●●));
    background: url(../images/btn_minus.png) no-repeat right center, -webkit-linear-gradient(#●●●●●●, #●●●●●●);
    background: url(../images/btn_minus.png) no-repeat right center, linear-gradient(#●●●●●●, #●●●●●●);
    }
    section#new h1.close {
    background: url(../images/btn_plus.png) no-repeat right center, -webkit-gradient(linear, left top, left bottom, from(#●●●●●●), to(#●●●●●●));
    background: url(../images/btn_plus.png) no-repeat right center, -webkit-linear-gradient(#●●●●●●, #●●●●●●);
    background: url(../images/btn_plus.png) no-repeat right center, linear-gradient(#●●●●●●, #●●●●●●);
    }

「#●●●●●●」部分については、style.cssの「#main section > h1~」又は「#main h1」のブロック内にあるグラデーションの色をそのまま入力して下さい。もしよく分からない場合はサポート掲示板からご質問下さい。

PCなどでブラウザのサイズを変更して動作確認をする場合の注意点

PCなどでブラウザのサイズを変更して動作確認をする場合、更新(再読み込み)をしないと反映されませんのでご注意下さい。

PCなど全端末を対象に開閉ブロックを適用させたい場合

htmlの下部に追加した、
if (OCwindowWidth() < 480) {
の「480」の数字を「3000」など大きな数字に変更して下さい。この数字を基準に開閉ブロックの適用先を設定できます。

↑ PAGE TOP