タグ別アーカイブ: スマホ

HTML：スマホページの電話番号をリンクさせない方法

Posted on by
返信

スマホ（スマートフォン）サイトを構築時、ページ内に電話番号を記載することがあります。

iPhoneでページを確認すると、勝手に電話番号がリンクされてしまいます。

iPhone（Safari）ではページ内の電話番号を自動でリンクするという機能があるので、
リンクさせたくない場合は対策が必要です。

下記にスマホページ内に記載している電話番号を自動リンクさせない方法をメモします。

■ 電話番号の自動リンク機能を無効にする

headタグ内に下記のコードを記述します。

<meta name="format-detection" content="telephone=no">

これを記述するとページ内に記載している電話番号の自動リンクを防ぐことができます。

また、電話番号に似た番号なども自動リンクしてしまう可能性があるので、
スマホページを作成する場合は設定しておいた方がいいと思います。

電話番号にリンクを貼りたい場合は下記のように個別で設定します。

<a href="tel:000-0000-0000">000-0000-0000</a>

「tel:電話番号」でリンクを設定します。

上記のようにすれば、電話番号を勝手にリンクすることがなくなるので、
間違いが起きないと思います。

HTML：スマホのホーム画面にサイトのアイコンを表示

Posted on by
返信

スマホ（スマートフォン）やタブレットで、頻繁に利用するWEBサイトを
すぐ確認できるようにホーム画面に追加することがあります。

iPhoneの場合「ホーム画面に追加」を選択すればホームにサイトのアイコンを表示し
ブックマークすることができます。

しかし、アイコンの設定をしていないと、サイトのキャプチャ画像で登録されてしまいます。

sp_icon_1

アイコンを指定する場合、HTMLに下記のコードを追加すればアイコンを表示することが可能です。

下記に、スマホのホーム画面に指定したアイコンを表示した時の方法をメモします。

■ ホーム画面にサイトのアイコンを表示

ホーム画面に使用するアイコンの画像を用意します。

apple-touch-icon

※今回は120px×120pxで作成しました。

作成したアイコンをアップロードし、headタグ内に下記のコードを記述します。
光沢のあり・なしを設定することが可能です。

※URLはアイコンまでのパスを指定します。

【光沢ありの場合】

光沢ありの場合は「apple-touch-icon」を指定します。

<link rel="apple-touch-icon" href="http://raining.bear-life.com/apple-touch-icon.png" />

sp_icon_2

【光沢なしの場合】

光沢なしの場合は「apple-touch-icon-precomposed」を指定します。

<link rel="apple-touch-icon-precomposed" href="http://raining.bear-life.com/apple-touch-icon.png" />

sp_icon_3

コードを記述し、サイトにアップロードします。
アップ後、「ホーム画面に追加」をすれば、上記のアイコンのように表示することができます。

上記はiPhoneでのみ確認しています。
また、ベーシック認証をかけているとアイコンを設定することができないので注意です。

Androidの場合は標準のブラウザではなく、Chromeで追加するとホーム画面にアイコンが表示されます。
ただ、バージョンによるかもしれませんので試してみてください。

CSS：スマホページのdiv要素にスクロールバーを表示

Posted on by
1

スマホ（スマートフォン）ページで、一部のdiv要素にスクロールバーを表示させた時の方法をメモします。

利用規約など文章が長い場合、その要素にスクロールバーを表示して見せることがあると思います。

PCと同じようにコーディングしてスマホページを確認するとスクロールはできても、
スクロールバーは表示されませんでした。

しかし、CSSで「-webkit-overflow-scrolling:touch;」を記述するとスクロールバーを表示させることができます。
下記に「-webkit-overflow-scrolling:touch;」を使用した時の方法を記載します。

■ スマホ　div要素にスクロールバーを表示

【CSS】

スクロールバーを表示させる要素に
「overflow: scroll;」
「-webkit-overflow-scrolling: touch;」
を指定します。

<style type="text/css">
div#scroll {
    height: 300px;
    width: 80%;
    padding: 5px;
    overflow: scroll;
    border: 1px solid #CCC;
    -webkit-overflow-scrolling: touch;
}
</style>

表示させる要素の高さ（height）を指定しないとスクロールバーが表示されないので注意してください。

【HTML】

スクロールして表示させる内容をスタイルを指定して記述します。

<div id="scroll">
スクロールして表示させる内容<br>
スクロールして表示させる内容<br>
　　　　・
　　　　・
　　　　・
</div>

【表示例】

sp_scroll

縦方向と横方向にスクロールバーを表示することでき、慣性スクロールをさせることができます。

上記はiPhoneでのみ確認しているので、他のAndroidなどの機種は試していないです。
後、OSのバージョンによって「-webkit-overflow-scrolling」が効かないみたいなので確認が必要です。