はてなブログのテーマ『Haruni』のカスタマイズCSSが、1142px以上で反映されない件

はてなブログのテーマ『Haruni』のカスタマイズCSSが、1142px以上で反映されず困っています。

はてなブログのカスタマイズをしており、テーマは『Haruni』を使用しています。
デモブログ→　https://yumekawa.hatenadiary.com/

記事一覧部分のレイアウトを、１列横長→２列縦長にしました。
２列縦長参考URL→　https://notti-blog.com/entry/card-layout/

スマホやタブレットではきちんとCSSが反映されるのですが、なぜか1142px以上で反映されません。

PCでも、画面幅を縮めるとCSSが適用され２列になります。
依頼されたものなので、該当ブログのURLを貼ることはできません。。

原因がわかる方、お教え頂ければ幸いです。

以下詳細です。

『Haruni』デモブログ→　https://yumekawa.hatenadiary.com/
元のCSS→　https://blog.hatena.ne.jp/-/theme/17391345971624603155.css
私が記入したカスタマイズCSS↓

CSS
1/*---------------
2    以下カスタイズ2019.10.25
3                ---------------*/
4
5* { /* フォントを全てに適用 */
6  font-family: 'Quicksand', "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", 'メイリオ' , Meiryo , Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
7}
8
9.page-index .archive-entries {
10  display: flex;
11  flex-wrap: wrap;
12  justify-content: space-between;
13}
14
15.page-index .archive-entries:after{　/* 奇数個での表示崩れを防止 */
16  content:"";
17  display:block;
18  width: 50%;
19  height:0;
20}
21
22.page-index .archive-entry{
23  width: 45%;
24  padding: 180px 7px 10px 7px;
25  position: relative;
26  height: 120px; /* アイキャッチ 下白い部分 */
27}
28
29.page-index .archive-entry:hover {
30           /* +:右 +:下 ぼかし 距離 色 */
31  box-shadow: 0px 0px 7px 6px #d3d3d3;
32  transform:translateY(-3px);
33  transition : .5s; /* アニメーションの時間 */
34}
35
36.page-index .entry-title{
37    padding : 5px 0px 0px 5px;
38}
39
40.page-index .entry-thumb{
41    display: block;
42  width: 100%;
43    height: 180px;
44    background-position: center;
45    background-size: cover;
46    position: absolute;
47    top: 0;
48    left: 0;
49    border-top-right-radius: 6px;
50    border-bottom-left-radius: 0;
51}
52
53.page-index .entry-thumb-link{
54  display: block;
55  width: 100%;
56  height: 180px;;
57  background-position: center;
58  background-size: cover;
59  position: absolute;
60  top: 0;
61  left: 0;
62  border-radius: 6px;
63}
64
65@media (max-width: 480px) {
66.page-index .archive-entry{
67  width: 95%;
68}
69}
70

クライアントがカスタマイズしていた部分もあり、カスタマイズCSS全文は以下です。

