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

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

新規登録して質問してみよう
ただいま回答率
85.48%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Q&A

解決済

1回答

1848閲覧

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

nuu.

総合スコア12

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

0グッド

0クリップ

投稿2019/10/28 05:40

編集2019/10/28 05:43

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

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

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

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

PCでも、画面幅を縮めるとCSSが適用され2列になります。
依頼されたものなので、該当ブログの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 Pゴシック", "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 Pゴシック", "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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

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

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 Pゴシック", "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.48%

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

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

質問する

関連した質問