SIRIUSでレスポンシブのサイドバーを固定(追尾)してみよう

SIRIUSサイドバー固定

SIRIUSのユーザーズページで配布されている、レスポンシブテンプレート(シンプル)。

レスポンシブデザインのテンプレートは、スマホでもパソコンでもタブレットでもブラウザの幅に合わせて見やすいレイアウトで表示してくれる便利なテンプレートですね。

今回は、SIRIUSのレスポンシブテンプレートを使って、スクロールしてもサイドバーのフリースペースを固定して追尾する方法をご紹介します。また、【新】角丸テンプレート、【新】デフォルトテンプレートでもテスト済みです。

Sponsored Links

レスポンシブテンプレートのサイドバーを固定する方法

今回のカスタマイズは、サイドバーにあるフリースペース(メインメニュー(下段))だけをスクロールしても追尾してくる方法です。

いろんな方のブログを拝見して、色々試してみました。試した結果、サイドバーのフリースペースは目的通りスクロールしたときに固定されるんですが、メインコンテンツが短くて、サイドバーが長いとき、固定されずに変な動きをしてしまうとか、フッターにかぶったりとかという問題が…

で、さらに調べてみると、問題解決のサイトを見つけることができました。

以下の方法は、滑らかにサイドバーが固定されます。また、メインコンテンツが短くて、サイドバーが長いときの不具合も起きません。

デモでは【新】角丸テンプレートを使用しています。

デモはこちら

jQuery本体

サイドバーを固定するのにjQueryを使うので、jQuery本体を読み込む必要があるんですが、SIRIUSのレスポンシブテンプレート(シンプル)は、既にjQuery本体がHTML内に記述してあるので、読み込む必要はありません。

【新】テンプレートはjQueryを読み込む必要があります。HTMLのhead内に以下を追加記述しましょう。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
Sponsored Links

プラグインを入れよう

まずは、サイドバーを固定(追尾)させるためのプラグインをダウンロードしましょう 。

jquery.ex-flex-fixed – GitHub

jquery.ex-flex-fixed.zip

上のリンクjquery.ex-flex-fixed – GitHubをクリックすると、ページ右側に「Clone or download」ボタンがあります。

Clone or download」ボタンをクリックして「Download ZIP」をクリックしましょう。

Download ZIPをクリック

Download ZIP」をクリックすると、ダイアログが開くので「ファイルを保存する」にチェックして、「OK」をクリックしましょう。

ファイルを保存する

「OK」をクリックすると、ファイルの保存場所を求められるので、あなたのわかりやすい場所に保存しましょう。

今回はデスクトップに保存しました。

jquery.ex-flex-fixed-master.zip

zipファイルを解凍しよう

先ほどダウンロードした「jquery.ex-flex-fixed-master.zip」ファイルを解凍ソフトなどを使って解凍しましょう。

使うのは解凍したフォルダの中「jquery.exflexfixed-0.3.0.js」だけです。

jquery.exflexfixed-0.3.0.js

サーバーにアップロードしよう

次に、FFFTPソフトなどを使って、「jquery.exflexfixed-0.3.0.js」をjsフォルダの中に入れサーバーにアップロードしましょう。

jsフォルダの中に入れる

SIRIUSにもプラグインを入れよう

先ほど、「jquery.exflexfixed-0.3.0.js」をサーバーにアップロードしたので機能するようになりましたが、一応SIRIUSのサイトデータにも「jquery.exflexfixed-0.3.0.js」を入れましょう。

Windows10の場合

CドライブACES WEBSIRIUSdataサイト名jsの中に「jquery.exflexfixed-0.3.0.js」を入れましょう。

jquery.exflexfixed-0.3.0.jsを 入れる

HTML

これから行う作業はHTMLをさわります。作業する前には必ずバックアップしておきましょう。

プラグインを読み込もう

SIRIUSのHTMLの編集を開き、トップページ、カテゴリーページ、エントリーページ、場合によっては、サイトマップ、サイト内検索ページ、リンク集ページのhead内に以下を追加記述しましょう。

テンプレートHTMLテンプレート編集

HTML編集
/js/jquery.exflexfixed-0.3.0.jsより前は、あなたのサイトのURLに変えてくださいね。</body>の直前でもOKです。
<script src="サイトのURL/js/jquery.exflexfixed-0.3.0.js"></script>

HTMLにスクリプトを記述しよう

次に、トップページ、カテゴリーページ、エントリーページ、場合によっては、サイトマップ、サイト内検索ページ、リンク集ページの</head>直前に以下のスクリプトをコピーして記述しましょう。

</body>の直前でもOKです。
<!-- サイドバー追尾・開始 -->
<script type="text/javascript">
var windowWidth = $(window).width();
var windowSm = 768;
if (windowWidth >= windowSm) {
$('.hoge').exFlexFixed({
container : '#contents',
watchPosition : "true"
});
}
</script>
<!-- サイドバー追尾・終了 -->
var windowSm = 768;は数値以下のウインドウサイズになったとき、サイドバー固定(追尾)を解除します。ちなみに、SIRIUSのスマホサイトとPCサイトで振り分けるブレークポイントは768pxです。

固定させたいフリースペースをdivで囲おう

次に、フリースペース(メインメニュー(下段))をdivで囲いましょう。 HTMLテンプレート編集を開き、<% freeSpace4 %>を探しましょう。

126番目ぐらいにあります。

<% freeSpace4 %>を見つけたら、以下のようにトップページ、カテゴリーページ、エントリーページ、、場合によっては、サイトマップ、サイト内検索ページ、リンク集ページに記述しましょう。

<div class="hoge">
<% freeSpace4 %>
</div>

【新】角丸テンプレートのトップページの場合は以下のように記述してください。

<div class="hoge">
<% freeSpace4 | tag_replace(h4,div class="title") %>
</div>

【記述例】

フリースペースをdivで

追加記述ができたら、HTMLテンプレート編集を「保存」しましょう。

SIRIUSのレスポンシブテンプレートで、サイドバー固定の記述はこれで終わりです。

プレビューで見てみよう

プレビュー画面でサイドバーのフリースペースが固定されているか確認してみましょう。

固定していれば成功ですね!

スマホ表示のときは、JavaScriptを無効化にしています。PCで可変を繰り返しながら確かめるときは、再読み込み(リロード)して確認してくださいね。
SIRIUSサイドバー固定デモ

固定が出来てなければ、もう一度HTMLの記述したところを見直してみましょう。

デモはこちら

おわりに

いかがでしたか?SIRIUSのレスポンシブテンプレートのサイドバーにあるフリースペースを固定(追尾)する方法をご紹介しました。

上記の方法は、HTMLに追加記述するだけなので、すごく簡単だと思います。

お疲れ様でした。

Sponsored Links
よろしければシェアお願いします
同じカテゴリーのコンテンツ一覧