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>

【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証明書の発行が完了すると、以下の画面になります。この後、サイトにアクセスすると制作したサイトが見れると思います。