トップページのテーブルを装飾したい

  • このトピックには4件の返信、2人の参加者があり、最後にhurleyにより1年、 6ヶ月前に更新されました。
5件の投稿を表示中 - 1 - 5件目 (全5件中)
  • 投稿者
    投稿
  • #14786
    hurley
    閲覧者
    0

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

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

    ===

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

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

     

     

    0
    #14799
    キタジマ タカシ
    キーマスター
    340

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

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

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

    0
    #14801
    hurley
    閲覧者
    0

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

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

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

    0
    #14804
    キタジマ タカシ
    キーマスター
    340

    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
    #14810
    hurley
    閲覧者
    0

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

    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
5件の投稿を表示中 - 1 - 5件目 (全5件中)
  • トピック「トップページのテーブルを装飾したい」には新しい返信をつけることはできません。