CSS
1/* <system section="theme" selected="17391345971624603155"> */
2@import url("https://blog.hatena.ne.jp/-/theme/17391345971624603155.css");
3/* </system> */
4
5/* <system section="background" selected="fff"> */
6body{background:#fff;}
7/* </system> */
8/*share-botton*/
9.share-buttons{
10    margin-bottom: 10px;
11    text-align: center;
12}
13.share-buttons .inner a {
14    position: relative;
15    display: inline-block;
16    width: 15%;
17    height: 45px;
18    line-height: 25px;
19    font-size: 16px;
20    text-align: center;
21    text-decoration: none;
22    padding:5px;
23}
24.share-buttons .inner .share-text{
25    font-size: 15px;
26}
27.share-buttons .inner .hatena-bookmark-button{
28    color:#008fde;
29    border:1px solid #008fde;
30    background: #fff;
31}
32.share-buttons .inner .hatena-bookmark-button:hover{
33    color:#fff;
34    background: #008fde;
35}
36.share-buttons .inner .hatena-bookmark-button:active{
37    background: #5478A5;
38}
39.share-buttons .inner .facebook-button{
40    color:#305097;
41    border:1px solid #305097;
42    background: #fff;
43}
44.share-buttons .inner .facebook-button:hover{
45    color:#fff;
46    background: #305097;
47}
48.share-buttons .inner .facebook-button:active{
49    background: #213254;
50}
51.share-buttons .inner .twitter-button{
52    color:#55acee;
53    border:1px solid #55acee;
54    background: #fff;
55}
56.share-buttons .inner .twitter-button:hover{
57    color:#fff;
58    background: #55acee;
59}
60.share-buttons .inner .twitter-button:active{
61    background: #0285b7;
62}
63.share-buttons .inner .googleplus-button{
64    color:#db4a39;
65    border:1px solid #db4a39;
66    background: #fff;
67}
68.share-buttons .inner .googleplus-button:hover{
69    color:#fff;
70    background: #db4a39;
71}
72.share-buttons .inner .googleplus-button:active{
73    background: #a23629;
74}
75.share-buttons .inner .pocket-button{
76    color:#d3505a;
77    border:1px solid #d3505a;
78    background: #fff;
79}
80.share-buttons .inner .pocket-button:hover{
81    color:#fff;
82    background: #d3505a;
83}
84.share-buttons .inner .pocket-button:active{
85    background: #b5392c;
86}
87
88/* 水色グラデーション着せ替え */
89body, .entry-content h3, .categories a, .hatena-module-category .hatena-urllist li a, a.entry-see-more {
90    background: -moz-linear-gradient(left, #84fab0 0%, #8fd3f4 100%);
91    background: -webkit-linear-gradient(left, #84fab0 0%, #8fd3f4 100%);
92    background: linear-gradient(to right, #84fab0 0%, #8fd3f4 100%);
93    /* 背景グラデーション1 */
94}
95
96@media only screen and (max-width:1141px) {
97    nav#slide-menu, div.menu-trigger {
98        background: -moz-linear-gradient(30deg, #84fab0 0%, #8fd3f4 100%);
99        background: -webkit-linear-gradient(30deg, #84fab0 0%, #8fd3f4 100%);
100        background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
101        /* 背景グラデーション2 */
102    }
103}
104
105
106/* 文字色 */
107a, .leave-comment-title, .hatena-module-title, .hatena-module-title a, .sns-twitter, .sns-facebook, .sns-bookmark, a.sns-bookmark:visited, .sns-googleplus, .sns-pocket, .sns-line, a.sns-link:hover {
108    color: #8fd3f4;
109}
110
111.leave-comment-title {
112    border: 1px solid #8fd3f4;
113}
114
115
116/* 見出し */
117.entry-content h2 {
118    position: relative;
119    padding: 0.2em 0.5em;
120    border-left: 8px solid #8fd3f4;
121}
122
123.entry-content h4 {
124    position: relative;
125    padding: .5em;
126    color: #8fd3f4;
127    border-top: 1px solid #8fd3f4;
128    border-bottom: 1px solid #8fd3f4;
129}
130
131.entry-content h5 {
132    position: relative;
133    padding: .5em;
134    color: #8fd3f4;
135    border-left: 4px solid #8fd3f4;
136}
137#content {
138    background-color: #f5f5f5;
139}
140/* 目次 二重線囲み */
141.entry-content .table-of-contents {
142    color:#555;/* 文字色 */
143    padding: 50px 25px 15px 35px;
144    position: relative;
145    background-color: #F6F6F6;/* 背景色 */
146    border: 4px double #7fdbb6;/* アクセントカラー */
147    margin-top: 1em;
148    margin-bottom: 1em;
149    width: 100%!important;
150    box-sizing: border-box;
151    border-radius: 8px;
152}
153.entry-content .table-of-contents::before {
154    display: block;
155    font-family: 'FontAwesome';
156    content: '\f046';
157    font-weight: bold;
158    font-size: 120%;
159    padding-left: 3px;
160    margin: 0;
161    position: absolute;
162    top: 15px;
163    left: 10px;
164    color: #7fdbb6;/* アクセントカラー */
165    border-bottom: none;
166}
167
168.entry-content .table-of-contents:after {
169    display: block;
170    content: '目次';
171    font-weight: bold;
172    font-size: 120%;
173    position: absolute;
174    top: 15px;
175    left: 35px;
176    color: #7fdbb6;/* アクセントカラー */
177}
178.entry-content .table-of-contents li {
179    list-style-type: decimal;/* 番号振り */
180    margin-left: 0;
181}
182
183.entry-content .table-of-contents li a {
184    text-decoration: none;
185    color:#555;/* 文字色 */
186}
187
188.entry-content .table-of-contents>li:first-child {
189    border-top: 1px dotted #CCC;
190    padding-top: 10px;
191}
192
193.entry-content .table-of-contents>li {
194    font-weight: bold;
195}
196
197.entry-content .table-of-contents ul>li:last-child {
198    padding-bottom: 10px;
199}
200/* ヘッダーの縦横比維持  */
201@media screen and (max-width: 1141px) {
202.header-image-only #blog-title #blog-title-inner {
203  position: relative;
204  background-size: cover;
205  height: auto;
206  width: 100%;
207  max-width: 1141px;/* タイトル画像の横幅 */
208  margin: 0 auto;
209}
210
211.header-image-only #blog-title #blog-title-inner:before {
212  display: block;
213  content: "";
214  width: 100%;
215  padding-top: 20%;/* タイトル画像の高さ÷横幅％ */
216}
217
218.header-image-only #blog-title #blog-title-content {
219  position: absolute;
220  top: 0;
221  left: 0;
222  right: 0;
223  bottom: 0;
224}
225
226/*---------------
227    以下カスタイズ2019.10.25
228                ---------------*/
229
230* { /* フォントを全てに適用 */
231  font-family: 'Quicksand', "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", 'メイリオ' , Meiryo , Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
232}
233
234.page-index .archive-entries {
235  display: flex;
236  flex-wrap: wrap;
237  justify-content: space-between;
238}
239
240.page-index .archive-entries:after{
241  content:"";
242  display:block;
243  width: 50%;
244  height:0;
245}
246
247.page-index .archive-entry{
248  width: 45%;
249  padding: 180px 7px 10px 7px;
250  position: relative;
251  height: 120px; /* アイキャッチ 下白い部分 */
252}
253
254.page-index .archive-entry:hover {
255           /* +:右 +:下 ぼかし 距離 色 */
256  box-shadow: 0px 0px 7px 6px #d3d3d3;
257  transform:translateY(-3px);
258  transition : .5s; /* アニメーションの時間 */
259}
260
261.page-index .entry-title{
262    padding : 5px 0px 0px 5px;
263}
264
265.page-index .entry-thumb{
266    display: block;
267  width: 100%;
268    height: 180px;
269    background-position: center;
270    background-size: cover;
271    position: absolute;
272    top: 0;
273    left: 0;
274    border-top-right-radius: 6px;
275    border-bottom-left-radius: 0;
276}
277
278.page-index .entry-thumb-link{
279  display: block;
280  width: 100%;
281  height: 180px;;
282  background-position: center;
283  background-size: cover;
284  position: absolute;
285  top: 0;
286  left: 0;
287  border-radius: 6px;
288}
289
290@media (max-width: 480px) {
291.page-index .archive-entry{
292  width: 95%;
293}
294}
295
296
297<style>
298
299

試したこと

@media (min-width:1142px)に『以下カスタイズ2019.10.25』と同じ内容を記入してみましたが、
変わりませんでした。

クライアント様も、上記のカスタマイズCSS以外は特に何もイジってはいないとのことです。

非常に困っております。。
宜しくお願いいたしますm(_ _)m

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

回答1件

自己解決

自己解決しました。
要因はよくわかりませんが、上部に記入することで無事反映されました。

css
1/* <system section="theme" selected="17391345971624603155"> */
2@import url("https://blog.hatena.ne.jp/-/theme/17391345971624603155.css");
3/* </system> */
4
5
6/*---------------
7    カスタイズ2019.10.25
8            ---------------*/
9
10* { /* フォントを全てに適用 */
11  font-family: 'Quicksand', "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", 'メイリオ' , Meiryo , Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
12}
13
14.page-index .archive-entries {
15  display: flex;
16  flex-wrap: wrap;
17  justify-content: space-between;
18}
19
20.page-index .archive-entries:after{
21  content:"";
22  display:block;
23  width: 50%;
24  height:0;
25}
26
27.page-index .archive-entry{
28  width: 45%;
29  padding: 180px 7px 10px 7px;
30  position: relative;
31  height: 120px; /* アイキャッチ 下白い部分 */
32}
33
34.page-index .archive-entry:hover {
35           /* +:右 +:下 ぼかし 距離 色 */
36  box-shadow: 0px 0px 7px 6px #d3d3d3;
37  transform:translateY(-3px);
38  transition : .5s; /* アニメーションの時間 */
39}
40
41.page-index .entry-title{
42    padding : 5px 0px 0px 5px;
43}
44
45.page-index .entry-thumb{
46    display: block;
47  width: 100%;
48    height: 180px;
49    background-position: center;
50    background-size: cover;
51    position: absolute;
52    top: 0;
53    left: 0;
54    border-top-right-radius: 6px;
55    border-bottom-left-radius: 0;
56}
57
58.page-index .entry-thumb-link{
59  display: block;
60  width: 100%;
61  height: 180px;;
62  background-position: center;
63  background-size: cover;
64  position: absolute;
65  top: 0;
66  left: 0;
67  border-radius: 6px;
68}
69
70@media (max-width: 480px) {
71.page-index .archive-entry{
72  width: 95%;
73}
74}
75
76/*---------------
77    //カスタイズ2019.10.25
78            ---------------*/
79
80/* <system section="background" selected="fff"> */
81body{background:#fff;}
82/* </system> */
83/*share-botton*/
84.share-buttons{
85    margin-bottom: 10px;
86    text-align: center;
87}
88.share-buttons .inner a {
89    position: relative;
90    display: inline-block;
91    width: 15%;
92    height: 45px;
93    line-height: 25px;
94    font-size: 16px;
95    text-align: center;
96    text-decoration: none;
97    padding:5px;
98}
99.share-buttons .inner .share-text{
100    font-size: 15px;
101}
102.share-buttons .inner .hatena-bookmark-button{
103    color:#008fde;
104    border:1px solid #008fde;
105    background: #fff;
106}
107.share-buttons .inner .hatena-bookmark-button:hover{
108    color:#fff;
109    background: #008fde;
110}
111.share-buttons .inner .hatena-bookmark-button:active{
112    background: #5478A5;
113}
114.share-buttons .inner .facebook-button{
115    color:#305097;
116    border:1px solid #305097;
117    background: #fff;
118}
119.share-buttons .inner .facebook-button:hover{
120    color:#fff;
121    background: #305097;
122}
123.share-buttons .inner .facebook-button:active{
124    background: #213254;
125}
126.share-buttons .inner .twitter-button{
127    color:#55acee;
128    border:1px solid #55acee;
129    background: #fff;
130}
131.share-buttons .inner .twitter-button:hover{
132    color:#fff;
133    background: #55acee;
134}
135.share-buttons .inner .twitter-button:active{
136    background: #0285b7;
137}
138.share-buttons .inner .googleplus-button{
139    color:#db4a39;
140    border:1px solid #db4a39;
141    background: #fff;
142}
143.share-buttons .inner .googleplus-button:hover{
144    color:#fff;
145    background: #db4a39;
146}
147.share-buttons .inner .googleplus-button:active{
148    background: #a23629;
149}
150.share-buttons .inner .pocket-button{
151    color:#d3505a;
152    border:1px solid #d3505a;
153    background: #fff;
154}
155.share-buttons .inner .pocket-button:hover{
156    color:#fff;
157    background: #d3505a;
158}
159.share-buttons .inner .pocket-button:active{
160    background: #b5392c;
161}
162
163/* 水色グラデーション着せ替え */
164body, .entry-content h3, .categories a, .hatena-module-category .hatena-urllist li a, a.entry-see-more {
165    background: -moz-linear-gradient(left, #84fab0 0%, #8fd3f4 100%);
166    background: -webkit-linear-gradient(left, #84fab0 0%, #8fd3f4 100%);
167    background: linear-gradient(to right, #84fab0 0%, #8fd3f4 100%);
168    /* 背景グラデーション1 */
169}
170
171@media only screen and (max-width:1141px) {
172    nav#slide-menu, div.menu-trigger {
173        background: -moz-linear-gradient(30deg, #84fab0 0%, #8fd3f4 100%);
174        background: -webkit-linear-gradient(30deg, #84fab0 0%, #8fd3f4 100%);
175        background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
176        /* 背景グラデーション2 */
177    }
178}
179
180
181/* 文字色 */
182a, .leave-comment-title, .hatena-module-title, .hatena-module-title a, .sns-twitter, .sns-facebook, .sns-bookmark, a.sns-bookmark:visited, .sns-googleplus, .sns-pocket, .sns-line, a.sns-link:hover {
183    color: #8fd3f4;
184}
185
186.leave-comment-title {
187    border: 1px solid #8fd3f4;
188}
189
190
191/* 見出し */
192.entry-content h2 {
193    position: relative;
194    padding: 0.2em 0.5em;
195    border-left: 8px solid #8fd3f4;
196}
197
198.entry-content h4 {
199    position: relative;
200    padding: .5em;
201    color: #8fd3f4;
202    border-top: 1px solid #8fd3f4;
203    border-bottom: 1px solid #8fd3f4;
204}
205
206.entry-content h5 {
207    position: relative;
208    padding: .5em;
209    color: #8fd3f4;
210    border-left: 4px solid #8fd3f4;
211}
212#content {
213    background-color: #f5f5f5;
214}
215/* 目次 二重線囲み */
216.entry-content .table-of-contents {
217    color:#555;/* 文字色 */
218    padding: 50px 25px 15px 35px;
219    position: relative;
220    background-color: #F6F6F6;/* 背景色 */
221    border: 4px double #7fdbb6;/* アクセントカラー */
222    margin-top: 1em;
223    margin-bottom: 1em;
224    width: 100%!important;
225    box-sizing: border-box;
226    border-radius: 8px;
227}
228.entry-content .table-of-contents::before {
229    display: block;
230    font-family: 'FontAwesome';
231    content: '\f046';
232    font-weight: bold;
233    font-size: 120%;
234    padding-left: 3px;
235    margin: 0;
236    position: absolute;
237    top: 15px;
238    left: 10px;
239    color: #7fdbb6;/* アクセントカラー */
240    border-bottom: none;
241}
242
243.entry-content .table-of-contents:after {
244    display: block;
245    content: '目次';
246    font-weight: bold;
247    font-size: 120%;
248    position: absolute;
249    top: 15px;
250    left: 35px;
251    color: #7fdbb6;/* アクセントカラー */
252}
253.entry-content .table-of-contents li {
254    list-style-type: decimal;/* 番号振り */
255    margin-left: 0;
256}
257
258.entry-content .table-of-contents li a {
259    text-decoration: none;
260    color:#555;/* 文字色 */
261}
262
263.entry-content .table-of-contents>li:first-child {
264    border-top: 1px dotted #CCC;
265    padding-top: 10px;
266}
267
268.entry-content .table-of-contents>li {
269    font-weight: bold;
270}
271
272.entry-content .table-of-contents ul>li:last-child {
273    padding-bottom: 10px;
274}
275/* ヘッダーの縦横比維持  */
276@media screen and (max-width: 1141px) {
277.header-image-only #blog-title #blog-title-inner {
278  position: relative;
279  background-size: cover;
280  height: auto;
281  width: 100%;
282  max-width: 1141px;/* タイトル画像の横幅 */
283  margin: 0 auto;
284}
285
286.header-image-only #blog-title #blog-title-inner:before {
287  display: block;
288  content: "";
289  width: 100%;
290  padding-top: 20%;/* タイトル画像の高さ÷横幅％ */
291}
292
293.header-image-only #blog-title #blog-title-content {
294  position: absolute;
295  top: 0;
296  left: 0;
297  right: 0;
298  bottom: 0;
299}
300
301
302
303
304
305
306<style>
307
308

投稿2019/10/29 07:57

nuu.

総合スコア12

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.36%

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

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

質問する

『🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中！

＼teratail特別グッズやAmazonギフトカード最大2,000円分が当たる！／

はてなブログのテーマ『Haruni』のカスタマイズCSSが、1142px以上で反映されない件

はてなブログのテーマ『Haruni』のカスタマイズCSSが、1142px以上で反映されず困っています。

試したこと

関連した質問