compassのミックスインとCSS3 PIEでグラデーション

パスの問題によりhtcではなくjsを使用することが多くなった。

compassのミックスインでグラデーション


@import "compass";
.sample{
@include background(linear-gradient(#fff, #000));
}

なんだけど、これだけだとIEダメダメトリオ(7,8,9)ではグラデが表示されない。
※IE6は逝去

CSS3 PIEと併用する。
scss側はこんな感じ。


@import "compass";
.sample{
@include background(linear-gradient(#fff, #000));
-pie-background: linear-gradient(#fff, #000);
position: relative;
}

relativeはCSS3 PIEがうまく働かないときに。

netbeans + compassでmapファイルが出ない場合

プロジェクトのプロパティから
CSSプリプロセッサの
右上の方にある「実行可能ファイルを構成」ボタンをクリック
「追加削除の生成(G)(デバッグ)」
にチェックが入っていなければ、これが原因。

これで書き出されるmapファイルがあれば、Chromeは開発ツールでcssの代わりにscssファイルの場所を示してくれるのでとても便利。
安心してcompressedで書き出せる。

Firefoxは・・・試してみたが今のところ表示できない。
検索して出てきたアドオンとか入れてもダメだった。

netbeans + compassで書き出しをcompressedにする

プロジェクトのプロパティにある、CSSプリプロセッサで設定。
コンパイラオプションは

--compass

だけで最低限動作するけど、書き出されるcssのファイルサイズを抑えたいので

--compass --style compressed

に。
config.rbで設定できる

output_style = :compressed

と同じ結果になる。

floatの代わりにinline-blockを使う

横並びで表示させたいときに、高さが違っても大丈夫なので便利。

inline-blockを使う上で幾つか注意点

IE7用
cssで

#sample{
display:block;
*display:inline;
*zoom:1;
}

横並びにすると改行の分、余計なスペースが入る
親要素のletter-spacingで調整

例えば、ul liで使う場合。

ul{
letter-spacing: -.40em;
}
ul li{
display:block;
*display:inline;
*zoom:1;
letter-spacing: normal;
}

という感じ。

弱点

横並びにするときに、右側ピッタリにする必要がある場合は、面倒なのでfloatを使った方が楽かも。

Auto Post Thumbnailは便利だけど。

Auto Post Thumbnailは便利だけど、少しはまったのでメモ。

記事の中の一番最初の画像を取ってくるので、絵文字アイコンとかが文中にあると悲惨なことに。
それらは.gifや.pngである可能性が高いので、以下の方法で回避。

プラグインのファイル、auto-post-thumbnail.php で

preg_match_all('/<\s*img [^\>]*src\s*=\s*[\""\']?([^\""\'>]*)/i', $post[0]->post_content, $matches);

となっているの部分を

preg_match_all('/<\s*img [^\>]*src\s*=\s*[\""\']?([^\""\'>]*.jpg)/i', $post[0]->post_content, $matches);

に変更。(2か所)
完ぺきではないけど、これで一応。

設定 - メディアで指定されているサムネイルのサイズにならない。

テーマ内のfunctions.phpにサムネイルサイズが指定されている可能性がある。
私の場合、
set_post_thumbnail_size
の値が優先されていた。
こちらの値を直接指定したら、直った。

CSS高さ揃え

display:box;
display:-webkit-box;
display:-moz-box;
便利です。
ulとliで利用しました。
(ulにdisplay:box;)。

が、子要素が多いと親要素のwidthをぶっちぎって横並びしますね。
子要素に
display:inline-block;
vertical-align:top;
でやや安定。
親要素のwidthに合わせてリキッドデザインのように複数行に変わる。
その際に発生する、改行=半角スペースをケアしてあげれば、ほぼ望み通りの形に。

<li>...</li
><li>...</li
><li>...</li>

こんな感じ。
まあ、IE6が消えてもまだダメなIEが絶滅してないので、当分スマホ用の書き方だけど。

スマホとPCの表示を別ファイルに分けてコーディング

WordPressで作ったサイトを、後付でスマホ対応にしたい。

テンプレートを使うならいいけど、自分でレスポンシブサイトを作るのは嫌だ。
既存サイトに後付なら、もっと嫌だ。
最悪だ。
いっそリニューアルにしてくれ。
なので、テーマファイル内に細工をして、PCとスマホで表示の切り分けをする。

例)テーマ内のsingle.phpでやってみる

まず、templateというフォルダを作成し、その中にpc.phpとsp.phpを設置。
それぞれのファイルにPC用、スマホ用の表示に最適化したコーディングをする。
pcからアクセスがあった場合はpc.phpをスマホの場合はsp.phpを呼び出すようにする。

こんな感じ。

if ( spSwitch() == 'pc' ){
	include  get_template_directory() . '/template/pc.php';
	exit();
}else{
	include  get_template_directory() . '/template/sp.php';
	exit();
}

function spSwitch(){
	$ua = $_SERVER['HTTP_USER_AGENT'];
	$pf = ((strpos($ua,'iPhone')!==false)||(strpos($ua,'iPod')!==false)||(strpos($ua,'Android')!==false)||(strpos($ua,'BlackBerry')!==false)||(strpos($ua,'Windows.Phone')!==false));

	if ($pf){
		return 'sp';
	}else{
		return 'pc';
	}
}

もちろん、別ファイルを呼び出さず、全部single.phpに書いてもいいけど、ソースが見にくくなるのでいや。
categoryやarchiveでも、templateフォルダ内のファイル名を変えて複数用意すれば同じことができる。