スクロールしても記事タイトルをずっと画面に固定表示するカスタマイズ(V3用)

公開日 2014/09/18 更新日 2014/11/26

WordPressのSTINGERテンプレートに対して、記事タイトルを含むヘッダ部分をブラウザに追従表示させるカスタマイズをしてみました。
これはWEB検索で「固定ヘッダ」とか「Sticky表示」などというように表記されています。

本記事では、このサイトで実現させたSTINGERへの固定ヘッダの設定方法についてまとめたいと思います。

Information

この記事はSTINGER V3のためのカスタマイズです。同じことをV5でもやってみましたので、よかったらこちらの記事もご覧ください。

Contents

1 なぜ固定ヘッダにさせたい？
2 改善方法の検討
- 2.1 変更内容
- 2.2 変更内容の補足

なぜ固定ヘッダにさせたい？

ブログ記事は長くなると当然のことですが、スクロールしないと全部見ることが出来ないのですが、ずっと下の方にスクロールしていくと、これがどういうタイトルの記事だったか忘れてしまうことがあります。
また私はGoogle Chromeを使っているのですが、タブに表示されたページタイトルも文字数の関係からマウスオーバーさせたポップアップ画面を出さないとすべてを一度に表示できません。

そのため、常に記事タイトルを表示させたいので固定ヘッダの仕掛けを活用しようと思いました。

改善方法の検討

STINGERテンプレートではサイドバーにある「スクロール広告用」表示にてブラウザ画面をスクロールしても追従してくる仕掛けが既にあります。
ちょうどこれを参考にして、同様に記事タイトルに対してもブラウザへ追従させます。

仕掛けとしては、固定ヘッダ用のボックス要素(DIV)に対して、次の動作をさせるJavascript処理で実現します。

ブラウザがページ読み込み直後のような最上段を表示中には非表示設定にする。
本物？の方の記事タイトルが画面外に移動したら、固定表示用のボックス要素を表示設定にする。

変更内容

[外観] -> [テーマ編集]より、次の2つのファイルを修正します。

#wrap #wrap-in #fixedTitle {		//★ここから追加
	position: fixed;
	top: 0px;
	width: 720px;
	padding: 5px;
	background-color: #f9f9f9;
	border-bottom: 1px solid #ccc;
	box-shadow: 0px 3px 3px #999;
	color: #666;
	font-size: 12px;
	white-space: nowrap;
	display: none;
	z-index: 9999;
}					//★ここまで追加

#wrap #wrap-in #fixedTitle { //★ここから追加

position: fixed;

top: 0px;

width: 720px;

padding: 5px;

background-color: #f9f9f9;

border-bottom: 1px solid #ccc;

box-shadow: 0px 3px 3px #999;

color: #666;

font-size: 12px;

white-space: nowrap;

display: none;

z-index: 9999;

} //★ここまで追加

<div id="wrap">
<div id="wrap-in">

<!--★ここから追加★-->
<?php if( is_single() ) { ?>
<div id="fixedTitle">
  <?php the_title(); ?>
</div>
<script type="text/javascript">
(function($) {
	$(document).ready(function() {
		var w = $(window);
		var blogbox = $(".blogbox");
		var fixedTitle = $("#fixedTitle");
		var bottom = blogbox.offset().top + blogbox.height();
		var isSticky = false;

		var fixedTitleAction = function () {
			if(w.scrollTop() > bottom){
				if(isSticky == false){
					fixedTitle.slideDown("fast");
					isSticky = true;
				}
			} else {
				if(isSticky == true){
					fixedTitle.slideUp("fast");
					isSticky = false;
				}
			}
		};
		w.on('load',   fixedTitleAction );
		w.on('scroll', fixedTitleAction );
	});
})(jQuery);
</script>
<?php } ?>
<!--★ここまで追加★-->

<div id="main">

<?php if( is_single() ) { ?>

<?php the_title(); ?>

</div>

(function($) {

$(document).ready(function() {

var w = $(window);

var blogbox = $(".blogbox");

var fixedTitle = $("#fixedTitle");

var bottom = blogbox.offset().top + blogbox.height();

var isSticky = false;

var fixedTitleAction = function () {

if(w.scrollTop() > bottom){

if(isSticky == false){

fixedTitle.slideDown("fast");

isSticky = true;

}

} else {

if(isSticky == true){

fixedTitle.slideUp("fast");

isSticky = false;

}

};

w.on('load', fixedTitleAction );

w.on('scroll', fixedTitleAction );

});

})(jQuery);

</script>

<?php } ?>

変更内容の補足

ヘッダー(header.php)の変更内容5行目にある「is_single()」はWordPressが提供する関数で、表示しているページが単一記事を指すページかどうかを判定するものです。
ヘッダーページは月ごとやカテゴリなど、すべてのページの先頭にくっつくものなので単一ページ以外で動いてしまうと困る処理について、is_single()で判定するとよいでしょう。

ヘッダー(header.php)の変更内容9行目以降はjQueryを活用した処理でSTINGERのスクロール広告用と流れは同じです。

固定ヘッダの実現方法については、こちらの記事(現場でかならず使われているWordPressデザインのメソッド)で読んだ書籍でも紹介されていました。