HOME > コラム > WEB全般 > サイドメニューが見えなくなることをなくすjQueryプラグイン「Fit Sidebar」の組み込み

サイドメニューが見えなくなることをなくすjQueryプラグイン「Fit Sidebar」の組み込み

コラム

今回のjQueryプラグインの紹介は「Fit Sidebar」です。
このjQueryプラグインは、メインコンテンツ部分が長いと見えなくなってしまうサイドメニューを最後まで見えるようにしてくれるという機能を持っています。
組み込み難易度は比較的簡単ですので、構えず見て下さい。
「ちょっとは役に立ったかな?」や「ちょっと面白いな(笑)」みたいなことを感じられましたら、シェアして頂けますと幸いです。

WEB全般に投稿したコラム記事

サイドメニューが見えなくなることをなくすjQueryプラグイン「Fit Sidebar」の組み込み

Fit Sidebarサイトイメージ
Fit Sidebarとは?
Fit Sidebarとはサイドメニューが見えなくなることをなくすスクリプト

Fit Sidebarとは、ページスクロールするとサイドメニューが見えなくなることを防いでくれるjQueryプラグインです。
バナーやそのカテゴリ内のリンクを見えるところに表示しておきたい・・・そんな時に役立つjQueryというところです。
実際、広告やSNSのウィジェットなど、メインコンテンツが多くてサイドメニューに置いておいても見えなくなりますよね。
それを解決してくれます。

当サイトで配布しているテンプレートもサイドメニュー部分よりもメインコンテンツが長くなることを想定してるので、バッチリな感じです。
因みにですが、レスポンシブ対応のコーディングにも弊害がないという優れたjQueryプラグインです。

Fit Sidebarの本家サイトと配布

Fit SidebarはGitHubで配布されています。

ダウンロードと組み込みサンプル
Fit Sidebar組み込み済みファイルのダウンロード

WEBサイトテンプレート(PHP)に組み込んだファイルをアップしていますので、ダウンロードしてお使い下さい。

phptemp_fitsidebar_151118.zip
組み込み済みサンプル

WEBサイトテンプレート(PHP)のトップページに組み込んだサンプルページをアップ致しました。

元になるWEBサイトテンプレート(PHP)について

当サイト内の「SEOの基礎知識」の中のコンテンツです。

組み込み手順

凡そ、流れ的には以下のような順番です。

  1. GitHubからダウンロードしたファイル( jquery.sitekit-gh-pages.zip )の中の「 /fit-sidebar/jquery.fit-sidebar.js 」をjsフォルダに移動させ必要な記述を追記します。
    次にダウンロードしたファイルの中の「 fit-sidebar/jquery.fit-sidebar.css 」をcssフォルダに移動させます。
  2. htmlソースにjsファイルとcssフィアルを読み込ませ、指定のソースコードを書き込みます。
  3. それぞれのファイルをアップします。

ということで、上記の内容を以下で詳細解説致します。

Fit Sidebarファイルの移動とjQueryファイルの指定

本件で読み込ませるjsファイルは、「 /fit-sidebar/jquery.fit-sidebar.js 」とjQueryファイルです。
本件ではサイドメニューのあるページが対象となるため、トップページ以外で読み込む共通ファイル「 /_set/fit-slider.php 」を作成しトップページ以外にインクルードさせています。
追記した内容は以下の通りです。

<script>
jQuery(function($){
$('div#ri div.side').fitSidebar({
	wrapper : 'div#maincontents',
	responsiveWidth : 769
});
});
</script>

jQueryファイルは本家サイトで解説のある通り、google さんのファイルを読み込んでいます。
読み込みファイルはソースやファイル( /_set/fit-slider.php )を直接ご確認下さい。

その他の対応は必要なし

本件については、その他の対応は必要ありません。
jsファイルとCSSファイルを読み込み、上述のjs記述のみで完了です。
htmlやcssの追記はなくても問題ありません。

全てのファイルをアップ

そうしましたら、jsファイル、CSSファイル、htmlファイルをアップして下さい。
まずは上記までの流れのファイルをアップして頂けると、正常に表示します。

その他、補足

WEBサイトテンプレート(PHP)の修正にあたって、以下の点に配慮しています。

  • 今回、サンプルにしたWEBサイトテンプレート(PHP)は「 phptemp_151020.zip 」です。
  • 配布ファイルでは、共通用のファイルをインクルードして出力しています。
  • js記述の部分の要素を変更するだけで、細かい指定も可能です。
締め

Fit Sidebarは比較的簡単に組み込めます。
本家サイトでは、色々なケースを想定されているようですので、何かあった場合はそれらの対応が必要になることがあるかもしれません。
ただ、メインコンテンツをきっちり作り込めば凡そ問題ないと思います。

国産のjQueryプラグインということで、組み込んでて嬉しくなりました。笑
jQueryのプラグインといえば、やはり海外が多いですからね、嬉しく思いました。
国産ということで、やはり丁寧に作られている気がします。
是非、使ってみて下さい。

執筆 : 清水 隼斗

Facebookコメント

他のカテゴリ記事は下記からお選び下さい。
SEO対策に関する記事を投稿するカテゴリです。とにかく、SEO対策のことのみを記事にしようと思います。弊社の本業です(笑)
インターネットやWEBに関する総合情報に関する記事を投稿するカテゴリです。技術的なことでも出来るだけ分かりやすくしていこうと思います。
社内での出来事やランチのことなど、小さなことから大きなことまでを投稿するカテゴリです。少人数なのでネタは限られてますが面白可笑しくいきます!
その他、上記に当てはまらないことは全てこのカテゴリに投稿します。弊社の歴史・・・というわけではありませんが、後になって懐かしむことが出来る記事を投稿します。
株式会社SEMラボラトリー
TEL : 06-4394-8427
MAIL : info@oosaka-web.jp
PAGE TOP