読者です 読者をやめる 読者になる 読者になる

WEBサイト制作の勉強|フェリカテクニカルアカデミー

WEBサイト制作の勉強の為の解説ブログ。東京池袋のフェリカテクニカルアカデミーでは求職者支援訓練の一環として、WEBサイト制作を学ぶことができます。

スマホのタッチアイコンに任意のタイトルを表示させる

以前の「Faviconの設定」の中で2種類のサイズのFavicon以外に、スマートフォン用に「touch-icon」の設定も少し説明しました。
yachin29.hatenablog.com


ここ数年スマートフォン利用者数が急激に伸び、今までのようにブラウザーから検索してWebサイトに行くよりも、ホーム画面に登録してあるアプリからワンタッチでWebサイトなりWebサービスを利用するケースが増えています。
なので、スマートフォンサイトを制作する場合には必ずスマートフォンのホーム画面に登録出来る「タッチアイコン」をファビコン同様作っておく必要があります。


ただ「タッチアイコン」をホーム画面に登録すると、デフォルトの設定ではページタイトルの中身がタッチアイコンの下に表示され、場合によっては文字が見切れてしまうので(半角13文字{全角6文字}まで)タッチアイコン用のタイトルを別に指定しましょう。

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="apple-mobile-web-app-title" content="タッチアイコン用のタイトル">
<title>タッチアイコンに任意のタイトルを表示させる</title>
<link rel="stylesheet" href="css/style.css">
<link rel="shortcut icon" href="favicon.ico" type="image/vnd.microsoft.ico">
<link rel="apple-touch-icon" href="touch-icon.png">
</head>