yoyoさん

投稿者:: @yoyo

border:noneにしてもh2の外側の線は消えませんでした。

外側の線は、疑似要素で指定されているからだと思います。

ただ消せば良いのであれば、以下でいけると思います。

.article h2::before {
    border-top: none;
}
.article h2::after {
    border-bottom: none;
}

ｍｋ２様

ありがとうございます、メモさせていただきました。
それと疑似要素をググって少し調べてきました。
beforeとafterというコードがあるのですね。

このスキンのcssを見たところ、

.article h2 {
position: relative;
margin-top: 50px;
margin-bottom: 28px;
padding: 15px;
background-color: transparent;
border-top: solid 2px #202020;
border-bottom: solid 2px #202020;
}
.article h2:before,
.article h2:after {
position: absolute;
content: "";
display: block;
width: 100%;
left: 0;
}
.article h2:before {
border-top: solid 4px #202020;
top: -8px;
}
.article h2:after {
border-bottom: solid 4px #202020;
bottom: -8px;
}

beforeとafterがありました。
黒をベースにしたシンプルなスキンとありましたので少し色を変えるだけにしておきます。
ありがとうございました。
（ブログに経緯を書いてもよろしいでしょうか）

yoyoさん

すみません。

サイトを拝見すると、書く必要のないCSSまで、追加CSSにお書きになっているような気がします。

例えば、スキンのCSSを丸々そのままお書きになっていたり。

こういう書き方をしてしまうと、スキンのものなのか、ご自分でカスタマイズしたものなのか、判断しづらくなってしまうと思いますが・・・。

もちろん、重複して書いても、別に表示に不具合が出る訳ではないですから、それを分かった上でお書きになっているのであれば・・・とは思いますが。
（分かりづらい気が個人的にはします。行数も長くなりますし、サイズも大きくなりますし。）

例えば、以下の部分ですが…。

.article h2:before,
.article h2:after {
	position: absolute;
	content: "";
	display: block;
	width: 100%;
	left: 0;
}
.article h2:before {
	border-top: solid 4px #AAAAAA;
	top: -8px;
}
.article h2:after {
	border-bottom: solid 4px #AAAAAA;
	bottom: -8px;
}

もし、色を変えるだけであれば、以下のように書けば良いと思います。

.article h2::before {
    border-top-color: #aaaaaa;
}
.article h2::after {
    border-bottom-color: #aaaaaa;
}

わざわざ確認してくださり、ありがとうございます。
タグやCSSのコードなどほとんどわからずいつもコピペしてます。（お恥ずかしい）
変更する箇所だけでいいのですね。

もし上下の線を消して新たに、例えば文字のバックの色を変えたいときはこのようなコードでいいのでしょうか。

/* h2 */
.article h2{
border-top-color: #aaaaaa;
border-bottom-color: #aaaaaa;
background-color: #aaaaaa;
padding: 5px 10px;
}

.article h2::before {
border-top: none;
}
.article h2::after {
border-bottom: none;
}

yoyoさん

コンピューターのことなので、曖昧な書き方では正直難しいかな・・・と思います。

投稿者:: @yoyo

もし上下の線を消して新たに、例えば文字のバックの色を変えたいときはこのようなコードでいいのでしょうか。

ここにはいくつも要素が含まれていて、お書きになったコードには、ここの文章には含まれていないことが書かれています。

「上下の線を消す」
（スキンの外側の線）

.article h2::before {
    border-top: none;
}
.article h2::after {
    border-bottom: none;
}

「文字のバックの色」
（h2の背景色ってことですね）

.article h2{
    background-color: #aaaaaa;
}

日本語だけをとらえると、以下のコードで事足りるということになってしまいます。

最初にあったスキンの内側の線が色が違うので、同化させたいのか。
いっそのこと消してしまうのかで、borderは変わると思います。
（同じ色ならborderはなくても良い気はしますけど。）

また、h2の要素内の余白の調整のために「padding」の調整もなさっているようです。

これらは、ブラウザに指示を出すためには、曖昧な表現では難しいんですよね。
ブラウザというのか、コンピューターは曖昧には動きませんので。

とは言え、borderやpaddingは、yoyoさんのお好みだと思います。

