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

テンプレートパーティー

開閉ブロック設定

スクリプト利用規約【※必ずお守り下さい】

メニュー折りたたみ用スクリプトのjavascript(openclose.js)は有限会社クリタス様に所有権があります。許可なく改造・再配布する事を禁止します。

※openclose.jsファイルを当社のテンプレート「以外」に使う場合は必ずプログラム利用規約をご覧下さい。

開閉ブロックを設定したいhtmlファイルを編集します。

htmlの上の方に開閉ブロック用のプログラムファイル(openclose.js)を読み込みます

openclose.jsファイルはレスポンシブ版テンプレートにはほぼ梱包されていると思いますが、ない場合はレスポンシブテンプレートをDLして、jsフォルダからopenclose.jsをもってきてjsフォルダ(jsフォルダがなければ作る)に入れて下さい。

開閉ブロックを使う全htmlの</head>の上の行あたりに以下を追加します。(※<head>でなく</head>です。)※既に入っている場合は入力は不要です。

htmlの下の方にタグを追加

開閉ブロックを使う全htmlの下の方の</body>の上あたりに追加。


ここで入力している「openclosebox1_hdr」と「openclosebox1」が開閉させる指示に使う名前です。

開閉ブロックを同じページ内で複数設置したい場合はここの名前を変更してコピーして下さい。同じ名前があるとうまく動作しません。

また、今回の場合、「480」というウィンドウサイズを指定しています。これは480px以下になった場合にこの開閉のプログラムを適用するという設定です。PC環境も含めて全端末に適用したいなら、ここの数字を「3000」など大きくしておけばOKです。

開閉用のスタイル指示をhtmlに設定

今回はh2見出しをクリックすると開閉用の内容が表示されるようにしようと思うので、まずはh2タグに
id="openclosebox1_hdr" class="close"
を設定します。「openclosebox1_hdr」は上で設定したhtml下部に指定した名前です。
close」は閉じておくという設定です。openにすると内容が表示される指定になります。

次に開閉ブロックの「内容」の指定です。こちらも上で設定したhtml下部に指定した名前の「openclosebox1」をid値としてつけてあげて下さい。

完成です

動作としてはこれで完了ですが、ボックスが開けるのか閉じれるのかが分かりにくいので、「+」や「-」のアイコンを付けて分かりやすく表示させる事にします。

「プラス」と「マイナス」アイコンのダウンロード

プラス(btn_plus.png)とマイナス(btn_minus.png)のアイコン画像をダウンロードします。
※既に梱包されているテンプレートも多いので、事前に確認して下さい。
制作時のPhotoshop用ファイル(psd)も梱包されているので必要があれば加工してご利用下さい。 DLファイル解凍後、アイコン画像をお手元のテンプレートのimagesフォルダに移動しておいて下さい。

style.cssファイルに「プラス」と「マイナス」の画像の設定をします

cssフォルダ内のstyle.cssを開きます。下の方にスマートフォン環境用の設定箇所があるので、そこに追加します。もしhtml下部の設定でPC環境含めて同じ動作内容にしている場合は、cssファイルでPC用の設定をしている上の方に追加設定をして下さい。

テンプレートによっては、PC用のh2タグのスタイル設定が無効になってしまうので

必要があれば上記のスタイルにPC用で設定しているスタイルを追加設定して下さい。よく分からない場合は配布中のテンプレートのstyle.cssをいくつか参考に見てみて下さい。

今度こそ完成です

PCで確認する場合は、ブラウザ幅を480px以下に狭くして下さい。

※PCでプレビューチェックを行う方へ【注意】
徐々に幅を小さくするとスマホ用のレイアウトになりますが、スクリプトの動作はブラウザを「更新」しないと確認できない場合がありますのでご注意下さい。また、古いブラウザでは確認できません。

実際のサンプルはこちらでご確認頂けます。

うまくできない場合は

サポート掲示板からご質問下さい。

<< ホームページテンプレートの使い方・カスタマイズ方法メニューに戻る

↑ PAGE TOP