ページ内にあるタイトル(見出し)をクリックした際に、本文がスライドダウンで表示されるスクリプトを作りました。
ここではわかりやすいように「タイトル」と表記していますが、これはHTMLのtitleタグではなく、ページ上に表示させるh1とかh2とかの「見出し」を指しています。
しかし実際のところ、見出しに使うタグはh1やh2のようなhタグに限らず、pでもdivでもなんでも動作するようになっていますので、既存のページに柔軟に組み込みやすいのではないでしょうか。
名称は「スライドダウン・スクリプト」としておきます。
現在の最新バージョンは2019年6月20日公開の1.0です。
各バージョンごとのアップデート内容については、このページ最下部の「アップデート履歴」に記載してあります。
スライドダウンスクリプトのサンプル
見出しの文字の大きさや色などはこのプログラムの動作に影響することなく、後から自由に変更できます。
スライドダウンスクリプトのダウンロード
無料でダウンロードできます。
まず、動作確認のために以下の作業から順番に確認していくと間違いがないでしょう。
1、スライドダウンスクリプトをダウンロードし、展開する。
2、フォルダごとサーバにアップロードする。
3、ブラウザでindex.htmlにアクセスし、動作を確認する。
以下の作業は同梱のindex.htmlのソースからコピーしていくと間違いがないでしょう。
4、クリックできる見出しに対して「slide-down」というクラス名を付ける。
初期状態のindex.htmlでは以下のようにp要素になっていますが、これはh1やh2やdivなど、どんな要素でもOKです。
<p class="slide-down">スライド見出し1</p>
5、上記手順4の各見出しに対してdata-slideという属性を付ける。
この属性の値はslide-1、slide-2、slide-3というように、数字を順番にしてください。
<p class="slide-down" data-slide="slide-1">スライド見出し1</p>
<p class="slide-down" data-slide="slide-2">スライド見出し2</p>
6、見出しがクリックされた際に表示されるエリアのコードをページ内に追加する。
これはdiv要素である必要があります。
そしてクラス名には上記手順5でdata-slide属性に付けたslide-1、slide-2、slide-3という同じ名前にします。
<div class="slide-1">
ここに見出し1がクリックされた際に表示させる内容
</div>
<div class="slide-2">
ここに見出し2がクリックされた際に表示させる内容
</div>
上記コードのdivの中にはどのようなHTML要素を記入しても問題ありません。
この部分はこのプログラムの動作に影響しません。
画像を設置してもOKですし、ulやdlのようなリスト要素を設置してもOKですし、その気になれば当サイトで配布しているレスポンシブ・メールフォームのようなプログラムを組み込むことも可能です。
7、slide-down.cssを読み込ませる。
このslide-down.cssの設置場所はどこでも構いません。
サーバ上にすでにcssという名前のフォルダが存在しているのなら、その中に移動させても問題ありません。
<link rel="stylesheet" href="css/slide-down.css" />
7、jQuery本体とslide-down.jsを読み込ませる。
このslide-down.jsの設置場所もどこでも構いません。
サーバ上にすでにjsという名前のフォルダが存在しているのなら、その中に移動させても問題ありません。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="js/slide-down.js"></script>
組み込み作業は以上です。
デザインを変更したりする前に、この時点で動作確認をしてみましょう。
見出しなどのデザインはすべてCSSで定義してあります。
初期状態のindex.htmlの中に記述されているCSSのコードは、既存サイトに組み込む場合は不要になると思います。
既存サイトに組み込む際に必要になるCSS、つまりこのプログラムの動作上必要になるCSSはslide-down.cssだけとなります。
この「スライドダウンスクリプト」は、CSSをどのように編集したとしても動作エラーの原因にはなりませんので、自由にCSSでデザインしてください。
プログラムファイル(JS)では、クリックされた見出しのdata-slideの名前に応じたdiv要素に対して表示・非表示の切り替えをするだけの仕組みになっています。
初期状態ではimageという名前のフォルダがあり、その中に数枚の画像が格納されています。
これは既存サイトに組み込む際には不要ですので、フォルダごと削除しても問題ありません。
本プログラムの使用においていかなる損害が発生したとしても、当方は責任を負いません。
了承していただける方のみご利用ください。
不具合などありましたら、サポートBBSからご連絡ください。
アップデートの際に修正する可能性があります。
無料のものですから、基本的にはサポートはありません。
が、初期状態での設置でエラーが出る場合は、サポートBBSにて無償対応いたしております。
初期状態とは、すべてのファイルを一切編集していない状態のことを指します。
それ以外のファイルが編集されていたり、既存サイトに組み込んだ場合などのお問い合わせは有償となりますので、ご了承ください。
しかし例外として、当サイト上で解説されているカスタマイズ方法だけを実践して正常動作しない場合は、無償サポート対象内になります。
その理由は、そのような使い方を想定してプログラムが作られているからです。
ご希望のカスタマイズがありましたら、お問い合わせページからご依頼ください。
ページを下に少しスクロールされると「ページ最上部に戻る」が出現し、そのボタンをクリックするとページ最上部にアニメーションで戻るスクリプトを作りました。サイトを制作する度に毎回同じコードを書いたりコピペするのも面倒なため、簡単に組み込めるようにできています。
タブをクリックして表示エリアを切り替えるスクリプトを作りました。既存のページに組み込みやすくできています。特にスマホの場合は画面上に表示できるページ領域が狭いため、このスクリプトを使用することで簡単に各エリアをタブ切り替え式にすることができます。
マウスオーバーさせた時に画像を切り替えるのはCSSの:hover疑似要素を使用するのが基本となりますが、フェード演出で切り替えたい場合もありますね。そのようなフェード演出を簡単に実装できるスクリプトを作りました。無料でダウンロードでき、既存サイトに簡単に実装できます。
ドロップダウン式(縦方向の折り畳み式)のスマホ用メニューを簡単に設置できるスクリプトを無料ダウンロードできます。CSSが理解できる人なら自由にデザインを変更したり、多重階層にすることも可能でしょう。
ページ内リンクはスクロールのアニメーションなどもなく一瞬で移動するため、ページ内のどの部分に移動したのかがわかりにくいのが欠点です。ページ内リンクにスクロールのアニメーションを簡単に付加できるスクリプトを作りました。既存ページに組み込むのも超簡単です。
この「アップデート情報」欄はコンテンツ・メーカーを使用して更新・表示しています。
ファーストステップでは人や世の中の役に立つプログラムを作っています。
ぜひ色々使ってみて、改善点や要望などがあればお申し出ください。
