WP全般– category –

ギャラリーブロックの最終行を拡大させない .wp-block-gallery.has-nested-images figure.wp-block-image { flex-grow: 0; }

①画像にdivを設定 ②画像の下の位置に「カスタム HTML ブロック」で以下 <style> .zenpuku { margin-right: calc(50% - 50vw); margin-left: calc(50% - 50vw); } .zenpuku img{ display: block; height: auto; width: 100%; } </style>

３カラムでサービス内容や料金表を載せる際など、例えばボタンを下揃えする時に使用 カラム内の位置揃え カラムにid付与 カラムブロック全体（個別ではなく）に、idをつける （例）pr-block Flexboxを設定 Flexbox、flex-direction: columnを設定 #pr-bloc...

background-size auto画像をそのままのサイズで表示contain画像の縦横比を保ちながら、要素内に画像の全部を収める（隙間ができる場合がある）cover画像の縦横比を保ちながら、隙間ができないようにサイズ変更px数値で指定。ひとつ→幅と高さ同じ。ふたつ→...

HTML <div class="mouse-over"> <img src="" alt=""> <img src="" alt="" class="active"> </div> CSS .mouse-over { position: relative; } .mouse-over .active {...

Googleフォームの埋め込みコードをそのままコピーしたままだと、スマホ表示のときに横幅が切れてしまう。コードのwidthを以下に変更することで解決する。 width=100%

ブロックエディタの標準でもっている「テーブル」の幅は、通常の設定画面だと任意で変えられないのでCSSで設定。 例えば1列目だけを幅20%にしたい時は以下。 .wp-block-table td:nth-child(1){ width:20%; }

選択肢のチェックボックスにチェックを入れると、チェッす数をカウントしてくれる仕組み※JavaScriptやjQueryを読み込まない設定のテーマ等では動きません。 HTML <div class="checkbox"> <label><input class="checkbox-inp...

手順 ①toastrライブラリーをダウンロード https://codeseven.github.io/toastr/ zip file をダウンロード ②展開してフォルダ名を toastr に変更 ③FTPで子テーマの直下にアップロード ④子テーマのfunctios.phpに以下を追記 // toastr jsとCSSの読み込み fun...

WordPressカスタマイズのCSS記述例など メニューにFont Awesomeを表示 Font Awesomeから使いたいアイコンを選ぶ メニューの「説明」にショートコード を記述 上下中央寄せ flexboxを使う方法 .container { display: flex; justify-content: center; align-...