cinema-days 映画な日々

sticky 利用

2020/09/03
スティンキー
当ブログでは、本文記事がサイドバーより長くなる事はあまりない。(汗)
本文記事が長かった場合は、サイドバー下が空白でスクロールされる事になる。

そこでCSSで「sticky」を導入してみた。 事例は映画『糸』の記事を参照下さい。
今使っているテンプレート(GirlOnWire)は未対応なので、プラグインの配置を入れ替え、
(かなり強引に)試行錯誤しながらやってみました。(IE11は非対応)

参考サイト:【22-4】スクロールしていくとピタッと固定する position: sticky



「最新記事紹介」欄を追従表示したかったので、プラグインカテゴリ1から2に移動し
プラグインカテゴリ2をサイドバーから独立させ、「sticky」が効くように調整しました。

本当は、カルーセルにも適用したいのだが、ヘッダーで使っている
背景画像を連動出来ないので諦めました。
[追記]参照

逆に、本文記事が長い場合に、下部 pager に「sticky」をセットしたら、
ちょっと、見すぼらしくなってしまった(笑)→ 後日、top幅を多めに設定し直しました。

[他の修正]
① サイトバーのメニューの一部をブラグインカテゴリ3に移動し、フッターで表示するようにしました。
参考サイト:横並びの画像やコンテンツを簡単にレスポンシブ表示する方法
② コメント・トラックバック欄を開閉式に変更

[追記](2020.9.5.) カルーセルの「sticky」設定
headerを別に作り、各記事にはそちらを表示させる事により、背景を切り分けました。
只、そのままのサイズだと、本文記事が読み辛いので縮小しました。

逆に、footerに移動して、下部で固定した方が、読み易いかな...
イメージはこちらのサイト 参考サイト:BANGER!!!
【スポンサーリンク】
【パソコン】[カスタマイズ]
関連記事
 
cinema-daysを「人気ブログランキング」で応援cinema-daysを「にほんブログ村」で応援
     シェアする


同カテゴリ  【パソコン】[カスタマイズ]

コメント歓迎!! 0

まだ、コメントはございません。

comment form
コメントは承認制です。コメントツールバーは利用できません。
【お名前・URL・コメント本文】欄の入力は必須になっております。
更  新  順
Hiro
Author: Hiro
発信地:愛知県
TB・CM(承認制)・LINK歓迎
cinemadays on X(旧Twitter)
cinemadays on Facebook