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

なかなか時間がかかった！

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

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

feedwindにはmax-widthの項目もないので困ったが、
PC用とスマホ用の２つの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;

を入れることで表示修正完了。

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

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