HTML on qwerty.work

オンラインで画像をFaviconに変換してくれるジェネレーターページのメモ

Sat, 05 Feb 2022 15:41:44 +0900

オンライン変換サイト

ファビコンにしたい画像をアップロードすると、オンラインで様々なサイズのFaviconに変換してくれます。設置に必要な site.webmanifest やHTMLのソースも合わせて提供してくれる便利なサイトです。

SVGあり

よく使っているのはこちらのサイト。あらゆる形式を全て網羅しているので重宝しています。

https://realfavicongenerator.net/ https://realfavicongenerator.net/

SVGなし

https://favicon.io/ https://favicon.io/

https://ao-system.net/favicongenerator/ https://ao-system.net/favicongenerator/

https://iconifier.net/ https://iconifier.net/

スマホで電話番号などに自動的にリンクが付くのを防ぐ方法

Wed, 24 Nov 2021 20:35:55 +0900

自動的に設定されるリンクを無効化する

スマホ対応のレスポンシブサイトを制作しているのですが、スマホのブラウザによっては勝手にリンクが設定されてしまい、どうにかならないかと調べた方法をメモ。

私はiPhoneをメインに使用していますが、iOS対応ブラウザとしてSafariはもちろん、Chrome、Edge、Bravaが入っていますが、それぞれ違った挙動でリンクが貼られてしまい困りました。

メタタグを使用する方法

～の間に以下のタグを埋め込みます。

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

これを設定すると電話番号にリンクが付くのを防ぐことができるようです。

電話番番号以外に、住所、メールアドレス、日付や時間にリンクが付くことがあります。その場合は以下のように複数を指定すればいいみたいです。iPhoneのSafariはこれでOKでしたが、Bravaはダメでした。

<meta name="format-detection" content="telephone=no,address=no,date=no,email=no">

または

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

これを設定したからといって、既存の[0120-123-456](tel:0120123456)などが無効になることはありません。

Edgeブラウザの場合

ブラウザがEdgeの場合は電話番号などが記載されたタグにx-ms-format-detection="none"を設定すれば良いみたいです。

<p x-ms-format-detection="none">0120-123-456</p>

ただし、この属性はInternet ExplorerとMicrosoft Edge固有の属性です。それ以外のブラウザでは利用できませんので注意しましょう

それでもダメな場合

リンク無しのリンクをダミーで貼る

上記のいずれもダメな場合は空のリンクを貼ってポインターを無効にします。CSSのpointer-events: none;を使ってポインターイベントを無効化することでリンクがクリックされるのを回避できます。多分、これが一番最強の方法で、どのブラウザにも対応できるかと思われます。Safari,Chrome,Edge,Bravaのすべてで自動的にリンクを貼られるのを回避できました。

<a class="nolink">0120-123-456</a>

.nolink {
    pointer-events: none;<br>    text-decoration-line: none;<br>    color: inherit !important;    <br>}

興味深い方法

以下のサイトに記載された方法。

https://stackoverflow.com/questions/28027330/html-email-ios-format-detection https://stackoverflow.com/questions/28027330/html-email-ios-format-detection

試していませんが、Appleの文字があるのでSafari対応だと思われますが、CSSで解決できるっぽいです。

<style type="text/css">
  a[x-apple-data-detectors] {
      color: inherit !important;
      text-decoration: none !important;
      font-size: inherit !important;
      font-family: inherit !important;
      font-weight: inherit !important;
      line-height: inherit !important;
  }
</style>

参考サイト

https://aprico-media.com/posts/5007 https://aprico-media.com/posts/5007

https://arts-factory.net/notel/ https://arts-factory.net/notel/

https://shu-naka-blog.com/html/meta-telephone/ https://shu-naka-blog.com/html/meta-telephone/

https://style01.net/951/ https://style01.net/951/

https://wa3.i-3-i.info/word11829.html https://wa3.i-3-i.info/word11829.html

https://iwb.jp/format-detection-telephone-email-address-no/ https://iwb.jp/format-detection-telephone-email-address-no/

https://gist.github.com/weivall/2595515 https://gist.github.com/weivall/2595515

https://note.com/kanbara3/n/nab15ec78010a https://note.com/kanbara3/n/nab15ec78010a

Googleマップ埋め込みタグのiframe書式例まとめ

Sat, 14 Aug 2021 13:05:14 +0900

書式例

赤田海水浴場の地図を表示する例

通常例

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d26355.54307992571!2d130.87437829737954!3d34.339204853827596!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3543123bc72ce0c3%3A0x3d98f38cb01c0f43!2z6LWk55Sw5rW35rC05rW05aC0!5e0!3m2!1sja!2sjp!4v1628905054118!5m2!1sja!2sjp" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>

キーワードで指定するシンプルな例

