毎朝のチェックのスタイルをいじってみた

今朝のチェックでもちょっと書きましたが、毎朝のチェックのスタイルをいじってみました。

その理由は Instapaper Mobilizer を通すとコンテンツが見えないということに気付いたからです。 Twitter クライアントなどが採用している Instapaper Mobilizer はテーブルとかを使っているとうまく変換されないことがあります。
今のスタイルも Instapaper Mobilizer 対策としては改行がおかしいなど、まだ十分では無いのですが、コンテンツが見えないとか、あるいは別の手段に切り替えて見てもらう、などをしてもらうのが申し訳ないので書き換えました。

こんな風に見えなくなってしまうことがあるんです。

今はこのように見えます。

具体的には、以下のような CSS を設定しました。

<b:if cond='data:blog.isMobile'>
#check {
	width:300px;
	border-top: 2px solid #ccc;
	margin:5px;
}
<b:else/>
#check {
	width:500px;
	border-top: 2px solid #ccc;
	margin:5px;
}
</b:if>
#check_img {
	width:90px;
	float: right;
	margin:5px;
}
#check_title {
	margin:5px;
}
#check_comment {
	font-size: 80%;
	margin: 10px;
	font-weight:bold;
}
#check_clear {
	cler: both;
}

<b:if cond='data:blog.isMobile'>

#check {

width:300px;

border-top: 2px solid #ccc;

margin:5px;

}

<b:else/>

#check {

width:500px;

border-top: 2px solid #ccc;

margin:5px;

}

</b:if>

#check_img {

width:90px;

float: right;

margin:5px;

}

#check_title {

margin:5px;

}

#check_comment {

font-size: 80%;

margin: 10px;

font-weight:bold;

}

#check_clear {

cler: both;

}

タイトル、コメント、イメージをそれぞれスタイルで指定する形にしています。

<div id="check">
<div id="check_img">
<a href="http://maguro29.jp/archives/2298" target="_blank">
<img alt="" border="0" height="60" src="http://capture.heartrails.com/90x60/shadow?http://maguro29.jp/archives/2298" width="90" />
</a>
</div>
<div id="check_title">
<a href="http://maguro29.jp/archives/2298" target="_blank">生暖かいネタ達。2012/06/17 | MagLog 〜まぐろにくじゃぱん〜</a>
</div>
<div id="check_comment">終わっちゃいました〜 (^^; 残念って言ってくれてありがとうございます！</div>
</div>
<br id="check_clear">

</a>

</div>

<a href="http://maguro29.jp/archives/2298" target="_blank">生暖かいネタ達。2012/06/17 | MagLog 〜まぐろにくじゃぱん〜</a>

</div>

<div id="check_comment">終わっちゃいました〜 (^^; 残念って言ってくれてありがとうございます！</div>

</div>

あとは、改行を何とかしなければならないのです。

Mac 上の Safari や Mobile Safari だと Div タグで改行するんですけど、 Instapaper Mobilizer は改行してくれないんですよね。 Div タグの改行を無効にして BR タグを仕込むというのも考えたのですが、ちょっと強烈なので他の方法を探していますが、まだ見つかっていません。

Google Mobilizer (Google Wireless Transcoder) は大丈夫なのですが。

いつまでたっても、ブラウザだのにレイアウトを悩まされる日は終わりませんね。

最後まで読んでいただきありがとうございます。