サポート » 使い方全般 » 固定ページの表作成でサイズを調整したいです。

  • 解決済 megumitoshioka

    (@megumitoshioka)


    お世話になります。
    カテ違いだったら失礼します。

    テーマはVW Bakeryを使用しています。
    固定ページに運営者情報のページを作成中なのですが
    プロフィール内に
    プラグインを使わないで表を入れたいと思い、
    2列2行の簡単な表をExcelで作成したものを貼りつけました。

    公開しているものを見ていただくとわかりますが
    上が固定幅のテーブルセルをオフにしている状態、
    下が固定幅のテーブルセルをオンにしている状態なのですが
    上の表だと窮屈な感じがするし、だからといって下の表だと
    画面いっぱいに広がってしまうので適当ではないと思います。
    要はどちらも好みではないので、幅を調整したいのです。
    (スマホでの表示を確認すると下の、固定幅のテーブルセルをオンにしている時の表示のほうが
    バランスが良いと思いました。)

    表作成用のプラグインを入れたら、細かな調整ができるのか
    追加CSSで対応できるものなのか、そのあたりのことがわかっておりません。

    別の方法として、トップページに設置してあるウィジェットを表示させることができれば
    その幅の分は小さくなると思うので運営者情報などの固定ページにも
    ウィジェットを設置すればいいのか、
    通常は固定ページにウィジェットを設置はしないものなんでしょうか。

    希望としましては、プロフィールに入れた表の幅が問題で
    その調整さえできれば、あとはキャラクターのイラストを貼るだけで
    運営者情報のページは完成します。

    何か良いアイデアがあれば教えていただけないでしょうか。

    ヘルプの必要なページ: [リンクを見るにはログイン]

