jquery.rwdImageMaps.min.jsお世話になってみました。
これで後のレスポンシブサイトの大きな問題はTableだけなんじゃないかとか、そうじゃないとか。
ただ、こちらのJs利用する上で小さな落とし穴にはまりました。
レスポンシブコーディングをDreamweaver上で行っていると、プレビュー自体もレスポンシブに画像が伸びる。
自分がやりやすい環境で作業していると画像の本当のサイズじゃない状態になっていることが殆どですが、そこを意識せずにイメージマップを作成して上記Jsを利用すると、あれ！？！？ズレてるし！つかえねぇし！ってなる。
恐らくJsの仕組みとして本当の画像サイズに対して、自分で設定したイメージマップをがっちゃんこしちゃうのでプレビュー状態だと画像サイズが嘘×イメージマップはその見た目のまま正解として判断されるため。
なので面倒だけど、画像のサイズをとりあえず本当のサイズに指定した状態でイメージマップを作る必要がありそうです。
なかなかやることが無さそうなシチュエーション。
最初からFixed出来ればラクなんだけど、その要素を通過するまで普通にコンテンツ内にまぎれていて、それを越したら画面中央までアニメーション。そして固定。
スクロールの判定はJsでやる。
ちなみに今回はサイトの構成上、root直下に該当要素を設置。
まるでちょうどとあるコンテンツの下にあるように見せかけるためJsで初期位置を設定。
コツはJsで直接位置を調整するのではなく、Classの付与でCSS側でコントロール。
初期設定
position:absolute; left:50%; width:(93/640)*100%; margin-left:-(93/640/2)*100%; height:auto; z-index:100;
Class付与
.scroll{
position:fixed;
top:0% !important;
animation: page_center 0.2s linear 1;
-webkit-animation: page_center 0.2s linear 1;
animation-fill-mode: forwards;
height:100%;
}
@keyframes page_center {
0% { transform: translate(0, 0); }
100% { transform: translate(0, 40%) ; }
}
スクロールを上に戻したときにもClassを付与
.scrollback{
position:absolute;
animation: page_top 0.2s linear 1;
-webkit-animation: page_top 0.2s linear 1;
animation-fill-mode: forwards;
height:100%;
}
@keyframes page_top {
0% { transform: translate(0, 150px); }
100% { transform: translate(0, 0px) ; }
}
こんど清書しよっと。
スライドショーの定番Slick.js、とてもよく活用させていただいている。
普通に使用する中では問題にならないが、場合によりslick部分のコンテンツを初期状態で非表示にしておいて、何かしらのアクションで表示させる場合、幅の取得が上手くいかないのか1枚目の画像（コンテンツ）が上手く表示されない。
ということは、表示のタイミングでSlickをリロードさせればよいっぽいのだけど余り検索しても見つからず。
公式サイトのこれか？っていう部分をはめ込んでみたらうまく動いた。
あっているのかは分からない。
$('.your-element').slick('setPosition');
と思いきやしっかりと答えを教えてくれている方がいらっしゃいました。
http://www.codelab.jp/blog/?p=852
と思ったら今回自分のサイトでは不具合発生。スライドの複製がものすごい量作成されてしまった。ので参考サイトをちょっと改造して
var slick = $(‘#slider’).slick({初期化パラメータ});
ここは同じ
なにかしらのボタンをクリックしたら・・・
slick.slick('setPosition');
これで動いた。
今まであまり考えてこなかった問題。
頭の中で組んで、一発でコーディング出来る時はあまり問題になってこなかったけども、動きを検証しながらHTMLを加筆したりすると起きる問題。
ある指定したボタンなど（.btn）をクリックしたら、その親要素（.parent）に.addを付ける的な。
<div class="parent"> <div class="block"> <div class="btn">CLICK</div> </div> </div>
上記のようなサンプルだとしたら
$(".btn").parent().parent().addClass("add");
これでも動く。
でも、たとえば.blockの中にもう一つDIVを噛ませてしまうと、上記のコードでは.blockに対して.addがついてしまう。
なので、そういう場合は指定した要素の一番親要素という風な指定をしちゃえばOK
$(".btn").parents(".parent").addClass("add");もしくは
$(".btn").closest(".parent").addClass("add");
相対ルートパス的な考え方かな。
Post Types Orderは正直使いづらい。
有料版にすればカテゴリごとに表示を絞れるみたいだけど無料だと一覧でバーっと表示されてしまう。
正直そうなると現実的ではない。
以前にIntuitive Custom Post Orderを入れたんだけど使えなかったんだよなーと思いつつも再度ググるととんでもない事実が。
参考サイト：http://affilabo.com/wordpress/13662/
「並び換え設定」なんていう項目があったんですね。
自分のWPの設定を見てみたら見事にカテゴリーのチェックが外れていた。
チェック入れてみた。
動いた。
うれしかった。