[ 解決済 ] 【機能追加要望】「レスポンシブテーブル」を制作しました。簡単にフォントのサイズ変更がしたい。
[ 解決済 ] 【機能追加要望】「レスポンシブテーブル」を制作しました。簡単にフォントのサイズ変更がしたい。
- このトピックには13件の返信、3人の参加者があり、最後に
により2年、 8ヶ月前に更新されました。
-
投稿
-
■ 期待する動作
【機能追加要望】
レスポンシブの表を作成（クラシック）して
表の中のフォントサイズを変更したいのですが
フォントサイズ変更する項目はありますか。「レスポンシブテーブル」をテンプレートとして制作しました。
フォントサイズの変更をしたいのですが
項目上部「段落」しか見つかりません。
フォントサイズ変更する項目はありますか。html,CSSで作成しましたので、クラシックとなります。
ブロックにすると崩れますので困っております。今後の機能追加要望としては
Lightning G3で「レスポンシブテーブル」の
基本テンプレートがあると良いと思います。どうぞ宜しくお願いします。
■ 自分で試した事
「レスポンシブテーブル」をテンプレートとして制作しました。
フォントサイズの変更をしたいのですが
「段落」しか見つかりません。
フォント変更する項目はありますか。html,CSSで作成しましたので、クラシックとなります。
ブロックにすると崩れますので困っております。該当URL : https://*********※該当URLはフォーラムライセンスが有効のユーザーにのみ表示されます
浜野 哲明さんが作成した「Flexible Table Block」という柔軟なテーブルが作成できるプラグインがあります。
セルのフォントサイズ変更も結合も簡単にできますので、すごく使いやすかったです。
このプラグインでどんなテーブルでも作れるのでは？と思うほど良かったので、おすすめしています。
こちらをインストールするのも良いのではないかなと思いました。▼Flexible Table Block
コアのブロックテーブルですと、どうしても思うようにできないので、このプラグインはブロックを使用する人はみんな待ち望んでいたのではないかなと思います。
うなこ様
ご連絡を頂き、誠にありがとうございます。「Flexible Table Block」を実際に見せて頂きました。
スマートフォンで1段のレスポンシブデザインになるのか
確認しましたが最初の1行のみでしたので
弊社の制作したレイアウトにすること自体難しいと思います。
1段といっても、かなり複雑に絡んでいますので
カスタマイズすることはやはり難しいですね。既存レイアウトは問題ないので
文字の大きさだけのことでしたので。> html,CSSで作成しましたので、クラシックとなります。
html で作成したのであれば カスタムHTMLブロックにタグを入れれば良いのではないですか？
石川様
誠にありがとうございます。画像を添付させて頂きます。
クラシック上部「段落」の並びに
「フォント」項目があればフォントを自由に変更できると思っておりました。
※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>クラシック上部「段落」の並びに
「フォント」項目があればフォントを自由に変更できると思っておりました。
※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); }誠にありがとうございます。
まずは、Advanced Editor Tools (旧名 TinyMCE Advanced)プラグイン
の設定で「フォントサイズ」項目を設定しても表示されませんでした。
VKで何か影響しているからでしょうか。有効にして確認しましたが今も非表示のままです。
Advanced Editor Tools (旧名 TinyMCE Advanced)プラグイン
の表示設定で「フォントサイズ」をドラッグ&ドロップで
追加設定しても編集画面に「フォントサイズ」項目が出てきません。
↓↓
以下のCSSを追加CSSに挿入することで解決しました。
誠にありがとうございます。table td, table th {
font-size: var(–vk-size-text);
}
又はtable td, table th {
font-size: 19px;
}誠にありがとうございます。
まずは、Advanced Editor Tools (旧名 TinyMCE Advanced)プラグイン
の設定で「フォントサイズ」項目を設定しても表示されませんでした。
VKで何か影響しているからでしょうか。有効にして確認しましたが今も非表示のままです。
Advanced Editor Tools (旧名 TinyMCE Advanced)の設定を変更してから、下の方にある「変更を保存」ボタンは押していますか？
私のVK製品が入っている環境では問題なく表示されましたので、もしかしたらボタンを押していないのかなと考えました。以下のCSSを追加CSSに挿入することで解決しました。
誠にありがとうございます。CSSで解決できたとのことで、安心いたしました。
誠にありがとうございます。
「フォントサイズが表示されている」ということですが、
添付画像を参照ください。
「classic2.jpg」Advanced Editor Tools (旧名 TinyMCE Advanced)プラグインの
編集画面と編集ページをキャプチャしたのですが
フォントサイズの項目が表示されておりません。
設定で何か違うのでしょうか。/////////////////////////////////
Advanced Editor Tools (旧名 TinyMCE Advanced)の設定を変更してから、下の方にある「変更を保存」ボタンは押していますか？
私のVK製品が入っている環境では問題なく表示されましたので、もしかしたらボタンを押していないのかなと考えました。Advanced Editor Tools の設定の 問題だと思います。
設定 > Advanced Editor Tools あたり探してみてください。
（他社プラグインにつき詳細はわかりません。）確認しましたら問合せフォームも
追加CSSでカスタマイズしているため影響が出ました。
他のテーブルには影響が出ないようにしたいのですが。
classで範囲の設定ができるのでしょうか。
classの設定方法が分かりません。
追加CSSに記載したのは以下です。table td, table th {
font-size: 19px;
}
- このトピックに返信するにはログインが必要です。
