CMS/HTML/CSS

CSS Sprites 縦横の画像領域上限

CSS Sprites 化したサイトをiPhoneやiPadで確認するとえらいことになっていた。

CSS Sprite は反映されず、1枚にした画像がそのまま画面サイズに合わせて表示されている感じ。
google先生に聞いてみましたがそれらしき情報がなかったのでメモ。
続きを読む

[CSS]アンダースコアハック

いろんなサイトの css を見ていたら "_width: 350px;" って、アンダースコアがついてる。
今更ながらメモ。
プロパティの前にアンダースコアをつけるとIE6では誤って読み込まれてしまうと言うハック。

#sample {
 width: 300px;
 _width: 350px; ←IE6用
}

IE6だけにcssを適用させたいときに便利です。

==アイコン素材PR==
喫茶店,看板 スケボー,スケートボード ナンバープレート ポップコーン,屋台 サンドイッチ,サンドウィッチ 写真機,カメラ 手紙 板チョコ,チョコレート 3Dメガネ,眼鏡 テレビ,ブラウン管

[CSS]チェックボックスとテキストを揃える

チェックボックスとテキストをキレイに揃える方法をメモ。
参考にしたサイト
http://phpspot.org/blog/archives/2009/03/css_79.html
http://www.xinotes.org/notes/topic/437/
まずは xhtml の記述

<form>
<div style="width:350px">
	<input type="checkbox" id="cb" /><label for="cb">らべる1</label><br/>
	<input type="checkbox" id="cb2" />
	<label for="cb2">サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル	</label><br/>
	<input type="checkbox" id="cb3" />
	<label for="cb3">サンプルサンプルサンプルサンプルサンプルサンプル サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル</label><br/>
	</div>
</form>

次に css の記述

input {
	display: block;
	float: left;
	clear: left;
	height: 12px;
	padding: 0;
	margin: 0;
}
label {
	display: block;
	clear: none;
	width: 300px;
	font-size: 12px;
	font-family: sans-serif;
	margin-left: 20px;
}

ポイントは clear の使い方ですね。 勉強になります。

==アイコン素材PR==
注目!,スタンプ,ハンコ,はんこ,印鑑 新商品,スタンプ,ハンコ,はんこ,印鑑 新企画!,スタンプ,ハンコ,はんこ,印鑑 新感覚!,スタンプ,ハンコ,はんこ,印鑑 新食感!,スタンプ,ハンコ,はんこ,印鑑 ポイント2倍!,スタンプ,ハンコ,はんこ,印鑑 ポイント還元,スタンプ,ハンコ,はんこ,印鑑 結果発表!,スタンプ,ハンコ,はんこ,印鑑 新着情報!,スタンプ,ハンコ,はんこ,印鑑 リニューアル中,スタンプ,ハンコ,はんこ,印鑑

alt内での改行

img タグに必須の alt 要素。
この alt 要素や title 属性が win では吹き出しのようにでますが、その表示を改行したいときがあります。
その方法をメモ。
改行を「&#13;&#10;」で記述します。

ソニーエリクソン&#13;&#10;HBH-IS800

ソニーエリクソン
HBH-IS800

ただし、NNでは文字化け。

==アイコン素材PR==

予約開始!,スタンプ,ハンコ,はんこ,印鑑 大好評!,スタンプ,ハンコ,はんこ,印鑑 先行発売!,スタンプ,ハンコ,はんこ,印鑑 今が旬!,スタンプ,ハンコ,はんこ,印鑑 ヒット商品,スタンプ,ハンコ,はんこ,印鑑 人気商品,スタンプ,ハンコ,はんこ,印鑑 目玉商品,スタンプ,ハンコ,はんこ,印鑑 売り切れ,スタンプ,ハンコ,はんこ,印鑑 売切御免,スタンプ,ハンコ,はんこ,印鑑 売れ筋,スタンプ,ハンコ,はんこ,印鑑

MovableType5 発表!!

sixapartからMovableType5が発表されました。

ベータ版は2009年8月上旬、正式出荷は2009年10月を予定してるそうだ。

・ウェブサイトが更に構造的に管理できる
・カスタムフィールドの強化
・「テーマ」機能
・更新履歴の管理

等があるようですが、実際に触ってみないと分からないですね。

http://www.sixapart.jp/movabletype/mt5.html

==PR==

クリスマス,オーナメント 飲み物,ジュース,レモンティー ぶどう 車,バス 国旗,旗 宝箱,箱 ガムボールマシ−ン 船のハンドル,舵輪 積み木,BOX 車,トラック ハート ランプ,外灯 遊具,公園 ハロウィン,ジャックオーランタン ノート,リングノート,メモ帳 家,ハウス ブロック,レゴブロック 笛,ホイッスル ジクソーパズル,ピース 木,緑,葉,葉っぱ,新緑

MT4.2の新規投稿で500エラー

MovableTypeで構築された当ブログを更新の際、最近は必ず500エラーがでて、
まともに更新できないし、Pingも送信されていない。
これは問題と言うことで、サーバ担当に確認してもらって、
Perlのバージョンを最新にしてもらった。

また、タイムアウトの時間を延ばしてもらいました。

結果はこの記事が上手く投稿されていることが何よりの証拠ですね☆

==PR==
地図,宝探し ファイル,書類入れ 黒板,ボード 車,カー,外車 電球,ランプ プレゼント,ギフト,ギフトBOX,プレゼント,箱 木琴 椅子,チェアー,ソファー とうもろこし,コーン ドア,玄関 リング,指輪 チョコレート,板チョコ パイナップル,缶詰,パイン グリーン,葉,葉っぱ,観葉植物 グラフ,円グラフ エビ 豆,ビーンズ,さやいんげん そろばん クリップ 帽子,キャップ,アーミー帽子,迷彩柄

keywordとdescriptionが重複

1ページにkeywordとdescriptionがいくつも重複していることに気づいた。
これはまずいということで、下記のように変更。

メモメモ。

テンプレートモジュール>HTMLヘッダー


<$MTTagName$>" />
" />

↓↓以下に変更






<$MTTagName$>" />





" />


MT4.2:LinkRollerプラグインを追加してみた。

LinkRollerプラグインを追加しました。
LinkRoller配布元

ダウンロード&解凍したらいつものように該当フォルダへアップロード。

早速リンクを作成。
SnapShotが表示されないが、特に問題ないので放置。

ウィジェットとして出力できるようにする。
ついでにTemplatizeもいれて、ウェブページでリンク集を作成。

Templatize配布元
ちょっと使い方が分かりにくかったが、何とかできました。

text-indentを使わない画像置換

text-indent:-9999px;

ではなく、CSSでテキストを画像に置換する方法。
http://www.fixture.jp/blog/141

overflow: hidden;
height: 0;
padding-top: 100px;

text-indent を使わずに文字を表示領域の外に隠すという方法。

★補足
text-indent でマイナス数値を入れる方法だと、firefoxでクリック時にその大きさの点線が出るが a要素にoutline属性を使うか、onfocus=”this.blur();” と書けば消える。

メモメモ