ネットワークの有り難みをメモしています
ブロックエディターとの付き合いにもだいぶ慣れてきて、カスタムブロックなら「LazyBlocks」、溺愛のブロックを追加するなら「Spectra」と使い分けしている今日この頃。「Spectra」は無料でも使い勝手はかなり良いのですが。コンテンツcarouselの各スライド背景に背景色を入れると、高さが不揃いになってしまうのが難点。 ということで、この高さをCSSで揃える方法を考えてみました。 car […]
ちょっと珍しい事象に遭遇しまして、解決に少し手間取りました。 ワードプレスのメニュープラグイン（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の表示をそのまま適切なサイズに縮小して表示します。レスポンシブのあｔめのviewportの設定はだいたい下記のタイプです。 スマホの場合、上記の devi […]
ヘッダーを上部に固定して表示しているときに、アンカーリンクを使うと、固定ヘッダーの高さ分、記事の頭が隠れてしまうため、アンカー位置がズレているように見えます。この問題、単純なようで結構厄介なのです。 有名な方法のひとつは、CSSでターゲットになるボックスにネガティブマージンを設定し、それと同じ数値のパディングを設定する。でもこの方法、ターゲット要素が重なった場合に、リンククリックが出来ない場面があ […]
