WordPressのテーマでiTheme2を使っていると
リキッドレイアウトによる画面幅の伸縮ではみ出す
コンテンツが出てくることがあります。

普通の画像は幅に合わせて自動で縮小表示されますが、
埋め込み型のコンテンツ（動画、広告 etc.）はそういうわけには行きません。

以下に対応するhtmlプログラムを紹介します。

ブラウザ幅でコンテンツを切り替える HTML

こちらのサイト様から
getBrowserWidth() … ブラウザの横幅を取得
のコードをコピーします。

・MY-NOTEBOOK
ブラウザの画面サイズの取得(javascript)
http://osima.jp/blog/js-getBrowserWidth/index.html

---

<script type="text/javascript">
<!--
コード本文
-->
</script>

---

コードをこのように囲みます。

置き場所は＜head＞内（＜body＞内だと動かない場合があります）
これでgetBrowserWidth()に画面幅を定義できます。

あとはコンテンツを表示したい位置に以下を書き込んで下さい。

---

<script type="text/javascript">
<!--
if (getBrowserWidth() < 500 ) {
document.write('ブラウザ幅500未満');
}else{
document.write('ブラウザ幅500以上');
}
-->
</script>

---

サンプルで指定した画面幅の500や
赤字の部分は表示したいものに書き換えてください。
（改行はできないので使えるプログラムは限定されます）
（画面幅の取得は一度しかしないのでＦ５で画面更新して確認）

日記に固定サイズの＜iframe＞などで動画を転載する場合
などに便利ではないでしょうか？

画面幅800で切り替わるサンプルです↓（Ｆ５で更新）

スマートフォンとPCでコンテンツを切り替える HTML

・ホームページ制作会社の雑談
JavascriptでPCとスマホの表示切り替え
http://www.netimpact.co.jp/blog/13174/

こちらのサイト様で説明されている通りです。
私はそのままjavascriptで囲んで使用しています。

---

<script type="text/javascript">
<!--
コード本文
-->
</script>

---

これも日記に動画を転載する場合に便利です。
私の日記内動画コンテンツはこれで切り替えています。

サンプルです↓（スマホとＰＣで見比べないとわかりません）

スマートフォンとPCでコンテンツを切り替える PHP

・Asunaro-net (アスナロネット)
スマートフォン対応ページの作り方(PC/スマートフォン両用)
http://as76.net/prg/smart_p.php

こちらのサイト様で公開されているPHPのコードは
先に紹介したhtml（javascript）より強力で
複雑なPHP、HTMLを切り替えて表示させることができます。
（レンタルサーバーがPHPに対応している必要があります）

・Googleアドセンスなどのアフィリエイト広告

の表示にうってつけですね！
ページを丸ごと切り替えることもできそうです。
「スマートフォンの判定(ユーザーエージェントで判定)」
「HTML部分のデザイン切替」
あたりのコードを使用します。

このブログはこのプログラムを参考にして
スマートフォンとPCで表示を切り替えています。

ただ、Wordpressの日記内でPHPを使えるようにするプラグイン「Exec-PHP」
を使用してこのコードを日記に書き込んでしまうとRSSフィードがエラーで
生成されなくなります。

---

プログラムはそのままでは日記に表示できないので
（プログラムとして動作してしまう）こちらを使わせて頂きました。
・HTML数値文字参照変換
http://ochikochi.com/tool/character/

トップ画像はこちらから拝借いたしました。
・季節の写真
http://flower.yodoyabashift.com

Google AdSense

---