かもメモ

自分の落ちた落とし穴に何度も落ちる人のメモ帳

2022-10-01から1ヶ月間の記事一覧

CSS だけでタブを作るぞ!

input[type="radio"] を利用した CSS だけで作るタブ 作ったやつ! See the Pen Tab without JavaScript by KIKIKI (@kikiki_kiki) on CodePen. HTML <div class="tab"> <input type="radio" id="tab1" name="tab" checked /> <input type="radio" id="tab2" name="tab" /> <input type="radio" id="tab3" name="tab" /> </div>

WordPress OGP 情報を自前で出力してみる

WordPress で OGP の情報を出力するには All in One SEO などのプラグインを使えば実現できるのですが、WordPress からしばらく離れていたこともあり WordPress 独特のプラグインが GitHub にない場合も多くスター数やどれが現段階でのベストプラクティスな…

WordPress アップロードした画像を width, height 属性無しで取得したい

wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), $size ); で画像の URL を取得するのが良さそう

WordPress ContactForm7 select の先頭の空白 option のテキストを変更したい

Contact Form 7 の DOM をカスタマイズする時は wpcf7_form_elements フィルターを使えばOK

CSS カスタムプロパティ (CSS変数) の数値を反転させて使いたい

CSS

あるCSSカスタムプロパティ(CSS変数)で定義してある数値を反転させた値で使いたいケースが稀にあります。 例 例えば親要素の padding をネガティブマージンで打ち消したいような場合、padding, negative margin の量を CSSカスタムプロパティ(CSS変数)にでき…

CSS完全に理解した

CSS 完全に理解した!!!! [ネタ投稿]

VSCode 設定を json で開きたい

Workbench > Settings: Editor を json にすれば OK!

CSS メディアクエリのブレイクポイントに CSS 変数は使えない

タイトルのままです。 CSS 変数はメディアクエリ (@media) のブレイクポイントの値には使うことができないようです。 CSS 変数をブレイクポイントにしても動作しない :root { --breakpoint-md: 48em; } @media (min-width: var(--breakpoint-md)) { body { c…

Mac M2 ターミナル (iTerm2 zsh) をいい感じにする

前回までのあらすじ ターミナルをいい感じにする設定のメモ ほぼ こちらの記事 のままです 環境・前提 Mac Book Air M1 (2022) mac OS Monterey Homebrew インストール済み 設定ファイルの準備 ~/.zshrc に設定を追加していく。~/.zshrc がない場合は作成す…

Mac M2 Git と Node.js 環境のセットアップ

2017 年から使ってた Intel Mac ちゃんにお別れして新しい M2 Mac Book Air に買い替えてクリーンインストールしたので開発環境を再構築下のメモ ※ これは Zenn にメモしてたものを再録したただけの記事です 環境 Mac Book Air M2 (2022) macOS Monterey 12.…

React シンプルな tooltip コンポーネント作ってみた

React の勘を取り戻す素振りで tooltip コンポーネントを作ってみた。(車輪の再発明) hover で表示するシンプルな tooltip tooltip と表示する対象を同じ div で囲ってしまって親要素の hover で tooltip を表示させる // Tooltip.tsx import { FC, ReactNod…