サポート » 使い方全般 » テーブル枠をつけたい

  • WordPressは5.2.2でテーマはCustomifyを使っている初心者です。

    Tableについてお尋ねします。
    固定ページの編集なのですが、現在、テーマのデフォルトで使っているTableが枠線がないもので、セル幅が固定されていません。

    枠線をつけてセルを固定したいのですが、高度な設定でCSSのタグをコピペしてもなんら変わりません。。
    基本的なことが分かってないからだと思います。

    どのようなCSSのタグを入れたら「枠線」付きで「セル幅」の固定数を入れられるでしょうか。

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

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

    下記のようなスタイルで枠線は表示されると思います。

    .wp-block-table.is-style-stripes {
    	border-collapse: collapse;
    }
    .wp-block-table.is-style-stripes th,
    .wp-block-table.is-style-stripes td {
    	border: solid 1px lightgray;
    }

    テーブルブロックのブロックスタイルを追加するのもいいかもしれません。

    下記コードは、テーブルブロックのブロックスタイルに「枠あり」スタイルを追加する例です。

    テーマの functions.php に、

    function my_enqueue_block_editor_assets() {
    	$script = <<<SCRIPT
    wp.blocks.registerBlockStyle('core/table', {
      name: 'border',
      label: '枠あり'
    });
    SCRIPT;
    	wp_add_inline_script( 'wp-blocks', $script );
    }
    add_action( 'enqueue_block_editor_assets', 'my_enqueue_block_editor_assets' );

    スタイルに、

    wp-block-table.is-style-border {
    	border-collapse: collapse;
    }
    .wp-block-table.is-style-border th,
    .wp-block-table.is-style-border td {
    	border: solid 1px lightgray;
    }

    早速、ありがとうございます。

    頂いたタグを指定の場所(function.phpとstyle.css)に入れてみましたが、枠が表示されません。
    また、固定ページのtableの高度な設定ランにに最初に送って頂いたタグを入れましたが、こちらは編集画面で枠が表示されたものの、プレビュー、更新しても枠が表示されません。

    何か邪魔をしているものがあるのでしょうか。

    頂いたタグを指定の場所(function.phpとstyle.css)に入れてみましたが、枠が表示されません。

    テーブルブロックのスタイル(右側のパネルのブロックタブのスタイル)にて、「枠あり」を選択していますか?

    また、固定ページのtableの高度な設定ランにに最初に送って頂いたタグを入れましたが、こちらは編集画面で枠が表示されたものの、プレビュー、更新しても枠が表示されません。

    テーブルブロックのスタイルで「ストライプ」を選択していますか?例で挙げたスタイルはストライプ用です。

    お世話になります。

    > テーブルブロックのスタイル(右側のパネルのブロックタブのスタイル)にて、
    > 「枠あり」を選択していますか?

    テーブルブロックのスタイルを見ても「枠あり」が追加されておりませんので選択できません。

    > テーブルブロックのスタイルで「ストライプ」を選択していますか?
    > 例で挙げたスタイルはストライプ用です。

    ストライプを選択しているのですが、、
    編集画面では枠は引かれるのですが、どうしたわけかプレビュー、更新画面では変化なしです。。
    どうしたらよろしいのですかね。。

    あと、テーブルブロックのスタイルに「テーブル設定」とあり、「固定幅のテーブルセル」を選択してみたのですが、ブラウザのサイズを変えても固定幅にはならず、一文字が縦になり上下に長細くなるという状況ですが、この「固定幅のテーブルセル」はどういう設定に変更する選択なのでしょうか。

    Honda

    (@rocketmartue)

    頂いたタグを指定の場所(function.phpとstyle.css)に入れてみましたが、枠が表示されません。

    Customify のフロント側で実際に読み込まれているのは、style.css ではなくて style.min.css の方ですので、style.css に追記してもダメです。
    また、テーマの function.php や style.css を直接編集した場合、テーマのアップデートで編集した部分が上書きされてしまいますので、子テーマを作成するかプラグイン化することをおすすめします。

    Honda

    (@rocketmartue)

    子テーマやプラグイン化が難しい場合は、

    .wp-block-table {
        display: table;
    }

    と、
    @ishitakaさんの書かれているスタイル

    wp-block-table.is-style-border {
    	border-collapse: collapse;
    }
    .wp-block-table.is-style-border th,
    .wp-block-table.is-style-border td {
    	border: solid 1px lightgray;
    }

    を「外観」>「カスタマイズ」の追加CSSに記入して「公開」ボタンをクリックしてください。

    Hondaさま、ありがとうございます。

    サイトで調べてなんとか子テーマは作ってみたのですが、仕組みを理解しておらず、まったく活用できていません。
    プラグインというのは子テーマ専用の何か便利なものですか?

    Hondaさまのご指南の通りに追加CSSに記入して公開したのですが、なぜかテーブルのセル幅はいい感じで広がりましたが、枠の線は表示されません。
    編集画面では何か変化があった感じなんですけど、どうしてもプレビュー→公開では変わりません。

    TableひとつひとつHtmlタグで書いていった方がいいのですかね。
    このテーマを使わない方がいいのでしょうか。

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