[ 解決済 ] outerブロック内の文字の大きさについて

[kaio0905]

outerブロックを使用して背景画像を設定し、レイアウト設定は全幅でしています。

テキスト設定で16にしています。

PC表示ですと、普通に背景画像に文字が見れるのですが、
スマホでみると、PCと同じにならないです。

スマホだと、文字が折り返されて（文字の大きさがPCと同じ）、PCの大きさのままで画像が縦に長くなっています。

どなたかスマホ表示でも、PCと同じように見える方法をお願いいたします。

[Vektor,Inc]

ちょっと状況がイマイチ把握できないのですが、PC用とモバイル用でそれぞれ適したサイズの画像を用意して配置するのではダメでしょうか？

[kaio0905]

分かりづらくてすみません。

PC用とモバイル用でそれぞれ適したサイズの画像をアップロードし、設定しています。

文字の表示についてお聞きしたいと思います。
PC画面でouterブロックを背景に文字を入力します。
フォントの大きさは16pxになります。

モバイル画面で確認しますと、モバイル用に文字が調整されてなくて
Outerブロック内で折り返されています。（1行になるのが望ましい）

モバイル画面にて文字が1行で見れるようにするにはどうしたらよろしいでしょうか？

[Vektor,Inc]

> モバイル用に文字が調整されてなくて

通常の文字サイズはモバイル時は14px / 画面サイズが大きい時では16pxになるようにしていますが、
画面サイズに対してどれくらいの文字サイズに変更したいか、
改行させるのか改行させたくないのかは内容やサイトオーナーの好みによって変わると思うので、
個別に調整が必要です。

外観 > カスタマイズ > 追加css などに

@media ( max-width: 768px; ){
.vk_outer p {
white-space:nowrap;
font-size:12px;
}
}

と書けば良いのではないかと思います。

と、言いたいところですが、これでは該当の箇所はいいかもしれませんが、他の vk_outer の部分も全て適用されてしまいます。

変更したい場所がピンポイントの場合は、編集画面で該当のブロックを選択すると右下に「高度な設定」というパネルが出るので、そこに識別用のcssを記載します。

例えば test と入力したら

.vk_outer p.test {
white-space:nowrap;
font-size:12px;
}
}

のようになりますが、どの場所にどんなcssクラス名を指定してどうしたいかはちょっとわかりかねますので、
下記参照の上いろいろ試してみてください。

全てのWordPressテーマで使える！デザインをピンポイントで変更する方法 〜親テーマのCSSは書き換えないで〜

[投稿者]

投稿