CSS

WordPressの新旧エディタをeditor-style.cssでなんとかする方法

WordPressの標準エディタがブロックエディタになって、しばらく経ちますが、クラシックエディタ (TinyMCE) を使っている方も、まだ多いように感じます。

また、ブロックエディタには、クラシックエディタの機能が使えるクラシックブロック (wp-block-freeform) もあるため、クラシックエディタと、もうしばらく付き合う必要があります。

そこで、今回はブロックエディタとクラシックエディタの両方のスタイルを整えることができる、editor-style.cssの作り方を紹介します。

多くの情報をコンパクトにまとめられるハンバーガーメニュー (ドロワー) ですが、そこで使用される三本線のハンバーガーボタンの作り方は多くあります。

今回は、HTMLとCSSのコード量が少ない、シンプルなハンバーガーボタンの作り方を紹介します。

CSSで縁取り文字を作る方法はいくつかありますが、今回は、text-shadowプロパティとCSS変数 (カスタムプロパティ) を使用したものを紹介します。

ウェブページのコンテンツが少なくて、フッターの下側に余白ができるといったことが稀にあります。これ、皆さんどうしてます？

今回は、フッターの下側に余白ができるような場面で、フッターを表示領域下部に固定する方法を紹介します。

「背景画像は動かない」を実現する background-attachment: fixed ですが、Apple製品では機能しないという重大な問題があります。今回は、この問題のファイナルアンサーを紹介します。

カスタムプロパティ (CSS変数) を使ってますか？

今回は、HTMLのstyle属性とカスタムプロパティを組み合わせて、多種多様なレイアウトを自由自在に爆速で仕上げる、汎用レイアウト術をご紹介します。

CSSでスタイリングする際、様々な箇所で便利に使えるbefore擬似要素とafter擬似要素ですが、開始タグ (<TAG>) と終了タグ (</TAG>) を持たない空要素 (<TAG />) には使えないと思っていませんか？

今回は、before擬似要素とafter擬似要素が使える意外な要素を紹介します。

Webデザインをするうえで、悩ましいのがフォントサイズ (font-size) の設定です。

WebデザイナーがWebデザインのモックアップをPhotoshopやIllustlatorなどで作成する場合、px単位で作成するのが一般的かと思います。しかし、px単位で細かくフォントサイズを設定するのは難しかったりします。

今回は、フォントサイズに使用される単位の特徴とともに、個人的に最適解だと思っているフォントサイズの設定方法を紹介します。

WordPressのテーマカスタマイザーで設定した内容を、HTMLではなく、CSSコードの組み立てに使用してみました。

その際の、CSSコードをPHPで処理するための知見をシェアしたいと思います。

限られたスペースに複数の情報を載せたい場合、非常に重宝するのがスライドショーとも呼ばれているカルーセルスライダーです。

JavaScriptで実装するのが一般的で「bxSlider」「slick」「Swiper」といったJSライブラリ (JSプラグイン) がよく利用されています。

しかし、これらのJSライブラリは多機能な反面、ファイルサイズが大きく、ウェブサイト内のごく限られた箇所にだけ使用したいといった場合には、利用しづらいのではないでしょうか？

そこで、今回はコピペできるCSSカルーセルスライダーを紹介します。