地上に降りた最後の忍者

■iFrame内のコンテンツに応じて、iFrameの高さを取得してくれる。
★Auto iFrame Height
・説明ページ（英語）
http://www.lost-in-code.com/programming/jquery-auto-iframe-height/

【手順】
１．jQueryファイルを落としてきます。
http://jquery.com/

２．jQueryプラグインのautoHeightを落としてきます。
http://lib.mobius.tw/jquery/myplugin/iframe_autoHeight/api.htm

３．JSファイルをリンク
script type="text/javascript" src="jquery.js">
script type="text/javascript" src="jquery.autoheight.js">

４．iFrameにクラス名を記述
iframe class="autoHeight" scrolling="auto" frameborder="0" src="読み込み先URL">

※上記ソースの前カッコ（<）は取ってますのでお気をつけて。

• AJAX・JavaScript | 
• URL | 

よく、サイト上の検索窓に
薄い文字（または背景色付で）で「サイト内検索」なんて書かれてて
インプットエリアを選択すると
その文字が消えるって技、見かけませんか？

今回はその技の紹介！

http://hajimetedesign.blog77.fc2.com/blog-entry-33.html

こちらを参考に実行させていただきました。

onfocus　ってのがフォーカスされた状態、
インプットエリアにカーソルを置いている状態です。

onblur　が、フォーカス状態からカーソルが離れた状態です。

で、この1行をコピペすることと、もうひとつ、
CSSにもデフォルトとなる背景色、文字色、サイズなどを
記述するのをお忘れなくっ

以上、オンフォーカス忍者でした

• AJAX・JavaScript | 
• URL | 

サイト上にメールアドレスを掲載する場合、
そのまま載せてしまうと、ご存知のように迷惑メールの山が来てしまう恐れがあります
それを回避するメジャーなやり方のご紹介。

HTML上に掲載するメールアドレスをエンティティ化します。
http://ranking.prb.jp/ent.shtml
↑上記サイトで
メールアドレスを入力すると
何やら数字やら何やらの文字が出てきたと思いますが、
コレをソース上にはりつけるだけでOK

何年か前からあるやり方なので
もう対応しちゃってるかもしれませんが、、。
今のところはコレで対応

• XHTML | 
• URL | 

ポップアップウィンドウ、よく使うけど
メニューバー表示させるのって何、追加するんだったかな、、
と毎回調べてしまうのでメモ代わりに記載します。

＜a href="test.html" onclick=
"window.open('test.html','winName','scrollbars=yes,resizable=yes,
width=825,height=580'); return false;">

メニューバーを表示
　　menubar=yes
ツールバーを表示
　　toolbar=yes
アドレスバーを表示
　　location=yes
スクロールバーを表示
　　scrollbars=yes

以上

• AJAX・JavaScript | 
• URL | 

よく注意書きなどで

※こんな感じの注意書きがありますよね。
でも、この二行目の左側をどうにか空白にしてそろえられないかな

※たとえば
　 こんな感じで。

って思ったことないですか？
これ、CSSで簡単に設定できるのですが、いつもどうやったっけ、、。と迷うのでメモメモします。

この文章をまずdivなどで（pでもOK）くくります。

＜div class="attention">
※こんな感じの注意書きがありますよね。＜br />
でも、この二行目の左側をどうにか空白にしてそろえられないかな
＜/div>

で、CSSに
div.attention {
padding-left:1em;
text-indent:-1em;
}

と記述。
要するに左の余白を1文字分とって、
1行目だけテキストのインデントをマイナス1文字分にする、と
2行目は左に余白1文字分空いたままになる。
て感じ

ではでは

• CSS | 
• URL | 

テスト環境にて構築していたMT4を
本番環境へ移行する際のTIPSです。

ブログ記事のみだったら
「ツール」-「エクスポート」　
でブログを選択するだけでテキストファイルが吐き出され、
本番の方で「ツール」-「インポート」するだけでよいのですが、
せっかくカスタマイズしたテンプレートや
ブログ記事内の画像などが移行してくれません

で、調べたところ
http://hasegawahiroshi.jp/2008/03/24/mt4/
上記サイトですばらしい発見！

MT4から「バックアップ」、そして「復元」という機能がついたらしい！
この機能を使えば、構築した環境まるごと
本番へ移行が可能です

