外部リンクに設定したhoverが、クリック後も効いたままになる
- 2023.06.27
ちょっと珍しい事象に遭遇しまして、解決に少し手間取りました。 ワードプレスのメニュープラグイン（max-mega-menu）で、ボタンのhoverの処理をしていました。メニューの中に2つほど外部リンクがあったのですが、クリック後クリック元の画面内でマウスを動かすまで、hoverの効果が消えません。これを修正して欲しいとの依頼。max-mega-menuの設定は一旦解除し、自作のCSSを適用させて色 […]
CSS
1/2ページ
clip-pathをvideoに直接指定すると、Safariでは表示されなくなった件
- 2023.06.21
表題の通りで、ほぼ解決している記事なのですが、解決策にたどり着くまで少し苦労したので備忘録として残しておきます。 表示されなかったソース 今回のケースは、html内にsvgタグを使って切り抜き型のSVGを貼り込み、それをCSSのclip-pathでID指定して、自動再生の動画を切り抜くというものです。因みにSafariで表示されなかったソースは、以下になります。動画の貼り込みはブロックエディターで […]
記事の表示順をカスタムフィールドの値で制御する
- 2022.02.15
やりたいことは、つまりランキングですが、ランキングの並び順を「偏差値・年間学費・国家試験合格率」というカスタムフィールドの数値の昇降順を使って並べ替える、というケースです。並べ替えた上で、記事に「○位」というナンバリングを行うためにCSSを使いました。 下記の両方の記事のあわせ技になります。（少し変更しています） CSSによる自動ナンバリング アーカイブの表示並びの指示（wordpress） CS […]
CSS切り替えで躓いたこと
- 2021.02.27
本日のメモは非常にニッチな話になります。 状況 styleswicher.jsを利用して、サイトに色を変更するボタンをつける 切り替えは「モノクロ」と「カラー」で、デフォルトはカラー ワードプレスを利用しており、AutoptimizeでCSSを最適化している このケースで、セオリー通りに実行すると、カラーの変更が効かなくなります。 ソース 原因 rel=”alternate style […]
Intersection Observer API で スクロール連動アニメーション
- 2021.01.22
スクロールに合わせたアニメーション、昨今はクライアントさんがぐりぐり動かしたいっ、というケースが増え必須技術になっていますが、レスポンシブで行う場合、スクロール量が変化する為それなりに面倒です。これまで様々なプラグインもありました。「Intersection Observer API」を使うと、効率的にソースを書くことが出来る！！便利だ。ということで、使い回しがしやすいパタンを作っておくことにしま […]
ボックス全体をクリッカブルにする
- 2021.01.07
ボックス（divタグなど）の中に、画像・見出し・テキストなどを入れ、そのボックス全体にリンクを貼りたい場合の解決策のひとつです。現在のHTMLは、divタグをaタグで囲むことが出来るのですが、ワードプレスの入力画面では、自動整形機能の為に、無駄なaタグが無限に挿入されてうまくいきません。そのような場面での解決策になります。 ボックスの中にaタグで囲んだテキスト挿入します。このaタグにリンクするUR […]
overflow:hiddenでsticky要素が動かない場合
- 2019.11.30
使い所によって楽しい効果が簡単に出せるstickyですが、親要素にoverflow-x:hiddenを設定しているとうまく動かないことがあります。個別に親要素を指定するのは大変なので、jQueryのparentsでoverflow-x:visibleを使うと動くのですが、スマホの画面の左右が動いてしまう。というわけで、PCやタブレットのときだけ、親要素をvisibleにするときのメモです。
タブレットをPC表示の縮小で対応する
- 2019.09.12
レスポンシブの解決策として、何がベストか日頃悩むところなのですが、その際に扱いが難しいのがタブレット。複雑なデザインの場合は、単純にPCの表示をそのまま縮小するのが一番楽ではあります。 まず前提として、レスポンシブでない場合、タブレット端末はPCの表示をそのまま適切なサイズに縮小して表示します。レスポンシブのあｔめのviewportの設定はだいたい下記のタイプです。 スマホの場合、上記の devi […]
固定ヘッダーのある場合のアンカー位置ズレ問題
- 2019.08.22
ヘッダーを上部に固定して表示しているときに、アンカーリンクを使うと、固定ヘッダーの高さ分、記事の頭が隠れてしまうため、アンカー位置がズレているように見えます。この問題、単純なようで結構厄介なのです。 有名な方法のひとつは、CSSでターゲットになるボックスにネガティブマージンを設定し、それと同じ数値のパディングを設定する。でもこの方法、ターゲット要素が重なった場合に、リンククリックが出来ない場面があ […]
wp_enqueue_styleにメディアクエリ指定をする
- 2019.08.07
レスポンシブの効率的なスタイルシートには、いつまで立っても頭を悩まされている私ですが、functions.phpでwp_enqueue_style()関数を使ってCSSを読み込む際に、メディアクエリ指定したいケースがあり、調べてみました。簡単です。 エンキュースタイルの書式は<?php wp_enqueue_style( $handle, $src, $deps, $ver, $media […]