読書とプログラミングを中心とした覚書ブログMENUサイトマップSTINGER読書とプログラミングを中心とした覚書ブログ読書とプログラミングについて、日々経験したことを忘れないようにするため、極力ブログに記録を残すように頑張る。V3からV5にバージョンアップしたのが2014/9/29、もうかれこれ2ヶ月が経過しようとしています。そこで、バージョンアップに伴う移行作業がひと通り落ち着いたんじゃないだろうかと思い、STINGERに対する独自のカスタマイズ記録を振り返ってみました。するとこの記事(スクロールしても記事タイトルをずっと画面に固定表示するカスタマイズ)でまとめたカスタマイズ記事を取りこぼしていることが判明。忘れないうちにこの取りこぼし部分をいきおいで移行してしまいましたが、リンク先の記事そのままでは行かず、V5としての変更をしました。この記事では、V3当時からの変更点を含むV5としてのタイトルの固定表示についてまとめたいと思います。V5での改善方法いきなりですが、やりたいことはリンク先の記事を見てもらうとして、V5における実現方法として修正差分をまとめます。V5でのレスポンシブ対応について、従来は固定幅でよかったけど、サイズ変更時の調整が必要になった点。これは、Javascript内の処理にresizeイベントへのブロック幅の再調整アクション(resizeFixedTitleAction)の登録にて行いました。V3当時と比べ、ブロック幅の調整にjQueryのouterWidth()を利用して、paddingやborderなどを意識せず、一番外側のサイズだけを見て揃えれば良いという、ゆるい実装への変更。V3の時は、ココを何も調べもせず単に固定幅をハードコーディングしてたので、当時も気になってた気がする。single.php単一記事のページにて、スクロール途中で画面に表示するためのブロックの追加(と内容としてタイトル表記)、および、このブロックの表示・非表示をコントロールするJavascriptを追加します。V3の記事と異なり固定表示用のDIVは記事の末尾にしてみましたが、これはSEO対策に影響するのかもしれないため、本文以外の付加情報を末尾に移そうという発想からこうなりました。v5との差分比較がやりにくくなってしまいました...。今回は、#fixedTitleのIDセレクタに対するスタイルを定義したいだけなので、なんとか差分を解読できる感じ。}カスタマイズ後の感触V3の時と同じ効果が実現!このアニメーション気に入っているのですが、WordPressだとログイン中に原稿を確認する際、一番上にWordPressの管理用のリボンがあって、せっかく固定表示しても全部隠れてしまうんですよねぇ。そのため最近まで存在してないことに気が付かなかったわけで、とても残念ではあります。このカスタマイズはWordPress書籍で勉強したことを実現する自己満足のようなものだったので、V5へも移行はできてよかったんだと思います。変更暦2014/11/26:初版2014/11/30:固定されたタイトルが枠外にはみ出ないよう、スタイルに以下2件追加。コメントをキャンセルメールアドレスが公開されることはありません。※サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。...記事の幅を広げるカスタマイズ(V3用)STINGERをインストールした状態だと、記事の幅が550pxになっています。...「続きを読む」ボタンのデザインをカスタマイズWordPressの醍醐味の一つ?であるだろうカスタマイズに着手しました。ビデオカメラスクロールしても記事タイトルをずっと画面に固定表示するカスタマイズ(V5用)読書とプログラミングについて、日々経験したことを忘れないようにするため、極力ブログに記録を残すように頑張る。当サイト(読書とプログラミングを中心とした覚書ブログ)は、Amazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。