Studio on qwerty.work

【CSS】モバイルサイトの文字サイズがおかしくなるとき

Mon, 04 Aug 2025 00:00:00 +0000

STUDIOでウェブサイトを制作した際、スマホで表示した際、文字サイズに違和感を感じる部分がありました。すべてのサイトがそうなる訳ではないのですが、そのサイトでは、16pxで指定した文字がセクションによって大きさが異なり、レイアウトが崩れました。iPhoneのSafariだけではなく、Chromeでも同様でした。

原因はiOS Safari／旧 Android ブラウザの「自動フォント拡大」

WebKit 系ブラウザ（特に iOS Safari）は、ビューポート指定が無い・狭い幅に収まらないなど “読みにくい” と判断すると、本文テキストだけを強制的に拡大します。

通常、HTML内にビューポートに関する以下のコードが記載されていれば、防げますがSTUDIOでは別の方法で対処方法が必要です。

<meta name="viewport" content="width=device-width, initial-scale=1">

解決方法

STUDIOの場合、以下のCSS**「-webkit-text-size-adjust: 100%;」**をカスタムコードに記載すれば、解決できます。カスタムコードはSTUDIOの有料プランのみで使用できるので、フリープランではこの方法は使えません。

<style>html {  -webkit-text-size-adjust: 100%;}</style>

複数のブラウザに対応する際のベンダープレフィックスの記載は以下。

<style>html {  -webkit-text-size-adjust: 100%;  -moz-text-size-adjust: 100%;  text-size-adjust: 100%;}</style>

text-size-adjustについて

text-size-adjust - CSS: Cascading Style Sheets | MDN

【STUDIO】よく使うカスタムコード（CSS他）

Mon, 01 Jul 2024 00:00:00 +0000

CSS

スマホの横長画面対応

スマホを横向きにしたとき、キービジュアルの高さを1vhで指定したときに、高さが足りずレイアウトが崩れるため、最低限の高さを指定。

