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

このトピックには5件の返信、2人の参加者があり、最後にkaorock72により4年、 6ヶ月前に更新されました。

6件の投稿を表示中 - 1 - 6件目 (全6件中)

投稿者

投稿
2020年5月4日 1:48 PM #37288

With
参加者

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

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

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

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

2020年5月5日 5:39 PM #37310

kaorock72
モデレーター

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

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

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

2020年5月7日 10:57 AM #37366

With
参加者

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

こちらを参照。

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

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

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

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

2020年5月7日 12:02 PM #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の指定はスライド資料の方にわかりやすく書かれています。
2020年5月7日 5:41 PM #37400

With
参加者

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

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

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

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

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

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

2020年5月8日 11:14 AM #37430

kaorock72
モデレーター

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

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

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

投稿