やり方は簡単で、
「システムメニュー」-「ツール」-「バックアップ」

そうするとこのような画面が出てきますので
ブログを選択、圧縮の仕方を選択して作成するのみ！

次に、本番環境でインストール済みのMTを開きます。
ここでも
「システムメニュー」-「ツール」、そして「復元」を選び
先ほどの圧縮ファイルを参照、復元ボタンを押します。
成功したら、ファイルパスなどを本番用に書き換えて
完了！
※ただし、FTPで直接アップしているファイルに関しては、移行されないので再アップを！
※MTのverが違うとうまく出来ないようです。。

こんな便利な機能知りませんでした。。
これで本番へうまく移行が出来そうです

• MovableType | 
• URL | 

Google Analyticsを導入する際に、
複数のドメインをまたぐケースが出てきました。
その場合の対応策を↓

http://www.google.co.jp/support/googleanalytics/bin/answer.py?answer=55503

まずは上記に記載してあるトラッキングコードをbodyの直前に挿入。

次に、別ドメインに飛ぶリンク箇所に
a href="リンク先URL" onclick="pageTracker._link(this.href); return false;"

とするだけで、とりあえず完了！

ですが、
そのリンクが別ウィンドウで開くように設定している場合、
実は別の書き方が必要なようです。
http://q.hatena.ne.jp/1229491274
こちらを参考にさせていただきました。

a href="リンク先URL" onclick="window.open(pageTracker._getLinkerUrl(this.href),'_blank'); return false;"

とするとブランクで飛びます！
もしJavascriptが切れている場合もブランクを実装させたいのであれば
target="_blank"
を記載したままにするとよいようです。

ご参考までに

• SEO | 
• URL | 

こんにちは

今日は「プルダウンでテーブル（表）の表示を切り替える」のまっき♪です！

1ページに内容を詰め込みんで長くなりすぎる恐れのあった
ページがありまして。
何種類か、別々のテーブル（スペック表）を羅列するのではなく、
プルダウンで選択、表示を切り替えて、ページを短くすることになりました。

もーまさに、それを実行してくれたのが
http://javascript.maxux.com/js033.htm

↑こちらです。

ソースを見ていただくと、一目瞭然。
説明しないでも、わかっちゃうかもなので、
ご興味のあるかたは一度拝見あれ！！

• AJAX・JavaScript | 
• URL | 

最近、やたらmin-heightを使うことが多くなりました。
（デザインにこだわると、コーディングでムリすることが多くなるようです）
ちなみにmin-heightとは、
コンテンツ内容が少なくても最低この高さは欲しい・・・
って時に役立つCSSプロパティです。
残念ながらIE6には対応していないので、そいつにも対応させるTIPSのご紹介。

私が今愛用しているやり方はコレ↓
http://blog.creamu.com/mt/2008/03/cssminheighteasiest_crossbrows.html

div.ninja {
min-height:80px;
height:auto !important;
height:80px;
}

と記述するのみ！

前は
http://blog.webcreativepark.net/2007/09/30-223742.html
このようにJSを使って対応してたんですが、
上記のCSSのやり方の方が俄然簡単！
ということで愛用中です

• CSS | 
• URL | 

ページを更新するごとに背景画像をランダム表示にという作業が発生したので
ここにやり方を記しておきます。

まず、一番やりやすそうだなーと思ったこの方法。
http://www.designwalker.com/2006/12/random-css.html

上記に書いてあるように「rotator.zip」をDL。
解凍すると「rotator」フォルダが出来て、中には「rotator.php」が入っています。
同フォルダに変更したい画像を何枚かイン！

で、CSSに
#background {
margin:0 auto;
width:1400px;
background:url(/rotator/rotator.php) no-repeat top left;
}
のよに、背景画像を表示したいボックスに記述。
HTMLにも

を作成しておきます。

そして、サーバにアップすると
背景画像をランダム表示できました！
おお〜なんと簡単！

他の方法では、
http://javascript.eweb-design.com/1304_trc.html
のようにjavascriptでやる方法もありますが、
これだと、CSSでボックスの位置を指定したりとかがやりにくそだったので。
単純にbody背景を変更するというのであれば、
この方法の方がやりやすいかも！

以上、備忘録でした

• CSS | 
• URL |