13件の返信を表示中 - 1 - 13件目 (全13件中)
  • こんにちは

    プラグインを使用するのはどうでしょうか?
    Advanced Gutenberg プラグインの Advanced Table ブロックは、ブロックの設定から最大幅を指定することができます。

    プラグインを使用したくない場合は、CSS で max-width プロパティを指定してみてはどうでしょうか?
    参考ページ: http://www.htmq.com/style/max-width.shtml

    こんにちは、

    苦労して、サイト構築中の様子ですが、ちょっと心配なことがあるので、書き込みをさせていただきます。

    見た感じ、ブロックエディタを使ってテーブルを作成しているようですね。

    今作成しているテーブル要素は、多分次のメジャーバージョンでは、HTMLの構造が変わるので、今の苦労が、先々、水の泡になるかもしれません。

    ブロックエディタを使う場合は、gutenbergプラグインを併用しておいた方がいいと思います。

    gutenberg なしのブロックエディタのテーブルブロックのHTML構造

    
    <table class="wp-block-table">
    	<tbody>
    		<tr>
    			<td>hello</td>
    			<td>world</td>
    		</tr>
    		<tr>
    			<td>hello</td>
    			<td>world</td>
    		</tr>
    	</tbody>
    </table>
    

    gutenberg あり(ver6.4)のブロックエディタのテーブルブロックのHTML構造

    
    <figure class="wp-block-table">
    	<table class="">
    		<tbody>
    			<tr>
    				<td>hello</td>
    				<td>world</td>
    			</tr>
    			<tr>
    				<td>hello</td>
    				<td>world</td>
    			</tr>
    		</tbody>
    	</table>
    </figure>
    

    固定幅、と自動幅のテーブルサイズが異なるのは、固定幅の場合だけwidth:100%;の指定があるためだと思います。共通の幅を指定すればいいと思います。

    また、table要素は、max-widthが効かないので、その点注意してください。

    • この返信は2 週間、 2 日前に  nobita さんが編集しました。

    @nobita さん

    table要素は、max-widthが効かないので、その点注意してください。

    下記ページなどでは、CSS 2.1 では table 要素における max-width の動作は未定義とありますが、
    https://developer.mozilla.org/ja/docs/Web/CSS/max-width

    W3C の CSS の仕様(下記 URL)には「Applies to: all elements but non-replaced inline elements, table rows, and row groups」とあります。
    https://www.w3.org/TR/CSS2/visudet.html#min-max-widths

    つまり、table 要素にも適用されると解釈できるのですが、違うかしら・・・?
    ちなみに、私が試したブラウザ(Chrome 76、Firefox 68、Safari 12 および Edge 44)では、max-width は効きました。

    • この返信は2 週間、 2 日前に  ishitaka さんが編集しました。
    • この返信は2 週間、 2 日前に  ishitaka さんが編集しました。
    • この返信は2 週間、 2 日前に  ishitaka さんが編集しました。

    @ishitaka さん

    tableでmax-widthが効くととても素晴らしいことで、古い思い込みしていたのかと思って、私なりに確認してみました。

    https://tenman.info/study/css3/table-overflow.php

    「そういう事じゃないよ」というのがありましたら、ぜひ教えてください。

    ishitaka 様、nobita 様、たいへんお世話になっております。

    お話し中すみません。
    いろいろ提案してくださっている方法、紹介してくださったリンク先を読んでいますが
    おふたりの会話についていけていません^^;
    ですので、私への回答は後で構いませんのでお話を続けてくださって大丈夫です。

    とりあえず、Advanced Gutenberg プラグインをインストールしてみました。
    Advanced Table ブロックを使ってみていますが、これで
    Max width (px)1414で設定してみましたが公開しているページからは変化が見られません。
    どの数値にしても幅は変わらないのです。
    他に設定する場所の抜けがあるのか、見ているのですが。。。

    あと、CSS で max-width プロパティを指定する方法も試してみたのですが
    これは固定ページの編集画面の右側にある「高度な設定」の追加CSSクラスというボックスに入力して
    いいのでしょうか。(Advanced Table ブロックに指定したら
    is-style-defaultと最初から入っていますので上書きするのかと思い、そこに以下のコード?を入力しましたが、こちらも変化なしです。)

    外観>カスタマイズ>追加CSSのほうに貼りつけるとエラーの表示が出ますので実行せずにいます。

    追加しようとしたコード↓
    textarea.sample {max-width: 70%;}

    table {
        width: 1000px;
        max-width: 100%;
    }

    この場合は、ブラウザによって挙動が違うようですね。どこを基準にするかの違いでしょうか?

    table {
        width: 1000px;
        max-width: 123px;
    }

    table {
        width: 100%;
        max-width: 123px;
    }

    に関しては、Chrome、Firefox、Safari および Edge で同じように効きますね。

    本題に関しては、

    table {
        width: 100%;
        max-width: 123px;
        display: block; /* 仕様ではインライン以外とのことなので、念の為に。 */
    }

    こんな感じで出来るのではないでしょうか。

    • この返信は2 週間、 2 日前に  ishitaka さんが編集しました。

    Max width (px)1414で設定してみましたが公開しているページからは変化が見られません。

    Max width は最大幅です。小さい値(1140 以下)を指定してみてください。

    ishitaka 様

    こんばんは。お手数おかけしています。

    固定ページの編集画面、Advanced Table ブロックを指定して
    右側に表示される「テーブル設定」でMax width (px)のゲージが表示されていて
    そのゲージの最大(右端まで移動させた時)が1999になっていたので
    だいたいその70%くらいがいいかと思い、1414にしていました。

    先程、1000以下の数値で入力してみて幅が変わったのが確認できました。
    ありがとうございます。

    @ishitaka さん

    回答ありがとうございました。

    回答を以下のリンクでテストしましたが、うまくいかないですね

    https://tenman.info/study/css3/table-overflow.php

    @nobita さん

    white-space: pre; ですかね。外してみてください。

    @megumitoshioka さん

    max-width では、うまくいかない場合がある(white-space など)ようです。
    今回は、プラグインで対応したということなので、問題が解決されたら「解決済み」にしてください。

    ishitaka 様、nobita 様、このたびはありがとうございました。

    今回もいろいろ提案していただきましたが私の知識、理解が浅いことで
    未消化ですが時間を作ってCSSなどについて勉強し、
    max-width などを活用できるようになりたいと思います。

    どうもありがとうございました。

    こちらは解決済みとさせていただきます。

    @megumitoshioka さん

    max-widthの件で、横道の議論を作ってしまってごめんなさいね。
    解決おめでとうございます。

    @ishitaka さん

    white-space: pre; ですかね。外してみてください。

    外しても、同じです。CSSに説明書いておいたので、white-space: pre; をセットした意味は理解していただけると思っていたのですが、残念です。

    また、いろいろと教えてさいね。

    @nobita

    ありがとうございます。

    いえいえ、とんでもないです。(max-widthの件)
    もっと私に知識があれば、おっしゃっていることの内容が理解できたかもと思います。

    答えはひとつではないので、いろいろな解決方法があると思います。
    これも勉強だと思いますし、今後のためにプラスになっているはずです。

    また、私はこれからも壁にぶちあたると思いますので
    こちらのフォーラムでお会いすることもあると思います。
    その時はよろしくお願いいたします^^

    このたびはありがとうございました。

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