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

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

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

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

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

• Fit Sidebar本家参考ページ
• Fit SidebarGitHubページ

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

phptemp_fitsidebar_151118.zip

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

• 組み込み済みサンプルページ

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

• コンテンツSEOのためのWEBサイトテンプレート（PHP）

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

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. それぞれのファイルをアップします。

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

本件で読み込ませる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のプラグインといえば、やはり海外が多いですからね、嬉しく思いました。
国産ということで、やはり丁寧に作られている気がします。
是非、使ってみて下さい。

執筆 : 清水 隼斗