background-sizeで画像が拡大表示されるのを修正

 h1タグの背景を、ずっどーーーんって横一杯に取りたいとき、background-sizeをcoverにすれば綺麗に表示される。
 これは分かった。でも、背景画像はスクロールするとくっついていきますね、当たり前だけど。

 で、ポジションをfixedにすると、画像が拡大して表示されちゃう。これをどうにかして修正しようと色々やってみた。

 このトラブルで悩んでいらっしゃる人がいれば、結論はこれだ。

「画像の高さを十分に取ってみる」

 自分がミスったのは、できるだけサイズを小さくするために、画像をコンテナの縦幅ギリギリで合わせてトリミングしていたという点です。

 横幅は、1920ピクセルに対応できるようなサイズにしている。でも縦は、せいぜい150とか300とか、そういう数値で切り取ってました。

 何故これでは拡大表示されるのか、よくは分かりません。でも、縦幅を800にしてみたらちゃんと表示された。動いていればいいんだす河。

CSSで文字の高さを調節する。

文字の位置を調整するのはいつだって苦労する。
特に、縦の位置を揃えるのは難題だ。

今回、色々やってみて「おっっ」と思ったTIPSがあったのでメモっておこう。

たとえば「お名前必須」というブロックがあったとして。

高さ、あいませんやん。

それを
お名前必須」にする、みたいな。

つまりこれはね。

って感じで、ポジションをつけてあげて、トップからの高さで引っ張ってきたって感じ。
背景つけたいからパディングを設定している訳で、動かすところはもうそこしかない。

これって自分的には大発見。きっと色んなとこに載ってるんだろうけど。。。

動いてるよーぐると。

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

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

動いているんば。

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

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

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

 動いてるヨーダ。

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

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

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

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

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

 動いてるんだワン。

高さを揃えるjquery

お客たまが、どうしても左右の高さを揃えたいとのたまう。フルスクリーンいっぱいに使った三段組みのレイアウト。1920ピクセル画面と1366画面では行の高さは当然かわっちゃう。でも、基本の高い方が決まっていたから、そっちの高さを取得して、他の方にmin-heightで代入してしまおうという方針。

動いてるわん。

wordpressで管理画面をカスタマイズ

あのね、ワードプレスで管理画面をカスタマイズする情報はやくさんある。左メニューの無駄な項目をfunctions.phpに書くやつね。
たしかにそれは便利だ、クライアントワークで、お客様に管理権限を渡す場合だって、ユーザー名の条件分岐で、自分以外の人間の場合にメニューを消すことだってできるんだろう。

しか~し、今回は、管理画面にカスタムCSSファイルをひっかけて、cssでディスプレイ:ノンしちゃおうという企画。
何故そんなことするのかって?自分で覚えてるからfirebugで表示させればいつでもアクセスできるじゃん、みたいな。

まぁ、いくつかやり方はあるんだろうけど一応記念にメモっておこう。

で、cssファイルを作って書きますよと。
動いたよ~(笑)。

非レスポンシブスライダー

動いたのでとりあえずメモ。 HTML

スタイル

jQuery [crayon-5e59d…

文字を回転+着色

やりたいこと。普通にある文字を、あるタイミングで着色し、回転させる。タイミングをjqueryでコンチョローしてクラス付与、CSSでクニュッと曲げちゃう感じ。 まずはHTMLから。 [crayon-5e59d42fc70e…

ページ毎の条件分岐

やりたかったこと。
もしトップページならこれ、ページ何々ならあれ、それ以外はほにゃらら

ちなみに4.4から短縮URLが見れなくなったから、ページIDが分かりづらい、でも、編集中のURL見れば確認できるあるね。

自分はカテゴリの条件分岐でもID使うことが多かったけど、エクスポートでデータ引っ越ししたらカテゴリ番号ってずれるじゃないですか。それなら最初からスラッグでやっておくのもありなのかなと思うようになりましたです、はい。

動いてるよ~。