KATALog

デバイスの横幅480pxで振り分ける方法がスマートかと。
デバイス画面サイズ480px以下はsmart.cssを読み込み、デバイス画面サイズ481px以上はstyle.cssを読み込む。

<link rel="stylesheet" type="text/css" media="only screen and (max-device-width:480px)" href="css/smart.css">
<link rel="stylesheet" type="text/css" media="screen and (min-device-width:481px)" href="css/style.css">

さらに、以前紹介した「スマートフォンviewport の指定」を組み合わせると綺麗に表示される。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

–制作メモ

iPhoneでPCサイトを見る場合、文字を見やすくするために、自動的に文字が少し拡大します。
でも逆に、レイアウトが崩れてしまい、見にくくなってしまうことも。
そこで、CSS3を使って制御しちゃいます。

#news {-webkit-text-size-adjust:none;}

–制作メモ

iPhone・Android 向けのサイト制作をする際に meta タグに viewport を指定して、デバイスの表示領域に合わせたページデザインを行うことができる。

<meta name="viewport" content="パラメータ=値, パラメータ=値, パラメータ=値">

●パラメータと値

width

ビューポート（可視領域）の幅（ピクセル値）。
デフォルト値は 980。
200 から 10000 までの範囲を指定できる。

height

ビューポートの高さ（ピクセル値）。
デフォルト値は width の値とデバイスのアスペクト比から算出される。
233 から 10000 までの範囲を指定できる。

initial-scale

ページが可視領域内にフィットするように計算された値がデフォルト値となる。
minimum-scale から maximum-scale によって定義された範囲の値が指定できる。
最初にページが表示されるビューポートの値のみが指定可能。
user-scalable に no を指定していなければズーム操作が可能となる。
ズームの範囲は minimum-scale と maximum-scale の範囲内に制限される。

minimum-scale

ビューポートの最小 scale 値。
デフォルト値は 0.25。
0 から 10.0 までの範囲を指定できる。

maximum-scale

ビューポートの最大 scale 値。
デフォルト値は 1.6。
0 から 10.0 までの範囲を指定できる。

user-scalable

ユーザーがズーム操作できるかどうかを yes と no で指定する。
デフォルト値は yes。
no を指定するとテキスト入力フィールド内でのスクロールも制限される。

device-width

デバイスの幅（ピクセル値）。

device-height

デバイスの高さ（ピクセル値）。

–制作メモ

FeedBurner の Socialize 機能を使って、
ブログを更新したことをTwitterに表示することができる。

Socialize（Twitter 投稿）機能の設定は、FeedBurner の管理画面「Publicize（集客支援） ＞ Socialize」ページから行える。

Twitter account
Twitter のアカウントを選択。「Add a Twitter Account」ボタンを押して、Twitter の OAuth 認証画面を開き、「Allow（許可する）」ボタンを押す。

Post content
Twitter に流すブログ投稿のフォーマットについて。
「Title only（タイトルのみ）」「Title and Body（タイトルと本文）」「Body only（本文のみ）」から選択可。「Include link（投稿へのリンクを含める）」「Leave room for retweets（リツイート用の余白を残す）」オプションも指定できる。

Hash tags
Twitter に流す際のハッシュタグを、ブログ投稿のカテゴリ（Blogger ならラベル）から読み取ってつける。「Don’t add any hash tags（ハッシュタグをつけない）」「Create hash tags from item categories（投稿のカテゴリーからハッシュタグを作成）」から選択。「Create …」にしている場合は「Use inline hash tags（ハッシュタグを文中で使う）」というオプションも使用可。

Additional text
Tweet に追加する文字列。「beginning of the post（最初に）」「end of the post（最後に）」が選択可。

Item limit
一回の更新で Twitter に投稿するブログ投稿の量。1 ～ 8 が選択可。

Item order
投稿の並べ替えの基準。「publish date（フィード記載の published 値もしくは pubDate 値で）」「their order in the feed（フィード記載順どおり）」から選択。

Keyword filter
キーワードでヒットするものだけ Twitter へ流す。キーワード設定の際は、検索対象を「a category（カテゴリ）」「the title（タイトル）」「the body（本文）」「the whole item（投稿全体）」から選択。

下部にあるSample Item Previewを見ながら設定すると楽ちん。

.

※参考資料：クリボウの Blogger Tips 様（こちらを参考にした方が賢い）

半角円マーク（¥）は、OperaやSafariなど一部のブラウザでバックスラッシュ（＼）で表示されてしまいます。
解決方法は、

＆yen;
＆#165;
（＆は半角にする）

問題は、音声読み上げに対応していないこと。

–制作メモ