Blog

何がしたいかと言うと、

こういうレイアウトを考えているとします。

背景がグレーのボックスにサムネイル画像が９枚並んでいますね。

floatでずら～っと並べるのが一般的かと思いますが、サムネイルのボックスにつけたclassに一括でmarginを指定すると

こういう感じになり、両端か片端に隙間が空いてしまいます。

隙間を空かないようにするには、端にくるボックスにのみ違う指定をしてあげればいいのですが、
「ループ処理で表示させている」、「ECサイトのシステムなどで個別にclass名をふることが出来ない」
という状況がちょいちょい訪れます。

そこで、サムネイルボックスに同じcss指定をしつつ、左右ピッタリに並べる方法を紹介します。 (さらに…)

メニューバーの画像を全部つなげた１枚だけ作成し、ロールオーバーはcssのbackground-potisionで行う技。
↓こういう画像を用意して、動作指定はサクっとcssでやっちゃうやつです。

便利ですよね。メリットとしては

• 画像が１枚で済む
• マウスオーバーでの読み込み時に一瞬白くなるチラツキがなくなる
• jsを使わなくて済む
• htmlコードがシンプルになる

いや～良いことずくめだ。

上の画像は「通常」と「マウスオーバー」の２種類だけですが、当然のごとくわき出る要望として

「今いるページの部分だけはリンクをはずして色を変えたい」

↓こういうことですよね。

でもでも！これをWordPressで実装しようと思うと、ある問題に引っかかります。
WordPressではテーマファイル内のheader.phpにメニューバーの記述をしている場合がほとんどなので
すべてのページに同じメニューバーが表示されちゃいます。

そこで使うのが条件分岐

はい、サクッとコード書きます。

(さらに…)