[ 解決済 ] 「先輩社員からのメッセージ」の部分
[ 解決済 ] 「先輩社員からのメッセージ」の部分
- このトピックには4件の返信、2人の参加者があり、最後に
により1ヶ月前に更新されました。
-
投稿
-
■ 利用テーマとバージョン :
Lightning Pro 8.5.3
VK Blocks Pro 0.60.1
WordPress 5.6■ 質問内容：
左側に写真、右側に文字（段落？）で
「枠線ボックス」で設定していると思われるのですが、ブラウザの横幅を小さくすると、
上に写真、下に文字（段落？）になります。左側の写真を左寄せにして、右側に文字（段落）で設定しても
上に写真、下に文字（段落？）にならないのですが、
設定方法が違っているのでしょうか？写真の大きさなのでしょうか・・・
よろしくお願いします。
左側の写真を左寄せにして、右側に文字（段落）で設定しても
「左寄せ」と書いてるのを見ると、floatかtext-alignで左にしてるのでは？
それなら、「枠線ボックス」の問題ではなく、ブロックエディタの使い方の問題です。
画像の大きさは関係ありません。リンク先は、「枠線ボックス」の中にカラムブロックを入れ、
右と左の幅を変え、その別々の枠の中に、画像とテキストを入れています。
ブラウザの横幅を小さくすると、左側が上になり、順に下に並びます。これを逆に配置して、でもスマホでは上に画像。みたいにしたいなら
配置はそのままで、
flex-flow: row-reverse;
にして、スマホでは、columnでこのCSSを切る。
みたいなCSSで実装するのがいい場合もあります。「ブロックエディタ 使い方」で検索し、出てくるところの記事から使い方を覚えていけば、幅が広がり、使いこなせるようになりますよ。
junonさん
ありがとうございます。
グーテンベルグを使い始めたばかりで、
カラム概念もなんとなくしか理解していませんでした。２カラムにして、写真とカラムの幅を調整したら見栄え良く実現できました。
flex-flow: row-reverse;
はどこに記載してよいか分からず、
[カラム][高度な設定][追加 CSS クラス]に入力してみましたが、レビューで見ても入れ替わらずでした💦💦解決できてよかったです。
CSSは、
違う条件の場合の、ヒントとして書いたものです。
スタイルを当てるクラスを探さないといけませんので、そのままコピペでは、どこに貼っても効きません。今回は、「左側の写真を左寄せ」という言葉があったので、fukugiさんのスキルを想像し、回答を考えました。
この言葉がなければ、2,3回のやり取りで、実装状況をお聞きしないといけなかったと思います。CSSも覚えれば、色々変更できますが、
CSSを覚えなくても、かなりのことが変更・編集できるテーマをご利用なので、
まずは「ブロックエディタ 使い方」を覚えていく方が、幅が広がり、使いこなせるようになると思います。偉そうに言っているように見えたらすみません。私なら。という私見です。
- このトピックに返信するにはログインが必要です。
