情報商材 レビュー

ネットで稼ぐ情報商材レビューブログ > 70 便利な小技 > 01_MovableType

スクロールしても途中でブログサイドバーを固定する方法

スクロールしても途中でブログサイドバーを固定する方法


こんにちは。ヲタスケです。


最近は人気ブログランキングでランキングされいているブログを研究してみたりするのですが、
情報商材アフィリエイトブログに限らず、主にWEBデザイン系やBuzz系情報発信ブロガーのブログを
よく研究してみると、ブログ全体の随所にユーザビリティやクリッカビリティ(クリックさせるための工夫)に対する努力を
垣間見ることができます。


今回は、そんな彼らのブログを研究して
取り入れてみようと思ったブログカスタマイズTipsを紹介することにします。


今回のTipsは題して「スクロールしても途中でブログサイドバーを固定する」です。(長っ!)

 

まずは、論より証拠。

 

この記事を下の方までスクロールしてみてください。

 

ハイ!途中で右サイドバー後半のパーツが固定されましたね?

 

2014-01-15_233945.jpg

 

これが今回ご紹介するTipsになります。

 

例によって、私のブログでのカスタマイズ方法を記載します。

 

当ブログはアンリミテッドアフィリエイトNEOのメインブログテンプレート(MT)をベースに構築していますので、
他のテンプレートをお使いの方は説明箇所を適宜読み替えてご理解ください。

 

それでは参ります。

 

準備編

 

まず、準備ですが、今回もjQuery(ジェイクエリー)を使います。

jQueryについてよくわからないという方は以下の記事をご参照願います。

また、まだjQueryを未導入でしたら合わせて公式ページより事前にスクリプトをダウンロードして、
サーバーにアップしておいてください。

↓↓↓

jQueryについての説明及びダウンロード・アップロードの方法

 

次に、このjQueryを元にしたサイドバー固定スクリプトを用意します。


----ここから----

<script type="text/javascript">
$(function($) {
	var tab = $('#side3'), offset = tab.offset();
	$(window).scroll(function () {
		if($(window).scrollTop() > offset.top) {
			tab.addClass('fixed');
		} else {
			tab.removeClass('fixed');
		}
	});
});
</script>

----ここまで----

 

 

また、今回は下記のようなレイアウト変更になりますので、軽く頭に入れておいてください。

 

【変更前】

side2layout.jpg

 

 

【変更後】※side3を固定表示します。

 side3layout.jpg

 

それではさっそく作業に入っていきます。

 

CSSの追加

 

①MT管理画面より「デザイン」→「スタイル」→「スタイルシート」を選択します。

2014-01-16_011336.jpg

 

②CSSに以下のコードを追加します。

.fixed {
    position: fixed;
    top: 10px;
    width: 100%;
    z-index: 10000;
}

③side2の内容をコピーしてside3を作成します(中身はside2と同じです)。



最終的に下図のようになっていることを確認してください。

2014-01-16_011452.jpg

 

以上でCSSの編集は終了ですので、保存と再構築を行ってください。

 

固定するサイドバーパーツの作成(HTML)

 

次に実際にside3に表示するコンテンツを作ります。

 

①MT管理画面より「デザイン」→「テンプレート」→「テンプレートモジュールの作成」を選択します。

2014-01-16_020042.jpg

 

②「右サイドバー下」という名前で新しくテンプレートモジュールを作ります。
(中身は固定表示したいコンテンツを右サイドバーから移植します。)

2014-01-16_020156.jpg

 

③作成後は下記のようになります。

2014-01-16_011518.jpg

 

以上でページに読み込ませる部品(CSS,テンプレートモジュール)は全て揃いました。

 

JavaScript/HTMLコードの追加

 

実際に準備したスクリプトと作成した部品を記事ページに読み込ませます。

 

①MT管理画面の「デザイン」→「テンプレート」→「ブログ記事」を選択します。

 2014-01-16_011607.jpg


②ブログ記事の<head>タグ内(<head>~</head>)にjQueryの読み込みコードが記述されていることを確認する。

記述されていない場合は、下記記事を参考に読み込ませてください。(jQuery本体のアップロードも忘れずに!)

↓↓↓

jQueryについての説明及びダウンロード・アップロードの方法

 

③サイドバー固定スクリプトを適当な位置に挿入する。(headタグの直後、bodyタグの直前がオススメです。)

2014-01-16_012135.jpg

④「右サイドバー下」のテンプレートモジュールを「ブログ記事」に読み込ませる。

※丁度、side2の記述が終わった辺りに<div id="side3">~</div>を挿入してください。

2014-01-16_012257.jpg

 

⑤保存と再構築を行って終了する。

 

最後に

 

お疲れ様でした。以上で、ブログサイドバーのパーツを固定表示する方法の説明を終了します。

 

今回はアンリミテッドアフィリエイトNEOのメインブログテンプレートを勝手に変更していますが、
あくまでもテンプレートの改修は自己責任でお願いします。
(当改修によって不具合が生じてもアンリミテッド事務局さんに問い合わせしないようにお願いしますね)

 

本日も最後までお付き合いいただきありがとうございました。

 

情報商材アフィリNo.1

アンリミテッドアフィリエイト  アンリミテッドアフィリエイト

アンリミレビュー記事

人気ブログランキング参加中

この記事が役に立ったと思ったら、 ボタンをポチっとクリックしてください!

↓↓↓

人気ブログランキング

↑↑↑

応援よろしくお願いします。

お問い合わせはコチラ

メールフォーム

不明点、質問、何でもご相談ください。

↓↓↓

>>ヲタスケに質問する<<


◇ツイッターで
ヲタスケをフォローすることで、最新の更新記事をリアルタイムで読むことができます!

↓↓↓


情報商材rss