css

サイズの違う画像の縦横比をキープしつつ、同じサイズで表示するレスポンシブ対応

画像を縦なり横なりに並べる時、サイズの異なる画像を混ぜると、一つだけ横幅が足りなかったり、画像の高さが違って不格好になったりしてしまいました。

わざわざ同じサイズの画像を使用するルールを決めるのも煩雑なので、異なるサイズの画像を複数表示しても、画像の縦横比率はキープしたまま同じ縦横サイズで見切れて表示させるスタイルの当て方をまとめました。

続きを読む

WordPressのエディタ機能をカスタマイズする方法

カードやボックスなどの装飾を実現するエディタのカスタマイズ方法です。プラグインはAddQuicktagとClassic Editorを使用します。

エディタが Gutenbergだと今のところクイックタグが使えないので、Classic Editorで旧リッチエディタのクラシックエディタを使用できるようにします。グーテンベルグのエディタは「ブロックエディタ」と呼ばれています。

続きを読む

line-heightでtransitoinが効かない

line-hgiehtでtransitionが効かないときは、line-heightの値をpxで指定していないか注意。

line-heightは、`line-height: 1;` のように、単位をつけずに指定することで、trnasitionが動く。