ja 2010-10-22T09:34:21+09:00 script type="text/javascript" src="jquery.autoheight.js"> ４．iFrameにクラス名を記述 iframe class="autoHeight" scrolling="auto" frameborder="0" src="読み込み先URL"> ※上記ソースの前カッコ（]]> ★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">

※上記ソースの前カッコ（<）は取ってますのでお気をつけて。]]> 2010-10-22T09:34:21+09:00 薄い文字（または背景色付で）で「サイト内検索」なんて書かれてて
インプットエリアを選択すると
その文字が消えるって技、見かけませんか？

今回はその技の紹介！

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

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

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

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

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

以上、オンフォーカス忍者でした]]> 2009-02-10T14:37:13+09:00 そのまま載せてしまうと、ご存知のように迷惑メールの山が来てしまう恐れがあります
それを回避するメジャーなやり方のご紹介。

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

何年か前からあるやり方なので
もう対応しちゃってるかもしれませんが、、。
今のところはコレで対応]]> 2009-01-08T18:49:09+09:00 メニューバーを表示 　　menubar=yes ツールバーを表示 　　toolbar=yes アドレスバーを表示 　　location=yes スクロールバーを表示 　　scrollbars=yes 以上]]> メニューバー表示させるのって何、追加するんだったかな、、
と毎回調べてしまうのでメモ代わりに記載します。

＜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

以上]]> 2009-01-07T17:53:40+09:00 ※こんな感じの注意書きがありますよね。＜br /> でも、この二行目の左側をどうにか空白にしてそろえられないかな ＜/div> で、CSSに div.attention { padding-left:1em; text-indent:-1em; } と記述。 要するに左の余白を1文字分とって、 1行目だけテキストのインデントをマイナス1文字分にする、と 2行目は左に余白1文字分空いたままになる。 て感じ ではでは]]>
※こんな感じの注意書きがありますよね。
でも、この二行目の左側をどうにか空白にしてそろえられないかな

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

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

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

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

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

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

ではでは]]> 2009-01-07T16:20:19+09:00 本番環境へ移行する際のTIPSです。

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

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

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

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

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

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

こんな便利な機能知りませんでした。。
これで本番へうまく移行が出来そうです]]> 2009-01-06T18:40:21+09:00 複数のドメインをまたぐケースが出てきました。
その場合の対応策を↓

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"
を記載したままにするとよいようです。

ご参考までに]]> 2008-12-25T19:05:10+09:00

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

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

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

↑こちらです。

ソースを見ていただくと、一目瞭然。
説明しないでも、わかっちゃうかもなので、
ご興味のあるかたは一度拝見あれ！！]]> 2008-12-15T20:29:59+09:00 （デザインにこだわると、コーディングでムリすることが多くなるようです）
ちなみに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のやり方の方が俄然簡単！
ということで愛用中です]]> 2008-12-11T15:05:38+09:00 ここにやり方を記しておきます。

まず、一番やりやすそうだなーと思ったこの方法。
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背景を変更するというのであれば、
この方法の方がやりやすいかも！

以上、備忘録でした]]> 2008-12-10T12:05:33+09:00
上記のサイトを見ていただくと
右上にgoogleの検索ウィンドウがあるの、おわかりでしょうか。
こちらをサイト内に入れるにはどうすればいいのか。

まず、
http://services.google.com/freesearch/ja
上記URLからgoogleの専用ページへ。


こんな画面。

適宜テキストを入力していき、「送信」を押すとソースが吐き出されます。
それをHTML内にぺっと貼り付けるだけ！

おお～っ簡単だ～っ
今回もほぼ備忘録代わりですが、参考になれば幸い！]]> 2008-11-04T16:51:49+09:00 mp3で書き出すという作業が発生したので、
備忘録代わりにここに記載しておきます。

まずは、音声編集。
ナレーションが入ったWAVファイルをいじれるように
フリーソフトのSoundEngineを使用しました。
http://www.cycleof5th.com/products/soundengine/

インストールして、早速WAVファイルを開いてみると


こんな感じです。

編集は本当に簡単で、
波がついている部分が音声が入っている部分なので
拡大しつつ、いらない部分を選択、そしてdeleteボタンを押すだけ！
フェードイン・フェードアウトをしたい場合は、
拡大しつつ、その効果を得たい場所を選択します。
選択したら右クリックで「フェード-フェードイン／フェードアウト」を選ぶだけです。

で、終了したら保存するのですが、
今回はFLASHに入れるためにmp3にしておく必要がありました。

http://gokusensoft.blog48.fc2.com/blog-entry-77.html

その方法が上記に掲載されています。

必要になる、「VBMP3.dll」と「GOGO.DLL」というファイル、
http://www.src.jpn.org/kei/download/index.html
ココにまとめてアップされていました。感謝。
「MP3再生用ライブラリVBMP3.dllのダウンロード」というところからDLできます。

落としたら、その２つのファイルを
「C:\WINDOWS\system32」に入れ込むだけ！

すると、SoundEngineの「別名で保存」ダイアログでmp3を選択できるようになりました！
今日も巨匠に感謝・・・]]> 2008-10-08T10:55:19+09:00 こんなところまでもうできちゃうらしいです。

GYOROL
http://gyorol.bascule.co.jp/
↑上記サイトへ行っていただいて、まずバーコードをケータイで読み取り。

ケータイがリモコンとなり、
PCサイト上で釣りを楽しめる・・・！
なんと画期的！さすがバスキュール。。。
アイディア自体、思うことはあったかもしれませんが、
それを実現しちゃうところがすごい。実現できる時代になったのもすごい。

たぶん、この技術を応用してできたのが、
電通インターンシップコンテンツ「Brain Bomber」
http://cr-juku.jp/2008/

iphoneも出たことですし、、
なんせ早いこの業界。。常に精進していきたいところです]]> 2008-08-07T14:43:26+09:00 サイト上で透過pngを使用することになったのですが、
IE6以下ではまだ対応してない（透過すべき部分が灰色に表示されます）。

これを解決するのが
iepngfix.js

色々と見た結果、この方法が一番簡単でわかりやすかったので、
ご紹介します。

まず、上記のリンクされているサイトから
iepngfix.jsをダウンロード（文章の真ん中ぐらいにリンクされてます）

１．HTMLファイル

を追加。

2.CSSファイル
* html .iepngfix {
behavior: expression(IEPNGFIX.fix(this));
}
を追加。

3.透過させたいpng画像
「class="iepngfix"」を追加。


以上でpngファイルをIE6でも透過させることができました！

この他にも色々と方法はあるので、
またチャレンジしたら記載したいと思います。]]> 2008-07-22T17:14:09+09:00 ふと気になったこと。。。
あるはずの「.htaccess」ファイルが見えない・・・？
あれ、サーバ担当のヒト入れ忘れたのかなぁと言うてみると
「設定で.htaccess見えんことあるで？」
とのこと


調べてたところ、以下の設定で見えるようになるらしい！
※FTPクライアントは「FFFTP」使用

まず、接続してみて
「表示」－「．で始まるファイルを表示」にチェックが入っているか確認。

それで、見えていない場合↓
「設定変更」－「高度」－「LISTコマンドでファイル一覧を取得」のチェックを外す。
その際、「NLSTファイル名／オプション」は「-alL」にしておく。


すると、なんなく見えました！
ほ～～勉強になりましたっ]]> 2008-07-17T20:14:23+09:00