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

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

私の場合は

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

ていう条件があった。
“[css, js] 404エラーのimgタグをいい感じにスタイリングする” の続きを読む

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

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

なおVer4.9&PHP7環境でこしらえたので他のバージョンでは動かないかもしれない。
(すくなくとも4.7以上は必須)
“[WordPress] カスタムヘッダーをカルーセル表示に変更する” の続きを読む

[WordPress] アーカイブで表示される記事の情報を配列で抽出する

以下は記事IDを配列にするサンプル

<?php 
$post_ids = array();

//@param WP_Post $p
//@param integer $i
array_walk($GLOBALS['posts'], function($p, $i) use(&$post_ids) {
  $post_ids[$i] = $p->ID;
});

var_dump($post_ids);
?>

グローバルにあるWP_Queryの$postsをループ処理すればget_postsとか使う必要はないなと思った。

先日の カスタムフィールドの値を配列で得る やつは、

<?php 
$custom_values= array();

//@param WP_Post $p
//@param integer $i
array_walk($GLOBALS['posts'], function($p, $i) use(&$custom_values) {
  $custom_values[$i] = get_post_meta($p->ID, 'your_key', true);
});

var_dump($custom_values);
?>

こうなる。

上記サンプルはPHP5.3以下だと動かない。

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

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

HTML5 Form Validationサンプル(Bootstrap 4.0 + Constraint Validation API)

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

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

“HTML5 Form Validationサンプル(Bootstrap 4.0 + Constraint Validation API)” の続きを読む

スクロール催促ボタンとページトップへ戻るボタンの出し分け

See the Pen GoToTop by Tenderfeel (@Tenderfeel) on CodePen.

某サイトで使っているボタンを要点だけ切り出してみた。

以下が指定された挙動だった:

  • 初期状態は下へスクロールするボタン
  • ファーストビューが消えるくらいスクロールしたらトップへ戻るボタンにする
  • フッターにトップへ戻るボタンを被せない

Twitter Cards 完全ガイド

「サイトにTwitterカードつけたい」とか、「キャンペーンのツイートにカードつくようにしたい」とか、フロントの人なら1度は言われたことあると思うし、まだ言われたことがなくてもこれから言われる可能性があると思う。
大体のことは公式の説明に書いてあるので、ほとんどそれをなぞった内容になるけど、実際使ってみて分かったこともいくつかあるのでまとめておく。困ったときの参考になれば幸い。

“Twitter Cards 完全ガイド” の続きを読む

Bフレッツからギガマンション・スマートタイプに乗り換えた話

speedtest

最大100MbpsのBフレッツでDownload 90Mbpsくらい出てるから優秀だと思っていたけど、
慣れてしまえば欲が出るもので、ギガ回線への乗り換え欲求がふつふつと沸いてました…。

とはいえ集合住宅だとそう簡単に回線乗り換えなんてできないだろうと思ってしまう。
他の住人にも影響が出るかもしれないし、管理人がYESと言わないかもしれないし。

“Bフレッツからギガマンション・スマートタイプに乗り換えた話” の続きを読む