/ 最終更新日 : 2021年1月24日 fukugi [ 解決済 ] 「先輩社員からのメッセージ」の部分 VWSとは › フォーラム › VK Blocks・Pro › [ 解決済 ] 「先輩社員からのメッセージ」の部分 [ 解決済 ] 「先輩社員からのメッセージ」の部分 このトピックには4件の返信、2人の参加者があり、最後にfukugiにより3年、 10ヶ月前に更新されました。 5件の投稿を表示中 - 1 - 5件目 (全5件中) 投稿者 投稿 2021年1月24日 10:35 PM #47392 fukugi参加者 ■ 利用テーマとバージョン : Lightning Pro 8.5.3 VK Blocks Pro 0.60.1 WordPress 5.6 ■ 質問内容: 左側に写真、右側に文字(段落?)で 「枠線ボックス」で設定していると思われるのですが、 ブラウザの横幅を小さくすると、 上に写真、下に文字(段落?)になります。 採用情報 左側の写真を左寄せにして、右側に文字(段落)で設定しても 上に写真、下に文字(段落?)にならないのですが、 設定方法が違っているのでしょうか? 写真の大きさなのでしょうか・・・ よろしくお願いします。 2021年1月24日 11:07 PM #47393 ベストアンサー junon参加者 左側の写真を左寄せにして、右側に文字(段落)で設定しても 「左寄せ」と書いてるのを見ると、floatかtext-alignで左にしてるのでは? それなら、「枠線ボックス」の問題ではなく、ブロックエディタの使い方の問題です。 画像の大きさは関係ありません。 リンク先は、「枠線ボックス」の中にカラムブロックを入れ、 右と左の幅を変え、その別々の枠の中に、画像とテキストを入れています。 ブラウザの横幅を小さくすると、左側が上になり、順に下に並びます。 これを逆に配置して、でもスマホでは上に画像。みたいにしたいなら 配置はそのままで、 flex-flow: row-reverse; にして、スマホでは、columnでこのCSSを切る。 みたいなCSSで実装するのがいい場合もあります。 「ブロックエディタ 使い方」で検索し、出てくるところの記事から使い方を覚えていけば、幅が広がり、使いこなせるようになりますよ。 この返信は3年、 10ヶ月前にjunonが編集しました。 2021年1月25日 12:25 AM #47396 fukugi参加者 junonさん ありがとうございます。 グーテンベルグを使い始めたばかりで、 カラム概念もなんとなくしか理解していませんでした。 2カラムにして、写真とカラムの幅を調整したら見栄え良く実現できました。 flex-flow: row-reverse; はどこに記載してよいか分からず、 [カラム][高度な設定][追加 CSS クラス]に入力してみましたが、レビューで見ても入れ替わらずでした💦💦 2021年1月25日 3:10 PM #47407 junon参加者 解決できてよかったです。 CSSは、 違う条件の場合の、ヒントとして書いたものです。 スタイルを当てるクラスを探さないといけませんので、そのままコピペでは、どこに貼っても効きません。 今回は、「左側の写真を左寄せ」という言葉があったので、fukugiさんのスキルを想像し、回答を考えました。 この言葉がなければ、2,3回のやり取りで、実装状況をお聞きしないといけなかったと思います。 CSSも覚えれば、色々変更できますが、 CSSを覚えなくても、かなりのことが変更・編集できるテーマをご利用なので、 まずは「ブロックエディタ 使い方」を覚えていく方が、幅が広がり、使いこなせるようになると思います。 偉そうに言っているように見えたらすみません。私なら。という私見です。 2021年1月25日 6:55 PM #47411 fukugi参加者 junonさん 丁寧な対応に感謝です。 cssも初心者で少し分かるような分からないような状態です(汗 まずは「ブロックエディタ 使い方」を覚えていきたいと思います。 皆様のアドバイスも1つ1つ理解しながら進みます! ありがとうございました。 投稿者 投稿 5件の投稿を表示中 - 1 - 5件目 (全5件中) このトピックに返信するにはログインが必要です。 ログイン ユーザー名: パスワード: ログイン状態を保持 ログイン