WordPressで読み込まれるCSSやJavaScriptには、「style.css?ver=4.9.4」といったようにWordPressのバージョン番号が追加されます。「?ver=WordPressバージョン」の部分…
WordPressのCSSやJavaScriptに付与されるバージョン番号を除去する方法
短いページでもフッターをブラウザの最下部に表示させる方法
コンテンツの量が少ないページでは、フッター部分が浮き上がって表示され、フッターの下に余白ができてしまいます。これを回避するために、コンテンツの量が少なくてもフッターがブラウザの最下部に表示されるようにする方法をご紹介いた…
使用されていないCSSセレクタを見つけて教えてくれるWEBサービス「Unused CSS finder」
Unused CSS finderは、入力したURLで読み込んでいるCSSと内部リンクを解析し、未使用のCSSセレクタを教えてくれるWEBサービスです。 Unused CSS finderの使い方 Unused CSS …
YouTubeの動画を背景動画として全画面に表示する方法
全画面の背景動画としてYouTubeの動画を使う方法をご紹介いたします。動画ファイルをサーバーに設置せず、YouTubeから読み込むので、レスポンスも良くなります。 以下に簡単なデモも用意しました。 デモページを見る Y…
CSSだけで全画面の背景動画を実装する方法
CSSだけで全画面の背景動画を実装する方法をご紹介いたします。ほぼコピペで実装できますので、サイトの背景に動画を表示したいとお考えの方は、ぜひ試してみてください。 なお、動画は別途ご用意いただく必要があります。 CSSだ…
SVGで作成された背景のCSSコードが入手できるWEBサービス「SVG Backgrounds」
SVG Backgroundsは、SVGで作成された背景のCSSコードが紹介されているWEBサービスです。 プレビューを表示するとCSSのコードが出力されるので、コピーしてそのまま利用することができます。 SVG Bac…
CSSで文字を縦書きにする方法
何も指定しなければ、HTMLで記述した文字列は横書きになります。和風のサイトなどでは、文字を縦書きにしたい時もあるかと思います。 画像を使うという方法もありますが、今回はCSSを使って文字を縦書きにする方法をご紹介したい…
CSSだけでひし形(ダイヤモンド)を作る方法
画像を使わずに、CSSだけでひし形(ダイヤモンド)を作る方法をご紹介いたします。 要素を傾けることで、簡単にひし形を実現することが可能です。 CSSだけでひし形(ダイヤモンド)を作る方法 CSSだけでひし形を作成するには…
ボタンクリックで全画面に表示されるモーダルウインドウ風のメニューを実装する方法
ボタンをクリックした際に全画面に表示される、モーダルウインドウ風のメニューを実装する方法をご紹介いたします。 簡単なデモページを用意したので、挙動についてはデモページをご確認いただければと思います。 デモページを見る ボ…
スマホで背景画像を固定させる方法(background-attachment:fixed;の代替案)
背景画像を固定して中のコンテンツだけをスクロールさせるページを作成していたところ、スマートフォンでは「background-attachment:fixed;」が効かないことに気付きました。 スマートフォンでも背景画像を…