<iframe src="https://maps.google.co.jp/maps?output=embed&q=赤田海水浴場&z=15" width="100%" height="450"  style="border:0;" allowfullscreen="" loading="lazy"></iframe>

パラメーター参考

https://www.bricoleur.co.jp/blog/archives/4452 https://www.bricoleur.co.jp/blog/archives/4452

https://qiita.com/yu-rin-chi/items/41b37b4656ea504350c7 https://qiita.com/yu-rin-chi/items/41b37b4656ea504350c7

留意点

AMPページではwidth="100%"はエラーになるので、width="600"のようにピクセルで指定する必要があります。

layout="responsive"も加えておくと良いみたいです。（以下参考）

https://qiita.com/otsuky/items/9254065d41598cb242ce https://qiita.com/otsuky/items/9254065d41598cb242ce

その他参考

https://developers.google.com/maps/documentation/urls/get-started https://developers.google.com/maps/documentation/urls/get-started

https://qiita.com/hiron2225/items/8d5cd1b6728b4d63434b https://qiita.com/hiron2225/items/8d5cd1b6728b4d63434b

都道府県と県庁所在地の一覧とリストをコピー＆ペースト

Mon, 14 Feb 2011 12:39:54 +0900

何かと都道府県や県庁所在地の一覧表を作成することがあるので、ペタッと貼って終われるように一覧表・リストをメモしておきます。（文字エンコードはUTF-8で作成しています。）

個別リスト

都道府県
県庁所在地（市なし）
県庁所在地（市あり）


北海道

青森県岩手県宮城県秋田県山形県福島県茨城県栃木県群馬県埼玉県千葉県東京都神奈川県新潟県富山県石川県福井県山梨県長野県岐阜県静岡県愛知県三重県滋賀県京都府大阪府兵庫県奈良県和歌山県鳥取県島根県岡山県広島県山口県徳島県香川県愛媛県高知県福岡県佐賀県長崎県熊本県大分県宮崎県鹿児島県沖縄県札幌青森盛岡仙台秋田山形福島水戸宇都宮前橋さいたま千葉新宿横浜新潟富山金沢福井甲府長野岐阜静岡名古屋津大津京都大阪神戸奈良和歌山鳥取松江岡山広島山口徳島高松松山高知福岡佐賀長崎熊本大分宮崎鹿児島那覇

札幌市

青森市盛岡市仙台市秋田市山形市福島市水戸市宇都宮市前橋市さいたま市千葉市新宿区横浜市新潟市富山市金沢市福井市甲府市長野市岐阜市静岡市名古屋市津市大津市京都市大阪市神戸市奈良市和歌山市鳥取市松江市岡山市広島市山口市徳島市高松市松山市高知市福岡市佐賀市長崎市熊本市大分市宮崎市鹿児島市那覇市

一覧表

県番号
都道府県
県庁所在地（市なし）
県庁所在地（市あり）


1
北海道
札幌
札幌市


2
青森県
青森
青森市


3
岩手県
盛岡
盛岡市


4
宮城県
仙台
仙台市


5
秋田県
秋田
秋田市


6
山形県
山形
山形市


7
福島県
福島
福島市


8
茨城県
水戸
水戸市


9
栃木県
宇都宮
宇都宮市


10
群馬県
前橋
前橋市


11
埼玉県
さいたま
さいたま市


12
千葉県
千葉
千葉市


13
東京都
新宿
新宿区


14
神奈川県
横浜
横浜市


15
新潟県
新潟
新潟市


16
富山県
富山
富山市


17
石川県
金沢
金沢市


18
福井県
福井
福井市


19
山梨県
甲府
甲府市


20
長野県
長野
長野市


21
岐阜県
岐阜
岐阜市


22
静岡県
静岡
静岡市


23
愛知県
名古屋
名古屋市


24
三重県
津
津市


25
滋賀県
大津
大津市


26
京都府
京都
京都市


27
大阪府
大阪
大阪市


28
兵庫県
神戸
神戸市


29
奈良県
奈良
奈良市


30
和歌山県
和歌山
和歌山市


31
鳥取県
鳥取
鳥取市


32
島根県
松江
松江市


33
岡山県
岡山
岡山市


34
広島県
広島
広島市


35
山口県
山口
山口市


36
徳島県
徳島
徳島市


37
香川県
高松
高松市


38
愛媛県
松山
松山市


39
高知県
高知
高知市


40
福岡県
福岡
福岡市


41
佐賀県
佐賀
佐賀市


42
長崎県
長崎
長崎市


43
熊本県
熊本
熊本市


44
大分県
大分
大分市


45
宮崎県
宮崎
宮崎市


46
鹿児島県
鹿児島
鹿児島市


47
沖縄県
那覇
那覇市

SELECTフォーム用のHTMLソース