本当ですね、コンピュータには曖昧な日本語じゃだめなんですね。申し訳ない。

上下の線を消して文字のバックの色を変える。

/* h2 */
.article h2{
background-color: #e8e8e8;
border-top-color: #e8e8e8;
border-bottom-color: #e8e8e8;
}

.article h2::before {
border-top: none;
}
.article h2::after {
border-bottom: none;
}

文字のバックの色を変える、だけではまだ曖昧かもしれませんが
border-top-color: #e8e8e8;
border-bottom-color: #e8e8e8;
この2行を消すと上下に黒い線が現れるのでバックの色と同じにしました。

yoyoさん

好みもあるでしょうから、その辺りはお任せです。

上下の線に関しても、考え方は複数あると思います。

例えば、今後背景色を変える可能性があるとすると、3箇所変えないといけないので…。

1箇所で済むようには以下のようにしてしまうのも、1案です。

.article h2{
    background-color: #e8e8e8;
    border: none;
    padding-top: 2px;
    padding-bottom: 2px;
}

.article h2::before {
border-top: none;
}
.article h2::after {
border-bottom: none;
}

上下の内側の線は消して、その線の太さ分、余白を広げたという感じです。
（paddingが増えて面倒かも…paddingでなくても良さそうにも思いますし。）

ここは考え方次第ですしね、今後メンテナンスし易いようにお好みで良いと思います。

おお、こちらのほうがすごくスマートですね。

「外観のカスタマイズの追加CSS」が便利でして、確定ボタンを押さなくてもコードを書いたり消したりするだけで右側にそのまま表示されるのでおもしろいです。

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

yoyoさん

投稿者:: @yoyo

「外観のカスタマイズの追加CSS」が便利でして、確定ボタンを押さなくてもコードを書いたり消したりするだけで右側にそのまま表示されるのでおもしろいです。

確かに、追加CSSではそのまま表示されますから便利だと思います。

ただ、CSSのコードの量が増えると、コードの視認性が低下して、苦痛に感じます。

追加CSSはコード表示の部分が狭いですから。

私は子テーマのスタイルシートを、テキストエディタで編集しています。
（追加CSSは使っていないです。）

コードの量や、メンテナンスのしやすさなど、お好みでご判断いただければ良いと思います。

テーマファイルエディターですね。

投稿者:: @mk2_mk2

CSSのコードの量が増えると、コードの視認性が低下して、苦痛に感じます。

こういったことも知らないのでいろいろ勉強になります。ありがとうございます。

テーマファイルエディタでも良いのですけど。

ただ、これは更新時に何かとエラーになったり、そもそもWordPressにログインしていないと使えないですよね。

1行だけ更新などなら、それも良いですが。

私は先程書いたように、「テキストエディタ」を使います。

• 子テーマのスタイルシートをダウンロード
• バックアップとしてコピーもしておく
• テキストエディタで編集
• アップロード

という手順ですね。

手間なようですけど、色々考えると私にはこれが良いみたいです。

WordPressには触らないです。
（ログインしない。）

では、そろそろ休みます。

テーマファイルエディタとテキストエディタは別のものなのですね。
しかもWordPressにログインせずに作業とは、、
初めて聞く言葉ばかりな上にまだまだ知らないことがたくさんあります。
そもそもCSSを触ることすらちょっと躊躇いたします。
失敗して取り返しのつかないことになりそうで。
この技も覚えておきます。ありがとうございました。

yoyoさん

「テーマファイルエディタ」はWordPressの用語。

「テキストエディタ」は、PCの用語かと思います。（スマホのアプリもありますけど。）

投稿者:: @yoyo

失敗して取り返しのつかないことになりそうで

CSSは、HTMLをどう装飾するか、ですから、基本的に取り返しのつかないことにはならないです。

変であれば、消したり戻したりすれば良いだけです。

データベースや設定ファイルの内容を触る訳ではないです。

たくさん修正すると、人間には戻すことが難しい場合もあります。

そのため、私の手順にはバックアップが含まれていて、戻せるようにしてあります。

またテキストエディタを使用することで、「元に戻す」こともできます。

完全に雑談化してきた気がします。

どこかで「解決済」にしていただくタイミングが欲しいですね。

あ、もう解決済なのですね。
では、この件はこれにて。