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

[With]

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

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

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

---

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

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

[kaorock72]

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

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

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

[With]

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

こちらを参照。

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

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

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

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

[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の指定はスライド資料の方にわかりやすく書かれています。

[With]

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

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

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

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

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

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

[kaorock72]

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

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

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

[投稿者]

投稿