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

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

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

  • このトピックには13件の返信、3人の参加者があり、最後にWithにより2年、 7ヶ月前に更新されました。
14件の投稿を表示中 - 1 - 14件目 (全14件中)
  • 投稿者
    投稿
  • #62581

    With
    参加者

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

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

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

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

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

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

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

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

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

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

    #62585

    うなこ
    モデレーター

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

    ▼Flexible Table Block

    Flexible Table Block

    コアのブロックテーブルですと、どうしても思うようにできないので、このプラグインはブロックを使用する人はみんな待ち望んでいたのではないかなと思います。

    • この返信は2年、 7ヶ月前にうなこが編集しました。
    #62644

    With
    参加者

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

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

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

    #62645

    With
    参加者

    こちらをクリック

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

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

    #62653

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

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

    #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=”その他”>
    <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.
    #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ヶ月前にうなこが編集しました。
    #62671

    With
    参加者

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

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

    #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;
    }

    #62682

    うなこ
    モデレーター

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

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

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

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

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

    #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.
    #62687

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

    #62689

    With
    参加者

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

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

    #62691

    With
    参加者

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

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

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

14件の投稿を表示中 - 1 - 14件目 (全14件中)
  • このトピックに返信するにはログインが必要です。