WordPressのCSSがLightingテーマで正しく反映されない

Lightingのテーマを使ってブログを書いています。サルワカさんのCSSをお借りしてh4タグの装飾をおこなったのですが、記事のサイドバー部分の表示が崩れてしまいました。画像のように表示されてしまっています。タイトルに　模様が被ってしまっている状態です。

現状の表示

追加CSSを外すと問題なく表示されます。

コード

CSS
1h4{
2position: relative;
3padding-left: 35px;
4background-color:white;
5}
6h4:before{
7position: absolute;
8font-family: "Font Awesome 5 Free";
9content: "\f0eb";
10background: #ffca2c;
11color: white;
12font-weight: normal;
13font-size: 15px;
14border-radius: 50%;
15left: 0;
16width: 25px;
17height: 25px;
18line-height: 25px;
19text-align: center;
20top: 50%;
21-moz-transform: translateY(-50%);
22-webkit-transform: translateY(-50%);
23-ms-transform: translateY(-50%);
24transform: translateY(-50%);
25}
26h4:after {/*吹き出しのちょこんと出た部分*/
27content: '';
28display: block;
29position: absolute;
30left: 20px;
31height: 0;
32width: 0;
33border-top: 7px solid transparent;
34border-bottom: 7px solid transparent;
35border-left: 12px solid #ffca2c;
36top: 50%;
37-moz-transform: translateY(-50%);
38-webkit-transform: translateY(-50%);
39-ms-transform: translateY(-50%);
40transform: translateY(-50%);
41}

どうしたらタイトルと被らず表示ができるようになるでしょうか？

※追記ページのhtmlです。
おそらくこの辺りのコードだと思います

