Webデザイン

iPhone対応Webサイトでアドレスバーを隠す方法

投稿日:2012年5月31日 更新日:

iPhone版の表示をダメ出しされまくって、ブログを改造しまくっていた、あんちゃん(@anchan_jp)です。

まー、おかげで見やすくなって、ちょっとカッチョ良くなりました(*´ω`*)

かっこいいとか、自分で言うなとかいわないで。



アドレスバーが隠れるようにした

さて、このブログをiPhoneから見てもらうとわかるのですが、ページの読み込みが終わったら、アドレスバーが隠れるようにしてみました。

↑ ページの読み込みが終わると、囲ったアドレスバーの部分が、シュッって感じで上に隠れます。

↑ iPhoneの画面はちょっと小さいですけど、アドレスバーが隠れるようにしておくと、広くて見やすくなります^^

アドレスバーを隠す方法

やり方は、Webクリエイターボックスさんの記事

少しのコードで実装可能な15のスマートフォンサイト用小技集 | Webクリエイターボックス

↑ この記事に書いてありました^^

[javascript]window.onload = function(){
setTimeout("scrollTo(0,1)", 100);
}[/javascript]

これを、サイトの.jsファイルに書いて、読みこませるだけでおk

いろいろ詳しいことは、Webクリエイターボックスさんのほうを見てくださいww

まとめ

コピペするだけで超簡単にできちゃうので、自分のブログ、サイトを少しでも広~く、大き~く見せたいなって方は、ぜひやってみてくださいね^^

-Webデザイン
-

執筆者:

関連記事

no image

WordPressテーマをiPhone(スマートフォン)に対応させてみた

もともと、WordPressのテーマ「Twenty Eleven」を …

no image

「.htaccess」でのファビコン設置方法【チカッパ!レンタルサーバー】

ファビコンを設置してみました。 ファビコンって何?って思うかもしれま …

no image

Movable Typeのcgi実行時のURLを独自ドメインにする方法

cgiの実行時だけ違うドメインになる レンタルサーバーに Movab …

no image

metaタグ「description」と「keywords」でサイトの説明文とキーワードを追加する

「description」と「keywords」はスパムではない S …

no image

MovableType用PostToTwitterプラグイン

エムロジック株式会社の実験的プロジェクトを公開しているブログ『エムロ …