<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>米が好き &#187; CSS</title>
	<atom:link href="http://kome-suki.net/archives/tag/css/feed" rel="self" type="application/rss+xml" />
	<link>http://kome-suki.net</link>
	<description>http://kome-suki.net</description>
	<lastBuildDate>Wed, 05 Jan 2011 12:30:23 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0</generator>
		<item>
		<title>【WordPress】コメントのバックカラー等を1行毎に変える方法</title>
		<link>http://kome-suki.net/archives/9516</link>
		<comments>http://kome-suki.net/archives/9516#comments</comments>
		<pubDate>Wed, 14 Jul 2010 16:28:28 +0000</pubDate>
		<dc:creator>くーさん</dc:creator>
				<category><![CDATA[Tips]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[Simple Author Highlighter]]></category>
		<category><![CDATA[コメント]]></category>

		<guid isPermaLink="false">http://kome-suki.net/?p=9516</guid>
		<description><![CDATA[以前の記事で『Simple Author Highlighter』を紹介しました。
でも、そんなプラグインに頼らなくてもCSSで簡単に出来る事を知りました。

コメント表示されているページのソースを見れば一目瞭然なんで [...]]]></description>
			<content:encoded><![CDATA[<p>
<img src="http://kome-suki.net/wp-content/uploads/2010/07/wp_50.jpg" alt="WordPress" title="WordPress" width="150" height="150" class="entry_thumb" /><a href="http://kome-suki.net/archives/8792">以前の記事</a>で『<a href="http://wordpress.org/extend/plugins/simple-author-highlighter/" target="_blank">Simple Author Highlighter</a>』を紹介しました。<br />
でも、そんなプラグインに頼らなくてもCSSで簡単に出来る事を知りました。<br />
<br />
コメント表示されているページのソースを見れば一目瞭然なんですが、コメントの上から見て奇数と偶数と管理人では違うCSSのクラスが入っています。<br />
そのクラスを利用して、自分の好きなようにすれば良いだけです。<br />
テキストカラー、ボーダー、バックグラウンドなどなど、自由に変更出来ます。<br />
<br />
ベースのCSSクラス。（奇数列）<br />
<pre><code>ol.commentlist li.comment {
}</code></pre>
<br />
偶数列のCSSクラス。<br />
<pre><code>ol.commentlist li.thread-odd {
}</code></pre>
<br />
管理人（投稿者？）のCSSクラス。<br />
<pre><code>ol.commentlist li.bypostauthor {
}</code></pre>
<br />
上記のCSSクラスはデフォルトテーマで見たクラスなので、他のテーマ等を使っている方は分かりません。<br />
が、ソース見れば簡単に分かると思います。<br />
<br />
ちなみに私はコメントとトラックバックの表示を分けているんですが、トラックバックは各列に違うクラスが入っていなかったので簡単には無理でした。</p>
]]></content:encoded>
			<wfw:commentRss>http://kome-suki.net/archives/9516/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>【WordPress】記事に画像を挿入するのを簡単にする方法</title>
		<link>http://kome-suki.net/archives/8453</link>
		<comments>http://kome-suki.net/archives/8453#comments</comments>
		<pubDate>Mon, 31 May 2010 17:49:12 +0000</pubDate>
		<dc:creator>くーさん</dc:creator>
				<category><![CDATA[Tips]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[PHP]]></category>
		<category><![CDATA[メディアライブラリ]]></category>
		<category><![CDATA[画像]]></category>

		<guid isPermaLink="false">http://kome-suki.net/?p=8453</guid>
		<description><![CDATA[@yoidoreoさんからの要望でやってみました。

WordPressで画像を記事内に挿入する際、以前紹介した『【WordPress】記事投稿時に画像を貼るのをフラッシュではなくポップアップにする方法』、『【Word [...]]]></description>
			<content:encoded><![CDATA[<p>
<img src="http://kome-suki.net/wp-content/uploads/2009/12/wp_28.png" alt="WordPress - メディアライブラリ" title="WordPress - メディアライブラリ" width="150" height="150" class="entry_thumb" /><a href="http://twitter.com/yoidoreo" target="_blank">@yoidoreo</a>さんからの要望でやってみました。<br />
<br />
WordPressで画像を記事内に挿入する際、以前紹介した『<a href="http://kome-suki.net/archives/5934">【WordPress】記事投稿時に画像を貼るのをフラッシュではなくポップアップにする方法</a>』、『<a href="http://kome-suki.net/archives/5949">【WordPress】記事投稿時に画像を貼るのをフラッシュではなくポップアップにする方法2</a>』を使っています。<br />
<br />
私は画像が大量にある時には、画像に連番付けてFTPで上げてから、記事内にイメージタグをコピペして番号だけ手打ちしています。<br />
@yoidoreoさんはそうではなく、メディアライブラリで全部上げてからポップアップ表示してリストから挿入しているらしいです。<br />
で、挿入する際一々画像の詳細を表示してからじゃないと画像が挿入できません。<br />
詳細の一番下に『投稿に挿入』ボタンがあるんですから。<br />
<br />
要は何を行ったかと言うと、<br />
<div class="entry_box">・ 画像のリスト表示部にも挿入ボタンが欲しい。<br />
・ ついでにリストに表示する数も増やしたい。<br />
・ ついでにサムネイル画像の大きさも変えたい。</div>
以上3つをやってみました。<br />
<br />
結論から言うと、以下のようになります。<br />
<strong>変更前</strong><br />
<img src="http://kome-suki.net/wp-content/uploads/2010/06/wp_35.jpg" alt="WordPress - メディアライブラリ" title="WordPress - メディアライブラリ" width="500" height="497" class="pict" />
<br />
<br />
<strong>変更後</strong><br />
<img src="http://kome-suki.net/wp-content/uploads/2010/06/wp_36.jpg" alt="WordPress - メディアライブラリ" title="WordPress - メディアライブラリ" width="500" height="615" class="pict" />
<br />
<br />
では変更方法です。<br />
<br />
<span class="no_box">1</span><strong class="text_red">画像のリスト表示部にも挿入ボタンが欲しい</strong><br />
詳細を表示した際にあるボタンをリスト部に持ってくるだけなので簡単なんですが、デザイン的に崩れたりしてしまうので、ちょっとだけ手を加える必要があります。<br />
デザインなんか関係ねぇって人はいいんでしょうけど。<br />
<br />
では、『wp-admin/includes/media.php』を開きます。<br />
まずはボタンを設置する方法です。<br />
<br />
<strong>media.php</strong>　1165行目～　（2.9.2の場合）<br />
<pre><code>if ( $toggle ) {
&nbsp;&nbsp;$class = empty($errors) ? 'startclosed' : 'startopen';
&nbsp;&nbsp;$toggle_links = "
&nbsp;&nbsp;&lt;a class='toggle describe-toggle-on' href='#'>$toggle_on&lt;/a&gt;
&nbsp;&nbsp;&lt;a class='toggle describe-toggle-off' href='#'>$toggle_off&lt;/a&gt;";
} else {
&nbsp;&nbsp;$class = 'form-table';
&nbsp;&nbsp;$toggle_links = '';
}</code></pre>
<br />
上記のコード内に、ボタンを表示するコードを付け足します。<br />
ついでにCSSも直接書いてみました。<br />
<br />
<strong>media.php</strong>　1165行目～　（2.9.2の場合）<br />
<pre><code>if ( $toggle ) {
&nbsp;&nbsp;$class = empty($errors) ? 'startclosed' : 'startopen';
&nbsp;&nbsp;$toggle_links = "
&nbsp;&nbsp;&lt;a class='toggle describe-toggle-on' href='#'&gt;$toggle_on&lt;/a&gt;
&nbsp;&nbsp;&lt;a class='toggle describe-toggle-off' href='#'&gt;$toggle_off&lt;/a&gt;
&nbsp;&nbsp;<span class="text_blue">&lt;div style=\"float:right; margin:5px 10px 0 0;\"&gt;</span><span class="text_red">&lt;input type='submit' class='button' name='send[$attachment_id]' value='" . esc_attr__( 'Insert into Post' ) . "' /&gt;</span><span class="text_blue">&lt;/div&gt;</span>";
} else {
&nbsp;&nbsp;$class = 'form-table';
&nbsp;&nbsp;$toggle_links = '';
}</code></pre>
<br />
<span class="text_blue">青色のコード</span>がCSSなんですが、『float:right;』を入れないと、画像タイトルの上にボタンが来てしまいます。<br />
見栄え悪いし、使いづらいかとも思います。<br />
<br />
私はシングルクォーテーションよりダブルクォーテーションの方が好きなので『￥&#8221;』の書き方にしています。<br />
Windowsの人は『￥』でいけますが、Macの人はバックシュラッシュになります。<br />
素直にシングルクォーテーション（ ’ ）だけでもOKです。<br />
<br />
<br />
<span class="no_box">2</span><strong class="text_red">ついでにリストに表示する数も増やしたい</strong><br />
同じ『media.php』の <s>2</s> <strong>3</strong> 箇所を変更する必要があります。<br />
<br />
<strong>media.php</strong>　1807行目（ボタンコード未挿入時）　（2.9.2の場合）<br />
<pre><code>add_filter( 'post_limits', $limit_filter = create_function( '$a', "return 'LIMIT $start, <span class="text_red">10</span>';" ) );</code></pre>
<br />
<strong class="text_red">追記</strong><br />
上記の変更だけでは、ページを送った際10個ダブった表示になるので、もう1箇所変更しなければいけません。<br />
<br />
<strong>media.php</strong>　1801行目（ボタンコード未挿入時）　（2.9.2の場合）<br />
<pre><code>$_GET['paged'] = isset( $_GET['paged'] ) ? intval($_GET['paged']) : 0;
if ( $_GET['paged'] &lt; 1 )
&nbsp;&nbsp;$_GET['paged'] = 1;
$start = ( $_GET['paged'] - 1 ) * <span class="text_red">10</span>;
if ( $start &lt; 1 )
&nbsp;&nbsp;$start = 0;
add_filter( 'post_limits', $limit_filter = create_function( '$a', "return 'LIMIT $start, <span class="text_red">10</span>';" ) );</code></pre>
<br />
<strong>media.php</strong>　1870行目（ボタンコード未挿入時）　（2.9.2の場合）<br />
<pre><code>'total' => ceil($wp_query->found_posts / <span class="text_red">10</span>),</code></pre>
<br />
上記の『 10 』を20や30にする事で、リストに表示される数が増えます。<br />
同じ数にしないと表示が変になると思うので、同じにしておいた方が良いと思います。<br />
<br />
<br />
<span class="no_box">3</span><strong class="text_red">ついでにサムネイル画像の大きさも変えたい</strong><br />
リストに表示されているサムネイル画像の大きさは、CSSで変更しているらしいです。<br />
サムネイル画像には以下のCSSが使われています。<br />
<pre><code>.media-item .pinkynail {
&nbsp;&nbsp;float: left;
&nbsp;&nbsp;margin: 2px;
&nbsp;&nbsp;max-width: 40px;
&nbsp;&nbsp;max-height: 32px;
}</code></pre>
<br />
『max-width』と『max-height』の大きさを変更すれば良いだけです。<br />
削除すると画像がそのままの大きさで表示されてしまうので、とんでもない事になります。<br />
適度な大きさにしておいた方が良いと思います。（50&#215;50 pxとか）<br />
<br />
変更したい方は『wp-admin/wp-admin.css』を開きます。<br />
スペースが入っていない軽量版のCSSなので、『<strong>.media-item .pinkynail</strong>』で検索すれば該当するCSSクラスが引っかかると思います。<br />
<br />
IE版のCSSは別ファイルになります。<br />
<br />
<strong>wp-admin/css/ie.css</strong>　414行目～　（2.9.2の場合）<br />
<pre><code>* html .media-item .pinkynail {
&nbsp;&nbsp;height: 32px;
&nbsp;&nbsp;width: 40px;
}</code></pre>
<br />
上記の大きさを『wp-admin.css』と同じにしましょう。<br />
IE使ってない人は別に変更しなくても大丈夫だと思います。<br />
<br />
100px × 100px とかにした人は分かると思いますが、画像に『float: left;』が入っていてPHPのソース内にはクリアータグが入っていません。<br />
なので、メチャクチャな表示になると思います。<br />
その場合は、『media.php』の以下の箇所にクリアータグを追加します。<br />
<br />
<strong>media.php</strong>　1209行目（ボタンコード未挿入時）～　（2.9.2の場合）<br />
<pre><code>$display_title
&lt;table class='slidetoggle describe $class'&gt;</code></pre>
<br />
上記タグの間に以下のクリアータグを追加します。<br />
<br />
<strong>media.php</strong>　1209行目（ボタンコード未挿入時）～　（2.9.2の場合）<br />
<pre><code>$display_title
<span class="text_red">&lt;div style=\"clear:both;\"&gt;&lt;/div&gt;</span>
&lt;table class='slidetoggle describe $class'&gt;</code></pre>
<br />
<br />
簡単に見ただけなので、何か問題があればコメントください。</p>
]]></content:encoded>
			<wfw:commentRss>http://kome-suki.net/archives/8453/feed</wfw:commentRss>
		<slash:comments>16</slash:comments>
		</item>
		<item>
		<title>【WordPress】管理画面でCSS3が使われていた</title>
		<link>http://kome-suki.net/archives/8248</link>
		<comments>http://kome-suki.net/archives/8248#comments</comments>
		<pubDate>Sat, 22 May 2010 16:50:26 +0000</pubDate>
		<dc:creator>くーさん</dc:creator>
				<category><![CDATA[全般]]></category>
		<category><![CDATA[Chrome]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[Firefox]]></category>
		<category><![CDATA[Google]]></category>
		<category><![CDATA[IE]]></category>
		<category><![CDATA[Opera]]></category>
		<category><![CDATA[Safari]]></category>
		<category><![CDATA[WEBブラウザ]]></category>

		<guid isPermaLink="false">http://kome-suki.net/?p=8248</guid>
		<description><![CDATA[凄い今更なのかもしれませんが、WordPressの管理画面でCSS3が使われている事を知りました。
『border-radius』と言う、ボーダーを角丸にするプロパティだけ知りましたが、何気に他にも使われていたりするか [...]]]></description>
			<content:encoded><![CDATA[<p>
<img src="http://kome-suki.net/wp-content/uploads/2010/05/wp_34.png" alt="WordPress" title="WordPress" width="150" height="150" class="entry_thumb" />凄い今更なのかもしれませんが、WordPressの管理画面でCSS3が使われている事を知りました。<br />
『border-radius』と言う、ボーダーを角丸にするプロパティだけ知りましたが、何気に他にも使われていたりするかもしれません。<br />
<br />
現在の最新版がベータを除き 2.9.2。<br />
もしかしたら 2.9 の時から使われていたのかもしれません。<br />
IEを無視するその姿勢、大好きです。ｗ<br />
<br />
現在主流となっている5つのブラウザで見てみました。<br />
以下に貼っている画像は、管理画面の左サイドのメニュー部分です。<br />
<br />
<table border="0" cellspacing="0" cellpadding="0"><tr><th>Firefox 3.5.9</th><th>Opera 10.53</th><th>Google Chrome 4.1</th></tr><tr><th valign="top"><img src="http://kome-suki.net/wp-content/uploads/2010/05/wp_firefox_1.png" alt="WordPress - Firefox" title="WordPress - Firefox" width="149" height="368" class="pict" /></th><th valign="top"><img src="http://kome-suki.net/wp-content/uploads/2010/05/wp_opera_1.png" alt="WordPress - Opera" title="WordPress - Opera" width="149" height="368" class="pict" /></th><th valign="top"><img src="http://kome-suki.net/wp-content/uploads/2010/05/wp_chrome_1.png" alt="WordPress - Google Chrome" title="WordPress - Google Chrome" width="149" height="368" class="pict" /></th></tr><tr><th>Safari 4.0.5</th><th>Safari (iPhone)</th><th>Internet Explorer 6.0</th></tr><tr><th valign="top"><img src="http://kome-suki.net/wp-content/uploads/2010/05/wp_safari_1.png" alt="WordPress - Safari" title="WordPress - Safari" width="149" height="368" class="pict" /></th><th valign="top"><img src="http://kome-suki.net/wp-content/uploads/2010/05/wp_iphone_9.png" alt="WordPress - Safari (iPhone)" title="WordPress - Safari (iPhone)" width="138" height="337" class="pict" /></th><th valign="top"><img src="http://kome-suki.net/wp-content/uploads/2010/05/wp_ie_1.png" alt="WordPress - Internet Explorer" title="WordPress - Internet Explorer" width="145" height="364" class="pict" /></th></tr></table>
<br />
さすがだIE、ちゃんと最後でオチてくれる。<br />
iPhoneですら対応してるってのに、IE8になっても未対応なんて。<br />
完全にみんなと違う方向向いてるだろIE。<br />
<br />
ちなみに『Opera 9.**』もCSS3未対応です。<br />
現在は 10.53 の最新版が出ているので、Opera使いの方はバージョンアップした方が良いかもです。<br />
<br />
全世界のWEBデザイナーがIE6止めれば、シェアは10％切ると思うんですが。<br />
しかし、私の勤めるスイミングは未だにIE6なので、勝手にバージョンアップしておこうかしら。</p>
]]></content:encoded>
			<wfw:commentRss>http://kome-suki.net/archives/8248/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>【WordPress】Twitterをブログ上に表示させるプラグイン『Tweetable』</title>
		<link>http://kome-suki.net/archives/7868</link>
		<comments>http://kome-suki.net/archives/7868#comments</comments>
		<pubDate>Tue, 04 May 2010 20:14:08 +0000</pubDate>
		<dc:creator>くーさん</dc:creator>
				<category><![CDATA[プラグイン]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[PHP]]></category>
		<category><![CDATA[Plugin]]></category>
		<category><![CDATA[RSS]]></category>
		<category><![CDATA[Twitter]]></category>
		<category><![CDATA[ブログ]]></category>

		<guid isPermaLink="false">http://kome-suki.net/?p=7868</guid>
		<description><![CDATA[2日前からトップページのみにTwitter（@kome__suki）のつぶやきを表示させるようにしていました。
これはいつものRSSフィードを読み込んで表示させる方法を使用していたんですが、Twitterだけは上手く読 [...]]]></description>
			<content:encoded><![CDATA[<p>
<img src="http://kome-suki.net/wp-content/uploads/2010/05/wp_rss_tw.jpg" alt="WordPress &amp; Twitter" title="WordPress &amp; Twitter" width="150" height="150" class="entry_thumb" />2日前からトップページのみにTwitter（<a href="http://twitter.com/kome__suki" target="_blank">@kome__suki</a>）のつぶやきを表示させるようにしていました。<br />
これはいつもの<a href="http://kome-suki.net/archives/5004">RSSフィードを読み込んで表示させる方法</a>を使用していたんですが、Twitterだけは上手く読み込んでくれません。<br />
文字コードが何故か ASCII になってバケたり、30分経っても読み込まなかったりとメチャメチャです。<br />
ブログ用のアカウント取ったってのに、そのブログにちゃんと表示してくれなくては意味がありません。<br />
<a href="http://blog.ogonigo.com/archives/2010/02/05143227_000187.php" target="_blank">こちらのサイト</a>も利用して試させてもらいましたが、やっぱりダメでした。<br />
なので、<strong>TwitterのRSSだけはプラグインに頼った方が懸命です。</strong><br />
<br />
サイドバーにある <a href="http://twitter.com/kuu_san" target="_blank">@kuu_san</a> のつぶやきは『<a href="http://wordpress.org/extend/plugins/twitter-tools/" target="_blank">Twitter Tools</a>』というプラグインを使用しています。<br />
多数のアカウント設定は出来ないので、別の『<a href="http://wordpress.org/extend/plugins/tweetable/" target="_blank">Tweetable</a>』と言うプラグインを使用しました。<br />
<br />
これは凄いです。<br />
何が凄いって、Twitterでつぶやいた内容が瞬時に反映されます。<br />
<a href="http://www.tweetdeck.com/" target="_blank">TweetDeck</a> でつぶやき、すぐにブログをリロードしたら反映されていました。<br />
この速さには驚きです。<br />
RSSと言うより Twitterの公式サイトに登録するので、アプリと同じ感覚なんでしょうね。<br />
管理画面上からつぶやいたりフォロワーのTLなんかも見れますが、私は表示させたいだけだったのでこの辺はノータッチです。<br />
<br />
バージョンが上がって少々違いますが、登録などの仕方は以下のサイトを参考に。<br />
<br />
<div class="entry_link">Ryuzee.com<br />
<a href="http://www.ryuzee.com/contents/blog/2760" target="_blank">[wordpress]Twitter連携用プラグインTweetableが便利すぎる！</a></div>
<br />
私がハマった点は『<strong>コールバックURL</strong>』を入力しなかった為、ドえらい手間が掛かりました。<br />
上記ページ1枚目のスクリーンショットの所に『コールバックURL』が表示されているので、ちゃんと登録画面でコピペしましょう。<br />
設定し直すと、すんなり登録できました。<br />
<br />
後は表示させたい場所に以下のコードを加えればOK。<br />
<pre><code>&lt;?php tweetable_latest_tweets(10); ?&gt;</code></pre>
『 10 』の数字は、表示させたい件数です。<br />
他にもフォロワー数を表示させたり出来るみたいです。<br />
詳しくはプラグインページの『<a href="http://wordpress.org/extend/plugins/tweetable/other_notes/" target="_blank">Other Notes</a>』に書かれています。（英語）<br />
<br />
<br />
使えたとなると、後は私の大好きなカスタマイズのお時間です。<br />
いじくるファイルは『tweetable.php』と『main_css.css』の2つです。<br />
CSSファイルは2つあって、『admin_css.css』は管理画面上のCSSなので、これは触らない方が良いと思います。<br />
管理画面なんて自分しか見ませんもんね。<br />
<br />
以下のつぶやきを元にしてみます。<br />
<div class="entry_box">2010/5/5 03:00:51　【アニメ】けいおん！！がオリコン1・2位独占。 そして中の人を初めて見た。 <a href="http://bit.ly/ba5ZFj" target="_blank">http://bit.ly/ba5ZFj</a></div>
<br />
プラグインをそのまま使うと、以下のように表示されます。<br />
<div class="entry_box">【アニメ】けいおん！！がオリコン1・2位独占。 そして中の人を初めて見た。 <a href="http://bit.ly/ba5ZFj" target="_blank">http://bit.ly/ba5ZFj</a><br />
May 4, 2010 6:00</div>
<br />
まずは日付を日本語表記にします。<br />
<br />
<strong>tweetable.php</strong>　60行目　（Version: 1.1.8）<br />
<pre><code>$date = date('F j, Y g:i', strtotime($latest['tweets'][$counter]['created_at']));</code></pre>
　↓<br />
<pre><code>$date = date('<span class="text_red">Y/n/d H:i</span>', strtotime($latest['tweets'][$counter]['created_at'])<span class="text_red">+32400</span>);</code></pre>
<br />
日付を西暦表示にし、GMT+9時間で日本時間に変更しています。<br />
<br />
私は日時を前に持ってきたかったので、以下のように変更しています。<br />
<br />
<strong>tweetable.php</strong>　61～63行目　（Version: 1.1.8）<br />
<pre><code>echo '&lt;span class="twitter_status"&gt;';
echo '&lt;span class="status-text"&gt;'.make_clickable($latest['tweets'][$counter]['text']).'&lt;/span&gt;';
echo '&lt;span class="twitter_meta"&gt;'.$date.'&lt;/span&gt;';</code></pre>
　↓<br />
<pre><code>echo '&lt;span class="twitter_status"&gt;';
<span class="text_red">echo '&lt;span class="twitter_meta"&gt;'.$date.'&lt;/span&gt;';
echo '&lt;span class="status-text"&gt;'.make_clickable($latest['tweets'][$counter]['text']).'&lt;/span&gt;';</span></code></pre>
<br />
只単に62行目と63行目を入れ替えただけです。<br />
170行目からも同じ記載がありますが、こちらは変更しなくても上手くいきました。<br />
不安な人は、どちらも変更してた方が吉かもしれません。<br />
<br />
ソースを見ると分かりますが、コードは以下のように出力されます。<br />
（分かりやすいように改行しています）<br />
<pre><code>&lt;li class="tweetable_item"&gt;
&nbsp;&nbsp;&lt;span class="twitter_status"&gt;
&nbsp;&nbsp;&lt;span class="twitter_meta"&gt;2010/5/05 03:00&lt;/span&gt;
&nbsp;&nbsp;&lt;span class="status-text"&gt;【アニメ】けいおん！！がオリコン1・2位独占。 そして中の人を初めて見た。 &lt;a href="http://bit.ly/ba5ZFj" rel="nofollow"&gt;http://bit.ly/ba5ZFj&lt;/a&gt;&lt;/span&gt;
&nbsp;&nbsp;&lt;/span&gt;
&lt;/li&gt;</code></pre>
<br />
日付を囲っている『twitter_meta』には『display:block;』が入っているので、SPANであっても改行されてしまいます。<br />
この辺は好みで『<strong>main_css.css</strong>』ファイルをいじってください。<br />
<br />
私はバックに画像を入れているので全てコメントアウトして、テーマ内のCSSファイルに書き込んでいます。<br />
その方が画像を使用した場合、絶対指定しなくて済むので楽です。<br />
<br />
<br />
なるべくプラグインに頼らずにやろうと思いましたが、最初にも書いた通り <strong>TwitterのRSSだけはプラグインに頼った方が懸命です。</strong></p>
]]></content:encoded>
			<wfw:commentRss>http://kome-suki.net/archives/7868/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>【iPhone】ついにCSSプロパティが同梱した！【大藤幹のHTML/XHTML/CSS辞典】</title>
		<link>http://kome-suki.net/archives/6334</link>
		<comments>http://kome-suki.net/archives/6334#comments</comments>
		<pubDate>Thu, 04 Feb 2010 15:55:59 +0000</pubDate>
		<dc:creator>くーさん</dc:creator>
				<category><![CDATA[アプリ]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[大藤幹のHTML/XHTML/CSS辞典]]></category>
		<category><![CDATA[大藤幹のHTML/XHTMLタグ辞典]]></category>

		<guid isPermaLink="false">http://kome-suki.net/?p=6334</guid>
		<description><![CDATA[2009年内リリースを予定してたようですが思ったより困難だったのか、ついに『大藤幹のHTML/XHTMLタグ辞典』が『大藤幹のHTML/XHTML/CSS辞典』にバージョンアップしました。
残念ながらCSS3は未対応の [...]]]></description>
			<content:encoded><![CDATA[<p>
<img src="http://kome-suki.net/wp-content/uploads/2010/02/html_css_1.jpg" alt="大藤幹のHTML/XHTML/CSS辞典" title="大藤幹のHTML/XHTML/CSS辞典" width="150" height="150" class="entry_thumb" />2009年内リリースを予定してたようですが思ったより困難だったのか、ついに『大藤幹のHTML/XHTMLタグ辞典』が『大藤幹のHTML/XHTML/CSS辞典』にバージョンアップしました。<br />
残念ながらCSS3は未対応のようです。<br />
辞典の世話にならなくても、すらすら～っとコードが書けるようになればベストなんですけど、ド忘れとかもありますし持っておいて損は無いかな。<br />
どっかの偉い人が「調べて分かる事は覚えなくて良い」と言ってたような言わなかったような。<br />
一理あるような無いような。<br />
<br />
今回長いので折り込みます。<br />
<span id="more-6334"></span><br class="clear" /><br />
バージョンアップお知らせ。<br />
<img src="http://kome-suki.net/wp-content/uploads/2010/02/html_css_2.jpg" alt="大藤幹のHTML/XHTML/CSS辞典" title="大藤幹のHTML/XHTML/CSS辞典" width="250" height="375" class="pict" />
<br />
<br />
起動画面。<br />
以前は青色だったのが、目に優しい緑色に変わっています。<br />
<img src="http://kome-suki.net/wp-content/uploads/2010/02/html_css_3.jpg" alt="大藤幹のHTML/XHTML/CSS辞典" title="大藤幹のHTML/XHTML/CSS辞典" width="250" height="375" class="pict" />
<br />
<br />
起動すると『HTML/XHTML』の画面になりますが、上の青い部分をタップすると HTML/XHTML か CSS を選択出来るようです。<br />
CSS は赤色のようです。<br />
<img src="http://kome-suki.net/wp-content/uploads/2010/02/html_css_4.jpg" alt="大藤幹のHTML/XHTML/CSS辞典" title="大藤幹のHTML/XHTML/CSS辞典" width="250" height="375" class="pict" />
<table border="0" cellspacing="0" cellpadding="0">
<tr><td valign="top"><img src="http://kome-suki.net/wp-content/uploads/2010/02/html_css_5.jpg" alt="大藤幹のHTML/XHTML/CSS辞典" title="大藤幹のHTML/XHTML/CSS辞典" width="250" height="409" class="pict" /></td><td valign="top"><img src="http://kome-suki.net/wp-content/uploads/2010/02/html_css_6.jpg" alt="大藤幹のHTML/XHTML/CSS辞典" title="大藤幹のHTML/XHTML/CSS辞典" width="250" height="375" class="pict" /></td></tr></table>
<br />
<br />
検索画面のプロパティ、値、逆引き、用語。<br />
<img src="http://kome-suki.net/wp-content/uploads/2010/02/html_css_7.jpg" alt="大藤幹のHTML/XHTML/CSS辞典" title="大藤幹のHTML/XHTML/CSS辞典" width="250" height="375" class="pict" /><img src="http://kome-suki.net/wp-content/uploads/2010/02/html_css_8.jpg" alt="大藤幹のHTML/XHTML/CSS辞典" title="大藤幹のHTML/XHTML/CSS辞典" width="250" height="375" class="pict" />
<br />
<img src="http://kome-suki.net/wp-content/uploads/2010/02/html_css_9.jpg" alt="大藤幹のHTML/XHTML/CSS辞典" title="大藤幹のHTML/XHTML/CSS辞典" width="250" height="375" class="pict" /><img src="http://kome-suki.net/wp-content/uploads/2010/02/html_css_10.jpg" alt="大藤幹のHTML/XHTML/CSS辞典" title="大藤幹のHTML/XHTML/CSS辞典" width="250" height="375" class="pict" />
<br />
<br />
解説、資料集、Tips&amp;コラム。<br />
<img src="http://kome-suki.net/wp-content/uploads/2010/02/html_css_11.jpg" alt="大藤幹のHTML/XHTML/CSS辞典" title="大藤幹のHTML/XHTML/CSS辞典" width="250" height="375" class="pict" /><img src="http://kome-suki.net/wp-content/uploads/2010/02/html_css_12.jpg" alt="大藤幹のHTML/XHTML/CSS辞典" title="大藤幹のHTML/XHTML/CSS辞典" width="250" height="375" class="pict" />
<br />
<img src="http://kome-suki.net/wp-content/uploads/2010/02/html_css_13.jpg" alt="大藤幹のHTML/XHTML/CSS辞典" title="大藤幹のHTML/XHTML/CSS辞典" width="250" height="375" class="pict" />
<br />
<br />
『background』をブックマークしたんですが、ちょっとバグ発見。<br />
ブックマーク、履歴等は色分けされて HTML/XHTML か CSS かが一目で分かります。<br />
<img src="http://kome-suki.net/wp-content/uploads/2010/02/html_css_14.jpg" alt="大藤幹のHTML/XHTML/CSS辞典" title="大藤幹のHTML/XHTML/CSS辞典" width="250" height="375" class="pict" /><img src="http://kome-suki.net/wp-content/uploads/2010/02/html_css_15.jpg" alt="大藤幹のHTML/XHTML/CSS辞典" title="大藤幹のHTML/XHTML/CSS辞典" width="250" height="375" class="pict" />
<br />
<br />
結構頻繁に使うであろう『background』を見てみました。<br />
HTML/XHTML の時同様、事細かに解説されています。<br />
（画像クリックで background の全ページを別ウィンドウで表示します。）<br />
<a href="http://kome-suki.net/wp-content/uploads/2010/02/html_css_17.jpg" target="_blank"><img src="http://kome-suki.net/wp-content/uploads/2010/02/html_css_16.jpg" alt="大藤幹のHTML/XHTML/CSS辞典" title="大藤幹のHTML/XHTML/CSS辞典" width="250" height="375" class="pict" /></a><br />
<br />
<br />
以前のバージョンを持っていたので、今回は無料バージョンアップ出来ました。<br />
通常900円とお安くないアプリなので嬉しいですね。<br />
コレだけの量のデータをまとめるのは結構大変だと思います。<br />
さ、後は『JavaScript』と『PHP』ですね。ｗ<br />
<br />
意外に役立つのが『プロパティの読み方』だったりします。<br />
『width』ってどう読むんだよ！　って昔思ってましたから。<br />
『ウィズ（ウィズス）』らしいです。<br />
<br />
<br />
<div class="entry_app"><a href="http://click.linksynergy.com/fs-bin/click?id=gJq8Y6sCMmY&#038;subid=&#038;offerid=94348.1&#038;type=10&#038;tmpid=3910&#038;RD_PARM1=http%3A%2F%2Fitunes.apple.com%2Fjp%2Fapp%2Fid329890126%3Fmt%3D8" target="_blank"><br />
大藤幹のHTML/XHTML/CSS辞典</a>　（900円）</div></p>
]]></content:encoded>
			<wfw:commentRss>http://kome-suki.net/archives/6334/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>【iPhone】誰でも簡単にHTMLでアプリランチャーが作成できる！</title>
		<link>http://kome-suki.net/archives/5981</link>
		<comments>http://kome-suki.net/archives/5981#comments</comments>
		<pubDate>Wed, 30 Dec 2009 21:30:33 +0000</pubDate>
		<dc:creator>くーさん</dc:creator>
				<category><![CDATA[全般]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Safari]]></category>
		<category><![CDATA[ランチャー]]></category>

		<guid isPermaLink="false">http://kome-suki.net/?p=5981</guid>
		<description><![CDATA[HTMLの知識だけで誰でも簡単にiPhoneのランチャーが作成出来るようです。

yagutaの日記
Jailbreak不要で iPhoneアプリを起動できるランチャー

上記サイトの説明だけでは分かり難かったので補足 [...]]]></description>
			<content:encoded><![CDATA[<p>
<img src="http://kome-suki.net/wp-content/uploads/2009/12/iphone_19.jpg" alt="iPhone 3GS" title="iPhone 3GS" width="150" height="150" class="entry_thumb" />HTMLの知識だけで誰でも簡単にiPhoneのランチャーが作成出来るようです。<br />
<br />
<div class="entry_link2">yagutaの日記<br />
<a href="http://d.hatena.ne.jp/yaguta/20091230/1262188563" target="_blank">Jailbreak不要で iPhoneアプリを起動できるランチャー</a></div>
<br />
上記サイトの説明だけでは分かり難かったので補足。<br />
サイト内に貼られているダウンロード先から『ilauncher.html』をダウンロードする。<br />
何も考えずに、そのファイルをサーバーにアップロードする。<br />
<br />
※WordPressを使用している人は、テーマ内にファイルをアップするのではなく必ず一番上の階層にファイルをアップする。<br />
×　wp-contents/themes/テーマ/ilauncher.html<br />
○　ilauncher.html<br />
<br />
サーバーにアップしたら、SafariでURLを打ち込む。<br />
このサイトだったら、『http://kome-suki.net/ilauncher.html』になります。<br />
すると、以下の画面が立ち上がります。（URLは自動で変わります）<br />
<img src="http://kome-suki.net/wp-content/uploads/2009/12/ilauncher_2.png" alt="iLauncher" title="iLauncher" width="320" height="480" class="pict" />
<br />
<br />
アプリ名でリスト化されており、タップするとiPhoneに入れているアプリが起動します。<br />
インストールされていないアプリは、Safariで新しいページが開き『ページが開けません』で終わります。<br />
『ilauncher.html』の中身を見ると、JavaScriptを使ってアプリのスキームと呼ばれるコードでアプリを起動させているようです。<br />
スキームが無いアプリは無理でしょうけど、以下のサイト等で色々公開されています。<br />
<br />
<div class="entry_link">iBlog<br />
<a href="http://philvy.blog76.fc2.com/blog-entry-20.html" target="_blank">アプリのスキームを調べてみた</a></div>
<div class="entry_link">matuダイアリー<br />
<a href="http://d.matu.biz/0204" target="_blank">[iPhone]購入したアプリのURLスキームを整理してみました。iPhoneをより上手に使えるようになるために…</a></div>
<br />
探せばまだまだあるかもしれません。<br />
これの良い所は、<strong>HTMLとCSSを自分好みにいじれる</strong>点にあります。<br />
例えばこんな事も出来ちゃう訳です。（画像は合成です）<br />
<img src="http://kome-suki.net/wp-content/uploads/2009/12/ilauncher_3.jpg" alt="iLauncher" title="iLauncher" width="320" height="480" class="pict" />
<br />
<br />
さすがにメールとかのカウント数字は無理でしょうけど。<br />
アプリの画像を自分で作る。<br />
アプリのスキームを調べる。<br />
HTMLとCSSをいじくりまわる。<br />
面白そうですけど、面倒なんでやりません。ｗ<br />
<br />
Safariでのページをホーム画面に置いておけば、なお便利なランチャーになりそうですね。<br />
<br />
<div class="entry_link">米が好き<br />
<a href="http://kome-suki.net/archives/5120">【iPhone】ホーム画面に追加した時のアイコンを作成する方法</a></div></p>
]]></content:encoded>
			<wfw:commentRss>http://kome-suki.net/archives/5981/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>【WordPress】サイト軽量化＆ページ活用</title>
		<link>http://kome-suki.net/archives/5729</link>
		<comments>http://kome-suki.net/archives/5729#comments</comments>
		<pubDate>Sun, 06 Dec 2009 13:13:46 +0000</pubDate>
		<dc:creator>くーさん</dc:creator>
				<category><![CDATA[Tips]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[Plugin]]></category>
		<category><![CDATA[タグ]]></category>

		<guid isPermaLink="false">http://kome-suki.net/?p=5729</guid>
		<description><![CDATA[以前からそうなんですが、最近特にサイトが重いなぁと思いフッターに表示させていた『タグクラウド』の表示を止めました。
今や500近く増えたタグ。
全てを表示させるのには、ちょっと重たくなるのは必然ですね。
しかし、全く消 [...]]]></description>
			<content:encoded><![CDATA[<p>
<img src="http://kome-suki.net/wp-content/uploads/2009/12/tag_1.png" alt="タグクラウド" title="タグクラウド" width="150" height="150" class="entry_thumb" />以前からそうなんですが、最近特にサイトが重いなぁと思いフッターに表示させていた『タグクラウド』の表示を止めました。<br />
今や500近く増えたタグ。<br />
全てを表示させるのには、ちょっと重たくなるのは必然ですね。<br />
しかし、全く消すのは惜しいってんで、『ページ』で表示させる事にしました。<br />
サイト一番右上にリンクがあるので、見たい方はどーぞ。<br />
<br />
以下はページで表示させるに当たって、難儀した点。<br />
<br />
私はWordPressのプラグインの『<a href="http://camcam.info/wordpress/101" target="_blank">brBrbr</a>』を使っています。<br />
ちなみに ＜pre＞などに対応した新バージョン出てます。　（Version:2.0）<br />
<br />
ページ内に作ったコンテンツも、もれなく『brBrbr』が適応されるのでタグクラウドのフラット表示が出来ません。<br />
画像はプラグイン『<a href="http://wordpress.org/extend/plugins/simple-tags/" target="_blank">Simple Tags</a>』のタグクラウド内。<br />
<img src="http://kome-suki.net/wp-content/uploads/2009/12/tag_2.png" alt="タグクラウド" title="タグクラウド" width="400" height="52" class="pict" />
<br />
<br />
これを『List』に変えます。<br />
<img src="http://kome-suki.net/wp-content/uploads/2009/12/tag_3.png" alt="タグクラウド" title="タグクラウド" width="400" height="52" class="pict" />
<br />
<br />
後はCSSで ＜ul＞＜li＞ を横並びにすれば『brBrbr』は関係なくなるんですが、ここでちょっと手間取りました。<br />
結果的に言えば、以下のコードでOK。<br />
<pre><code>ul.st-tag-cloud li {
&nbsp;&nbsp;display: inline;
&nbsp;&nbsp;line-height: 2;
}</code></pre>
<br />
横並びにする時、『float: left;』じゃなく『display: inline;』にしなければいけなかったんですね。<br />
タグクラウドは関連してるタグによって、テキストの文字の大きさが変わるので『float: left;』だと変な表示になってしまいます。<br />
<br />
解決してみれば、何のこっちゃという事例でした。</p>
]]></content:encoded>
			<wfw:commentRss>http://kome-suki.net/archives/5729/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>【iPhone】HTML/XHTMLのタグを見れるアプリ【大藤幹のHTML/XHTMLタグ辞典】</title>
		<link>http://kome-suki.net/archives/5150</link>
		<comments>http://kome-suki.net/archives/5150#comments</comments>
		<pubDate>Tue, 29 Sep 2009 16:14:10 +0000</pubDate>
		<dc:creator>くーさん</dc:creator>
				<category><![CDATA[アプリ]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[大藤幹のHTML/XHTMLタグ辞典]]></category>

		<guid isPermaLink="false">http://kome-suki.net/?p=5150</guid>
		<description><![CDATA[HTMLとXHTMLのタグを全て（？）見れるアプリです。
9/30本日まで900円が450円の半額。
おまけに年内リリース予定の『CSS辞典同梱版』への無償アップグレードが出来るってんで、即座にポチってしまいました。
 [...]]]></description>
			<content:encoded><![CDATA[<p>
<img src="http://kome-suki.net/wp-content/uploads/2009/09/app_html_1.jpg" alt="大藤幹のHTML/XHTMLタグ辞典" title="大藤幹のHTML/XHTMLタグ辞典" width="150" height="150" class="entry_thumb" />HTMLとXHTMLのタグを全て（？）見れるアプリです。<br />
9/30本日まで900円が450円の半額。<br />
おまけに年内リリース予定の『CSS辞典同梱版』への無償アップグレードが出来るってんで、即座にポチってしまいました。<br />
<br />
HTML/XHTMLのタグは、たまーに見る時がありますしCSSはもっと見る。<br />
『CSS辞典同梱版』がCSS3対応だったら嬉しいなぁ。<br />
<br />
紙面で見た方が早いってのもありますが、アプリで改めて見ると新しい発見があったり、手元に本が無い場合は重宝しそうです。<br />
<br />
▼起動画面<br />
<img src="http://kome-suki.net/wp-content/uploads/2009/09/app_html_2.jpg" alt="大藤幹のHTML/XHTMLタグ辞典" title="大藤幹のHTML/XHTMLタグ辞典" width="320" height="480" class="pict" />
<br />
<br />
▼検索　（要素／属性／逆引き／用語）<br />
<img src="http://kome-suki.net/wp-content/uploads/2009/09/app_html_3.png" alt="大藤幹のHTML/XHTMLタグ辞典" title="大藤幹のHTML/XHTMLタグ辞典" width="200" height="300" class="pict" /><img src="http://kome-suki.net/wp-content/uploads/2009/09/app_html_4.png" alt="大藤幹のHTML/XHTMLタグ辞典" title="大藤幹のHTML/XHTMLタグ辞典" width="200" height="300" class="pict" />
<br />
<img src="http://kome-suki.net/wp-content/uploads/2009/09/app_html_5.png" alt="大藤幹のHTML/XHTMLタグ辞典" title="大藤幹のHTML/XHTMLタグ辞典" width="200" height="300" class="pict" /><img src="http://kome-suki.net/wp-content/uploads/2009/09/app_html_6.png" alt="大藤幹のHTML/XHTMLタグ辞典" title="大藤幹のHTML/XHTMLタグ辞典" width="200" height="300" class="pict" />
<br />
<br />
▼解説<br />
<img src="http://kome-suki.net/wp-content/uploads/2009/09/app_html_7.png" alt="大藤幹のHTML/XHTMLタグ辞典" title="大藤幹のHTML/XHTMLタグ辞典" width="200" height="300" class="pict" />
<br />
<br />
▼資料集<br />
<img src="http://kome-suki.net/wp-content/uploads/2009/09/app_html_8.png" alt="大藤幹のHTML/XHTMLタグ辞典" title="大藤幹のHTML/XHTMLタグ辞典" width="200" height="300" class="pict" />
<br />
<br />
▼Tips＆コラム<br />
<img src="http://kome-suki.net/wp-content/uploads/2009/09/app_html_9.png" alt="大藤幹のHTML/XHTMLタグ辞典" title="大藤幹のHTML/XHTMLタグ辞典" width="200" height="300" class="pict" />
<br />
<br />
頻繁に利用される『 a 』タグです。<br />
たかが『 a 』タグ、されど『 a 』タグ。<br />
1つのタグに対しての情報が半端ないです。<br />
（画像クリックで a タグの情報表示出来ます）<br />
<a href="http://kome-suki.net/wp-content/uploads/2009/09/app_html_11.jpg" title="大藤幹のHTML/XHTMLタグ辞典" target="_blank"><img src="http://kome-suki.net/wp-content/uploads/2009/09/app_html_10.png" alt="大藤幹のHTML/XHTMLタグ辞典" title="大藤幹のHTML/XHTMLタグ辞典" width="320" height="480" class="pict" /></a><br />
<br />
対応ブラウザ一覧表です。<br />
主に使われているブラウザに加え、『Safari for iPhone』まであるのは良いっすね。<br />
<img src="http://kome-suki.net/wp-content/uploads/2009/09/app_html_12.jpg" alt="大藤幹のHTML/XHTMLタグ辞典" title="大藤幹のHTML/XHTMLタグ辞典" width="320" height="480" class="pict" />
<br />
<br />
HP作ってる人は、持っておいて損は無いアプリだと思います。<br />
早く『CSS辞典同梱版』こないかなー。<br />
その内『JavaScript辞典同梱版』とか『PHP辞典同梱版』とか出ないですかね。<br />
勿論無償アップグレードで。ｗｗｗ<br />
<br />
<br />
<div class="entry_app"><a href="http://click.linksynergy.com/fs-bin/click?id=gJq8Y6sCMmY&#038;subid=&#038;offerid=94348.1&#038;type=10&#038;tmpid=3910&#038;RD_PARM1=http%3A%2F%2Fitunes.apple.com%2Fjp%2Fapp%2Fid329890126%3Fmt%3D8" target="_blank">大藤幹のHTML/XHTMLタグ辞典</a>　（通常：900円）</div></p>
]]></content:encoded>
			<wfw:commentRss>http://kome-suki.net/archives/5150/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>【8/2-8/8】週間ヘッドライン【25記事】</title>
		<link>http://kome-suki.net/archives/4898</link>
		<comments>http://kome-suki.net/archives/4898#comments</comments>
		<pubDate>Sat, 08 Aug 2009 14:44:29 +0000</pubDate>
		<dc:creator>くーさん</dc:creator>
				<category><![CDATA[インターネット]]></category>
		<category><![CDATA[Blu-ray]]></category>
		<category><![CDATA[Chrome]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[DRAGON QUEST]]></category>
		<category><![CDATA[DS]]></category>
		<category><![CDATA[FINAL FANTASY]]></category>
		<category><![CDATA[IE]]></category>
		<category><![CDATA[Photoshop]]></category>
		<category><![CDATA[WEBサービス]]></category>
		<category><![CDATA[けいおん！]]></category>
		<category><![CDATA[ハルヒ]]></category>
		<category><![CDATA[マジコン]]></category>
		<category><![CDATA[全般]]></category>
		<category><![CDATA[水泳]]></category>
		<category><![CDATA[秋葉原]]></category>

		<guid isPermaLink="false">http://kome-suki.net/?p=4898</guid>
		<description><![CDATA[2009/8/2～8/8の目に付いた情報・ニュースなどをまとめてご紹介。

今は忙しくて1つ1つ記事にする暇が無いからこの形式をとっていますが、今後も続けるかどうかは不明です。
1つの事に対して、じっくりレビューっての [...]]]></description>
			<content:encoded><![CDATA[<p>
<img src="http://kome-suki.net/wp-content/uploads/2009/08/headline_1.jpg" alt="ヘッドライン" title="ヘッドライン" width="150" height="150" class="entry_thumb" />2009/8/2～8/8の目に付いた情報・ニュースなどをまとめてご紹介。<br />
<br />
今は忙しくて1つ1つ記事にする暇が無いからこの形式をとっていますが、今後も続けるかどうかは不明です。<br />
1つの事に対して、じっくりレビューってのが好きな方なので、1行コメントって楽だけど何だか味気ないような気がします。<br />
個人的主観なので他の人を批判しているのではありません、あしからず。<br />
<span id="more-4898"></span><br class="clear" /><br />
脱獄やってみたいけど、何だか怖い。<br />
<div class="entry_link">気になる、記になる…<br />
<a href="http://taisyo.seesaa.net/article/124805753.html" target="_blank">iPhone 3.0.1は｢redsn0w 0.8｣で脱獄可能</a></div>
<br />
m9（＾Д＾）<br />
<div class="entry_link">にゅーあきばどっとこむ<br />
<a href="http://www.new-akiba.com/archives/2009/08/dsi_7.html" target="_blank">ニンテンドーDSi最新ファームでマジコンが使えなくなる</a></div>
<br />
1000レビューは素直に凄いと思います。<br />
<div class="entry_link">iPhoneアプリをおすすめするAppBank<br />
<a href="http://www.appbank.net/2009/08/05/iphone-news/41530.php" target="_blank">AppBank2009は1000レビューを超えました。</a></div>
<br />
是非とも行きたい『ルイーダの酒場』。<br />
<div class="entry_link">探偵ファイル<br />
<a href="http://www.tanteifile.com/entertainment/2009/08/05_01/index.html" target="_blank">レア地図を求めて・秋葉原「ルイーダの酒場」大盛況！</a></div>
<br />
これは分かりやすい。<br />
<div class="entry_link">探偵ファイル<br />
<a href="http://www.tanteifile.com/entertainment/2009/08/06_01/index.html" target="_blank">わかりやすくドラクエ９で例えてみます</a></div>
<br />
これは怖い。<br />
<div class="entry_link">まにあっくすZ<br />
<a href="http://maniaxz.blog99.fc2.com/blog-entry-3062.html" target="_blank">日テレで不可解な放送事故　…「ガチで怖すぎる」「オカルトじみてる」と話題に</a></div>
<br />
WEBサイトじゃなくてアプリだったら良かったのに。<br />
<div class="entry_link">つかえるクマー？<br />
<a href="http://meguri0721.blog78.fc2.com/blog-entry-958.html" target="_blank">毎分美女が時間を教えてくれる『美人時計』</a></div>
<br />
黒の背景って意外と難しいんですよね。<br />
<div class="entry_link">コリス<br />
<a href="http://coliss.com/articles/build-websites/operation/design/how-to-create-dark-web-design.html" target="_blank">ブラックベースの暗いウェブデザインで気をつけたいポイント</a></div>
<br />
業界には頑張って欲しいけど、個人の方も応援してます。<br />
<div class="entry_link">builder by ZDNet Japan<br />
<a href="http://builder.japan.zdnet.com/sp/iphone-3g-2008/story/0,3800087831,20397872,00.htm?ref=rss" target="_blank">iPhoneを巡るゲーム業界の動き</a></div>
<br />
PCのHDDより容量多いです…。<br />
<div class="entry_link">Gizmodo Japan<br />
<a href="http://www.gizmodo.jp/2009/08/blu-ray_1.html" target="_blank">次世代Blu-rayの容量がとんでもないことになっている</a></div>
<br />
怒られて当然だと思います。<br />
<div class="entry_link">ロケットニュース24（β）<br />
<a href="http://rocketnews24.com/?p=12937" target="_blank">教会でヌード写真を撮影し神父カンカン「不快だ訴える！」</a></div>
<br />
3枚目の人に針持って突撃したい。ｗ<br />
<div class="entry_link">情報屋さん。<br />
<a href="http://jyouhouya3.net/2009/08/sexy_4.html" target="_blank">SEXYから変テコなものまで。個性的なウェディングドレスいろいろ</a></div>
<br />
こういうキャンペーンはどんどんやってください！<br />
<div class="entry_link">スラッシュドット・ジャパン<br />
<a href="http://slashdot.jp/it/article.pl?sid=09/08/06/0350203" target="_blank">IE6の乗り換えを促す「IE6 No More」キャンペーン始まる</a></div>
<br />
いつの間にかバージョンアップしてたんですね。<br />
<div class="entry_link">二十歳街道まっしぐら<br />
<a href="http://tokuna.blog40.fc2.com/blog-entry-1833.html" target="_blank">テーマ選択も可能！Google Chrome 3 になり進化した機能４点</a></div>
<br />
まっっっっったく感動なんてしませんでした。ｗ<br />
<div class="entry_link">まにあっくすZ<br />
<a href="http://maniaxz.blog99.fc2.com/blog-entry-3063.html" target="_blank">【バレ注意】　涼宮ハルヒのエンドレスエイト、ついに脱出！！！　…「感動した」の声も</a></div>
<div class="entry_link">今日もやられやく<br />
<a href="http://yunakiti.blog79.fc2.com/blog-entry-3591.html" target="_blank">【感動した】お疲れ様でした、エンドレスエイトは終了しました【ありがとう】</a></div>
<br />
オフライン派の私としてはいまいち盛り上がりません。<br />
<div class="entry_link">GameSpot Japan<br />
<a href="http://japan.gamespot.com/ps3/news/story/0,3800075348,20398066,00.htm?ref=rss" target="_blank">「ファイナルファンタジーXIV」公式サイトリニューアル＆新情報公開！</a></div>
<div class="entry_link">GIGAZINE<br />
<a href="http://gigazine.net/index.php?/news/comments/20090807_ff14/" target="_blank">「FINAL FANTASY XIV（FF14）」の公式サイト更新、「エオルゼア」の世界を一挙公開</a></div>
<br />
ついに発売されましたね。　どーなんでしょ。<br />
<div class="entry_link">GameSpot Japan<br />
<a href="http://japan.gamespot.com/xbox360/news/story/0,3800075348,20398035,00.htm?ref=rss" target="_blank">アンドロイドとピュアピュアなひと時を&#8211;「ドリームクラブ」VIP待遇や新たなコスプレ衣装など新情報を公開</a></div>
<br />
DIVの高さを揃えたり、フッターの定位置などは結構使えますよね。<br />
<div class="entry_link">コリス<br />
<a href="http://coliss.com/articles/build-websites/operation/css/css-mastering-styling-design-elements.html" target="_blank">[CSS]スタイルシートの実用的なテクニック集：レイアウト・ナビゲーション・画像・タイポグラフィ・アイコン・ボタン・リンク編</a></div>
<br />
作戦勝ちですかね。<br />
<div class="entry_link">CNET Japan<br />
<a href="http://japan.cnet.com/news/biz/story/0,2000056020,20398085,00.htm?ref=rss" target="_blank">ドラクエ9は中古品出回らず、ネット通信機能が奏功</a></div>
<br />
フォトショップの力を見た。ｗ<br />
<div class="entry_link">情報屋さん。<br />
<a href="http://jyouhouya3.net/2009/08/post_164.html" target="_blank">フォトショップ凄い！ 実写を似顔絵風に加工した画像いろいろ</a></div>
<br />
金メダリストだって『2ちゃんねる』や『けいおん！』見たっていいじゃない。ｗ<br />
<div class="entry_link">ガジェット通信<br />
<a href="http://getnews.jp/archives/24652" target="_blank">世界水泳の金メダリスト・古賀淳也は2ちゃんねらーだった！</a></div>
<div class="entry_link">今日もやられやく<br />
<a href="http://yunakiti.blog79.fc2.com/blog-entry-3588.html" target="_blank">世界水泳金メダリスト古賀淳也選手が『けいおん！』好きでν速民であることをブログで告白</a></div>
<br />
この位置取りは気付きませんでした。<br />
<div class="entry_link">ロケットニュース24（β）<br />
<a href="http://rocketnews24.com/?p=13203" target="_blank">『DQ9』カンタンなレベルアップ方法を伝授</a></div></p>
]]></content:encoded>
			<wfw:commentRss>http://kome-suki.net/archives/4898/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>ニコニコ動画の動画さえ見れれば良い人向け『userContent.css』</title>
		<link>http://kome-suki.net/archives/4474</link>
		<comments>http://kome-suki.net/archives/4474#comments</comments>
		<pubDate>Tue, 02 Jun 2009 16:58:16 +0000</pubDate>
		<dc:creator>くーさん</dc:creator>
				<category><![CDATA[動画関連]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[Firefox]]></category>
		<category><![CDATA[ニコニコ動画]]></category>

		<guid isPermaLink="false">http://kome-suki.net/?p=4474</guid>
		<description><![CDATA[『NaN days』というサイトにCSSのコードが書かれていたので、ご紹介です。
要はニコニコ動画の動画ページを開いた時に、プレイヤーを一番上部に持ってくる為だけのCSSです。
ブラウザの表示サイズが小さい時とかに使え [...]]]></description>
			<content:encoded><![CDATA[<p>
<img src="http://kome-suki.net/wp-content/uploads/2009/06/nico_9.png" alt="ニコニコ動画" title="ニコニコ動画" width="150" height="156" class="entry_thumb" />『<a href="http://subtech.g.hatena.ne.jp/motemen/20090601/1243832759" target="_blank">NaN days</a>』というサイトにCSSのコードが書かれていたので、ご紹介です。<br />
要はニコニコ動画の動画ページを開いた時に、プレイヤーを一番上部に持ってくる為だけのCSSです。<br />
ブラウザの表示サイズが小さい時とかに使えそうです。<br />
<br />
ちなみに、Firefox専用のコードです。<br />
<br />
コードは『<a href="http://subtech.g.hatena.ne.jp/motemen/20090601/1243832759" target="_blank">NaN days</a>』よりコピーして、メモ帳などに貼り付ける。<br />
ファイル名を『userContent.css』にして保存。<br />
そのファイルを以下の場所に移動します。<br />
<pre><code>C:\Documents and Settings\<span class="text_red">ユーザー名</span>\Application Data\Mozilla\Firefox\Profiles\<span class="text_red">英数字の羅列.プロファイル名</span>\chrome\</code></pre>
<span class="text_red">赤字</span>は各PCによって異なります。<br />
『Application Data』は隠しファイルなので、手作業で表示させてください。<br />
<div class="entry_box">フォルダを開く　-　ツール　-　フォルダオプション　-　表示タブ　-　『すべてのファイルとフォルダを表示する』にチェックを入れる</div>
<br />
一旦Firefoxを終了させて再起動する必要があります。<br />
<br />
<br />
動画ページを開くと、以下のように表示されるようになります。<br />
<img src="http://kome-suki.net/wp-content/uploads/2009/06/nico_10.jpg" alt="ニコニコ動画" title="ニコニコ動画" width="400" height="413" class="pict" />
<br />
<br />
動画ページ以外は、普段通りに表示されます。<br />
<br />
『userContent.css』については、以下のサイトを参照してください。<br />
<div class="entry_link">Firefox まとめサイト<br />
<a href="http://firefox.geckodev.org/index.php?%E3%83%97%E3%83%AD%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB#l09b110b" target="_blank">プロファイル</a></div></p>
]]></content:encoded>
			<wfw:commentRss>http://kome-suki.net/archives/4474/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>リンクをクリックした時に出る破線を消す方法</title>
		<link>http://kome-suki.net/archives/4340</link>
		<comments>http://kome-suki.net/archives/4340#comments</comments>
		<pubDate>Sat, 09 May 2009 06:16:24 +0000</pubDate>
		<dc:creator>くーさん</dc:creator>
				<category><![CDATA[インターネット]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[Firefox]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[IE]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[WEBブラウザ]]></category>

		<guid isPermaLink="false">http://kome-suki.net/?p=4340</guid>
		<description><![CDATA[リンクが貼られたテキストや画像をクリックすると、回りに破線が出ます。
Opera、Safari、Google Chromeはデフォルトで出ません。
これが出るのは、IE、Sleipnir、Firefox、Lunasca [...]]]></description>
			<content:encoded><![CDATA[<p>
<img src="http://kome-suki.net/wp-content/uploads/2009/05/link_1.png" alt="リンク" title="リンク" width="150" height="150" class="entry_thumb" />リンクが貼られたテキストや画像をクリックすると、回りに破線が出ます。<br />
<a href="http://jp.opera.com/" target="_blank">Opera</a>、<a href="http://www.apple.com/jp/safari/" target="_blank">Safari</a>、<a href="http://www.google.com/chrome" target="_blank">Google Chrome</a>はデフォルトで出ません。<br />
これが出るのは、<a href="http://www.microsoft.com/japan/windows/products/winfamily/ie/default.mspx" target="_blank">IE</a>、<a href="http://www.fenrir.co.jp/sleipnir/" target="_blank">Sleipnir</a>、<a href="http://mozilla.jp/firefox/" target="_blank">Firefox</a>、<a href="http://www.lunascape.jp/" target="_blank">Lunascape</a>（WebKit時以外）です。<br />
<br />
デザイン的にも、これを出させない為にCSSを使ってみましょう。<br />
<br />
話しはそれますが、画像の枠線を消すのは簡単ですよね。<br />
CSSに以下のコードを付けるだけです。<br />
<br />
<strong>CSS</strong><br />
<pre><code>img {
&nbsp;&nbsp;border: none;
}</code></pre>
<br />
これをどっかに書いておくだけで、サイト内の画像の枠線が全て消えます。<br />
<br />
で、問題のリンク破線を消す方法です。<br />
通常、以下の様に破線が出ます。（HOMEをクリックした時）<br />
<img src="http://kome-suki.net/wp-content/uploads/2009/05/link_2.jpg" alt="リンク" title="リンク" width="400" height="150" class="pict" />
<br />
<br />
この破線を消すのは、CSSに以下のコードを書きます。<br />
<br />
<strong>CSS</strong><br />
<pre><code>a:focus {
&nbsp;&nbsp;outline: none;
}</code></pre>
<br />
はっはっはー、超簡単だぜー！<br />
・・・と思ったのも束の間、このコードFirefoxには効いてもIEには全く効かないコード。<br />
ちなみにSleipnirやLunascape（WebKit以外）にも効きません。<br />
なん・・・だと・・・？<br />
<br />
少々手間ですが、全てのブラウザで破線を消そうと思ったら、1つ1つのリンクに以下のJavaScriptのコードを足せば消せます。<br />
<br />
<strong>HTML</strong><br />
<pre><code>&lt;a href="URL" <span class="text_red">onFocus="if(this.blur)this.blur()</span>"&gt;リンク&lt;/a&gt;</code></pre>
<br />
一々全てのコードに貼る手間を考えると、どっちでも良いやーってな気持ちになります。<br />
でもまぁ、ヘッダー部のメニューとかだけにするなら便利かな。<br />
</p>
]]></content:encoded>
			<wfw:commentRss>http://kome-suki.net/archives/4340/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>IEでページが真っ白になる現象の解決方法</title>
		<link>http://kome-suki.net/archives/3801</link>
		<comments>http://kome-suki.net/archives/3801#comments</comments>
		<pubDate>Tue, 03 Mar 2009 17:33:05 +0000</pubDate>
		<dc:creator>くーさん</dc:creator>
				<category><![CDATA[インターネット]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[IE]]></category>

		<guid isPermaLink="false">http://kome-suki.net/?p=3801</guid>
		<description><![CDATA[IEで一部のページが真っ白になる現象があるようです。
『米が好き』でも、『LINK LIST』と『BOOKMARK』のページがそうだって事は先日知りました。
普段Firefoxなもんで、あまりIEのチェックはしてなかっ [...]]]></description>
			<content:encoded><![CDATA[<p>
<img src="http://kome-suki.net/wp-content/uploads/2008/12/ie_1.gif" alt="Internet Explorer" title="Internet Explorer" width="150" height="150" class="entry_thumb" />IEで一部のページが真っ白になる現象があるようです。<br />
『米が好き』でも、『LINK LIST』と『BOOKMARK』のページがそうだって事は先日知りました。<br />
普段Firefoxなもんで、あまりIEのチェックはしてなかったんですよね。<br />
でも最初は表示されてたと思ったんだけど…？<br />
<br />
無事解決出来たので、その経緯を載せておきます。<br />
<span id="more-3801"></span><br class="clear" /><br />
まず最初に見つけた解決方法は、<strong>『metaタグでcharsetの定義を正しく記述し、titleタグはcharsetの定義の後に記述』</strong>でした。<br />
<br />
要するに<br />
<pre><code><strong>○正しい</strong>
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
&lt;title&gt;米が好き&lt;/title&gt;
<strong>×誤り</strong>
&lt;title&gt;米が好き&lt;/title&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;</code></pre>
って事ですね。<br />
しかしこれはWordPressのHeader.phpではデフォルトでそうなっております。<br />
<br />
んーこれじゃないと更に探して見つけた結果、<strong>『親要素のブロックに背景設定されていると、その中にfloatを使った際表示されない』</strong>って事でした。<br />
ゲエェェェェェ・・・、マジデエェェェェェ・・・。<br />
<br />
しかし、回避方法はあります。<br />
親要素のブロックに幅（width）を入れるとちゃんと表示されるようです。<br />
<br />
要するに<br />
<pre><code>&lt;div style="background:#fff;"&gt;
&nbsp;&nbsp;&lt;div style="float:left; width:250px;"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;左側の表示項目
&nbsp;&nbsp;&lt;/div&gt;
&nbsp;&nbsp;&lt;div style="float:right; width:250px;"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;右側の表示項目
&nbsp;&nbsp;&lt;/div&gt;
&lt;/div&gt;
&lt;div style="clear:both;"&gt;&lt;/div&gt;</code></pre>
これじゃダメって事で、解決後が以下。<br />
<pre><code>&lt;div style="background:#fff; <span class="text_red">width:500px;"</span>&gt;
&nbsp;&nbsp;&lt;div style="float:left; width:250px;"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;左側の表示項目
&nbsp;&nbsp;&lt;/div&gt;
&nbsp;&nbsp;&lt;div style="float:right; width:250px;"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;右側の表示項目
&nbsp;&nbsp;&lt;/div&gt;
&lt;/div&gt;
&lt;div style="clear:both;"&gt;&lt;/div&gt;</code></pre>
って事ですね。<br />
<br />
▼解決前の表示<br />
<img src="http://kome-suki.net/wp-content/uploads/2009/03/ie_7.jpg" alt="Internet Explorer" title="Internet Explorer" width="400" height="353" class="pict" />
<br />
<br />
▼解決後の表示<br />
<img src="http://kome-suki.net/wp-content/uploads/2009/03/ie_8.jpg" alt="Internet Explorer" title="Internet Explorer" width="400" height="353" class="pict" />
<br />
<br />
<br />
相変わらず<strong>IE特有のバグ</strong>らしいです。<br />
なもんで、お決まりのセリフを言って締めようと思います。<br />
<br />
<strong class="text_red" style="font-size:16px;">IEのアホーーー！！</strong><br />
<br />
<br />
<div class="entry_link">なないろブログ<br />
<a href="http://www.nanairoweb.com/blog/2007/05/ie6%E3%81%A7%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%8C%E7%9C%9F%E3%81%A3%E7%99%BD.html" target="_blank">IE6でページが真っ白</a></div></p>
]]></content:encoded>
			<wfw:commentRss>http://kome-suki.net/archives/3801/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>ブログでAAを貼る時の注意点</title>
		<link>http://kome-suki.net/archives/3730</link>
		<comments>http://kome-suki.net/archives/3730#comments</comments>
		<pubDate>Sat, 28 Feb 2009 18:49:33 +0000</pubDate>
		<dc:creator>くーさん</dc:creator>
				<category><![CDATA[インターネット]]></category>
		<category><![CDATA[AA]]></category>
		<category><![CDATA[CSS]]></category>

		<guid isPermaLink="false">http://kome-suki.net/?p=3730</guid>
		<description><![CDATA[ブログなどでAA（アスキー・アート）を貼る時には、ちょっとした注意点が必要です。

それは、フォント指定しないとAAがズレてしまう点。

大概のAAは『ＭＳ Ｐゴシック』で作られている為、その他のフォントをブログに設定 [...]]]></description>
			<content:encoded><![CDATA[<p>
<img src="http://kome-suki.net/wp-content/uploads/2009/03/aa_1.gif" alt="やる夫" title="やる夫" width="150" height="150" class="entry_thumb" />ブログなどでAA（アスキー・アート）を貼る時には、ちょっとした注意点が必要です。<br />
<br />
それは、フォント指定しないとAAがズレてしまう点。<br />
<br />
大概のAAは『ＭＳ Ｐゴシック』で作られている為、その他のフォントをブログに設定しているとAAがズレて表示されてしまい、何が何だか分からないAAになってしまいます。<br />
以下は実際にズレたAA画像やその対処法など。<br />
<span id="more-3730"></span><br class="clear" /><br />
私はブラウザは『メイリオ』で設定しており、ブログのbodyには『Lucida Grande, Verdana, Arial, Sans-Serif』をCSSで指定しています。<br />
そのまま表示すると以下のようになります。<br />
<img src="http://kome-suki.net/wp-content/uploads/2009/03/aa_2.gif" alt="AA - 神龍" title="AA - 神龍" width="400" height="190" class="pict" />
<br />
<br />
これをAAに対してだけフォント指定すると、以下のようになります。<br />
<img src="http://kome-suki.net/wp-content/uploads/2009/03/aa_3.gif" alt="AA - 神龍" title="AA - 神龍" width="400" height="150" class="pict" />
<br />
表示の指定する方法は、CSSで設定しています。<br />
フォントの大きさによって『line-height』（行間隔）も指定しておくと、キレイに表示されます。<br />
<strong>style.css</strong><br />
<pre><code>.aa {
&nbsp;&nbsp;font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
&nbsp;&nbsp;line-height: 14px;
}</code></pre>
<br />
<strong>HTML</strong><br />
<pre><code><span class="text_red">&lt;span class="aa"&gt;</span>＝─‐＼＼‐　 ／─'''''ニ二＼''' |レﾚゝゝ､＼
￣く&lt;&lt;く &gt;, ﾞ､／＜三三二＼￣＼ゝゝゝゝゝゝﾞ''ヽ､
＜&lt;&lt;&lt;〈__入 ﾞ､く彡三三三二ヽくゝ＼メメメゝ､＿ゝ､＼
くく&lt;&lt;&lt;&lt;&lt;&lt; ﾞ､ ﾞ､ミ三三二ニ─ゝゝゝゝゝ,,,,,,,､ '（ ﾞ''ヽ､ヽ､
くくくくくく彡‐ヽ ﾞ､ﾐ三三二ニ'''くくゝゝ＿ゝゝ､＼＼＿,&gt;」ﾉ,
く く く く く 彡ﾞ､ﾞ､三三二ニ‐くゝ､／ ,,,,,,,,メメゝヽ''''"ゝゝﾞ丶､
二─二二彡彡､ﾞ､三三二==くメゝ／　　 ﾞ'ヽ､メゝゝゝゝゝゝゝﾞ''ヽ-､,,,,,,＿
‐'''"￣ ＼彡彡ﾐ､ﾞ､三二=''"く&lt;メ/::　　　　　　＼''-､メメゝゝゝ＿ゝ ､ ,,､ヽヽ
､　　,,,,-　ﾞ彡／/ヽﾞ､三二＝ くゝ/:::....　　　　　　＼&gt;∠ﾚ-,-‐ニ二メヽ''ヽ ﾉ
　ﾞヽ､,,,-‐//_//／,,､ﾞ､三二=　　ﾞ､　""'''　　　　　　ヽ＞／／ﾚﾚヽ,,＿__　 /
-,,,,,,-‐'''"""/////,,ヽ ﾞ､三二─　ﾞヽ.　　　　　　　　 ／／-ﾍﾍ,､ ﾚレレﾚノ　　さあ願いを言え
'"　　　　　　,ｌ|"////ﾉ,､＼彡'''''‐-ニ,､　::::::::::,,,,,,,,／／　　　　ﾞヽﾌ/|/| ﾚ' 　どんな願いも聞き流してやろう。<span class="text_red">&lt;/span&gt;</span></code></pre>
<br />
実際の表示。<br />
<div class="entry_box"><span class="aa">＝─‐＼＼‐　 ／─&#8221;&#8221;&#8217;ニ二＼&#8221;&#8217; |レﾚゝゝ､＼<br />
￣く&lt;&lt;く &gt;, ﾞ､／＜三三二＼￣＼ゝゝゝゝゝゝﾞ&#8221;ヽ､<br />
＜&lt;&lt;&lt;〈__入 ﾞ､く彡三三三二ヽくゝ＼メメメゝ､＿ゝ､＼<br />
くく&lt;&lt;&lt;&lt;&lt;&lt; ﾞ､ ﾞ､ミ三三二ニ─ゝゝゝゝゝ,,,,,,,､ &#8216;（ ﾞ&#8221;ヽ､ヽ､<br />
くくくくくく彡‐ヽ ﾞ､ﾐ三三二ニ&#8221;&#8217;くくゝゝ＿ゝゝ､＼＼＿,&gt;」ﾉ,<br />
く く く く く 彡ﾞ､ﾞ､三三二ニ‐くゝ､／ ,,,,,,,,メメゝヽ&#8221;&#8221;&#8221;ゝゝﾞ丶､<br />
二─二二彡彡､ﾞ､三三二==くメゝ／　　 ﾞ&#8217;ヽ､メゝゝゝゝゝゝゝﾞ&#8221;ヽ-､,,,,,,＿<br />
‐&#8221;&#8217;&#8221;￣ ＼彡彡ﾐ､ﾞ､三二=&#8221;&#8221;く&lt;メ/::　　　　　　＼&#8221;-､メメゝゝゝ＿ゝ ､ ,,､ヽヽ<br />
､　　,,,,-　ﾞ彡／/ヽﾞ､三二＝ くゝ/:::&#8230;.　　　　　　＼&gt;∠ﾚ-,-‐ニ二メヽ&#8221;ヽ ﾉ<br />
　ﾞヽ､,,,-‐//_//／,,､ﾞ､三二=　　ﾞ､　&#8221;"&#8221;&#8217;　　　　　　ヽ＞／／ﾚﾚヽ,,＿__　 /<br />
-,,,,,,-‐&#8221;&#8217;&#8221;"&#8221;/////,,ヽ ﾞ､三二─　ﾞヽ.　　　　　　　　 ／／-ﾍﾍ,､ ﾚレレﾚノ　　さあ願いを言え<br />
&#8216;&#8221;　　　　　　,ｌ|&#8221;////ﾉ,､＼彡&#8221;&#8221;&#8217;‐-ニ,､　::::::::::,,,,,,,,／／　　　　ﾞヽﾌ/|/| ﾚ&#8217; 　どんな願いも聞き流してやろう。</span></div>
<br />
<br />
<div class="entry_link">カナ速<br />
<a href="http://kanasoku.blog82.fc2.com/blog-entry-9805.html" target="_blank">カ　ワ　イ　イ　A　A　張　っ　て</a></div></p>
]]></content:encoded>
			<wfw:commentRss>http://kome-suki.net/archives/3730/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>【CSS】文字の上に画像を乗せる方法</title>
		<link>http://kome-suki.net/archives/2516</link>
		<comments>http://kome-suki.net/archives/2516#comments</comments>
		<pubDate>Tue, 13 Jan 2009 15:21:13 +0000</pubDate>
		<dc:creator>くーさん</dc:creator>
				<category><![CDATA[インターネット]]></category>
		<category><![CDATA[CSS]]></category>

		<guid isPermaLink="false">http://kome-suki.net/?p=2516</guid>
		<description><![CDATA[CSSで文字の上に画像を乗せて文字を隠す方法があります。
完全に文字は消えて画像が表示されるし、もし画像が表示されない場合は文字が表示される。
CSSの『position』を使えば簡単に出来ます。
勘の良い人なら気付い [...]]]></description>
			<content:encoded><![CDATA[<p>
<img src="http://kome-suki.net/wp-content/uploads/2009/01/css_position_1.gif" alt="CSS position" title="CSS position" width="150" height="150" class="entry_thumb" />CSSで文字の上に画像を乗せて文字を隠す方法があります。<br />
完全に文字は消えて画像が表示されるし、もし画像が表示されない場合は文字が表示される。<br />
CSSの『position』を使えば簡単に出来ます。<br />
勘の良い人なら気付いたかもしれませんね。<br />
<br />
例として、300&#215;100の画像を用意します。<br />
<br />
<strong>sample.jpg</strong><br />
<img src="http://kome-suki.net/wp-content/uploads/2009/01/css_btn_1.jpg" alt="Cascading Style Sheets" title="Cascading Style Sheets" width="300" height="100" class="pict" />
<br />
HTMLとCSSの記述は以下。<br />
<br />
<strong>sample.html</strong><br />
<pre><code>&lt;h2&gt;&lt;span&gt;&lt;/span&gt;Cascading Style Sheets&lt;/h2&gt;</code></pre>
<br />
<strong>sample.css</strong><br />
<pre><code>h2 {
&nbsp;&nbsp;position: relative;
&nbsp;&nbsp;width: 300px;
&nbsp;&nbsp;height: 100px;
&nbsp;&nbsp;overflow: hidden;
}

h2 span {
&nbsp;&nbsp;position: absolute;
&nbsp;&nbsp;top: 0;
&nbsp;&nbsp;left: 0;
&nbsp;&nbsp;width: 300px;
&nbsp;&nbsp;height: 100px;
&nbsp;&nbsp;background: url(sample.jpg) no-repeat 0 0;
}</code></pre>
<br />
h2に『position:relative』で幅（width）と高さ（height）を指定し、h2に対してspanの『position:absolute』のtop:0、left:0で位置決めをする。<br />
これだけです。<br />
rerative＝親<br />
absolute＝子<br />
と言う覚え方をすると、覚えやすいかも。<br />
<br />
以前までは『text-indent:-9999px』等で文字を外に表示する方法が使われていましたが、最近はコレを使用すると検索エンジンとかで悪質サイトと見られるような噂が…。<br />
<br />
上記のやり方ですと、もしサーバーとかの問題で画像が表示されなくても、文字だけは残るので一安心ってな所です。<br />
その場合に備えて、h2に『font-size』等を付けておくと良いかもしれません。<br />
後、『margin』、『padding』等は上記で省いています。<br />
<br />
『position』は覚えると中々使えるので、最近は結構頻繁に使ってます。<br />
只、高さ（height）だけは指定しておかないと、後に続く表示が変になってしまうので注意が必要です。<br />
<br />
ちなみに、このサイトのサイドバーの各タイトルはこの方法で表示しています。</p>
]]></content:encoded>
			<wfw:commentRss>http://kome-suki.net/archives/2516/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>デザイン変更時に陥ったIEの罠</title>
		<link>http://kome-suki.net/archives/1944</link>
		<comments>http://kome-suki.net/archives/1944#comments</comments>
		<pubDate>Thu, 25 Dec 2008 19:42:22 +0000</pubDate>
		<dc:creator>くーさん</dc:creator>
				<category><![CDATA[インターネット]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[IE]]></category>
		<category><![CDATA[Web creators]]></category>
		<category><![CDATA[全般]]></category>

		<guid isPermaLink="false">http://kome-suki.net/?p=1944</guid>
		<description><![CDATA[3カラムのデザインに飽きてきたので、2カラムに変えました。
ちなみに、今のテーマはデフォルトを使ってカスタマイズしてます。

いつもはFirefox使ってるんで、ついついIEでの確認を怠りがちですが、ある程度出来上がっ [...]]]></description>
			<content:encoded><![CDATA[<p>
<img src="http://kome-suki.net/wp-content/uploads/2008/12/ie_1.gif" alt="Internet Explorer" title="Internet Explorer" width="150" height="150" class="entry_thumb" />3カラムのデザインに飽きてきたので、2カラムに変えました。<br />
ちなみに、今のテーマはデフォルトを使ってカスタマイズしてます。<br />
<br />
いつもはFirefox使ってるんで、ついついIEでの確認を怠りがちですが、ある程度出来上がった状態でIE表示チェックしてみると何故かデザインがおかしい…。<br />
<br />
CSSをチェックしても、何をどーしてもバックグラウンドのズレが直らない。<br />
何でやー！？　Firefoxでは正常に表示されてるのにー！<br />
ってな事で、昔見た雑誌に何か書いてあった事を思い出して読み返してみました。<br />
<br />
要は、『CSSでfloatした方向と同じ側にmargin指定すると、IEではmarginが倍になってしまうThe IE Double Float-Margin Bugと言う、IE特有のバグ』らしい。<br />
<strong>うおぉぉぉ、IEのあほーーーーー！ｗ</strong><br />
<br />
結局、↓ の場合は、margin-leftが倍の20pxになるって事。<br />
<pre><code>div.left_float {
&nbsp;&nbsp;float: left;
&nbsp;&nbsp;width: 300px;
&nbsp;&nbsp;margin-left: 10px;
}</code></pre>
これをIEでも正常に表示させるのは、『display: inline;』を使用すると直る。<br />
↓ のように、displayを追加。<br />
<pre><code>div.left_float {
&nbsp;&nbsp;float: left;
&nbsp;&nbsp;width: 300px;
&nbsp;&nbsp;margin-left: 10px;
&nbsp;&nbsp;<span class="text_red">display: inline;</span>
}</code></pre>
<br />
本来、float要素に対してこの指定は無視されるけど、IEのバグ現象を防ぐ力を持っているらしいです。<br />
解決方法がある事は分かったが、もう一度言おう。<br />
<strong>IEのあほーーーーー！ｗ</strong><br />
<br />
買ってて良かった、Web creators。<br />
<br />
<iframe src="http://rcm-jp.amazon.co.jp/e/cm?t=kome-22&#038;o=9&#038;p=8&#038;l=as1&#038;asins=B001136XBK&#038;md=1X69VDGQCMF7Z30FM082&#038;fc1=333333&#038;IS2=1&#038;lt1=_blank&#038;m=amazon&#038;lc1=0000CC&#038;bc1=FFFFFF&#038;bg1=FFFFFF&#038;f=ifr" style="width:120px;height:240px;" scrolling="no" marginwidth="0" marginheight="0" frameborder="0"></iframe></p>
]]></content:encoded>
			<wfw:commentRss>http://kome-suki.net/archives/1944/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Lightbox を導入してみた</title>
		<link>http://kome-suki.net/archives/1596</link>
		<comments>http://kome-suki.net/archives/1596#comments</comments>
		<pubDate>Fri, 12 Dec 2008 17:06:21 +0000</pubDate>
		<dc:creator>くーさん</dc:creator>
				<category><![CDATA[インターネット]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[JavaScript]]></category>

		<guid isPermaLink="false">http://kome-suki.net/?p=1596</guid>
		<description><![CDATA[エントリー内に画像を貼った時、大きい画像で表示さすのに 『Lightbox』 に対応させました。
正確に言えば、『Lightbox』 を元にした 『Lytebox』 。

色んなサイト見た事ある人は分かると思いますが、 [...]]]></description>
			<content:encoded><![CDATA[<p>
<img src="http://kome-suki.net/wp-content/uploads/2008/12/lytebox.jpg" alt="Lytebox" title="Lytebox" width="150" height="150" class="entry_thumb" />エントリー内に画像を貼った時、大きい画像で表示さすのに 『Lightbox』 に対応させました。<br />
正確に言えば、『Lightbox』 を元にした 『<a href="http://www.dolem.com/lytebox/" target="_blank">Lytebox</a>』 。<br />
<br />
色んなサイト見た事ある人は分かると思いますが、画像をクリックした時に 「ぶわぁ～」 っと表示されるアレですアレ。<br />
<span id="more-1596"></span><br class="clear" /><br />
論より証拠って事で、下の画像をクリックしてみてください。<br />
<a href="http://kome-suki.net/wp-content/uploads/2008/12/20081212_1.jpg" rel="lytebox" title="実写版エヴァ機"><img src="http://kome-suki.net/wp-content/uploads/2008/12/20081212_1_s.jpg" alt="実写版エヴァ機" title="実写版エヴァ機" width="110" height="110" class="pict" /></a><br />
ほら、「ぶわぁ～」 って表示されたでしょ？<br />
<br />
従来の 『Lightbox』 だと表示されるまでに時間がかかる。<br />
以前からそれがちょっとネックになってて導入を躊躇っていたんですが、表示速いのを見つけたんで導入しました。<br />
これだとストレスにならずに済みますね。<br />
<br />
導入方法は至って簡単。<br />
以下のサイトから 『lytebox_v***.zip』 （***はバージョンNo） をダウンロード。<br />
解凍されたフォルダ 『lytebox_v***』 の 『_v***』 を消して 『lytebox』 にする。<br />
後はサイト内に 『ｌytebox』 フォルダをコピーするだけです。<br />
（トップフォルダ内がお勧め？）<br />
<br />
<div class="entry_link"><a href="http://www.dolem.com/lytebox/" target="_blank">Lytebox &#8211; Home</a></div>
<br />
次に HTML を編集。<br />
&lt;head&gt;～&lt;/head&gt;内に、以下のコードを付け加えましょう。<br />
<pre><code>&lt;script type="text/javascript" language="javascript" src="サイトアドレス/lytebox/lytebox.js"&gt;&lt;/script&gt;
&lt;link rel="stylesheet" href="サイトアドレス/lytebox/lytebox.css" type="text/css" media="screen" /&gt;</code></pre>
WordPress だと、テーマ内の 『header.php』 。<br />
これで下準備は完了。<br />
<br />
後は画像を貼ってる場所にリンクを貼るだけです。<br />
（大きい画像とサムネ （小さい画像） が必要です。）<br />
上の例の画像で言うと、以下のコードになります。<br />
<pre><code>&lt;a href="大きい画像アドレス" <span class="text_red">rel="lytebox"</span> title="画像タイトル"&gt;&lt;img src="サムネ画像アドレス" alt="画像タイトル" width="110" height="110" /&gt;&lt;/a&gt;</code></pre>
A タグに 『rel=&#8221;lytebox&#8221;』 を入れればOK。<br />
<br />
一つ注意しなければいけないのが、ページが完全に読み込まれないと、Lytebox （Lightbox） は作動しません。<br />
只単に別ページで大きい画像が表示されるだけです。<br />
<br />
画像が何枚もあって、続けて表示させたい場合は以下のコード。<br />
<pre><code>&lt;a href="大きい画像アドレス" <span class="text_red">rel="lytebox[vacation]"</span> title="画像タイトル"&gt;&lt;img src="サムネ画像アドレス" alt="画像タイトル" width="110" height="110" /&gt;&lt;/a&gt;</code></pre>
『rel=&#8221;lytebox&#8221;』 に 『 [vacation] 』 が付きます。<br />
<br />
このスクリプトが気に入らない人は、他にも色々あるので自分好みのを探して導入してみてはいかがでしょう。<br />
<br />
<br />
<div class="entry_link">DesignWalker<br />
<a href="http://www.designwalker.com/2008/01/lightbox.html" target="_blank">Lightboxスクリプトいろいろ</a></div></p>
]]></content:encoded>
			<wfw:commentRss>http://kome-suki.net/archives/1596/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

