サイトリニューアル追加 (2013年10月20日)
レスポンシブにしたのはいいけど、とにかく気になって今すぐにどうにかしたいのが、ブログのトップやカテゴリーなどのアーカイブを閲覧した時に記事が重なるとスクロールが長くなり、これがスマホなどでは顕著であるということ。共通で使うメニューは引き出し式のメニューにしまったからいいが、ブログ特有のメニューは下に嵌めこむしかなかったのでメニューまで行くのにえらく時間がかかる。これじゃマズイなと思い対策。
まずはページあたりの表示数を減らし、ページ分割で見せる方法。カテゴリーや月間アーカイブもこの方法が望ましい。他のMovableTypeでもやっているのだからなにかライブラリがあるはずだ。と思ったらありました。「静的ページ用ページ分割プラグイン:PageBute」
で、設置の方はこっちのページのほうがわかりやすいかも？「【MT】PageButeを使ったページ分割」。
かなり簡単に動いてくれます。ありがとう。
これだけじゃまだ、記事が長いと伸びてしまうので一定の幅に留めることができればと思っていたらこんなのが「ブログ記事一覧を表示する」ほうほう、
MTEntryExcerpt :
ブログ記事の概要に入力した内容を表示します。概要に記述がないときは、ブログ記事の本文を、ブログ記事の設定で指定した概要の文字数だけ先頭から表示します。
だって。さらに同じサイト内で「ブログ記事一覧でサムネイル画像を表示する」
この2つを組み合わせればなんとかなるんじゃないかとやったら、何とかなった。
これ概要外してバナー風に仕上げればFC2とかアメバのスマホ版でみる、バナー風の記事表示になるんではないかと画策中だがとりあえずはPCだけ対応。スマホは後ほど。まえよりかかなり縦スクロール分は少なくなったのですがね。
後はページのトップに戻るボタンを浮動化させた。まあ、使い勝手がいいのか悪いのかよくわからないが。
「jQuery：スクロールで表示されるページトップの実装方法」
jQueryとしてはわかりやすいコードなのでカスタマイズしやすいのだけど、スマホのサイズにすると消えてしまう現象に遭遇。最終的にCSSのコードミスだったのだけど、難しいことを考えすぎていた。ちょっとまだ、邪魔をしているだけの状態なので要調整。Android版Chromeだとスクロールさせボタンを押した後ページトップに戻り再びスクロールさせるとボタンが消えてしまう現象があり、原因不明。ボタンそのものは見えていないだけなのだけど。
iOSでは確かめようがないのでもし表示できないようであれば自力で戻ってください。
Android版Chromeはどうやら下からニョキッと出てくるボタンだったから消えていたらしい。フェードインするタイプにするときちんと動いた。
この記事のタグ: css, html, MovableType
Wrote by ぷー /コメント (0)
コメント
コメント記入欄