VWSとは フォーラム Lightning Lightnig Proでレスポンシブ対応の表を作成したい。

Lightnig Proでレスポンシブ対応の表を作成したい。

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

    With
    参加者

    Lightnig Proを使用しております。
    レスポンシブ対応の表を作成したい。
    ブロック機能で可能ですか。

    参考サイトの該当URLで確認下さい。

    どうぞ宜しくお願いします。


    該当URL : https://*********

    ※該当URLはフォーラムライセンスが有効のユーザーにのみ表示されます

    #37310

    kaorock72
    キーマスター

    WordPress標準の「表」ブロックは
    レスポンシブ対応していますが
    該当URLで案内されているような見出し固定などの
    凝った表は、標準の「表」ブロックの機能のみでは
    できないです。

    例えば、該当URLで案内されているコードを
    HTMLの記述は「カスタムHTML」ブロックで入れて
    CSSの記述は 外観 > カスタマイズ外観 > 追加CSS
    に追記するなどでご自身で工夫をすれば
    標準のブロックを利用してできると思います。

    ただ、該当URLに記載のコードの内容を
    精査したわけではないので、思い通りに表示されない時は
    ご自身でCSSの調整等が必要になります。

    #37366

    With
    参加者

    誠にありがとうございます。

    こちらを参照。

    【CSSカスタマイズ】と
    表示したいぺーいjに【カスタムHTML】に
    コピーして貼り付けました。

    追記:
    CSS記入箇所はいくつかありますが検証した結果、
    「CSSカスタマイズ」のみレスポンシブに反応しました。

    その結果、他の問題が発生しました。
    ホームページ上のロゴ画像とPR Contentの画像
    がとても小さく表示されてしまいました。
    どのようにすれば影響なく以下のレスポンシブ表示が出来ますか。

    どうぞ宜しくお願いします。

    #37367

    kaorock72
    キーマスター

    このようなCSSの書き方だと他のimg全部が影響を受けますので
    CSSの調整がご自身で必要です。

    以下のようにclassを指定すれば、該当の表内の画像のみに
    反映されると思われます。

    .car-name img {
      width: 80px;
      display: block;
      margin: 0 auto;
      margin-bottom: .5rem;
    }

    CSSの調整についてはこちらの記事を参考にしてください。

    これだけは押さえておきたい!WordPress運用記事特集


    「2.4. CSSカスタマイズで文字サイズや色などを変更する」

    idやclassの指定はスライド資料の方にわかりやすく書かれています。

    #37400

    With
    参加者

    【CSSカスタマイズ】で
    「width: AUTO;」に変更。
    以下の通り、矢印部分だけ変更しました。
    レスポンシブ表示が出来ました。

    img {
    width: AUTO;  ←
    display: block;
    margin: 0 auto;
    margin-bottom: .5rem;
    }

    その次に、詳細設定から「ブロックへ変換」を行ってみました。
    見た目はブロック化できましたが
    実際にプレビューで
    スマホ画面サイズにしてみると
    上部のタイトルだけが右側に残った状態でした。
    どうすればタイトルを非常時になりますか。

    ブロック化にする前はタイトルは非表示になり
    レスポンシブで表示されました。

    これでブロック化が出来れば複製をして
    テンプレートが出来ます。

    どうぞ宜しくお願いします。

    #37430

    kaorock72
    キーマスター

    簡単な記述のHTMLでしたらブロックへ変換しビジュアル編集も可能ですが
    「ブロックへ変換」するとHTMLタグに設定してあるCSSのクラスやIDの設定が
    削除されることがあるため、ご注意ください。
    カスタムHTMLブロックはHTMLを直接記述する際に使用するブロックです。

    > ブロック化にする前はタイトルは非表示になり
    > レスポンシブで表示されました。

    ブロックへ変換しなければご希望の状態になるようですので
    WordPresss標準のブロック・カスタムHTMLブロックを利用して
    凝った表を入れたいのであれば「ブロックへ変換」は行わずに
    そのブロックを編集したい時は直接HTMLを編集すればよいと思います。

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