都道府県
北海道
青森県
岩手県
宮城県
秋田県
山形県
福島県
茨城県
栃木県
群馬県
埼玉県
千葉県
東京都
神奈川県
新潟県
富山県
石川県
福井県
山梨県
長野県
岐阜県
静岡県
愛知県
三重県
滋賀県
京都府
大阪府
兵庫県
奈良県
和歌山県
鳥取県
島根県
岡山県
広島県
山口県
徳島県
香川県
愛媛県
高知県
福岡県
佐賀県
長崎県
熊本県
大分県
宮崎県
鹿児島県
沖縄県

<select name="pref_cd"><br><option value="" selected>都道府県</option><br>    <option value="1">北海道</option><br>    <option value="2">青森県</option><br>    <option value="3">岩手県</option><br>    <option value="4">宮城県</option><br>    <option value="5">秋田県</option><br>    <option value="6">山形県</option><br>    <option value="7">福島県</option><br>    <option value="8">茨城県</option><br>    <option value="9">栃木県</option><br>    <option value="10">群馬県</option><br>    <option value="11">埼玉県</option><br>    <option value="12">千葉県</option><br>    <option value="13">東京都</option><br>    <option value="14">神奈川県</option><br>    <option value="15">新潟県</option><br>    <option value="16">富山県</option><br>    <option value="17">石川県</option><br>    <option value="18">福井県</option><br>    <option value="19">山梨県</option><br>    <option value="20">長野県</option><br>    <option value="21">岐阜県</option><br>    <option value="22">静岡県</option><br>    <option value="23">愛知県</option><br>    <option value="24">三重県</option><br>    <option value="25">滋賀県</option><br>    <option value="26">京都府</option><br>    <option value="27">大阪府</option><br>    <option value="28">兵庫県</option><br>    <option value="29">奈良県</option><br>    <option value="30">和歌山県</option><br>    <option value="31">鳥取県</option><br>    <option value="32">島根県</option><br>    <option value="33">岡山県</option><br>    <option value="34">広島県</option><br>    <option value="35">山口県</option><br>    <option value="36">徳島県</option><br>    <option value="37">香川県</option><br>    <option value="38">愛媛県</option><br>    <option value="39">高知県</option><br>    <option value="40">福岡県</option><br>    <option value="41">佐賀県</option><br>    <option value="42">長崎県</option><br>    <option value="43">熊本県</option><br>    <option value="44">大分県</option><br>    <option value="45">宮崎県</option><br>    <option value="46">鹿児島県</option><br>    <option value="47">沖縄県</option><br></select>

<select name="pref_name"><br>    <option value="" selected>都道府県</option><br>    <option value="北海道">北海道</option><br>    <option value="青森県">青森県</option><br>    <option value="岩手県">岩手県</option><br>    <option value="宮城県">宮城県</option><br>    <option value="秋田県">秋田県</option><br>    <option value="山形県">山形県</option><br>    <option value="福島県">福島県</option><br>    <option value="茨城県">茨城県</option><br>    <option value="栃木県">栃木県</option><br>    <option value="群馬県">群馬県</option><br>    <option value="埼玉県">埼玉県</option><br>    <option value="千葉県">千葉県</option><br>    <option value="東京都">東京都</option><br>    <option value="神奈川県">神奈川県</option><br>    <option value="新潟県">新潟県</option><br>    <option value="富山県">富山県</option><br>    <option value="石川県">石川県</option><br>    <option value="福井県">福井県</option><br>    <option value="山梨県">山梨県</option><br>    <option value="長野県">長野県</option><br>    <option value="岐阜県">岐阜県</option><br>    <option value="静岡県">静岡県</option><br>    <option value="愛知県">愛知県</option><br>    <option value="三重県">三重県</option><br>    <option value="滋賀県">滋賀県</option><br>    <option value="京都府">京都府</option><br>    <option value="大阪府">大阪府</option><br>    <option value="兵庫県">兵庫県</option><br>    <option value="奈良県">奈良県</option><br>    <option value="和歌山県">和歌山県</option><br>    <option value="鳥取県">鳥取県</option><br>    <option value="島根県">島根県</option><br>    <option value="岡山県">岡山県</option><br>    <option value="広島県">広島県</option><br>    <option value="山口県">山口県</option><br>    <option value="徳島県">徳島県</option><br>    <option value="香川県">香川県</option><br>    <option value="愛媛県">愛媛県</option><br>    <option value="高知県">高知県</option><br>    <option value="福岡県">福岡県</option><br>    <option value="佐賀県">佐賀県</option><br>    <option value="長崎県">長崎県</option><br>    <option value="熊本県">熊本県</option><br>    <option value="大分県">大分県</option><br>    <option value="宮崎県">宮崎県</option><br>    <option value="鹿児島県">鹿児島県</option><br>    <option value="沖縄県">沖縄県</option><br></select>