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

公開日 2014/11/26 更新日 2014/11/30

Contents

1 はじめに
2 V5での改善方法
- 2.1 single.php
- 2.2 style.css
3 カスタマイズ後の感触
4 変更暦

はじめに

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対策に影響するのかもしれないため、本文以外の付加情報を末尾に移そうという発想からこうなりました。

        <!--/post--> 
      </article>
    </main>

    <div id="fixedTitle">
      <?php the_title(); ?>
    </div>

    <script type="text/javascript">
    (function($) {
        $(document).ready(function() {
            var w = $(window);
            var blogboxClass = $(".blogbox"); //記事タイトル(blogbox)から固定開始
            var pointClass = $(".point");     //関連記事(point)で固定終了
            var fixedTitle = $("#fixedTitle");
            var fixStart = blogboxClass.offset().top + blogboxClass.height();
            var fixEnd   = pointClass.offset().top;
            var isSticky = false;

            var fixedTitleAction = function () {
                if(w.scrollTop() > fixStart && w.scrollTop() < fixEnd){
                    if(isSticky == false){
                        fixedTitle.slideDown("fast");
                        isSticky = true;
                    }
                    resizeFixedTitleAction();
                } else {
                    if(isSticky == true){
                        fixedTitle.slideUp("fast");
                        isSticky = false;
                    }
                }
            };
            var resizeFixedTitleAction = function () {
                if(isSticky == true){
                    fixedTitle.outerWidth($("main").outerWidth());
                }
            };
            w.on('load',   fixedTitleAction );
            w.on('scroll', fixedTitleAction );
            w.on('resize', resizeFixedTitleAction );
        });
    })(jQuery);
    </script>

  </div>
  <!-- /#contentInner -->
  <?php get_sidebar(); ?>
</div>
<!--/#content -->
<?php get_footer(); ?>

</article>

</main>

<?php the_title(); ?>

</div>

(function($) {

$(document).ready(function() {

var w = $(window);

var blogboxClass = $(".blogbox"); //記事タイトル(blogbox)から固定開始

var pointClass = $(".point"); //関連記事(point)で固定終了

var fixedTitle = $("#fixedTitle");

var fixStart = blogboxClass.offset().top + blogboxClass.height();

var fixEnd = pointClass.offset().top;

var isSticky = false;

var fixedTitleAction = function () {

if(w.scrollTop() > fixStart && w.scrollTop() < fixEnd){

if(isSticky == false){

fixedTitle.slideDown("fast");

isSticky = true;

}

resizeFixedTitleAction();

} else {

if(isSticky == true){

fixedTitle.slideUp("fast");

isSticky = false;

}

};

var resizeFixedTitleAction = function () {

if(isSticky == true){

fixedTitle.outerWidth($("main").outerWidth());

}

};

w.on('load', fixedTitleAction );

w.on('scroll', fixedTitleAction );

w.on('resize', resizeFixedTitleAction );

});

})(jQuery);

</script>

</div>

<?php get_sidebar(); ?>

</div>

<?php get_footer(); ?>

style.css

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

main, #fixedTitle {
  background-color: #fff;
  padding: 20px 10px;
  margin: 0 -10px 20px; }
  @media only screen and (min-width: 380px) {
    main, #fixedTitle {
      background-color: #fff;
      border-radius: 4px;
      padding: 20px 40px; } }
  @media only screen and (min-width: 780px) {
    main, #fixedTitle {
      margin-right: 320px;
      margin-left: 0px;
      background-color: #fff;
      border-radius: 4px;
      padding: 20px 40px; } }

#fixedTitle {
  position: fixed;
  top: 0px;
  padding: 5px 40px;
  background-color: #f9f9f9;
  border-bottom: 1px solid #ccc;
  box-shadow: 0px 3px 3px #999;
  color: #666;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: none;
  z-index: 9999; }
  @media only screen and (min-width: 380px) {
    #fixedTitle {
      border-radius: 0px; } }
  @media only screen and (min-width: 780px) {
    #fixedTitle {
      border-radius: 0px; } }

main, #fixedTitle {

background-color: #fff;

padding: 20px 10px;

margin: 0 -10px 20px; }

@media only screen and (min-width: 380px) {

main, #fixedTitle {

background-color: #fff;

border-radius: 4px;

padding: 20px 40px; } }

@media only screen and (min-width: 780px) {

main, #fixedTitle {

margin-right: 320px;

margin-left: 0px;

background-color: #fff;

border-radius: 4px;

padding: 20px 40px; } }

#fixedTitle {

position: fixed;

top: 0px;

padding: 5px 40px;

background-color: #f9f9f9;

border-bottom: 1px solid #ccc;

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

color: #666;

font-size: 12px;

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

display: none;

z-index: 9999; }

@media only screen and (min-width: 380px) {

#fixedTitle {

border-radius: 0px; } }

@media only screen and (min-width: 780px) {

#fixedTitle {

border-radius: 0px; } }

カスタマイズ後の感触

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

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

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

変更暦

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

Message コメントをキャンセル

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

PREV: ソラリス
NEXT: PowerShellスクリプトを動かすための設定