[ 解決済 ] 【機能追加要望】「レスポンシブテーブル」を制作しました。簡単にフォントのサイズ変更がしたい。

タグ: クラシック　表　フォント変更　テーブル　CSSクラスを指定した場所だけに効くようにする

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

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

投稿者

投稿
2022年3月2日 10:13 AM #62581

With
参加者

■ 期待する動作
【機能追加要望】
レスポンシブの表を作成（クラシック）して
表の中のフォントサイズを変更したいのですが
フォントサイズ変更する項目はありますか。

「レスポンシブテーブル」をテンプレートとして制作しました。
フォントサイズの変更をしたいのですが
項目上部「段落」しか見つかりません。
フォントサイズ変更する項目はありますか。

html,CSSで作成しましたので、クラシックとなります。
ブロックにすると崩れますので困っております。

今後の機能追加要望としては
Lightning G3で「レスポンシブテーブル」の
基本テンプレートがあると良いと思います。

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

■ 自分で試した事
「レスポンシブテーブル」をテンプレートとして制作しました。
フォントサイズの変更をしたいのですが
「段落」しか見つかりません。
フォント変更する項目はありますか。

html,CSSで作成しましたので、クラシックとなります。
ブロックにすると崩れますので困っております。

Attachments:
You must be logged in to view attached files.

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

2022年3月2日 10:30 AM #62585
うなこ
モデレーター
浜野哲明さんが作成した「Flexible Table Block」という柔軟なテーブルが作成できるプラグインがあります。
セルのフォントサイズ変更も結合も簡単にできますので、すごく使いやすかったです。
このプラグインでどんなテーブルでも作れるのでは？と思うほど良かったので、おすすめしています。
こちらをインストールするのも良いのではないかなと思いました。

▼Flexible Table Block

Flexible Table Block

コアのブロックテーブルですと、どうしても思うようにできないので、このプラグインはブロックを使用する人はみんな待ち望んでいたのではないかなと思います。
- この返信は2年、 8ヶ月前にうなこが編集しました。
2022年3月3日 4:30 PM #62644

With
参加者

うなこ様
ご連絡を頂き、誠にありがとうございます。

「Flexible Table Block」を実際に見せて頂きました。
スマートフォンで1段のレスポンシブデザインになるのか
確認しましたが最初の1行のみでしたので
弊社の制作したレイアウトにすること自体難しいと思います。
1段といっても、かなり複雑に絡んでいますので
カスタマイズすることはやはり難しいですね。

既存レイアウトは問題ないので
文字の大きさだけのことでしたので。

2022年3月3日 4:34 PM #62645

With
参加者

こちらをクリック

アドレスが間違っておりました。
誠に失礼しました。

4.テーブルレスポンシブを使用
こちらが参考レイアウトになります。
レスポンシブで縦1段になります。

2022年3月3日 7:50 PM #62653

石川＠Vektor,Inc.
キーマスター
制作実績

> html,CSSで作成しましたので、クラシックとなります。

html で作成したのであればカスタムHTMLブロックにタグを入れれば良いのではないですか？

2022年3月4日 6:29 AM #62658

With
参加者

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

画像を添付させて頂きます。
クラシック上部「段落」の並びに
「フォント」項目があればフォントを自由に変更できると思っておりました。
※CSSを書かなくて良い。

以下の「CSSクラスを指定した場所だけに効くようにする」を読んでいます。
例では段落に効かせる内容になっておりますが
テーブルではどのようにタグを打ち込めばよいのでしょうか。
試しているのですが、
テーブル内のフォントだけに効かせる方法が分かりません。

CSSクラスを指定した場所だけに効くようにする

以下は「4.テーブルレスポンシ」のhtmlになります。

<table class=”tbl-r05″>
<tbody>
<tr class=”thead”>
<th> </th>
<th>デザイン</th>
<th>コーディング</th>
<th>その他費用</th>
<th>小計</th>
</tr>
<tr>
<td>ディレクション</td>
<td data-label=”デザイン”>–</td>
<td data-label=”コーディング”>–</td>
<td data-label=”その他”>
￥100,000
</td>
<td data-label=”合計”>
￥100,000
</td>
</tr>
<tr>
<td>トップページ</td>
<td data-label=”デザイン”>
￥70,000
</td>
<td data-label=”コーディング”>
￥30,000
</td>
<td data-label=”その他”>–</td>
<td data-label=”合計”>
￥100,000
</td>
</tr>
<tr>
<td>下層ページ</td>
<td data-label=”デザイン”>
￥20,000
</td>
<td data-label=”コーディング”>
￥10,000
</td>
<td data-label=”その他”>–</td>
<td data-label=”合計”>
￥30,000
</td>
</tr>
<tr class=”last”>
<td>お問合せフォーム</td>
<td data-label=”デザイン”>–</td>
<td data-label=”コーディング”>
￥20,000
</td>
<td data-label=”その他”>–</td>
<td data-label=”合計”>
￥20,000
</td>
</tr>
</tbody>
</table>