HTML
1  <div class="media">
2
3    
4      <div class="media-left postList_thumbnail">
5        <a href="http://harumi.sakura.ne.jp/wordpress/2018/11/28/flyweight/">
6        <img width="150" height="150" src="http://harumi.sakura.ne.jp/wordpress/wp-content/uploads/2018/11/frywaight-icon-150x150.png" class="attachment-thumbnail size-thumbnail wp-post-image" alt="" srcset="http://harumi.sakura.ne.jp/wordpress/wp-content/uploads/2018/11/frywaight-icon-150x150.png 150w, http://harumi.sakura.ne.jp/wordpress/wp-content/uploads/2018/11/frywaight-icon-300x300.png 300w, http://harumi.sakura.ne.jp/wordpress/wp-content/uploads/2018/11/frywaight-icon.png 600w" sizes="(max-width: 150px) 100vw, 150px" />        </a>
7      </div>
8
9    
10    <div class="media-body">
11      <h4 class="media-heading"><a href="http://harumi.sakura.ne.jp/wordpress/2018/11/28/flyweight/">Flyweight</a></h4>
12      <div class="published entry-meta_items">2018年11月28日</div>          
13    </div>
14  </div>
15
16
17  <div class="media">
18
19    
20      <div class="media-left postList_thumbnail">
21        <a href="http://harumi.sakura.ne.jp/wordpress/2018/11/27/singleton/">
22        <img width="150" height="150" src="http://harumi.sakura.ne.jp/wordpress/wp-content/uploads/2018/11/singleton-icon-150x150.png" class="attachment-thumbnail size-thumbnail wp-post-image" alt="" srcset="http://harumi.sakura.ne.jp/wordpress/wp-content/uploads/2018/11/singleton-icon-150x150.png 150w, http://harumi.sakura.ne.jp/wordpress/wp-content/uploads/2018/11/singleton-icon-300x300.png 300w, http://harumi.sakura.ne.jp/wordpress/wp-content/uploads/2018/11/singleton-icon.png 600w" sizes="(max-width: 150px) 100vw, 150px" />        </a>
23      </div>
24
25    
26    <div class="media-body">
27      <h4 class="media-heading"><a href="http://harumi.sakura.ne.jp/wordpress/2018/11/27/singleton/">Singleton</a></h4>
28      <div class="published entry-meta_items">2018年11月27日</div>          
29    </div>
30  </div>
31
32
33  <div class="media">
34
35    
36      <div class="media-left postList_thumbnail">
37        <a href="http://harumi.sakura.ne.jp/wordpress/2018/11/27/resources-notfolder/">
38        <img width="150" height="150" src="http://harumi.sakura.ne.jp/wordpress/wp-content/uploads/2018/11/resources-icon-150x150.png" class="attachment-thumbnail size-thumbnail wp-post-image" alt="" srcset="http://harumi.sakura.ne.jp/wordpress/wp-content/uploads/2018/11/resources-icon-150x150.png 150w, http://harumi.sakura.ne.jp/wordpress/wp-content/uploads/2018/11/resources-icon-300x300.png 300w, http://harumi.sakura.ne.jp/wordpress/wp-content/uploads/2018/11/resources-icon.png 600w" sizes="(max-width: 150px) 100vw, 150px" />        </a>
39      </div>
40
41    
42    <div class="media-body">
43      <h4 class="media-heading"><a href="http://harumi.sakura.ne.jp/wordpress/2018/11/27/resources-notfolder/">Resourcesフォルダは作れない!</a></h4>
44      <div class="published entry-meta_items">2018年11月27日</div>          
45    </div>
46  </div>
47
48
49  <div class="media">
50
51    
52      <div class="media-left postList_thumbnail">
53        <a href="http://harumi.sakura.ne.jp/wordpress/2018/11/27/observer/">
54        <img width="150" height="150" src="http://harumi.sakura.ne.jp/wordpress/wp-content/uploads/2018/11/PNGイメージ-A7BAEF0C761D-1-150x150.png" class="attachment-thumbnail size-thumbnail wp-post-image" alt="" srcset="http://harumi.sakura.ne.jp/wordpress/wp-content/uploads/2018/11/PNGイメージ-A7BAEF0C761D-1-150x150.png 150w, http://harumi.sakura.ne.jp/wordpress/wp-content/uploads/2018/11/PNGイメージ-A7BAEF0C761D-1-300x300.png 300w, http://harumi.sakura.ne.jp/wordpress/wp-content/uploads/2018/11/PNGイメージ-A7BAEF0C761D-1.png 600w" sizes="(max-width: 150px) 100vw, 150px" />        </a>
55      </div>
56
57    
58    <div class="media-body">
59      <h4 class="media-heading"><a href="http://harumi.sakura.ne.jp/wordpress/2018/11/27/observer/">Observer</a></h4>
60      <div class="published entry-meta_items">2018年11月27日</div>          
61    </div>
62  </div>
63
64
65  <div class="media">
66
67    
68      <div class="media-left postList_thumbnail">
69        <a href="http://harumi.sakura.ne.jp/wordpress/2018/11/25/templatemethod/">
70        <img width="150" height="150" src="http://harumi.sakura.ne.jp/wordpress/wp-content/uploads/2018/11/IMG_0001-150x150.png" class="attachment-thumbnail size-thumbnail wp-post-image" alt="" srcset="http://harumi.sakura.ne.jp/wordpress/wp-content/uploads/2018/11/IMG_0001-150x150.png 150w, http://harumi.sakura.ne.jp/wordpress/wp-content/uploads/2018/11/IMG_0001-300x300.png 300w, http://harumi.sakura.ne.jp/wordpress/wp-content/uploads/2018/11/IMG_0001.png 600w" sizes="(max-width: 150px) 100vw, 150px" />        </a>
71      </div>
72
73    
74    <div class="media-body">
75      <h4 class="media-heading"><a href="http://harumi.sakura.ne.jp/wordpress/2018/11/25/templatemethod/">TemplateMethod</a></h4>
76      <div class="published entry-meta_items">2018年11月25日</div>          
77    </div>
78  </div>
79
80
81  <div class="media">
82
83    
84      <div class="media-left postList_thumbnail">
85        <a href="http://harumi.sakura.ne.jp/wordpress/2018/11/21/for/">
86        <img width="150" height="150" src="http://harumi.sakura.ne.jp/wordpress/wp-content/uploads/2018/09/swift-lesson-icon-1-150x150.png" class="attachment-thumbnail size-thumbnail wp-post-image" alt="" />        </a>
87      </div>
88
89    
90    <div class="media-body">
91      <h4 class="media-heading"><a href="http://harumi.sakura.ne.jp/wordpress/2018/11/21/for/">for</a></h4>
92      <div class="published entry-meta_items">2018年11月21日</div>          
93    </div>
94  </div>

kei344

2018/12/02 03:45

HTMLも提示してください。

harumi

2018/12/02 07:37

追加CSS以外は変更しておらずデフォルトのLightingのもののままです。WordpressのテーマのHTMLを見る方法もわかりません

kei344

2018/12/02 07:41

出力されたHTML（ブラウザで「ページのソースを表示」）を質問文に追記ください。

yoshinavi

2018/12/02 07:52

タイトル左側のpaddingが効いていないように見えます。Chromeのデベロッパーツール等で確認は出来ますか？

harumi

2018/12/03 06:08

@kei344様コードを追記しました

harumi

2018/12/03 06:08

@yoshinavi様確認してみます

行動規範の内容に同意します

回答1件

ベストアンサー

「タイトル」の位置は、以下のCSSを追加してみてください。

CSS
1.media-heading a {
2  padding-left: 35px;  
3}
4

「アイコン」は上が切れているので、位置調整が必要かと思います。

投稿2018/12/03 06:25

yoshinavi

総合スコア3523

harumi

2018/12/03 15:20

綺麗に表示できました！ありがとうございます！！！！

yoshinavi

2018/12/04 04:25

私自身、セレクタ「a」の記述を忘れて「あれ？何で効かないの？」と思う事が、たまにあります。 (^^;) 解決されて何よりです。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！