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

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

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

 公開日     更新日  2014/11/30

     

turkey-355498-2

 はじめに

STINGER V3からV5にバージョンアップしたのが2014/9/29、もうかれこれ2ヶ月が経過しようとしています。
そこで、バージョンアップに伴う移行作業がひと通り落ち着いたんじゃないだろうかと思い、STINGERに対する独自のカスタマイズ記録を振り返ってみました。
するとこの記事(スクロールしても記事タイトルをずっと画面に固定表示するカスタマイズ)でまとめたカスタマイズ記事を取りこぼしていることが判明。

忘れないうちにこの取りこぼし部分をいきおいで移行してしまいましたが、リンク先の記事そのままでは行かず、V5としての変更をしました。
この記事では、V3当時からの変更点を含むV5としてのタイトルの固定表示についてまとめたいと思います。

V5での改善方法

いきなりですが、やりたいことはリンク先の記事を見てもらうとして、V5における実現方法として修正差分をまとめます。ポイントは以下2点。

  • STINGER V5でのレスポンシブ対応について、従来は固定幅でよかったけど、サイズ変更時の調整が必要になった点。
    これは、Javascript内の処理にresizeイベントへのブロック幅の再調整アクション(resizeFixedTitleAction)の登録にて行いました。
  • V3当時と比べ、ブロック幅の調整にjQueryのouterWidth()を利用して、paddingやborderなどを意識せず、一番外側のサイズだけを見て揃えれば良いという、ゆるい実装への変更。
    なおV3の時は、ココを何も調べもせず単に固定幅をハードコーディングしてたので、当時も気になってた気がする。

single.php

単一記事のページにて、スクロール途中で画面に表示するためのブロックの追加(と内容としてタイトル表記)、および、このブロックの表示・非表示をコントロールするJavascriptを追加します。
なお、V3の記事と異なり固定表示用のDIVは記事の末尾にしてみましたが、これはSEO対策に影響するのかもしれないため、本文以外の付加情報を末尾に移そうという発想からこうなりました。

 

style.css

先日、こちらの記事でSASS化してしまったということもあり、いよいよオリジナルのSTINGER v5との差分比較がやりにくくなってしまいました…。
とりあえず今回は、#fixedTitleのIDセレクタに対するスタイルを定義したいだけなので、なんとか差分を解読できる感じ。

 カスタマイズ後の感触

V3の時と同じ効果が実現!

このアニメーション気に入っているのですが、WordPressだとログイン中に原稿を確認する際、一番上にWordPressの管理用のリボンがあって、せっかく固定表示しても全部隠れてしまうんですよねぇ。
そのため最近まで存在してないことに気が付かなかったわけで、とても残念ではあります。

とりあえず、このカスタマイズはWordPress書籍で勉強したことを実現する自己満足のようなものだったので、V5へも移行はできてよかったんだと思います。

変更暦

  • 2014/11/26:初版
  • 2014/11/30:固定されたタイトルが枠外にはみ出ないよう、スタイルに以下2件追加。
    overflow: hidden;
    text-overflow: ellipsis;

レスポンシブ広告

Message

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

Time limit is exhausted. Please reload CAPTCHA.

  関連記事

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

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

CSSファイル数を減らしてページ表示時間を最適化

STINGERテンプレートの場合、ダウンロード対象のCSSファイルは2つあります …

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

以前STINGER v3にて、こちらの記事(記事の幅を広げるカスタマイズ)で記事 …

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

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

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

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

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

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

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

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

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

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

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

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

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

  WordPressのSTINGERテンプレートに対して、記事タイト …

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