CSSに関する記事

テーマ内で使うスタイルシート、jQueryはそれぞれheader.php、footer.phpなどの タグの中、の上などに記載すれば読み込ませることができます。 そのように直接書き込んでも動作はしますが、管理画面でも使用したいとなると話...

WordPressのテーマと言えば、フロント側のデザインのカスタマイズをするものという印象があるかもしれませんが、テーマファイルの中にあるfunctions.phpは管理画面の全てのページで読み込まれています。 そのため、テーマをインス...

画像をサムネイルとして使いたいとき、サイズがまちまちのケースが多いのではないでしょうか。 レスポンシブにも対応したいところです。ですが横幅の上限を決めても縦幅が違ったり、それで縦幅を固定にすると比率が変わってぺちゃんこの画像になってしま...

テーマを自作、もしくはカスタマイズしていて、サイトの上部に覚えのない余白があると非常にもやもやします。せっかく綺麗に仕上げたテーマもしまりませんし、デザインによっては余白のせいで崩れてしまうことも。そうなると大問題です。たかが余白、され...

更新したはずのスタイルシートの内容が反映されない！ このidだけ、このclassだけ、この要素だけスタイルが効かない！ ブラウザ上でスタイルシートの中身を見ても更新されているのに、ページ上には反映されない いくらブラウザのリロードボタン...

要素に余白、枠線を指定した要素にwidth、heightを指定すると、 デフォルトではpaddingやborderの幅を加算したサイズで表示されます。 例えるなら100pxのwidthを指定した要素にpaddingが全方位20pxがある...

テーブルは行が増えるにつれ見にくくなるので、 偶数行目だけ背景色を変えてCSSで見やすくしてみます。 見やすいですね。 マウスオーバーしたらセルの背景色を変える カーソルを合わせたセルの色を変えることもでき...

borderだけ指定してもテーブルの枠線は二重になってしまいますので もう一押しが必要です。 border-collapseにcollapseを指定することで枠線内の余白をなくし、 1pxに見せることができます。 ...

マウスオーバー用に一つ一つ画像を作成することなく CSSだけで画像にちょっぴりおしゃれな効果を出す方法を紹介します。 画像を半透明にする マウスオーバーすると半透明に変化します。 画像の外側をふわっと変化させる ...

jsなどを使わずCSSだけで手軽に一言メモを表示させる方法を紹介します。 リンクをマウスオーバーしたら一言メモを表示する ↓マウスオーバー リンクだけでなくdivにも使えます。 画像にも使えます。 ...