[CSS,JS] 404エラーのimgタグをいい感じにスタイリングする

by

詳しく書いてある記事はこちらで、
https://bitsofco.de/styling-broken-images/
imgがbroken状態になるとbefore, after擬似要素使えるからよしなにやっつければおkという意味である。
この記事ではbefore, after擬似要素に背景色をつけてposition:absoluteで上に被せて消している。

私の場合は

  • どんなサイズの画像があるか事前にわからない
  • レスポンシブ
  • NO IMAGE画像素材を使う
  • Retina対応もする

ていう条件があった。

続きを読む

[WordPress] カスタムヘッダーをカルーセル表示に変更する

by

デフォルトだと画像１枚しか表示できないので、登録されているヘッダー画像をカルーセルでスライドショーしてやろうっていう改造についての覚書。
文中ではSwiperを利用する場合のソースになっているが、別のライブラリでもマークアップ変えたら動くと思う。

なおVer4.9＆PHP7環境でこしらえたので他のバージョンでは動かないかもしれない。
（すくなくとも4.7以上は必須）

続きを読む

[WordPress] カテゴリー一覧で表示されている記事に登録されたカスタムフィールドの値を配列で得る

by

例えばこれは Product というカテゴリーがあったとして、登録されている記事に Price というカスタムフィールドがあり、
カテゴリーアーカイブで Price の値を一覧にしたい…という場合に使えるかもしれないやつです。

続きを読む

HTML5 Form Validationサンプル（Bootstrap 4.0 + Constraint Validation API）

by

フォームのバリデーションを自前で実装せざるを得ない場合に使える Constraint Validation API のサンプルを作った。
ついでに Bootstrap 4.0の Forms Validation との連携もしてみた。

See the Pen Bootstrap 4.0 + Constraint Validation API Sample (ja) by Tenderfeel (@Tenderfeel) on CodePen.

続きを読む