motoyamayuki.com

Blog

floatでボックスを並べる時に左右ピッタリ、中は隙間を空けるcss

2011.02.07

何がしたいかと言うと、

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

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

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

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

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

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

  • このブログをはてなブックマークに追加
WordPressのメニューバーをcssロールオーバー+条件分岐で3パターン切り替え

2011.02.01

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

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

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

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

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

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

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

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

そこで使うのが条件分岐

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

(さらに…)

  • このブログをはてなブックマークに追加

Contact

お仕事のご依頼、面白いことのお誘い、一度お話してみたい!などなど、完山祐毅へのお問い合わせは、下記のフォームよりお願いします。送信後、 info@motoyamayuki.com より確認のメールが届きます。
※多くのご相談・ご依頼をいただき誠にありがとうございます。当面のスケジュールが決まっているため、直近での作業が必要なご依頼についてはお請けいたしかねます。大変恐縮ではありますが、あらかじめご了承くださいませ。

お問い合わせフォーム
お名前
メールアドレス
メールアドレス(確認用)
内容
Treble