gm_yosuke

PHP, HTML, CSS サイト構築の小ネタをメモ代わりに共有。

gm_yosuke

PHP, HTML, CSS サイト構築の小ネタをメモ代わりに共有。

[WordPress] サイト内検索の空検索を検索結果0件として処理する

WP v4.0 以降、空検索の結果は固定ページ、投稿、メディアなど全件が返ってくるようになった。 投稿一覧ページに転送するとか、pre_get_posts フックで結果を制御するとか色々やれることはあるが、検索結果0件として処理する場合の一例。 /** 空検索の結果表示 */function search_no_results() { if ( isset( $_GET['s'] ) && preg_match( '/^[\s　]*$/', $_GET['s'] ) ) {

gm_yosuke

    • [SCSS|Sass] 文字列型の数字をちゃんと数値型にしたい(2) 複数桁に対応

      前回の続き。一桁の値しか変換できなかったので複数桁の変換に対応させる。 引数で受け取った文字数の分、繰り返し変換する機能を実装する。 話が長くなるので、とりあえず先に完成品を掲載しておく。 自作関数 今回の目標の完成品 @function str2num($val) { @if number == type-of($val) { @return $val; } @else if string != type-of($val) { @warn "#{$val} is

      gm_yosuke

      • [SCSS|Sass] 文字列型の数字をちゃんと数値型にしたい(1)

        引数などで受け取った数字が文字列型で、数値型に変換したいとき。 こんな風にマップを作る。 $num-map: ( '0': 0, '1': 1, '2': 2, '3': 3, '4': 4, '5': 5, '6': 6, '7': 7, '8': 8, '9': 9,); SCSS のマップというのは、いわゆる連想配列のこと。 リストに『キー（key）』と『値（value）』を保存できる。 上記の例では $num-map というマップで、キーを文字列型の数字、値を数

        gm_yosuke

        • [SCSS|Sass] 引数に数値を渡して文字列じゃないエラーが出たらインターポレーション

          展開したデータを埋め込むCSS のルール名などに変数の値を使う場合は #{} のインターポレーション機能を使うとよい、という説明はよく見る。 インターポレーションとは、内挿（ないそう）や補間と訳され、Sass コンパイラでは変数を展開した値（式の結果）を埋め込む機能になる。 CSS として書き出す他にも Sass 関数の引数としてデータを渡す際、数値型の値を文字列に展開するといった使い方ができる。 例えば str-length() は渡された文字列の文字数を返す関数なので、

          gm_yosuke

        • [WordPress] サイト内検索の空検索を検索結果0件として処理する

          gm_yosuke

        • [SCSS|Sass] 文字列型の数字をちゃんと数値型にしたい(2) 複数桁に対応

          gm_yosuke

        • [SCSS|Sass] 文字列型の数字をちゃんと数値型にしたい(1)

          gm_yosuke

        • [SCSS|Sass] 引数に数値を渡して文字列じゃないエラーが出たらインターポレーション

          gm_yosuke

          [CSS] 不可視のメニューはフォーカス移動の対象からも外す

          見えないのに選択できたり、順序を外れて読み上げられたりするのは都合が悪い。マウスオーバー等で開閉するメニューは、閉じている部分をキーボードによるフォーカス移動の対象から外しておく方が見た目との整合性が取れる。 [NG例] 親となるリスト要素のマウスオーバー、マウスアウトでサブメニューの opacity の値をアニメーション付きで変更している。 これだけではキーボードを使ったフォーカス移動で非表示のメニューが選択できてしまう。 [OK例] visibility: hid

          gm_yosuke

          [CSS] 不可視のメニューはフォーカス移動の対象からも外す

          gm_yosuke

          [JavaScript] aria-expanded 属性で要素を開閉する機能を実装

          ナビゲーションのサブメニュー開閉用にキーボードでも操作しやすいボタンを付ける。身体的にマウス操作の苦手な人もいる。そういう方へ情報発信するサイトなら、サブメニューの開閉に一般的なマウスオーバー以外の機能も必要。 HTML の aria-expanded 属性と CSS で要素を開閉表示する。 結果は『まとめ』の CodePen で。 [JavaScript] function ToggleAriaExpanded( el ) { if ( 'true' !== el.g

          gm_yosuke

          [JavaScript] aria-expanded 属性で要素を開閉する機能を実装

          gm_yosuke

          [CSS] フォームパーツのフォントを簡単に統一する

          ブラウザでフォームを表示すると、デフォルトではフォントの設定が統一されてなくて困る。フォームパーツに親要素のフォント設定を継承させるだけで改善。 個別にあれこれ設定しなくてもいい。 ちょっと見た目を揃えるだけで印象が良くなるので、低コストなサイトの最低限の設定にもお勧め。 [CSS] input,button,textarea,select { /* 親要素のフォント設定を継承する */ font: inherit;}

          gm_yosuke

          [CSS] フォームパーツのフォントを簡単に統一する

          gm_yosuke

          [CSS] stylelint に prefers-color-scheme を注意されたくない

          stylelint で CSS をチェックしていると、モダンブラウザが対応して一般的に使われている機能でも仕様や草案の定義に含まれないものはエラーになる。 分かってやってるから気にしないという対応もあるが、エラー表示にドキッとしちゃう人は個別に許可してもらおう。 ダークモードに適用させる @media のカラースキーム判定は便利。@media screen and (prefers-color-scheme: dark) {︙} だがこれが、環境によりそんな機能名知らない

          gm_yosuke

          [CSS] stylelint に prefers-color-scheme を注意されたくない

          gm_yosuke

          [CSS] scroll-padding-top の設定をページごとに変える

          ページごとに固定ヘッダーの高さが違うときスタイルを切り分ける便利な方法。「要素が特定の子要素を持つ場合」を指定する疑似クラス :has を使って html{ } にプロパティを追加する。 以下は <html> の子要素 <body> のクラス属性で判別する例。 WordPress などでも応用しやすい判定方法だと思う。 [HTML] <html>︙<body class="home">// サイトのホームページならクラス名を home などお好みで。</body>︙</

          gm_yosuke

          [CSS] scroll-padding-top の設定をページごとに変える

          gm_yosuke

          [PHP] Exif のサムネイルをブラウザに表示する

          exif_thumbnail() とか exif_read_data() で取得したサムネイルをHTML内に表示する方法。$thumb = exif_thumbnail( $path, $width, $height, $type );// $path は元画像のパスif ( IMG_JPEG === $type ) {// 取得したサムネイルのタイプが jpeg だったら出力する printf( '<img src="data:%s; base64,%s" width="

          gm_yosuke

          [PHP] Exif のサムネイルをブラウザに表示する

          gm_yosuke