<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">

–制作メモ

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

–制作メモ

<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

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

–制作メモ

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 様（こちらを参考にした方が賢い）

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

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

–制作メモ

スタイルシートを圧縮できるWebアプリ。
結構の圧縮率！

–制作メモ

margin: 20px !important;
margin: 10px; /* for only IE6 style */

通常、importantを指定したスタイルが適用されるが、
どうやら IE6 の場合、同じセレクタ内の場合はimportantで書かれていても、そのあとに書かれた同じスタイルが適用されてしまう。

–制作メモ

MooTools JavaScript Framework を使ったAjaxを紹介。

SqueezeBox – Expandable Lightbox (v1.1)

おなじみAppleのサイトで使われていたポップアップウィンドウです。
利点は、通常のポップアップではないので、ポップアップブロックされる心配がないこと。

Lightbox2.0と違う点は、画像だけでないく、htmlやform、YouTube Flashを表示できます。
iFrameを使えば何でも表示できます。

使い方は簡単。

まず、上記SqueezeBox – Expandable Lightbox (v1.1)のページから下記ファイルをダウンロードします。

• MooTools JavaScript Framework
  ここで必要なコードは「Element.Dimensions」「Fx.Tween」「Fx.Morph」「Selectors」「JSON」「DomReady (facultative)」※うまく動かない場合はすべてチェックするとうまくいきます。Download Optionsでは「YUI Compressor」を選択しましょう。最高圧縮ファイルにしてくれます。
• SqueezeBox.rar (Package with source and assets)
  これは、「SqueezeBox.js」「SqueezeBox.css」と画像パーツが入ったパッケージ。rarはちょっと特殊な圧縮ファイルなので、rarが解凍できる解凍ファイルを探してみてください。

あとは、下記の方法を参考にしてやってみよう。

• Ajax Requests htmlを表示できるタイプ
• From Elements フォームを表示できるタイプ
• IFrame Content iFrameを使って表示するタイプ（おすすめ）
• Single Images Lightboxのように画像を表示するタイプ
• Youtube Flash You Tube やFlashを表示させるタイプ

MooToolsは色々できるね〜。
面白い。
サンプルを紹介しているサイト発見。こちら

–制作メモ

画像のマウスオーバーをきもちよ〜くする方法。

サンプルはBOOMBOOM-BASHのGllary

フワッとした感じがたまらない★

必要なものは、jQueryとちょっとしたJavascriptだけ。

まず、jQueryは、Google AJAX Libraries APIを使うと便利。

AJAX Libraries API についてはこちら

今回使うjQueryのURLは「http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js」

これをhead内に書く。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2/jquery.min.js"></script>

ちょっとしたJavascriptはこれ

$(document).ready(function() {
  $(".gallery a img")
  .hover(
    function() {
      $(this).fadeTo(200, 0.5);
    },
    function() {
      $(this).fadeTo(500, 1.0);
    }
  );
});

↑の表記だと改行、余白がうまくとれないので、サンプルを用意しました。

.hover(
function() {
    $(this).fadeTo(200, 0.5);

これは、オンマウス時200ミリ秒の速度で、透明度50%になるという意味

function() {
     $(this).fadeTo(500, 1.0);

これは、マウスアウト時500ミリ秒の速度で、透明度100%になるという意味
ちなみに、0にすると、透明になる。

– 制作メモ

CSSはこう

html,body {
height:100%;
}
html {
overflow-y:scroll;
}
div#footer {
position:fixed;
bottom:0;
width:100%;
}

/* IE6 */

* html,
* html body {
overflow-y:hidden;
}
* html div#main {
height:100%;
overflow-y:scroll;
}
* html div#footer {
position:absolute;
bottom: expression(this.parentNode.clientHeight % 2 == 0 ? 0 : -1);
}

IE6対策としてハックを使用。*htmlを頭に付けるとIE6のみにスタイルを当てられる。

htmlはこう

<body>
  <div id="main">
    中身。。。。。
    <div id="footer">
      フッター部分
    </div>
  </div>
</body> 

以上

–制作メモ