erekirekiさん

ちょっと時間がありませんので、できるだけ簡単に。

区切り線についてですが、ちょっと難解かも知れません。

ピンク？赤？の区切り線を試しにテスト環境で引いてみました。

Chromeのデベロッパーツールで確認すると、ピンクのスタイルが一見当たっているように見えます。

erekirekiさん

何分今日は時間がありません。

お問い合わせいただく際は、どこのことかを画像等で示していただけると、大変助かります。
（どこに区切り線が使われているかを探さなくてはならず、見た目だけでは区切り線とは分からないもので。）

とりあえず、erekirekiさんのサイトの状態を貼り付けておきます。

ChromeとEdge

mk2様

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

なるほど…ブラウザによって見え方が異なっているのですね。（こちらはずっとsafariで見てました。）

運営上、致命的ではないですが別の方法も検討すべきですね。

該当箇所の件は大変失礼しました。

最初に指定したURLの該当箇所（テーブル・区切り線）も、一応画像で送っておきます。

とりあえず一つずつ。
該当部分の区切り線に関しては、Chrome上で、少なくとも色はついている（灰色ではない）ようにデベロッパーツールでも見えます。
ただ、めっちゃ微妙な色ですね。

ただ、僕の環境だとFirefoxでも同じような色みでした。
※ちょっとFirefoxの方が鮮やか？鮮明に見えないのは黄色の背景色との兼ね合いでしょうか。

なので、こちらは一旦でいいのでもっと鮮やかな色（例えば赤とか）を選択していただいてよろしいでしょうか。

そうなんです。

Chromeのデベロッパーツールで色が見えるのに。。。と思っていました。

確か、hrタグは、高さを指定するか、高さは指定せずに、border-topだけ、もしくは、border-bottomだけのどちらか一方の太さを指定したような気がするのですが・・

全然調べていません。

おぼろげな記憶・・

hrタグの構造って、ちょっと変わっていて、確か以下のようになっていた気がするのですが・・

リフィトリーさん

はい、確か上下左右にborderがあったと思います。

しかも、立体的に見えるようにもなっていたと思いますので、リフィトリーさんが添付してくださった図のイメージだと思います。

ただ、HTML5で水平線の定義がなくなってしまい、ただの区切りの要素になったと思っています。
（でも、今のところ水平線で表示されるみたいですけど。）

全く調べていないので、合っているのかどうかわからないですが・・

.body hr.wp-block-separator {
    height: 2px;
    border: none;
    background-color: #fca49d;
}

または、間違っているかもしれませんが・・

.body hr.wp-block-separator {
    border-bottom: 2px solid #fca49d;
    border-top: none;
    border-left: none;
    border-right: none;
}

ただ、基本構造が、４辺のボーダーなので、理屈的にはうまく表示されるんじゃないかと思った訳です。

なんとなく思うのですが。。。

hrタグって、装飾用途では使わない方向で、ただの区切りでしかないのかな。。。と。

装飾用途であれば、上か下の要素のborderを指定するのかな、なんて思ってしまうのですが。

でも、hrタグだとmarginもデフォルトで指定されているので、便利なんですよね。

どういう使い方が正しいのか難しいです。

ブロックエディタで出てきますから、便利なら上手く使いたくなるのが人情かもしれませんね。

正解はない気がしてきました。

みなさんありがとうございます。

ちょっと、どれをどうしていいのか私には分からないので、区切り線をデフォルトで入っている赤に変えてみました。

safariだとやっぱり赤に変えても、灰色っぽいです。

erekirekiさん

その色をしばらくキープしていただくことは可能でしょうか。

他のブラウザでも確認してみたいです。

erekirekiさん

この色でしょうか。

やはり微妙な感じです。

Chrome拡大率100%

hrは、border:none; にして、height:2px；を足せばよいかもしれません。

テーブルの方は、セレクタでしょうか？

以下のような感じだと、どうでしょうか？

.scrollable-table th,
.scrollable-table td {
    border: solid 1px blue;
}

mk2様

ご確認ありがとうございます。

そちらの色ですね。やっぱり反映されてないですか…。

先ほどリフィトリー様から2回目に頂いたコードを追加CSSに入れた所、指定したかったピンク色になっていることを確認しました！ありがとうございます。

ただ、これを指定するとどの色をこの先選んでも、全部同じピンクになるという認識であってますでしょうか？

※確認だけして追加CSSは外してます。（編集画面上は赤です。）

私もテスト環境のサイトでhrのブロックを使ってみたことがあるのですが、どうも上手くいかずに、CSSのコードで装飾したような気がします。

WordPressのブロックエディターは、発展途上なので、完璧じゃないんですよね。

投稿者:: @leafytree

私もテスト環境のサイトでhrのブロックを使ってみたことがあるのですが、どうも上手くいかずに、CSSのコードで装飾したような気がします。

 

WordPressのブロックエディターは、発展途上なので、完璧じゃないんですよね。

ブロックエディターは発展途上なのですね、ブロックエディターになってから使い始めたので知りませんでした。

上記もカスタマイズの追加CSSで確認したところ、ちゃんと青くなっていました！

※こちらも確認して今は外してます。

これも区切り線のコードと同じく、全部のテーブルが一括で青くなる感じでしょうか？

erekirekiさん

追加CSSではなく、該当投稿のカスタムCSSにコードを書いてみてください。

カスタムCSSに書いたコードは、該当投稿にしか適用されません。

@mk2_mk2様

カスタムCSSの存在を忘れていました。

適応したい記事の区切り線とテーブルに１つずつ当てていくしかないのですね…。

変えられることがわかっただけでも、嬉しいです。

ありがとうございます。

私は、ブロックエディターは使っていないので、えーと、区切りブロックでしたか？

区切りブロックに編集画面右下の高度な設定を開いて、「追加CSSクラス」を設定して、CSSのセレクタにすれば、ブロックごとに色や太さを変えることもできるかもしれません。

erekirekiさん

はい、当てていくしかないです。

そう考えると、区切り線でなくても、上の要素にスタイルをあてても同じと思ってしまうんですよね。

リフィトリーさんの仰るとおり、区切りブロックにも、クラスの指定ができるようです。

そのページだけにCSSのコードを適用させたいときは、ｍｋ２さんのご案内のようにカスタムCSSに記述すればよいでしょうし、そのブロックだけに適用したいときは、追加CSSクラスにclassを設定して、セレクタに含めれば、そのブロックだけに適用されるかと思います。

mk2様　リフィトリー様

なるほど！クラス自体は作ったことはありませんが、おっしゃっている意味は分かります。

用途に合わせて、どちらかの方法で運用していきたいと思います。

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

例えば、テーブルブロックに、「hyou-01」などの追加CSSクラスを設定して、以下のように記述して、適用箇所を絞るとか・・

.hyou-01 .scrollable-table th,
.hyou-01 .scrollable-table td {
    border: solid 1px blue;
}

リフィトリー様

ありがとうございます ！後から追加CSSクラスを設定してみます。