- web
【GoogleMap】APIなしでのいろいろな埋め込み&口コミを見えなくする方法【備忘録】
【通常の埋め込み】 GoogleMapのページから[共有]→[地図を埋め込む]→[HTMLをコピー]で取得したiframeのコードを埋め込む場合 <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6481.333372110915!2d139.7477827333761!3d35.6852083... - web
【JavaScript】matchMediaを使ったレスポンシブ対応を便利にする【備忘録】
JavaScriptのレスポンシブ対応には、MediaQueryList(window.matchMedia)を使って書くのが好きなのですが、様々な処理をレスポンシブ切り替えする場合、以下を毎回JavaScript内のいろいろなところで書くのは長い……。 const mql = window.matchMedia("(max... - web
【備忘録】WordPressクラシックブロックのpタグ自動挿入を止める
クラシックブロック(core/freeform)に入力されたHTMLがブロックエディタ上でパースされるときに、JavaScript側の処理でautop(pタグ自動挿入)が起こるのをできるだけ止めたいときがあったので、それを調べたメモ。 ★2024年4月9日に完全にやり方を変更し... - web
【備忘録】WordPressでテーマ側から既存ブロックに各種コントロールを追加する方法
詳細を理解していないのでメモだけ。 【JavaScript】 JSX const { addFilter } = wp.hooks; const { createHigherOrderComponent } = wp.compose; const { Fragment } = wp.element; const { InspectorControls } = wp.blockEditor; const { PanelBody, Te... - web
【備忘録】任意の属性値を付与するのが難しいCMSのフォーム項目にJavaScriptで属性値を付与する【JavaScript】
inputタグなどのフォーム項目(フォームコントロール)には、inputmode とか autocomplete とか、required のように大変便利な属性値が存在します。 しかし、利用しているCMSやCMSのプラグインによってはフォームコントロールそのもののHTMLに制約がある場... - web
【Lottie】Lottielabで作ったJSONファイルをWebページで動かす
以前作成したAfterEffectsで作るLottieの記事の続編です。 https://deep-space.blue/web/2072 デモ 【STEP1. Lottielabでアニメーションを作る】 Lottielabの使い方は「【LOTTIELAB】を使って簡単にアニメーションを取り入れよう!」など分かりやすい記事... - web
円形の線が徐々に引かれていくアニメーションの実装方法まとめ【GSAP / SVG / conic-gradient / Canvas】
今回作成するのは以下の動画のように、円形の線が12時の方向から徐々に引かれていくアニメーションです!(基本的にJavaScriptが必要となるやり方になります) 【その1: SVG + GSAP】 SVGの線の表示をGSAPで動かす方法です。(半径の計算を手動でやればJav... - web
X(Twitter)のカード表示設定をCMS側でsummaryに変えられないときは、Twitterカードの出力を止めればいいかも
2023年10月6日の朝8:00時点での情報です! 2023年10月5日、X(Twitter)で、リンク付きのポストから見出しが削除されました。 【ITmedia NEWS】X(Twitter)、リンク付きポストから見出しを削除 画像とドメインのみの表示に変更 og:imageにサイト内で一律... - web
【display:grid】画像だけコンテナ幅からはみ出て画面端まで広がるレイアウトをpositionなしで実装
おしゃれなデザインでよくある、画像だけコンテナ幅からはみ出して画面端まで広がり、テキストはコンテナ幅の範囲に配置されるデザイン。 position:absoluteなどを駆使して配置することもありますが、今回はpositionなしで実装してみましょう。 今回の内容... - web
【Advanced Custom Fields】リッチ エディター (WYSIWYG)のbodyのclassをフィールドごと・ブロックごとに設定したい【ACF Blocks】
【カスタムフィールドのラッパー属性は、TinyMCEのbodyに影響しない】 まず、カスタムフィールドの設定(Presentation)のラッパー属性にクラスとIDが設定できます。このいずれかが リッチ エディター (WYSIWYG)のTinyMCEのbodyに影響してくれるとよいので...