RSSなんて時代遅れなものまだ使ってるの？なんて思う人もいるだろうが、界隈によってはまだまだ現役な機能。
先日カスタマイズしていたら表示で躓いた箇所があったのでまとめておく。
やりたかったこと
スマホとPCでライブドア相互RSSの表示を変えたい。
具体的には、PCでは表示画面が横に長いので横に3つのサイトを並べて表示したかった。一方で、スマホは縦に2つのサイトを並べて表示したい。
環境
テーマはCOCOONを使用。特筆すべき箇所はなし。
やったこと
COCOONのウィジェット機能を利用して、コンテンツ上部にスマホ用とPC用の表示をそれぞれ設定した。
次にCSSをカスタマイズした。CSSはデフォルトの時点でレスポンシブルデザインが前提だったので、画面サイズごとに設定を書けばよい。
スマホ用には縦並びに2つのRSSを、PC用には横並びに3つのRSSを表示できるようにした。
横並びのCSSの書き方については、ライブドアのヘルプページに詳しい説明がある。今回は三分割なので.blogroll_innerのwidhを33%に設定。
結果
RSSの最後尾のサイトしか表示されない。
つまり、PC向けではRSSのA・B・CのうちCしか表示されず、スマホではRSSのA・BのうちBしか表示されない。
表示絡みなのでキャッシュを削除して、スーパーリロードで表示しても上手く表示できない。困った。
ブラウザの検証ツールを使ってソースを確認したところ、ウィジェットに書いたコードに属性値が自動で付与されているようだった。属性値でスマホ表示・PC表示のどちらを適用するかを判断しているようだ。
この属性値はRSSの一連の流れの中に挿入されていたため、RSSが正しく認識されず表示が崩れている可能性が高いと予想。
修正内容
スマホ表示の場合、サイドバーウィジェットはユーザーに自動で表示せず、バーか何かに格納していたはず。「コンテンツ上部」と「インデックスリストトップ」は同じ表示になる。
そのため、ウィジェットのコンテンツ上部に記載したスマホ向けのRSSのみインデックスリストトップに移動した。見かけ上は変更前と変わらないはずである。
つまり、表示スペースを1つにつき相互RSSを表示するクラスは１つにして、デバイスによる表示の条件分岐をなくした。RSS自体は複数サイトあるが表示箇所を1か所にした。
最後に
問題に直面した際にソースコードの確認をしたのがよかった。自分で書いていないコードが追記されていたのが確認できたので、問題点の予測をつけることができた。
ブラウザの検証ツールを使って問題を読み解くのは遠回りに見えるが、急がば回れ、地道に解析するのが一番だ。
表示確認はキャッシュを削除してから確認しないと変更したソースが適用されているかわからない。また、スマホのchromeにはスーパーリロード機能がないので、確認はシークレットタブを用いるしかなかった。今思えば無駄な確認をかなりの回数していたと思う。次回は気をつけよう。
コメント