css

  • 2017.12.21
  • ,

ぇえ〜っ! チカチカさせたいんですかぁ – イマドキ文字を点滅させる方法

「工事中」って文字を赤で点滅させたいんですけど   (;´Д`) えっ 固まりました(笑) イマドキ、工事中としたい人はさすがにいないと思いますが、点滅させたいは意外といます 「各ブラウザからも、text-decoration:blink; なるものは消え去っているというのに、それでもあなたはチカチカしたいのですか」 と、やお客様に言えるわけもなく、渋々「はいはい」とお答えします で、実 […]

CSS Plus – ページ毎のスタイルをページの中で設定できるプラグイン

そのページだけに、ちょこちょこっとCSSを設定したい時ってあります。 HTMLサイトのWordPress化で、そのページの表だけヘッダーに色をつけたいみたいな。   もちろん、該当するテーブルにクラス名をつけて、子テーマ内のstyle.cssに [crayon-5e866a40d10cf330617965/] のように設定しても良いのですが、ページ数が多かったりすると、後から修正するとき […]

body_class()に独自のクラスを追加

多くのテンプレートで既に埋め込まれていますが、bodyタグにbody_class()を埋め込んでやると、自動的にいくつかのcssクラスを吐き出してくれます。 [crayon-5e866a40d1289293319089/] どのページのときに何が吐き出されるかの詳細は、こちらのページに書いてあります。 では、それプラス、独自のタグも追加したいというときにはどうすれば? [crayon-5e866a […]

子テーマから親テーマのスタイルシートを読み込む

子テーマを適用した場合に、何らかの理由で親テーマのスタイルシートを強制的に読み込ませる必要がある場合があります。 そんな時の方法です。   子テーマ側のスタイルシートのヘッダー部分が正しく設定さそれていて、親テーマとの主従関係は正しく設定されているという前提で… 子テーマ側の functions.phpに [crayon-5e866a40d1429514565460/] これ […]

スタイルシートでワイルドカード(*)のような表現をしたい

例えば、.row-1〜row-20まであって全てに同じスタイルを指定したい場合 ①20回同じことを書く ②row-0を用意して、row-0とrow-xx(xxは1〜20の値)の両方を指定する <div class=”row-0 row-20″>のように ③スタイルシートに正規表現を使う が考えられると思います。2つや3つなら①の方法で同じことを書いちゃう場合もあ […]

relativeとabsoluteで、ちゃちゃっと簡単に画像を重ねる

画像の上に画像を重ねて配置する方法です。 下(後ろ側)に配置される画像やボックスにposition:relativeを指定。上(重ねる側)にposition:absoluteと(topやleftなどの)親要素からの位置を指定です。 以前は下の画像を背景にしてしまえば簡単済んだことなんですが、イマドキはスマホのことを考えなけれりゃならないので、背景画像のサイズの指定で悩んじゃったりします。 そういう […]

  • 2016.11.16
  • ,

疑似要素と擬似クラス

何気で使っている疑似要素。 ん? 疑似要素じゃなくて、擬似クラスか? :afterはどっち? :hoverはどっち?   1度きっちりと整理しといたほうが良いな   という訳で、YATのブログさんの記事でお勉強です。 CSSの擬似要素と擬似クラスの違いを明確に |https://wp.yat-net.com/name それぞれの仕様や構文をさらにさらに詳しくお勉強するために、MDNさん、 […]

wp_nav_menuの最初と最後にclassを追加する

ヘッダーメニューなどで、最初と中と最後のそれぞれのメニュー項目のスタイルを変えたいときあります。 こういうことです。 境界線は左につけるの? そうしたら最後の項目の右の境界線はどうすればいいの? みたいな 画像にしちゃうとか、方法はいくつもあるかと思いますが、ちょこちょこっと簡単なソースをfunction.phpに書くだけで、WordPressの wp_nav_menu 関数を使用したときの最初と […]

↑上へまいりま〜す