「メイド・イン・ヘブン」スキン適用中

Cocoonフォーラム

サイト内検索
書き込みの前に以下の3点をご確認ください。
  1. 1つのトピックにつき1つの質問を書き込んでください
  2. 不具合・カスタマイズ対象ページのURLを提示高速化を無効にしてください
  3. 該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります

何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。

不具合・カスタマイズ対象ページのURL:

相談内容:

不具合の発生手順:

解決のために試したこと:

※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:

※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。

環境情報の取得方法はこちら。
https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
https://wp-cocoon.com/theme-trouble/

フォーラム利用ガイドリンク

  1. フォーラムガイドライン
  2. よくある質問と答え(FAQ)
  3. サポート対象外のケース
  4. 原因不明の不具合用トラブルシューティング
  5. トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw
  6. 真っ白画面でのエラーメッセージの確認方法
  7. ブラウザ環境チェックツール
  8. Cocoonカスタマイズ依頼

フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。

h2の見出しの線をカスタマイズしたい
 
共有:
通知
すべてクリア

[解決済] h2の見出しの線をカスタマイズしたい

15 投稿
2 ユーザー
14 Likes
2,093 表示
yoyo
 yoyo
(@yoyo)
Active Member Registered
結合: 2年前
投稿: 7
Topic starter  

初めまして。

カスタマイズ対象ページのURL: https://yoshiyattemiru.com/archives/rgb-colorcode.html

スキンはモダンブラックを使用しております。

相談内容:h2の見出しの線をカスタマイズしたい。

解決のために試したこと:h2には上下に二重線があるのですがCSSのコードを追加しても外側の太い線が消えない、または色の変更できません。二重線を消して新たに別の色の線をつけたいのです。

追加したコードは
/* h2 */
.article h2{
border-top: 2px solid #E9E9E9;
border-bottom: 2px solid #E9E9E9;
padding: 5px 10px;
}

/* h3 */
.article h3{
border-bottom: 4px solid #E9E9E9;
padding: 5px 10px;
}

ですが、h2の内側の線やh3の線はこれで変更できました。
border:noneにしてもh2の外側の線は消えませんでした。

よろしくお願いいたします。

 

環境情報

----------------------------------------------
サイト名:よし!やってみる
サイトURL: https://yoshiyattemiru.com 
ホームURL: https://yoshiyattemiru.com 
コンテンツURL:/wp-content
インクルードURL:/wp-includes/
テンプレートURL:/wp-content/themes/cocoon-master
スタイルシートURL:/wp-content/themes/cocoon-child-master
親テーマスタイル:/wp-content/themes/cocoon-master/style.css
子テーマスタイル:/wp-content/themes/cocoon-child-master/style.css
スキン:/wp-content/themes/cocoon-master/skins/skin-modernblack/style.css
WordPressバージョン:5.9.2
PHPバージョン:7.4.25
ブラウザ:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/99.0.4844.51 Safari/537.36
サーバーソフト:Apache
サーバープロトコル:HTTP/1.1
言語:ja
----------------------------------------------
テーマ名:Cocoon
バージョン:2.4.2.4
カテゴリ数:13
タグ数:123
ユーザー数:2
----------------------------------------------
子テーマ名:Cocoon Child
バージョン:1.1.3
style.cssサイズ:845バイト
functions.phpサイズ:203バイト
----------------------------------------------
Gutenberg:1
AMP:0
PWA:0
Font Awesome:4
Auto Post Thumbnail:1
Retina:0
ホームイメージ:/wp-content/uploads/2022/03/yoshiyattemiru.jpg
----------------------------------------------
ブラウザキャッシュ有効化:0
HTML縮小化:0
CSS縮小化:0
JavaScript縮小化:0
Lazy Load:0
WEBフォントLazy Load:0
----------------------------------------------
利用中のプラグイン:
Contact Form 7 5.5.6
Movable Type and TypePad Importer 0.4
----------------------------------------------

   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 7064
 

yoyoさん

投稿者:: @yoyo

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

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

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

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

   
yoyo and わいひら reacted
yoyo
 yoyo
(@yoyo)
Active Member Registered
結合: 2年前
投稿: 7
Topic starter  

mk2様

ありがとうございます、メモさせていただきました。
それと疑似要素をググって少し調べてきました。
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がありました。
黒をベースにしたシンプルなスキンとありましたので少し色を変えるだけにしておきます。
ありがとうございました。
(ブログに経緯を書いてもよろしいでしょうか)

This post was modified 2年前 by yoyo

   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 7064
 

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;
}

 


   
yoyo and わいひら reacted
yoyo
 yoyo
(@yoyo)
Active Member Registered
結合: 2年前
投稿: 7
Topic starter  

わざわざ確認してくださり、ありがとうございます。
タグや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;
}


   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 7064
 

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さんのお好みだと思います。


   
yoyo and わいひら reacted
yoyo
 yoyo
(@yoyo)
Active Member Registered
結合: 2年前
投稿: 7
Topic starter  

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

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

/* 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行を消すと上下に黒い線が現れるのでバックの色と同じにしました。


   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 7064
 

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でなくても良さそうにも思いますし。)

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


   
yoyo and わいひら reacted
yoyo
 yoyo
(@yoyo)
Active Member Registered
結合: 2年前
投稿: 7
Topic starter  

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

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

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


   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 7064
 

yoyoさん

投稿者:: @yoyo

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

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

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

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

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

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


   
yoyo and わいひら reacted
yoyo
 yoyo
(@yoyo)
Active Member Registered
結合: 2年前
投稿: 7
Topic starter  

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

投稿者:: @mk2_mk2

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

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


   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 7064
 

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

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

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

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

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

 

という手順ですね。

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

WordPressには触らないです。
(ログインしない。)

 

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


   
yoyo and わいひら reacted
yoyo
 yoyo
(@yoyo)
Active Member Registered
結合: 2年前
投稿: 7
Topic starter  

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


   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 7064
 

yoyoさん

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

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

投稿者:: @yoyo

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

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

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

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

 

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

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

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

 

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

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


   
yoyo and わいひら reacted
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 7064
 

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


   
共有:

問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。

また、有用な回答があった場合は返信右下にある「いいね!」もご活用ください。回答者の励みになります。

「いいね!」機能はフォーラム登録者のみが利用できる機能です。

CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。

フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。

最近の書き込みはこちら。

詳細なカスタマイズ依頼をするならこちら。

タイトルとURLをコピーしました