[ 解決済 ] 「先輩社員からのメッセージ」の部分

VWSとは フォーラム VK Blocks・Pro [ 解決済 ] 「先輩社員からのメッセージ」の部分

[ 解決済 ] 「先輩社員からのメッセージ」の部分

  • このトピックには4件の返信、2人の参加者があり、最後にfukugiにより1ヶ月前に更新されました。
5件の投稿を表示中 - 1 - 5件目 (全5件中)
  • 投稿者
    投稿
  • #47392

    fukugi
    参加者

    ■ 利用テーマとバージョン :
    Lightning Pro 8.5.3
    VK Blocks Pro 0.60.1
    WordPress 5.6

    ■ 質問内容:
    左側に写真、右側に文字(段落?)で
    「枠線ボックス」で設定していると思われるのですが、

    ブラウザの横幅を小さくすると、
    上に写真、下に文字(段落?)になります。

    採用情報

    左側の写真を左寄せにして、右側に文字(段落)で設定しても
    上に写真、下に文字(段落?)にならないのですが、
    設定方法が違っているのでしょうか?

    写真の大きさなのでしょうか・・・

    よろしくお願いします。

    #47393

    junon
    参加者

    左側の写真を左寄せにして、右側に文字(段落)で設定しても

    「左寄せ」と書いてるのを見ると、floatかtext-alignで左にしてるのでは?

    それなら、「枠線ボックス」の問題ではなく、ブロックエディタの使い方の問題です。
    画像の大きさは関係ありません。

    リンク先は、「枠線ボックス」の中にカラムブロックを入れ、
    右と左の幅を変え、その別々の枠の中に、画像とテキストを入れています。
    ブラウザの横幅を小さくすると、左側が上になり、順に下に並びます。

    これを逆に配置して、でもスマホでは上に画像。みたいにしたいなら
    配置はそのままで、
    flex-flow: row-reverse;
    にして、スマホでは、columnでこのCSSを切る。
    みたいなCSSで実装するのがいい場合もあります。

    「ブロックエディタ 使い方」で検索し、出てくるところの記事から使い方を覚えていけば、幅が広がり、使いこなせるようになりますよ。

    • この返信は1ヶ月前にjunonが編集しました。
    #47396

    fukugi
    参加者

    junonさん

    ありがとうございます。

    グーテンベルグを使い始めたばかりで、
    カラム概念もなんとなくしか理解していませんでした。

    2カラムにして、写真とカラムの幅を調整したら見栄え良く実現できました。

    flex-flow: row-reverse;
    はどこに記載してよいか分からず、
    [カラム][高度な設定][追加 CSS クラス]に入力してみましたが、レビューで見ても入れ替わらずでした💦💦

    #47407

    junon
    参加者

    解決できてよかったです。

    CSSは、
    違う条件の場合の、ヒントとして書いたものです。
    スタイルを当てるクラスを探さないといけませんので、そのままコピペでは、どこに貼っても効きません。

    今回は、「左側の写真を左寄せ」という言葉があったので、fukugiさんのスキルを想像し、回答を考えました。
    この言葉がなければ、2,3回のやり取りで、実装状況をお聞きしないといけなかったと思います。

    CSSも覚えれば、色々変更できますが、
    CSSを覚えなくても、かなりのことが変更・編集できるテーマをご利用なので、
    まずは「ブロックエディタ 使い方」を覚えていく方が、幅が広がり、使いこなせるようになると思います。

    偉そうに言っているように見えたらすみません。私なら。という私見です。

    #47411

    fukugi
    参加者

    junonさん

    丁寧な対応に感謝です。

    cssも初心者で少し分かるような分からないような状態です(汗

    まずは「ブロックエディタ 使い方」を覚えていきたいと思います。

    皆様のアドバイスも1つ1つ理解しながら進みます!

    ありがとうございました。

5件の投稿を表示中 - 1 - 5件目 (全5件中)
  • このトピックに返信するにはログインが必要です。