[hurley]

トピックを新しく立てる方は次の項目も記述してください（要望トピックの場合は不要です）。

【お使いの Snow Monkey のバージョン】v5.6.2
【お使いのブラウザ】
【当該サイトのURL】（公開できる場合は書いていただいたほうがスムーズです）

===

トップページに以下の画像のようなテーブルを作成したいと思っています。

どうカスタマイズすれば良いのか悩んでいるのでご教示いただけないでしょうか。

 

 

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

エディターはブロックエディターをお使いでしょうか？クラシックエディターをお使いでしょうか？

いろいろな方法があると思いますが、僕なら、ブロックエディターの場合はテーブルブロックでつくって class をあてて CSS で装飾します。クラシックエディターなら HTML でテーブルを組みますかね。

とりあえずどちらのエディターを使っているか教えてください！

♥ 0

いいねをした人: 居ません

[hurley]

TablePressプラグインでショートコードを貼り付けるとか、TinyMCE Advancedで装飾ごとつくってしまうか考えたのですが、やはりgutenbergでテーブルブロックでやるのがシンプルなのかぁと思っています。

どのクラスにcssを当てるのか、カスタマイザーcssを使うか、mysnowmonkyを使うのか、子テーマを作らなければならないのか、その辺りがよく分かっていません。cssの場所もChromeの検証画面で探してみたのですが構造がよく分かっていなくて・・・

素人な質問で恐縮ですがよろしくお願いいたします。

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

TablePressプラグインでショートコードを貼り付けるとか、TinyMCE Advancedで装飾ごとつくってしまうか考えたのですが、やはりgutenbergでテーブルブロックでやるのがシンプルなのかぁと思っています。

もちろん TablePress や TinyMCE Advanced が良いよ！という方もいると思います！僕はどちらも使ったことがないので、ブロックエディターのテーブルブロックでやる方法を…。

こんな感じでテーブルブロックで形をつくって、高度な設定のところに適当なオリジナルのクラス名を設定してください。

そして、下記の CSS をカスタマイザー > 追加 CSS に追加してください。クラス名が .my-table の想定で書いていますので、クラス名を変更する場合は適当に書き換えてください。

.my-table td {
white-space: nowrap;
background-color: #fff;
text-align: center;
}

.my-table tr:first-child td {
background-color: #fafafa;
}

.my-table td:first-child {
background-color: #f0f5f6;
}

.my-table tr:first-child td:first-child {
background-color: #fff;
}

するとこうなります。

♥ 1

いいねをした人: 居ません

[hurley]

うまくいきました！ばっちりです。

https://snow-monkey.2inc.org/forums/topic/%E3%83%86%E3%83%BC%E3%83%96%E3%83%AB%E3%81%AE%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%82%92%E5%A4%89%E3%81%88%E3%81%9F%E3%81%84%E3%81%A7%E3%81%99/

ここでは、直接クラス名を指定しておりましたが、追加cssクラスを作ればよかったのですね。

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

♥ 0

いいねをした人: 居ません

[投稿者]

投稿