Attachments:
You must be logged in to view attached files.

2022年3月4日 10:40 AM #62663
うなこ
モデレーター
クラシック上部「段落」の並びに
「フォント」項目があればフォントを自由に変更できると思っておりました。
※CSSを書かなくて良い。

Advanced Editor Tools (旧名 TinyMCE Advanced)プラグインを利用されていますか？
もしそうであれば、ダッシュボードの【設定】→Advanced Editor Tools (旧名 TinyMCE Advanced)の設定画面から「フォントサイズ」を、ドラッグ&ドロップで追加することができます。
https://wic-writer.net/tinymce-advanced/

テーブル内のフォントだけに効かせる方法が分かりません。

CSSでtable内のセル（td,th）のフォントサイズを変更する場合は以下のCSSでいかがでしょうか。
var(--vk-size-text)　は16pxなどの数字にしていただいても大丈夫です。お好きな数字を入れてください。
```
table td, table th {
 font-size: var(--vk-size-text);
}
```
- この返信は2年、 8ヶ月前にうなこが編集しました。
2022年3月4日 11:35 AM #62671

With
参加者

誠にありがとうございます。
まずは、Advanced Editor Tools (旧名 TinyMCE Advanced)プラグイン
の設定で「フォントサイズ」項目を設定しても表示されませんでした。
VKで何か影響しているからでしょうか。

有効にして確認しましたが今も非表示のままです。

2022年3月4日 11:55 AM #62676

With
参加者

Advanced Editor Tools (旧名 TinyMCE Advanced)プラグイン
の表示設定で「フォントサイズ」をドラッグ&ドロップで
追加設定しても編集画面に「フォントサイズ」項目が出てきません。
　　　↓↓
以下のCSSを追加CSSに挿入することで解決しました。
誠にありがとうございます。

table td, table th {
font-size: var(–vk-size-text);
}
　
又は

table td, table th {
font-size: 19px;
}

2022年3月4日 1:39 PM #62682

うなこ
モデレーター

誠にありがとうございます。
まずは、Advanced Editor Tools (旧名 TinyMCE Advanced)プラグイン
の設定で「フォントサイズ」項目を設定しても表示されませんでした。
VKで何か影響しているからでしょうか。

有効にして確認しましたが今も非表示のままです。

Advanced Editor Tools (旧名 TinyMCE Advanced)の設定を変更してから、下の方にある「変更を保存」ボタンは押していますか？
私のVK製品が入っている環境では問題なく表示されましたので、もしかしたらボタンを押していないのかなと考えました。

以下のCSSを追加CSSに挿入することで解決しました。
誠にありがとうございます。

CSSで解決できたとのことで、安心いたしました。

2022年3月4日 1:59 PM #62684

With
参加者

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

「フォントサイズが表示されている」ということですが、
添付画像を参照ください。
「classic2.jpg」

Advanced Editor Tools (旧名 TinyMCE Advanced)プラグインの
編集画面と編集ページをキャプチャしたのですが
フォントサイズの項目が表示されておりません。
設定で何か違うのでしょうか。

/////////////////////////////////

Advanced Editor Tools (旧名 TinyMCE Advanced)の設定を変更してから、下の方にある「変更を保存」ボタンは押していますか？
私のVK製品が入っている環境では問題なく表示されましたので、もしかしたらボタンを押していないのかなと考えました。

Attachments:
You must be logged in to view attached files.

2022年3月4日 2:03 PM #62687

石川＠Vektor,Inc.
キーマスター
制作実績

Advanced Editor Tools の設定の　問題だと思います。
設定 > Advanced Editor Tools あたり探してみてください。
（他社プラグインにつき詳細はわかりません。）

2022年3月4日 2:11 PM #62689

With
参加者

確認しましたら問合せフォームも
追加CSSでカスタマイズしているため影響が出ました。
他のテーブルには影響が出ないようにしたいのですが。
classで範囲の設定ができるのでしょうか。
classの設定方法が分かりません。
追加CSSに記載したのは以下です。

table td, table th {
font-size: 19px;
}

2022年3月4日 2:28 PM #62691

With
参加者

ご連絡を頂き、誠にありがとうございます。
Advanced Editor Tools の設定で
ブロックエディター（TinyMCE）の
「フォントサイズ」をドラッグ&ドロップしたら表示されました。
解決しました。
誠にありがとうございます。

///////////////////////////////////

Advanced Editor Tools の設定の　問題だと思います。
設定 > Advanced Editor Tools
投稿者

投稿