[ 解決済 ] 【機能追加要望】「レスポンシブテーブル」を制作しました。簡単にフォントのサイズ変更がしたい。
[ 解決済 ] 【機能追加要望】「レスポンシブテーブル」を制作しました。簡単にフォントのサイズ変更がしたい。
-
投稿者投稿
-
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
コアのブロックテーブルですと、どうしても思うようにできないので、このプラグインはブロックを使用する人はみんな待ち望んでいたのではないかなと思います。
- この返信は2年、 7ヶ月前にうなこが編集しました。
2022年3月3日 4:30 PM #62644
With参加者うなこ様
ご連絡を頂き、誠にありがとうございます。「Flexible Table Block」を実際に見せて頂きました。
スマートフォンで1段のレスポンシブデザインになるのか
確認しましたが最初の1行のみでしたので
弊社の制作したレイアウトにすること自体難しいと思います。
1段といっても、かなり複雑に絡んでいますので
カスタマイズすることはやはり難しいですね。既存レイアウトは問題ないので
文字の大きさだけのことでしたので。2022年3月3日 4:34 PM #626452022年3月3日 7:50 PM #62653> html,CSSで作成しましたので、クラシックとなります。
html で作成したのであれば カスタムHTMLブロックにタグを入れれば良いのではないですか?
2022年3月4日 6:29 AM #62658
With参加者石川様
誠にありがとうございます。画像を添付させて頂きます。
クラシック上部「段落」の並びに
「フォント」項目があればフォントを自由に変更できると思っておりました。
※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=”その他”>
<p>¥100,000</p>
</td>
<td data-label=”合計”>
<p>¥100,000</p>
</td>
</tr>
<tr>
<td>トップページ</td>
<td data-label=”デザイン”>
<p>¥70,000</p>
</td>
<td data-label=”コーディング”>
<p>¥30,000</p>
</td>
<td data-label=”その他”>–</td>
<td data-label=”合計”>
<p>¥100,000</p>
</td>
</tr>
<tr>
<td>下層ページ</td>
<td data-label=”デザイン”>
<p>¥20,000</p>
</td>
<td data-label=”コーディング”>
<p>¥10,000</p>
</td>
<td data-label=”その他”>–</td>
<td data-label=”合計”>
<p>¥30,000</p>
</td>
</tr>
<tr class=”last”>
<td>お問合せフォーム</td>
<td data-label=”デザイン”>–</td>
<td data-label=”コーディング”>
<p>¥20,000</p>
</td>
<td data-label=”その他”>–</td>
<td data-label=”合計”>
<p>¥20,000</p>
</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年、 7ヶ月前にうなこが編集しました。
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 #62687Advanced 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 -
投稿者投稿
- このトピックに返信するにはログインが必要です。