SIRIUSでレスポンシブデザインのサイドバーを固定してみよう

SIRIUSサイドバー固定

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

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

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

Sponsored Links

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

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

いろんな方のブログを拝見して、色々試してみました。

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

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

 

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

レスポンシブテンプレートなので、スマホなどのモバイル表示の時は、サイドバーの固定を解除するようにしています。

 

デモはこちら

 

jQuery本体

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

 

 

Sponsored Links

HTML

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

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

</body>の直前でもOKです。

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

HTML編集

 

 

 

テンプレートの横幅やサイドバーの幅をカスタマイズしているときは、その幅に合うように、16,19,23行目の数字を変更しましょう。

 

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

次に、フリースペース(メインメニュー(下段))をdivで囲いましょう。

HTMLテンプレート編集を開き、<% freeSpace4 %>を探しましょう。

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

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

 

【記述例】

フリースペースをdivで

 

 

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

 

プレビューで見てみよう

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

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

あと、スマホでも見て固定が解除されているか確認してみてくださいね。

 

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

 

デモはこちら

 

おわりに

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

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

お疲れ様でした。

参考【スクロール】スクロールしても要素が固定するスティッキーサイドバー

Sponsored Links

こちらの記事もよく読まれています

SNSでもご購読できます。

コメントを残す

*

CAPTCHA