2016年3月21日月曜日

スマホページにおけるfeedwind表示とflexsliderで矢印がずれて表示される場合

なかなか時間がかかった!

まずスマホページにおけるfeedwind表示。
width="100%"でできれば簡単なのだが、
なにぶんうちのHPはfeedwind表示の左に更新情報を乗っけて2段表示にしている。

つまり、PC表示では2段、
スマホ表示では1段にしたいわけだ。

feedwindにはmax-widthの項目もないので困ったが、
PC用とスマホ用の2つのfeedwindを用意し、
divで囲ってdisplay:noneを適用するようにしたところうまくいった。
scriptをまるごとdivで囲えるとは思わなかったが・・・



次にflexslider。
サムネスライド(カルーセル?)に手を出して見て、
まずはそれなりにすんなりと成功。
次にflexsliderがバージョンアップしていることに気づき
どうせなら最新版をと思って導入してみると、
なんと左右の矢印表示が表示されない。
なんとpng画像からフォント表示に変更されていた(わかりにくい・・・)。
フォントを呼び出し、f001など番号で指定してやることで
表示がなされる仕組みだ。

何とかそれに気づいて対応したものの、どうも矢印が正しい形で表示されず、
上部が切れてしまう。
検索してもこの症状を訴えているページが全くヒットしないので困ったが、
調べてline-heightに原因があることを突き止めた。

bodyでは1.8emを適用しているが、
このflexsliderの矢印は1emでないと正しく表示されない。
ということで、
.flex-direction-nav a:before {
  line-height:1em;
を入れることで表示修正完了。

というかこれくらいの事態は見越して配布してほしいんだがなあ・・・

あと、サムネイルスライダーにすると方向キーによるスライド移動が使えなくなるのか。
これは地味に痛い。

0 件のコメント:

ダイの大冒険→キテレツ大百科(藤田淑子)へのオマージュ?

ダイの大冒険を読み返していて一つのセリフが目に止まった。 「ゴメちゃん・・・! さよならは 言わないよ・・・」 (第335話「世界が輝く時」の巻より) これは・・・キテレツ大百科の最終回のセリフによく似ている! 「コロ助、さよならは言わないからね!」 (第331話(最終話)「愛の...