フォーラム掲示板について

以下の目的、注意点などご確認いただき、ご使用ください。

目的
Connect-CMSのユーザやConnect-CMSに興味のある方同士で自由に意見交換できる場を提供する目的で、コミュニティ掲示板として提供しています。
投稿方法
このサイトにユーザー登録することで、投稿することができます。
投稿内容
投稿内容は公開されます。
Connect-CMSに無関係な内容が記載されたと判断した場合、削除することがあります。
バグ情報
バグ(不具合)はGithub のIssues(https://github.com/opensource-workshop/connect-cms/issues)に記載していただくと、開発者に伝わりやすくなります。
また、セキュリティなど重大な事象の場合は、お問い合わせページよりお知らせください。優先的に調査いたします。
また、貢献ガイド(https://connect-cms.jp/abount/contributions)も参照をお願いします。

フォーラムでのサポート範囲

当フォーラムでは、Connect-CMSのトラブルなどの相談も記載いただけますが、作業を肩代わりするものではありません。
作業の依頼は、株式会社オープンソース・ワークショップの調査メニューなどをご検討ください。
https://opensource-workshop.jp/service/rescue

フォーラム掲示板

固定記事の表作成

2021年4月11日 20時11分 [dreamer]

固定記事の表作成で、2点、気づいたことがありましたので何かのご参考になればと思い、投稿させていただきます。

①パソコンでは、作成した表が、正常に表示されますが、スマホだと、画面からはみ出る。
※はじめから、スマホでの表示可能の大きさを想定して、表を作成する運用ということだと思われますが、、列数が限られた表になるのかもしれませんが、、

<パソコン画面>

<スマホ画面>


②スマホ・タブレットで、表の作成時、カラム選択がほぼできない。

 パソコンのマウスで、表作成時、下図の様にカラムを選択することは容易ですが、スマホ・タブレットでは、ほぼ選択することができませんでした。



(更新:2021年4月12日 10時27分)
スレッドの記事一覧
固定記事の表作成
2021-04-11 [dreamer]

固定記事の表作成で、2点、気づいたことがありましたので何かのご参考になればと思い、投稿させていただきます。

①パソコンでは、作成した表が、正常に表示されますが、スマホだと、画面からはみ出る。
※はじめから、スマホでの表示可能の大きさを想定して、表を作成する運用ということだと思われますが、、列数が限られた表になるのかもしれませんが、、

<パソコン画面>

<スマホ画面>


②スマホ・タブレットで、表の作成時、カラム選択がほぼできない。

 パソコンのマウスで、表作成時、下図の様にカラムを選択することは容易ですが、スマホ・タブレットでは、ほぼ選択することができませんでした。



2021-04-12 [公星]

 
確認してきました。

==== ==== ==== ====
①パソコンでは、作成した表が、正常に表示されますが、スマホだと、画面からはみ出る。
==== ==== ==== ====

開発者側の想定を私なりに推測しますと、
機能の役割分担として「意図通りの反応」だと思います。

---
【 勝手に代弁 】

○ WYSIWYGの「表」機能を使うと、簡単に表を作れます。

○ でも、見映えや動きについてはサポートされません。
 (一応、「詳細設定」で6種類の設定はできるけど)

○ だから、標準で「Bootstrap4」というCSSフレームワークを組み込んでいます。
 この機能を使い、各自が自由に設定して下さい。

    • ソースコードを開き、
       <div class="table-responsive">
         <table class="table">
         ・・・
         </table>
       </div>
    • と追記します
  • これで横長の表は「はみ出る部分を隠し、横スクロール式になる」はずです

    

 
○ 詳しくは「Bootstrap4 レスポンシブテーブル」などで検索して下さい。

  • 「ブレークポイント」を使う方法も見つかると思います
  • 例えば このサイト とか

 

---
プラグイン、ページ設定、サイト管理のセンターエリアなど、
いろんなところで任意の「class名」を登録できる作りになっていることから、
Connect-CMSはBootstrapや独自CSSの活用を期待しているのだろうと思います。

 
 

==== ==== ==== ====
②スマホ・タブレットで、表の作成時、カラム選択がほぼできない。
==== ==== ==== ====

iPhoneだけですが、試しました。

マウスでドラッグするように「行/列の数」を決めると失敗しやすく
使いたい行/列の最後(つまり、表の右下となる)マス目をダイレクトにタップすると成功しやすく感じました。

 

公星様、ありがとうございます。

説明していただいた通り、実施しますと、レスポンシブの表ができました。

いつも、お世話になり、本当にありがとうございます。