WordPressテーマ「JINR」でH2見出しの左上に青い三角が入るエラーが発生した際の対応内容

2025-01-062025-01-13

（備忘録としてまとめておきます）

WordPressでブログやサイトを運営していると、予期せぬデザインの不具合やエラーに直面することがあります。

今回は、WordPressの人気テーマ「JINR」を使用している際に、H2見出しの左上に謎の「青い三角」が表示される問題について、その原因と解消方法を詳しく解説します。

同じ問題に悩んでいる方の参考になるよう、具体的な対応内容や原因、さらには設定後のCSSバックアップまで網羅的にまとめました。

WordPressテーマ「JINR」でH2見出しの左上に青い三角が表示されるエラーが発生した際の対応内容

WordPressテーマ「JINR」でH2見出しの左上に青い三角が入るエラーが発生していた
対応内容：見出しデザインを「CSSカスタマイズ用」に変更した
原因はCSSの適用に何らかのエラーが発生していたためと思われる(?)

症状：H2見出しの左上に青い三角が入っていた

ある日、サイトを更新していると、H2見出しの左上に「青い三角」が表示されていることに気付きました。この現象は、デザインの統一感を損ね、特にデザインにこだわりたい方にとっては気になるポイントです。

スクリーンショット画像はありませんが、簡単に状況を説明すると、H2見出しの左上に意図しないデザイン（青い三角）が追加されているような状態です。

【再現画像になりますが、以下のような状態になっていました】

上記見出し画像の左上のように、「青い三角」がなぜかはいっていました。

この「左上の青い三角を消したい」と思い、対応しました。

具体的対応内容

結論としては、見出しデザインを「CSSカスタマイズ用」に変更したら、解消されました。
具体的対応内容は以下の通り。

①ワードプレス管理画面から、外観→カスタマイズを選択

②見出しを選択

③H2、H3、H4の見出し設定を、それぞれ「CSSカスタマイズ用」に変更する。

この手順により、テーマ「JINR」の見出しデザインがCSSカスタマイズ用のものにリセットされ、意図しないデザイン（左上の青い三角）が消えました。「CSSカスタマイズ用」を選択することで、CSSコードを使って柔軟なデザイン調整が可能になります。

なお、見出しをCSSでカスタマイズする際には、以下のCSSクラスを用いるようです。

.d--h2-original
.d--h3-original
.d--h4-original

実際に使う際には、後ろにHTMLのタグ名を追加するようです。
（例：H2見出しの色を青にするCSSを適用する場合「.d–h2-original h2{color:blue}」にする等）

原因

原因は、CSSの適用に何らかのエラーが発生していたためと思われます。
(今回対応した設定を行わずにH2見出しに対してCSS設定をしていたため、スタイルが適用がうまく行われず、不完全なデザインが表示されるエラーが発生していた(?)）

エラーを解消した後のCSSバックアップ

WordPressテーマ「JINR」でH2見出しの左上に青い三角が表示されるエラーを解消した後のCSSを掲載しておきます。

子テーマのCSS

/**
Theme Name: JIN:R child
Template: jinr
Author: CROOVER Inc.
Author URI: https://croover.co.jp
Version: 1.00
*/

#jinrArticle h1{
 color: black;
 font-weight:1200;
 font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", sans-serif, "Noto Sans Emoji", "Noto Sans", "Noto Sans CJK JP";
 text-align:center;
}

.d--h2-original h2{
 color: #333;
 border-left: solid 8px #1C1234;
 background: repeating-linear-gradient(-45deg, #E8E4EF, #E8E4EF 3px,#F3F3F8 3px, #F3F3F8 7px);
 padding: 0.75em 1em;
 line-height:2.0;
 font-size:23px;
 font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", sans-serif, "Noto Sans Emoji", "Noto Sans", "Noto Sans CJK JP";
 margin-top: 1.62em;
 margin-bottom: 1.62em;
}

.d--h3-original h3{
 border-left: solid 6px #3C3B6E;
 font-size:21px;
 padding-left:10px;
 line-height:2.0;
 margin-top: 1.62em;
 margin-bottom: 1.62em;
}


.d--h4-original h4{
 border-bottom: solid 2px #3C3B6E;
 font-size:18px;
 padding-left:10px;
 line-height:1.7;
}

エディター用CSS

#editor h1{
 color: black !important;
 font-weight:1200 !important;
 font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", sans-serif, "Noto Sans Emoji", "Noto Sans", "Noto Sans CJK JP";
}

.is-root-container h2{
 color: #333;
 border-left: solid 8px #1C1234;
 background: repeating-linear-gradient(-45deg, #E8E4EF, #E8E4EF 3px,#F3F3F8 3px, #F3F3F8 7px);
 padding: 0.75em 1em !important;
 line-height:2.0 !important;
 font-size:23px !important;
 font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", sans-serif, "Noto Sans Emoji", "Noto Sans", "Noto Sans CJK JP";
}

.is-root-container h3 {
 border-left: solid 6px #3C3B6E !important;
 font-size:21px !important;
 padding-left:10px !important;
 line-height:2.0 !important;
}

.is-root-container h4 {
 border-bottom: solid 2px #3C3B6E !important;
 font-size:18px !important;
 padding-left:10px !important;
 line-height:1.7 !important;
}

【超個人的なバックアップ】という感じですが、、、自分のサイトデザインに合うようにカスタマイズするなど、誰かの何かに少しでも役立つようなら幸甚に存じます。