本日もまたセコセコと、wordpressの新テーマ制作を進めています。
ちょっと前にアップした記事にも書きましたが、新テーマではTwitter Bootstrapを使うことにして、さらに上部固定ナビゲーションを採用することにしています。
さらに、トップページに「スライダー」をつけてみよう！なんてことを思い立ち、フルスクラッチで作るんじゃなくて”スライダーの定番jQueryプラグイン”である「FlexSlider2」を使ってみることにしました。
で、FlexSlider自体は簡単に導入できたんですが、一つ問題が。
上部に固定したナビゲーションとスライダーが重なった時に、ナビゲーション上のフォントがなんか変な感じになっちゃうんですよ！
weightが変わっちゃったような感じで、線が細くなってしまいます。
↑コレが、
↓こうなっちゃう感じ。
普通ならそんなに気にならないのかもしれないけど、ほら、新しいロゴはiOS7の雰囲気に乗っかって極細フォントにしちゃったもんで、ロゴが消えちゃうわけですよ。
由々しき事態なわけですよ。
というわけで、なんとか対策方法を探してみました。
いろいろとググりまくった結果参考になったのはコチラのページ。
Flexslider makes issues with position fixed elements
結論から言うと、問題はcssの「position:fixed」指定の要素とFlexSliderを同時に使うと起こる現象とのこと。
対策方法は、まずflexslider.cssの以下の記述を削除。
-webkit-backface-visibility: hidden;
※「.flexslider .slides > li」に対しての指定です。
※行を削除するのではなく、“hidden”を“visible”（初期値）に変更するってのでも問題なさそうです。
さらに、jsにも以下のオプションを指定します。
$('.flexslider').flexslider({
useCSS: false
});
出来た！
これでnavbarの表示もバッチリになりました！
ちなみに、cssのbackface-visibilityプロパティはcss3で追加されたオプションで、
backface-visibilityは、要素の背面の表示/非表示を切り替えるプロパティです。
要素に回転などの3D変形を適用した結果、要素ボックスの背面がユーザー側になるときに、要素ボックスを表示するかどうかを指定できます。
背面を表示する場合は「visible」、要素ボックスを隠す場合は「hidden」を指定します。
http://htmlcss.jp/css/backface-visibility.html
とのこと。
うーん。なんでこのプロパティがnavbarに影響を与えてるのかはイマイチわからん。。
せっかく使うんだからFlexSliderのソースも見て、どんな動きをさせてるもんなのか一度チェックしたほうが良さそうです。
さらにcssのオプションの方は、、、
Boolean: Slider will use CSS3 transitions if available
とのこと。
うーん。ここでCSS3のtransitionを使うことを許していないなら「backface-visibillity」も動かなくなんじゃ？
と思ったんだけどそうでもなさそう？？？
これはある程度FlexSliderを触ってみないと、なんでこれで解決したのかもピンときてない感じです！
とはいえ、ひとまずこういう感じで問題修正行けました！という備忘録としてここに残しておくことにします。
 |
jQueryプラグイン徹底活用 プロのデザインアイデアとテクニック MdN編集部 エムディエヌコーポレーション（MdN） |