シンプルに以下のようなinputを設置した場合、Windowsでは入力値は左寄せで表示されるのですが、iPhoneやiPadだと中央寄せになってしまいます。 こんな感じです↓ Safariだけでなく、Chromeでも中央…
input[type=”date”]のカレンダーアイコンを変更する方法
input[type=”date”]に表示されるカレンダーアイコンを変更する方法をご紹介いたします。 以下のようなフォームを設置した場合、ChromeやEdgeで見るとカレンダーのアイコンが表示さ…
CSSで疑似要素のcontentプロパティ内に改行を入れる方法
::beforeや::afterなどの疑似要素で、contentプロパティ内に改行を入れる方法をご紹介いたします。 後述するサンプルはごくごく簡単な例ですが、応用すれば色々と幅が広がると思います。 疑似要素のconten…
CSSによるフィルターを任意の画像で確認してコードをコピーできるWebサービス「FilterSS」
FilterSSは、画像に対するCSSフィルターをプレビューで確認しながら、CSSコードをコピーできるWebサービスです。 任意の画像を選択できて、色相やコントラストなどを変更するためのCSSをコピーできます。 Filt…
[WordPress] 投稿や固定ページ内で使われているブロックのスタイルのみを読み込む方法
WordPressでは、コアブロック(WordPress標準で用意されているブロック)のスタイルが書かれた/wp-includes/css/dist/block-library/style.min.cssが読み込まれます…
磨りガラス風背景のCSSコードを生成できるWebサービス「Glass Morphism」と「Glassmorphism CSS Generator」
磨りガラス風の背景を実現するためのCSSコードを生成できるWebサービスを2つご紹介いたします。 Glass MorphismとGlassmorphism CSS Generatorというサービスで、どちらも磨りガラス風…
WordPressで読み込んでいるCSSのバージョン番号としてテーマのバージョンを付与する方法
WordPressで読み込んでいるCSSファイルのバージョン番号に、テーマのバージョンを使う方法をご紹介いたします。 通常は、wp_enqueue_styleで読み込むCSSには固定のバージョン番号を引数で指定しますが、…
WordPress管理画面のカラースキームを生成できるWebサービス「WordPress Admin Colors Generator」
WordPress Admin Colors Generatorは、WordPress管理画面のカラースキームを生成できるWebサービスです。 WordPress Admin Colors Generatorを使えば、簡…
ストライプ柄のCSSコードを生成できるジェネレーター「Pure CSS Stripes Generator」
Pure CSS Stripes Generatorは、ストライプ柄のCSSコードを生成できるジェネレーターです。 Pure CSS Stripes Generatorを使えば、簡単にCSSだけでストライプの背景を実現で…
サイトに独自のCSSやJavaScriptを追加できるWordPressプラグイン「Simple Custom CSS and JS」
Simple Custom CSS and JSは、サイトに独自のCSSやJavaScriptを管理画面上から追加できるWordPressプラグインです。 管理画面上からコードを追加できるので、子テーマ化してテーマを編集…