Monthly Archives: 2月 2016

カスタムポストタイプをタグアーカイブに追加したい

　標準では、アーカイブに表示されるのは「投稿」だけになるので、カスタムポストタイプをひっくるめたタグアーカイブを表示させたいときは、ちょっとした工夫が必要になるそうだ。

動いているんば。

スティッキーヘッダにz-indexを書き足したら動きが変になるのを直してみた

　スティッキーヘッダーは、二つのやり方があるよね。
　一つ目は、最初から固定しておくやり方。そして、二つ目は画面高さを取得して、スクロールに合わせて「sticky」（とかの）クラスを追加してやる方法。

　僕は後者を使うことが多い。
　でね、ポジション固定してz-index追加したら、なんか、下の画面が上にシュッと動く訳ですよ。
　最初、これは「ヘッダが吸い付く時の動作ってこんなもんだろう」って思ってたんだけど違った。
　当たり前だけど、z-indexで重ね順を作りだしているので、下の階層のは上に上がろうとする。
　なので、スムーズに動かしてやろうと思うなら、クラスを付与したと同時に（z-indexを作動させたと同時に）、下の要素にパディングトプでヘッダの高さ分の余白を入れてやればいいんですわ。
　そうなったら、どこに「sticky」ってクラスを付与するかも問題になりますよね。僕はヘッダのすぐ下にある要素に直接付け足す、つまり２箇所に付け足すというやり方でやりました。あんまりスマートとは言えないけどね～。ま、いいやん、別に間違いでもない訳だし。
　CSSメモっときます。

　動いてるヨーダ。

ヘッダーをスティッキーにして少し高さを縮める

　スティッキーヘッダーにして表示させた時、ちょっと高さが縮んでアニメートするやつありますやん？

　あれ、やってみたかったんだけど難しいんすよね。ヘッダー内の左にロゴ、右にバナー置いているのでjqueryでmax-heightを追加して、それをトランジションで動かせばいいんだろうけど、画像縮めたら文字が滲みますやん？

　だから、ヘッダのパディングを０にして、それをアニメートさせる感じで作っちゃったら意外とかっちょいい。

CSSのコードだけメモっておこう。

　動いてるんだワン。