読書とプログラミングを中心とした覚書ブログ

読書とプログラミングについて、日々経験したことを忘れないようにするため、極力ブログに記録を残すように頑張る。

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

 公開日     更新日  2014/11/26

       

x6YzbWWRq2sRhAacMjnl_Bangkok Indra market-2

 

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

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

Information

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

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

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

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

改善方法の検討

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

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

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

変更内容

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

 

 

変更内容の補足

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

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

 

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

 

レスポンシブ広告

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Time limit is exhausted. Please reload CAPTCHA.

  関連記事

パンくずリストをもっとカッコよくする

  STINGERテンプレートは、WordPressサイトのテーマとし …

記事の幅を広げるカスタマイズ(V3用)

STINGERをインストールした状態だと、記事の幅が550pxになっています。 …

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

 はじめに STINGER V3からV5にバージョンアップしたのが2014/9/ …

WordPressテーマをSTINGER5にバージョンアップ

STINGER配布サイトにて、STINGERのV5メジャーアップのアナウンスを発 …

パンくずリストの最後の”>”を削除するカスタマイズ

STINGERテンプレートだと、パンくずリスト(ブレッドクラム / トピックパス …

広告フロートの動きがおかしい問題の回避方法

WordPressテーマSTINGERの サイドバーにある「スクロール広告用」は …

記事一覧に表示する各記事の概要を「続きを読む」タグまでにする

Information この記事はSTINGER v3用のカスタマイズ方法です。 …

「続きを読む」ボタンのデザインをカスタマイズ

WordPressの醍醐味の一つ?であるだろうカスタマイズに着手しました。 巷で …

記事一覧に表示する各記事の抜粋を綺麗に整形表示する

STINGERのホーム画面や月まとめ等のアーカイブ系のページに表示される記事一覧 …

記事に設定したカテゴリが複数ある場合「パンくず」を全件表示させる

WordPressのSTINGERテンプレートでは、パンくずリスト(ブレッドクラ …

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