FROM CACHE - jp_header
このコミュニティはピアツーピアサポートに移行しました。Shopify サポートは今後、このコミュニティへのサービスを提供いたしません。これからもぜひ、他のマーチャントやパートナーとつながり、サポートし合い、経験を共有してください。 当社の行動規範に違反する行動や削除を希望するコンテンツがありましたら、引き続きご報告ください

モバイル表示 文字の折り返しは固定されないのでしょうか?

解決済

モバイル表示 文字の折り返しは固定されないのでしょうか?

Aa16
遊覧客
33 0 5

Debut テーマを利用しています。

 

オンラインストア>カスタマイズ>モバイル から

モバイル内での文字の折り返し位置を確認しています。

 

パソコンAからモバイル表示を確認すると文字の折り返しが発生していません。

パソコンBからモバイル表示を確認すると文字の折り返しが発生しています。

 

実際のところ、モバイルではどのように表示されるのか

気になっています。

 

トップページのリッチテキストセクション 見出し部分の表示についてです。

テキスト部分は、適当に段落分けできるため、

折返し部分を気にしないでできるのですが...

 

(ちなみに、見出しの段落分けはできませんよね?)

1 件の受理された解決策

Qcoltd
Shopify Partner
1215 486 465

成功

根本的にお知りになりたいこととは、異なる回答になってしまうかもしれませんが、

まず、スマートフォン実機での事前確認方法をお伝えします。

 

オンラインストア > テーマ > 対象のテーマの「アクション」 > 複製

 

を行い、テーマの複製を作成します。

次に、

 

オンラインストア > テーマ > 複製テーマの「カスタマイズ」

 

で、カスタマイズを行います。 

そして、

 

オンラインストア > テーマ > 複製テーマの「アクション」 > プレビュー

 

で、プレビューを表示しますと、フッターに、

「Share Preview」とおいうボタンが出てきますので、

そちらをクリックいただくと、

プレビュー画面をシェアするためのURLを取得できるモーダルが開きます。

 

そうして取得したURLを、メールなどでスマートフォンに送り、

実際にスマートフォンで表示確認をされると良いかと思います。

(もちろん、デスクトップPCでプレビューを開き、ブラウザの横幅を変更するだけでも、確認できるかと思います。)

 

しかし、

改行位置は、

モバイル端末の横幅や、フォントの種類/大きさによって、

変わってしまうかと思います。

そうしますと、ある程度妥協してある程度のところで、

最初から改行しておいた方が無難です。

 

ご質問から察するに、

リッチテキストセクションの「見出し」でそれを行えればベストということですね。

 

しかし、申し訳ございません。

綺麗な方法はなさそうです。

 

多少強引でもよく、

上側に余白ができてしまうことが気にならなず、

セマンティクス的におかしいことも許容ということでしたら、

あえて、見出しには何も入力せず、

「テキスト」に見出しに相当するものを入力し、太字にする、

というのはいかがでしょうか?

 

改行する際に、Enterではなく「Shift+Enter」とすることで、段落ではなく通常の改行(HTMLでいうところの<br>)が表現可能です。

 

参考になれば幸いです。

(キュー田辺)

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/

元の投稿で解決策を見る

2件の返信2

Qcoltd
Shopify Partner
1215 486 465

成功

根本的にお知りになりたいこととは、異なる回答になってしまうかもしれませんが、

まず、スマートフォン実機での事前確認方法をお伝えします。

 

オンラインストア > テーマ > 対象のテーマの「アクション」 > 複製

 

を行い、テーマの複製を作成します。

次に、

 

オンラインストア > テーマ > 複製テーマの「カスタマイズ」

 

で、カスタマイズを行います。 

そして、

 

オンラインストア > テーマ > 複製テーマの「アクション」 > プレビュー

 

で、プレビューを表示しますと、フッターに、

「Share Preview」とおいうボタンが出てきますので、

そちらをクリックいただくと、

プレビュー画面をシェアするためのURLを取得できるモーダルが開きます。

 

そうして取得したURLを、メールなどでスマートフォンに送り、

実際にスマートフォンで表示確認をされると良いかと思います。

(もちろん、デスクトップPCでプレビューを開き、ブラウザの横幅を変更するだけでも、確認できるかと思います。)

 

しかし、

改行位置は、

モバイル端末の横幅や、フォントの種類/大きさによって、

変わってしまうかと思います。

そうしますと、ある程度妥協してある程度のところで、

最初から改行しておいた方が無難です。

 

ご質問から察するに、

リッチテキストセクションの「見出し」でそれを行えればベストということですね。

 

しかし、申し訳ございません。

綺麗な方法はなさそうです。

 

多少強引でもよく、

上側に余白ができてしまうことが気にならなず、

セマンティクス的におかしいことも許容ということでしたら、

あえて、見出しには何も入力せず、

「テキスト」に見出しに相当するものを入力し、太字にする、

というのはいかがでしょうか?

 

改行する際に、Enterではなく「Shift+Enter」とすることで、段落ではなく通常の改行(HTMLでいうところの<br>)が表現可能です。

 

参考になれば幸いです。

(キュー田辺)

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/
Aa16
遊覧客
33 0 5

ありがとうございます。

 

Shift+Enter で <br> の使い方ができるのですね!

ひとつ、学習できました。

 

段落<p>ほど余白をあけたくないな、、というときがありました。

使ってみます。