<style>/* スマホの細い横長画面対応 * メインビジュアル高さ指定 *//* 画面高さが540px以下で横向きの場合 */@media screen and (max-height: 540px) and (orientation: landscape) {  #任意のid {      height: 840px !important;  }}/* 縦横比が1200px:768px以下の細長さで横向きの場合 */@media screen and (max-aspect-ratio: 1200/768) and (orientation: landscape) {  #任意のid {      height: 760px !important;  }}</style>

正方形の画像のレスポンシブ対応

画像を正方形で縦横をそれぞれピクセルで指定した際、画面サイズによってはレイアウトが崩れないように小さめに配置することがありますが、1:1の縦横比を保ったまま画面に合わせて、拡大縮小を行う例。

<style>#任意のid .image.sd {    width: 100%;    height: auto;    aspect-ratio: 1;}</style>

Lighthouseパフォーマンス対策

Lighthouseのベンチマークで「パフォーマンス」で指摘される部分の対策。ページ読み込みスピードの高速化に寄与。ページ読み込み時にあらかじめ接続をするpreconnectと、あらかじめ名前解決しておくdns-prefetch。

<link rel="preconnect" href="https://www.googletagmanager.com" /><link rel="preconnect" href="https://storage.googleapis.com" /><link rel="preconnect" href="https://fonts.googleapis.com" /><link rel="preconnect" href="https://analytics.studiodesignapp.com" />または<link rel="dns-prefetch" href="https://www.googletagmanager.com" /><link rel="dns-prefetch" href="https://storage.googleapis.com" /><link rel="dns-prefetch" href="https://fonts.googleapis.com" /><link rel="dns-prefetch" href="https://analytics.studiodesignapp.com" />

【STUDIO】ブレークポイントの追加/削除/変更/調整

Fri, 28 Jun 2024 00:00:00 +0000

ノーコードでホームページ制作ができるSTUDIOで、表示デバイスの画面幅に合わせて表示する可変レイアウト（レスポンシブ）対応についてメモ。

様々なデバイスが世の中に溢れていて、それに対応するためのレスポンシブですが、「パソコン、タブレット、スマートホンの３つに対応すればヨシ」という訳にはいかないことが多々あります。特にパソコンとタブレットの間のMicrosoft Surface Proや、縦だとスマホ、横にするとタブレット表示になるiPhoneなど、ノーコードツールとはいえ、細部までこだわったサイトにしようと思うと、ディープな設定が必要になってきます。そのようなときにやってみたことを、ここにメモ。

STUDIO標準のブレイクポイントの追加/削除

標準　1280px以上（パソコン向け）
スモール　1140pxまで（小型ノート向け）
タブレット　840pxまで
モバイル　540pxまで（スマホ向け）
ミニ　320pxまで

それぞれ、既定の幅を数値の入力か、マウスドラッグで変更が可能です。ただし、上記の5つのブレイクポイントの他に追加ができません。

https://help.studio.design/ja/articles/4954050-%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%A0%E3%83%96%E3%83%AC%E3%82%A4%E3%82%AF%E3%83%9D%E3%82%A4%E3%83%B3%E3%83%88 https://help.studio.design/ja/articles/4954050-%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%A0%E3%83%96%E3%83%AC%E3%82%A4%E3%82%AF%E3%83%9D%E3%82%A4%E3%83%B3%E3%83%88

カスタムコードでCSSを書く方法もある

標準のブレイクポイントの数以上にオリジナルで追加したい場合は、有料プランにあるカスタムコードに直接CSSを書くしかなさそうです。カスタムコードに書いたCSSはプレビューでは反映されません。更新ボタンで公開したサイトで反映されるので、テスト的に使う場合は一般の目に触れないように注意することが必要です。

ここに手を付けると、もはやノーコードではない気がしますが、コーディングして制作するよりも制作は随分楽です。

Surface Pro 7+をタブレットのレイアウトに含めたい

iPadはタブレットのブレイクポイントで作成しますが、タブレットに近いサイズのSurface Pro 7+はスモール（PC）として認識されます。これを縦向きにしても、ほぼタブレットサイズに近いのに、スモールまたは標準のブレークポイントで制作したサイトが表示されます。

その場合の対応として、

タブレットのブレイクポイントを840ピクセルから912ピクセルに変更する
カスタムコードにCSSを書く

このどちらかになるかと思います。

カスタムコードの例

Surface Pro 7+の縦向き対応

STUDIOのブレイクポイントを変更せず、タブレットのデフォルト幅840px以上である841px～1023pxの間で縦向きだった場合のカスタムコードで対応する例。

<style>@media screen and (min-width: 841px) and (max-width: 1023px) and (orientation: portrait) {   #対象のid .sd.appear {       ここにルールを書く   }}</style>

【DNSレコード】ドメイン、WEB、メールがすべて別々の場合

Tue, 05 Mar 2024 00:00:00 +0000

以下のように、ドメイン、ホームページ、メールをすべてバラバラのサービスで契約した場合や、移管や移転で分離した際でも、独自メイン（例：example.com）でホームページもメールもアクセスできるようにするDNSレコードの設定例をメモ。

公開インフラの環境

ムームーDNSの設定例

ムームードメインの管理画面で、最低限必要なDNSレコードの設定は以下の通りです。

ホスト名	タイプ	データ	優先度	メモ
（空欄）	A	34.111.141.225		STUDIOのグローバルIPアドレス
mail	A	XXX.XXX.XXX.XXX		メールサーバ（さくらインターネット）のグローバルIPアドレス
（空欄）	MX	example.sakura.ne.jp	10	さくらインターネットの初期ドメイン（exmapleの部分はご自分の環境の物に入れ替えてください）
（空欄）	TXT	v=spf1 a:www1234.sakura.ne.jp mx ~all		さくらインターネットのホスト名（www1234の部分はご自分の環境の物に入れ替えてください）

DKIM、DMARCを追加する場合

メールのなりすまし対策として、DKIMやDMARCもDNSレコードに追加したいときの例。

ホスト名	タイプ	データ	優先度	メモ
rs20240305._domainkey	TXT	v=DKIM1; k=rsa; p=MIIBIabcd～～～xyzAB		さくらインターネットのメールの管理画面で設定したもの
_dmarc	TXT	v=DMARC1; p=none; aspf=r; adkim=r		さくらインターネットのメールの管理画面で設定したもの

さくらインターネットのDNS設定例

ドメインとメールサーバーがさくらインターネットで、WEBサーバーがSTUDIOの場合。

以下の画面はさくらインターネットのコントロールパネルの**「ドメイン契約の一覧」**から進んだ画面の一例です。

参考ページ

https://support.muumuu-domain.com/hc/ja/articles/12999927550099-STUDIO%E3%81%A8%E6%8E%A5%E7%B6%9A%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95%E3%82%92%E6%95%99%E3%81%88%E3%81%A6%E3%81%8F%E3%81%A0%E3%81%95%E3%81%84 https://support.muumuu-domain.com/hc/ja/articles/12999927550099-STUDIO%E3%81%A8%E6%8E%A5%E7%B6%9A%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95%E3%82%92%E6%95%99%E3%81%88%E3%81%A6%E3%81%8F%E3%81%A0%E3%81%95%E3%81%84

https://www.ni4.jp/2014/09/22-125209.html https://www.ni4.jp/2014/09/22-125209.html

【STUDIO】CMSの詳細ページをモーダルで表示したいとき

Tue, 16 Jan 2024 00:00:00 +0000

シングルページタイプのコーポレートサイトをSTUDIOで制作し、簡単なお知らせ（ニュース）を組み込むことになりました。お知らせの詳細ページは簡易的なものにしたかったので、詳細ページを作らず、何の飾りもないモーダルで作ることにしました。

以前では、STUDIOのCMS機能で生成される動的な内容をモーダルで表示できなかったみたいですが、この記事を投稿した今日現在はアップデートされて機能が追加されていました。その方法をメモ。

動的モーダルを作成する方法

前提として、あらかじめCMSのデータが作成されていることを前提としています。ここでは**「news」**というCMSモデルを作成した例にしています。

ページを追加

**「ページ」タブで「+」**ボタンを押す

隠れたメニューを表示する

**「動的モーダル」**を選択する

対象のCMS（データベース）を選択

モーダルページが追加されるので、ランダムなパスを「news」など、わかりやすい階層名に変更します。

テキストを配置

モーダルページにテキストを配置してデータを紐づける

モーダルを開くリンクを設置

**「お知らせ」**欄のタイトルにモーダルのリンクを設置

完成

これでCMSに投稿した内容がモーダルに表示されます。

【STUDIO】カルーセルのスライドショーをふわっとフェードイン・フェードアウトさせる方法

Wed, 27 Sep 2023 09:38:39 +0900

カルーセルの画像の入れ替え方法を変更したい

STUDIOのカルーセルの写真入替の動きに疑問がでてきました。画像が入れ替わる際に画面がちらついて、シックで上品、落ち着いた雰囲気のサイトを作るときにチラつきが気になります。

スライドの方向は左→右の一択しかないのかな？
カクカクする挙動を滑らかでスムーズな動きにできない？

そこで、ふわっとフェードイン・フェードアウトで入れえる方法がありました。ただ、この通りにしてもうまくいきませんでしたが、今後の参考としてメモしておきます。

https://studio.galera.co.jp/blog/eOddb9My https://studio.galera.co.jp/blog/eOddb9My

https://note.com/youile3/n/n3cecc06c00f4 https://note.com/youile3/n/n3cecc06c00f4

https://studio.re-d.jp/journal/20230406/459/ https://studio.re-d.jp/journal/20230406/459/

https://spicato.com/blog/12/0411denblog/ https://spicato.com/blog/12/0411denblog/

STUDIOで制作したサイトを独自ドメインで公開するときのDNS Aレコード

Thu, 24 Aug 2023 00:00:00 +0000

ノーコードでホームページを制作できるSTUDIOで、制作したサイトを独自ドメインで公開する際に必要なDNSの設定についてメモ。

STUDIOのAレコード

Aレコードはホームページを公開するWEBサーバーのIPアドレス（IPv4)です。お名前.com やムームードメイン、バリュードメイン、Xserverドメイン、Google Domains、名づけてねっと、.oneなど珍しいドメインを取り扱っているゴンベエドメインなど、ドメイン会社のコントロールパネルでDNSの設定を変更する際、Aレコードを以下の内容に変更。

34.111.141.225

以下の公式サイトのサポートページに記載があります。

https://help.studio.design/ja/articles/5707271-studio%E3%81%A7%E6%8E%A5%E7%B6%9A-%E5%85%AC%E9%96%8B%E3%81%97%E3%81%A6%E3%81%84%E3%82%8B%E7%8B%AC%E8%87%AA%E3%83%89%E3%83%A1%E3%82%A4%E3%83%B3%E3%81%AE%E3%83%A1%E3%83%BC%E3%83%AB%E3%82%A2%E3%82%AB%E3%82%A6%E3%83%B3%E3%83%88%E3%82%92%E5%88%A9%E7%94%A8%E3%81%99%E3%82%8B%E3%81%AB%E3%81%AF%E3%81%A9%E3%81%86%E3%81%97%E3%81%9F%E3%82%89%E8%89%AF%E3%81%84%E3%81%A7%E3%81%99%E3%81%8B https://help.studio.design/ja/articles/5707271-studio%E3%81%A7%E6%8E%A5%E7%B6%9A-%E5%85%AC%E9%96%8B%E3%81%97%E3%81%A6%E3%81%84%E3%82%8B%E7%8B%AC%E8%87%AA%E3%83%89%E3%83%A1%E3%82%A4%E3%83%B3%E3%81%AE%E3%83%A1%E3%83%BC%E3%83%AB%E3%82%A2%E3%82%AB%E3%82%A6%E3%83%B3%E3%83%88%E3%82%92%E5%88%A9%E7%94%A8%E3%81%99%E3%82%8B%E3%81%AB%E3%81%AF%E3%81%A9%E3%81%86%E3%81%97%E3%81%9F%E3%82%89%E8%89%AF%E3%81%84%E3%81%A7%E3%81%99%E3%81%8B

お名前ドットコムでの設定手順の例

https://mik2062.jp/studio-custom-domain/ https://mik2062.jp/studio-custom-domain/

Google Domainsでの設定手順の例

https://help.studio.design/ja/articles/1884451-dns%E3%83%AC%E3%82%B3%E3%83%BC%E3%83%89%E8%A8%AD%E5%AE%9A https://help.studio.design/ja/articles/1884451-dns%E3%83%AC%E3%82%B3%E3%83%BC%E3%83%89%E8%A8%AD%E5%AE%9A

公開時はTLS証明書の発行に数時間かかる

STUDIOで制作したサイトを公開する際は、DNSのAレコードを変更してから公開の設定作業が必要です。STUDIO上で公開作業を進めていく上で、独自ドメインへの接続をクリアすると、TLS証明書の発行が始まります。しかし、これが数時間かかるため、公開作業は夜間に行う方がいいかもしれません。結果、2時間～3時間近くかかりました。

[caption id=“attachment_507” align=“alignnone” width=“700”] この画面をうっかり閉じても、バックグラウンドで発行作業は進行しています。再度「公開設定」画面にアクセスすることで、ステータス（進捗状況）を確認することができます。[/caption]

私は通常の業務時間に行ったため、TLS証明書が発行されていない状態でサイトにアクセスするとHTTPSで強制的に接続され**「このサイトへの接続はセキュリティで保護されていません」**と、証明書がないためにずっとエラー画面（ERR_SSL_VERSION_OR_CIPHER_MISMATCH）が出たままになってしまいました。

https://help.studio.design/ja/articles/4358651-tls-%E8%A8%BC%E6%98%8E%E6%9B%B8 https://help.studio.design/ja/articles/4358651-tls-%E8%A8%BC%E6%98%8E%E6%9B%B8

同じように時間がかかって困った方の記事

早ければ5～10分程度という方もいらっしゃるみたいですが、中には一晩かかったという方も…。

独自ドメイン接続完了画面

TLS証明書の発行が完了すると、以下の画面になります。この後、サイトにアクセスすると制作したサイトが見れると思います。

【JS】VIDEOタグで指定する動画をPCとスマホ用に切り替えるJavascript

Thu, 25 Nov 2021 09:43:10 +0900

スマホとパソコンで動画を切り替えたい

動画の再生開始に影響するファイルサイズ

WEBページの背景に動画を使用するサイトを制作する際に気になるのが、埋め込んだ動画のファイルサイズ。

再生時間は15秒から30秒で、ファイルサイズは10MBを基準と考えています。

『ファイル容量を小さくしながらも高画質にしたい』と思いますが、10MB前後を目指すとビットレートを1Mbps～2Mbpsまで落とさなければなりません。ここまで落とすと当然画質は悪くなるですが、背景イメージとしてはギリギリ許容できる画質で、再生時間が30秒前後で何とか10MB前後に収めることができます。

パソコンサイトは通信環境が整っている事が多いので問題ないと思うのですが、スマホなど回線速度が遅いとそうはいきません。たかが10MBでも動画の読込に時間がかかり、自動再生による再生開始が遅くなります。

スマートフォンやタブレットは画面サイズも小さいので、Bootstrap5 のグリッドシステムのブレークポイントを基準にして動画の解像度を考えると、横幅576ピクセル～768ピクセル、大きくても992ピクセルに対応できる解像度のものがあればよく、**480p（854×480 SD画質）または360p（640×360）**の動画を用意すればいいかと思います。この解像度で、ビットレート500kbpsまで下げると、約3MBくらいまでファイルサイズが落ちます。画質は当然悪くなりますが、スマホの画面での背景動画としてはギリギリ観るに耐えれる範囲かと思います。

パソコンとスマホ用に用意した2つの動画ファイル

「レスポンシブサイト制作時の画面サイズと埋め込み動画の解像度の参考値」を参考に、制作中のレスポンシブサイトのブレークポイントを**sm（768px）**としたため、これを境に以下の解像度の異なる動画を用意しました。

パソコン用 … フルHD（1920×1080） MP4・WebM 約10MB
スマーフォン用 … 480p（854×480 ） MP4・WebM 約３MB

この二つをレスポンシブサイトにvideoタグで動画を埋め込み、アクセスしてきた画面サイズに応じて再生する方法がないかと探してみると、jQueryを使って切り替える方法がありました。

jQueryで画面サイズによって切り替える参考

https://shu-naka-blog.com/jquery/responsive_switching/ https://shu-naka-blog.com/jquery/responsive_switching/

ソース例

上記ページのソースを参考に、以下のソースでアクセスしてきたデバイスの画面サイズが768ピクセルを境に再生する動画を切り替えることができました。class="switch"を付ければ、複数ので埋め込んだ動画があっても対応できそうです。

動画のファイル名は最後尾を_spと_pcにします。
タグ内にclass="switch"を設定します。
この例は動画の遅延読込に Lozad.js を使用しているので、ソース指定にdata-srcとしていますので、Javascript内のsrcをdata-srcに変更しています。

<video playsinline autoplay loop muted preload="auto" class="lozad" poster="img/poster.png"/>
   <source type="video/webm" src="" data-src="video_sp.webm" class="switch">
   <source type="video/mp4" src="" data-src="video_sp.mp4" class="switch">
   <source type="video/webm" src="" data-src="video_pc.webm" class="switch">
   <source type="video/mp4" src="" data-src="video_pc.mp4" class="switch">
</video>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>

$(function() {
  // 切り替える対象にclass属性。
  var $elem = $('.switch');
  
  // 切り替えの対象のsrc属性の末尾の文字列。
  var sp = '_sp.';
  var pc = '_pc.';
  
  // 画像を切り替えるウィンドウサイズ。
  var replaceWidth = 768;
  
 function imageSwitch() {
  // ウィンドウサイズを取得する。
  var windowWidth = parseInt($(window).width());

 // ページ内にあるすべての`.switch`に適応される。
  $elem.each(function() {
  var $this = $(this);
  // ウィンドウサイズが768px以上であれば_spを_pcに置換する。
  if(windowWidth >= replaceWidth) {
  $this.attr('data-src', $this.attr('data-src').replace(sp, pc));

 // ウィンドウサイズが768px未満であれば_pcを_spに置換する。
  } else {
  $this.attr('data-src', $this.attr('data-src').replace(pc, sp));
  }
  });
}
 imageSwitch();

// 動的なリサイズは操作後0.2秒経ってから処理を実行する。
var resizeTimer;
$(window).on('resize', function() {
  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(function() {
    imageSwitch();
  }, 200);
  });
});

STUDIOで使いたいとき

ノーコードでホームページが制作できるSTUDIO（有料プラン）で制作したサイトのキービジュアルに背景動画を埋め込みたいときのJavascriptソース例。ChatGPTに手伝ってもらったソース。動画の遅延表示させるLozad.jsも併用しています。

Googleタグマネージャーで使うときのソース例

Google Tag Manager経由で以下のソースを使用するとうまくいきました。動画ファイルをSTUDIOにアップロードできないので、読み込みたい動画ファイル（MP4とWEBM）は外部のレンタルサーバーにアップロードしてあるものを使用します。STUDIOのBOX要素のIDにmvを設定し、JavascriptでVIDEOタグを挿入し、デバイスの画面幅に合わせてPC用とスマホ用を切り替えます。

Googleタグマネージャーのトリガーは「ページビュー」と「履歴の変更」の二つを設定してください。「ページビュー」のみだと、ブラウザの「戻る」ボタンで他のページから飛んできたときに発火しないので、その対策として「履歴の変更」が必要です。

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js"></script>
<script>
  var observer = lozad();
  observer.observe();
</script>
<script>
// 動画がすでに追加されているかを確認する関数
function isVideoAdded() {
  return document.getElementById("mv").querySelector("video") !== null;
}

// 動画を追加する処理
function addVideo() {
  // すでに動画が追加されている場合は処理を中断
  if (isVideoAdded()) {
    return;
  }

  // 動画要素の作成
  var video = document.createElement("video");
  video.muted = true;
  video.autoplay = true;
  video.loop = true;
  video.setAttribute("playsinline", "");
  video.classList.add("lozad");

  // 最初のソース (WEBM) に "switch" クラスを追加
  var source1 = document.createElement("source");
  source1.src = "https://qwerty.work/mv_sp.webm";
  source1.setAttribute("data-src", "https://qwerty.work/mv_sp.webm");
  source1.type = "video/webm";
  source1.classList.add("switch");

  // 2つ目のソース (MP4) に "switch" クラスを追加
  var source2 = document.createElement("source");
  source2.src = "https://qwerty.work/mv_sp.mp4";
  source2.setAttribute("data-src", "https://qwerty.work/mv_sp.mp4");
  source2.type = "video/mp4";
  source2.classList.add("switch");

  // 動画にソースを追加
  video.appendChild(source1);
  video.appendChild(source2);

  // 動画をDOMに追加
  document.getElementById("mv").appendChild(video);

  // 動画の再生処理とエラーキャッチ
  video.play().catch(function(error) {
    console.error("Video play failed:", error);
  });
}

// ページビューまたは履歴変更時に呼び出す関数
addVideo();
</script>
<script>
// PCとスマホで動画ファイルを切り替える
$(function() {
  // クラス "switch" を持つ <source> タグを対象にする
  var $sources = $('.switch');
  
  // 切り替えの対象のsrc属性の末尾の文字列。
  var sp = '_sp.';
  var pc = '_pc.';
  
  // 動画を切り替えるウィンドウサイズ。
  var replaceWidth = 970;
  
  function videoSwitch() {
    // ウィンドウサイズを取得する。
    var windowWidth = parseInt($(window).width());

    // ページ内にあるすべての`.switch`（<source>タグ）に適応される。
    $sources.each(function() {
      var $this = $(this); // <source>要素

      // ウィンドウサイズが970px以上であれば_spを_pcに置換し、キャッシュバスティングを追加
      if (windowWidth >= replaceWidth) {
        $this.attr('src', $this.attr('data-src').replace(sp, pc));
      // ウィンドウサイズが970px未満であれば_pcを_spに置換し、キャッシュバスティングを追加
      } else {
        $this.attr('src', $this.attr('data-src').replace(pc, sp));
      }
    });

    // <video>要素全体を再ロードして、srcの変更を反映
    $('video').get(0).load(); // <video>要素のload()メソッドを呼び出す
  }

  videoSwitch();
  // 動的なリサイズは操作後0.2秒経ってから処理を実行する。
  var resizeTimer;
  $(window).on('resize', function() {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(function() {
      videoSwitch();
    }, 200);
  });
});
</script>

どうしてもカスタムコードで使いたいとき

Googleタグマネージャーの使い方がわからないので、STUDIOのカスタムコードに記載して使いたい場合はこちらのソース。発火のトリガーを複数設定しています。ページの遷移やブラウザによっては発火しないケースがあるかもしれません。

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js"></script>
<script>
  var observer = lozad();
  observer.observe();
</script>
<script>
// 動画が既に追加されているか確認する関数
function isVideoAdded() {
  return document.getElementById("mv").querySelector("video") !== null;
}

// 共通の処理を関数として定義
function handleVideoLoad() {
  // 動画が既に追加されている場合は処理を中断
  if (isVideoAdded()) {
    return;
  }

  // 動画要素の作成
  var video = document.createElement("video");
  video.muted = true;
  video.autoplay = true;
  video.loop = true;
  video.setAttribute("playsinline", "");

  // クラス "lozad" を追加
  video.classList.add("lozad");

  // 最初のソース (WEBM) に "switch" クラスを追加
  var source1 = document.createElement("source");
  source1.src = "https://qwerty.work/mv_sp.webm";
  source1.setAttribute("data-src", "https://qwerty.work/mv_sp.webm");
  source1.type = "video/webm";
  source1.classList.add("switch");

  // 2つ目のソース (MP4) に "switch" クラスを追加
  var source2 = document.createElement("source");
  source2.src = "https://qwerty.work/mv_sp.mp4";
  source2.setAttribute("data-src", "https://qwerty.work/mv_sp.mp4");
  source2.type = "video/mp4";
  source2.classList.add("switch");

  // 動画にソースを追加
  video.appendChild(source1);
  video.appendChild(source2);

  // 動画をDOMに追加
  document.getElementById("mv").appendChild(video);

  // 動画の再生処理とエラーキャッチ
  video.play().catch(function(error) {
    console.error("Video play failed:", error);
  });
}

// ページが完全にロードされた時
window.addEventListener("load", handleVideoLoad);

// ページのHTMLが読み込まれた時
document.addEventListener("DOMContentLoaded", handleVideoLoad);

// ブラウザの履歴が変更された時（戻るボタン、進むボタンなど）
window.addEventListener("popstate", handleVideoLoad);
</script>
<script>
// PCとスマホで動画ファイルを切り替える
$(function() {
  // クラス "switch" を持つ <source> タグを対象にする
  var $sources = $('.switch');
  
  // 切り替えの対象のsrc属性の末尾の文字列。
  var sp = '_sp.';
  var pc = '_pc.';
  
  // 動画を切り替えるウィンドウサイズ。
  var replaceWidth = 970;
  
  function videoSwitch() {
    // ウィンドウサイズを取得する。
    var windowWidth = parseInt($(window).width());

    // ページ内にあるすべての`.switch`（<source>タグ）に適応される。
    $sources.each(function() {
      var $this = $(this); // <source>要素

      // ウィンドウサイズが970px以上であれば_spを_pcに置換
      if (windowWidth >= replaceWidth) {
        $this.attr('src', $this.attr('data-src').replace(sp, pc));
      // ウィンドウサイズが970px未満であれば_pcを_spに置換
      } else {
        $this.attr('src', $this.attr('data-src').replace(pc, sp));
      }
    });

    // <video>要素全体を再ロードして、srcの変更を反映
    $('video').get(0).load(); // <video>要素のload()メソッドを呼び出す
  }

  videoSwitch();
  // 動的なリサイズは操作後0.2秒経ってから処理を実行する。
  var resizeTimer;
  $(window).on('resize', function() {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(function() {
      videoSwitch();
    }, 200);
  });
});
</script>

その他参考

jQueryに依存しない以下のJavascriptも見つけましたが、設定や設置方法が悪いのか、うまくいきませんでした。

画面サイズで切り替える例

https://teratail.com/questions/148919 https://teratail.com/questions/148919

ユーザーエージェントで切り替える例

https://iwb.jp/video-tag-src-poster-img-javascript/ https://iwb.jp/video-tag-src-poster-img-javascript/