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