稼げる副業でお小遣いを稼ぐ方法

稼げる副業でお小遣いを稼ぐだけじゃなく、料理や映画アニメ、趣味などメモにも使っているブログ

副業で稼ぐ仕組みの作り方

スマホデザインで回転をさせたくない時に使えるテクニック

投稿日:2015年8月8日 更新日:

スマホデザインを作成する際に横向きの事は考えず作ってしまった場合に使えるテクニックをご紹介させて頂きます。

はじめに

ホームページでは特に気にしなくても良かった事なのですが、スマホは横幅を考えてcssを作らなければいけません。
ただ、回転させてホームページを見る人も少ないが、横向きのcssを作るのも面倒だと言う人にお勧めのテクニックです。

注意事項

アイフォンでは確認がとれましたが、アンドロイドでは確認出来きておりません。

回転について

まず、スマホの回転をcssやJavaScript、htmlやphpなどで制御する事は出来ません。
ユーザーが自分の端末の設定をして「回転させない」と言う設定をしない事には回転禁止や回転させないと言う事は出来ません。
そこで、私がネット上で見つけた方法はアラートを表示させると言うテクニックです。

アラートを表示させよう

アイフォンでは縦に持っている時や横に持っている時などを検出する機能がついているので、横を向いた時に「縦向きで持ってよー」って事をアラート表示させる事で縦向きで持つように促す事が出来ます。

やり方は簡単です。

ヘッダーにこちらの情報を記載するだけで導入する事が出来きます。

<script type="text/javascript">
window.onorientationchange = function () {
 switch ( window.orientation ) {
  case 0:
   break;
  case 90:
   alert('画面を縦にしてくださいね');
   break;
  case -90:
   alert('画面を縦にしてくださいね');
   break;
 }
}
</script>

回転させてみよう

では、実際に回転させるとどういった表示になるのかご紹介いたします。

まず普通に縦持ち時はこのような表示になります。

 

IMG_2312

そして、横向きにするとこういった表示になります。

IMG_2313

このようにアラートを表示させる事で縦で見るよう促す事が出来ます。

但し、問題としては横向きのまま、OKボタンを押してしまうと

IMG_2314

このように横向きのまま見る事が出来てしまうのです。

現状ではスマホで回転禁止にする場合はこのやり方が一番有効だと思うので、また解決方法が見つかり次第ブログで報告させて頂きます。

デモを作成したよ

もし分かりにくければ一度デモのソースを確認してみて下さい。

横向きにするとアラートが表示されるデモ

以上でスマホデザインで回転をさせたくない時に使えるテクニックのご紹介を終了致します。

さいごに

効率化を考えるなら是非取り入れたい

スマホ用のデザインを考える際に回転した時の事も考えてレスポンシブデザインを作成する方も多いでしょう。
ただ、横向きのデザインの事まで考えるとなると縦向きの際のパターンでもアイフォンの4~6まで全て違う横幅なのでそれぞれに合わせて作る場合、非常に面倒ですよね。

例えば画像を横並びに2つ並べるデザインを考えた場合、全体のレイアウトを考えると、どうしてもアイフォン4とアイフォン6では表示される横幅が違ってくるため、それぞれのデザインで確認しながら1px単位で作らなければいけませんよね。

特に稼げる副業でアフィリエイトサイトを作りこんでいる人の場合は特に注意が必要になります。

そう考えると、横向きも作らないといけない場合は純粋に仕事量が倍にになってしまうので、出来れば横向きのデザインは作成したくないなって思い、このテクニックを取り入れました。

今現在情報弱者じゃない限りはもともとスマホでの回転禁止の設定をしている人が多いと思うので、そこまで気にする事もありませんが、念のためにやっておきたいですよね。

-副業で稼ぐ仕組みの作り方

執筆者:


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

カスタム投稿タイプを簡単に作れるワードプレスプラグイン

ブログ記事以外に新着情報と言うのが出したいと言う方の為のカスタム投稿が簡単に作れるプラグインです。 関連記事: カスタムフィールドで画像を出力する時のヒント【ワードプレス】 ワードプレスに任意の画像サ …

ECCUBE3の商品CSV登録が簡単でした

毎回トラブルがあるCSV登録ですがECCUBE3では結構すんなり登録が出来ました。 関連記事: ネスタリゾートを100%遊びたい人へ【宿泊あり】 [2020年]百度baiduアカウントを日本から作る方 …

ECCUBE2系から4系への移行時に出たエラー

今まで順調に出来ていたのに、ある日のデータからエラーが出ました。 関連記事: ECCUBE2系から4系移行時に出たNP後払い関連のエラー ECCUBE4で規格編集が出来ない場合 ECCUBE2系から4 …

no image

大容量ファイルをメールで送る方法

写真や音楽データ、その他メールでは送信できない大容量ファイルをメールで送る方法です。実際はメールで送ると言うより、ファイルをアップロードし、ダウンロードURLをメールでお送りする事で大容量のファイルを …

ムーバブルタイプからワードプレスに引越しする方法

ムーバブルタイプからワードプレスに引越しをした時のメモです。 関連記事: ネスタリゾートを100%遊びたい人へ【宿泊あり】 WordPressの古いバージョンから最新へのアップデート [2020年]百 …

新着記事一覧

2024/03/19

インフォーマー

2024/03/18

正欲

2024/03/15

トッカイ

2024/03/14

キル・ボクスン

2024/03/13

ブラックリスト