お世話になっております。
下記サイトを見て、カッテネの導入をしたいと考えています。
しかし、ボタンがズレてしまいます。
https://www.virment.com/duplicate-local-server-wordpress/#databaseAsqlURL
前提・実現したいこと
カッテネを正常に表示させたいです。
発生している問題・エラーメッセージ
画像のように一番左のボタン表示が上にズレます。
ボタンの数を減らしても同様に一番左のボタンがズレます。
該当のソースコード
html
1<div class="kattene"> 2 <div class="kattene__imgpart"><a target="_blank" href="【メインのURL】"><img src="【画像URL】"></a></div> 3 <div class="kattene__infopart"> 4 <div class="kattene__title"><a target="_blank" href="【メインのURL】">【タイトル】</a></div> 5 <div class="kattene__description">【説明】</div> 6 <div class="kattene__btns __five"> 7 <div><a class="kattene__btn __orange" target="_blank" href="【商品のURL】">Amazon</a></div> 8 <div><a class="kattene__btn __blue" target="_blank" href="【商品のURL】">Kindle</a></div> 9 <div><a class="kattene__btn __red" target="_blank" href="【商品のURL】">楽天</a></div> 10 <div><a class="kattene__btn __green" target="_blank" href="【商品のURL】">楽天Kobo</a></div> 11 <div><a class="kattene__btn __pink" target="_blank" href="【商品のURL】">audiobook</a></div> 12 </div> 13 </div> 14</div>
css
1.kattene { 2 border: 1px solid rgba(0, 0, 0, 0.1); 3 border-radius: 3px; 4 padding: 10px; 5 margin-bottom: 1em; 6 box-sizing: border-box; } 7 8.kattene__imgpart { 9 text-align: center; } 10 11 .kattene__imgpart img { 12 -webkit-box-shadow: 0px 5px 15px -5px rgba(0, 0, 0, 0.8); 13 -moz-box-shadow: 0px 5px 15px -5px rgba(0, 0, 0, 0.8); 14 box-shadow: 0px 5px 15px -5px rgba(0, 0, 0, 0.8); 15 -o-box-shadow: 0px 5px 15px -5px rgba(0, 0, 0, 0.8); 16 -ms-box-shadow: 0px 5px 15px -5px rgba(0, 0, 0, 0.8); } 17 18.kattene__description { 19 font-size: 0.8em; } 20 21.kattene__btns { 22 width: 100%; 23 margin-top: 1.2em; } 24 25 .kattene__btns:after { 26 display: block; 27 clear: both; 28 height: 0px; 29 visibility: hidden; 30 content: "."; } 31 32 .kattene__btns > div { 33 float: left; 34 margin-bottom: 5px; } 35 36 .kattene__btns .kattene__btn { 37 width: 100%; 38 padding-left: 0; 39 padding-right: 0; 40 } 41 42 .kattene__btns.__three > div { 43 width: 32.66667%; } 44 45 .kattene__btns.__three > div:not(:last-child) { 46 margin-right: 1%; } 47 48 .kattene__btns.__two > div { 49 width: 49.5%; } 50 51 .kattene__btns.__two > div:nth-child(odd) { 52 margin-right: 1%; } 53 54@media screen and (max-width: 900px) { 55 .kattene__btns.__five > div { 56 width: 49.5%; } 57 .kattene__btns.__five > div:nth-child(odd) { 58 margin-right: 1%; } 59 .kattene__btns.__five > div:last-child { 60 margin-right: 0; 61 float: right; } 62 63 .kattene__btns.__four > div { 64 width: 49.5%; } 65 66 .kattene__btns.__four > div:nth-child(odd) { 67 margin-right: 1%; } 68 69 .kattene__btns.__one > div { 70 width: 50%; 71 margin-left: 25%; } } 72@media screen and (min-width: 901px) { 73 74 .kattene { 75 display: table; 76 width: 100%; } 77 78 .kattene__imgpart { 79 display: table-cell; 80 width: 20%; } 81 82 .kattene__infopart { 83 display: table-cell; 84 vertical-align: top; 85 position: relative; 86 padding-left: 10px; 87 width: 80%; } 88 89 .kattene__btns { 90 position: absolute; 91 bottom: 0; 92 box-sizing: border-box; 93 padding-right: 10px; } 94 95 .kattene__btns.__five > div { 96 width: 19.2%; } 97 98 .kattene__btns.__five > div:not(:last-child) { 99 margin-right: 1%; } 100 101 .kattene__btns.__four > div { 102 width: 24.25%; } 103 104 .kattene__btns.__four > div:not(:last-child) { 105 margin-right: 1%; } 106 107 .kattene__btns.__two > div { 108 width: 49.5%; } 109 110 .kattene__btns.__two > div:not(:last-child) { 111 margin-right: 1%; } 112 113 .kattene__btns.__one > div { 114 width: 49.5%; 115 float: right; } } 116 117.kattene__btn { 118 appearance: none; 119 background-color: #54c0d1; 120 border: 0; 121 border-radius: 0; 122 color: #fff; 123 cursor: pointer; 124 display: inline-block; 125 font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; 126 font-size: 1em; 127 -webkit-font-smoothing: antialiased; 128 font-weight: 600; 129 line-height: 1; 130 padding: 0.75em 1.5em; 131 text-decoration: none; 132 transition: background-color 150ms ease; 133 user-select: none; 134 vertical-align: middle; 135 white-space: nowrap; } 136 137 .kattene__btn:hover, .kattene__btn:focus { 138 background-color: #439aa7; 139 color: #fff !important; } 140 141 .kattene__btn:disabled { 142 cursor: not-allowed; 143 opacity: 0.5; } 144 145 .kattene__btn:disabled:hover { 146 background-color: #54c0d1; } 147 148.kattene__btn.__small { 149 padding: 0.55em; 150 font-size: 0.9em; } 151 152.kattene__btn.__orange { 153 background-color: #FF9901; 154 -webkit-box-shadow: 0 5px 0 #cc7a01; 155 -moz-box-shadow: 0 5px 0 #cc7a01; 156 box-shadow: 0 5px 0 #cc7a01; 157 -o-box-shadow: 0 5px 0 #cc7a01; 158 -ms-box-shadow: 0 5px 0 #cc7a01; 159 margin-bottom: 5px; 160 border-radius: 3px; 161 text-align: center; } 162 163 .kattene__btn.__orange:hover { 164 background-color: #cc7a01; } 165 166 .kattene__btn.__orange i { 167 font-weight: bold; } 168 169 .kattene__btn.__orange i:before { 170 vertical-align: middle; 171 font-size: 1.2em; 172 margin-right: 0.2em; } 173 174.kattene__btn.__blue { 175 background-color: #007dcd; 176 -webkit-box-shadow: 0 5px 0 #0064a4; 177 -moz-box-shadow: 0 5px 0 #0064a4; 178 box-shadow: 0 5px 0 #0064a4; 179 -o-box-shadow: 0 5px 0 #0064a4; 180 -ms-box-shadow: 0 5px 0 #0064a4; 181 margin-bottom: 5px; 182 border-radius: 3px; 183 text-align: center; } 184 185 .kattene__btn.__blue:hover { 186 background-color: #0064a4; } 187 188 .kattene__btn.__blue i { 189 font-weight: bold; } 190 191 .kattene__btn.__blue i:before { 192 vertical-align: middle; 193 font-size: 1.2em; 194 margin-right: 0.2em; } 195 196.kattene__btn.__red { 197 background-color: #c20004; 198 -webkit-box-shadow: 0 5px 0 #9b0003; 199 -moz-box-shadow: 0 5px 0 #9b0003; 200 box-shadow: 0 5px 0 #9b0003; 201 -o-box-shadow: 0 5px 0 #9b0003; 202 -ms-box-shadow: 0 5px 0 #9b0003; 203 margin-bottom: 5px; 204 border-radius: 3px; 205 text-align: center; } 206 207 .kattene__btn.__red:hover { 208 background-color: #9b0003; } 209 210 .kattene__btn.__red i { 211 font-weight: bold; } 212 213 .kattene__btn.__red i:before { 214 vertical-align: middle; 215 font-size: 1.2em; 216 margin-right: 0.2em; } 217 218.kattene__btn.__green { 219 background-color: #0BBD80; 220 -webkit-box-shadow: 0 5px 0 #099766; 221 -moz-box-shadow: 0 5px 0 #099766; 222 box-shadow: 0 5px 0 #099766; 223 -o-box-shadow: 0 5px 0 #099766; 224 -ms-box-shadow: 0 5px 0 #099766; 225 margin-bottom: 5px; 226 border-radius: 3px; 227 text-align: center; } 228 229 .kattene__btn.__green:hover { 230 background-color: #099766; } 231 232 .kattene__btn.__green i { 233 font-weight: bold; } 234 235 .kattene__btn.__green i:before { 236 vertical-align: middle; 237 font-size: 1.2em; 238 margin-right: 0.2em; } 239 240.kattene__btn.__pink { 241 background-color: #e1325b; 242 -webkit-box-shadow: 0 5px 0 #b42849; 243 -moz-box-shadow: 0 5px 0 #b42849; 244 box-shadow: 0 5px 0 #b42849; 245 -o-box-shadow: 0 5px 0 #b42849; 246 -ms-box-shadow: 0 5px 0 #b42849; 247 margin-bottom: 5px; 248 border-radius: 3px; 249 text-align: center; } 250 251 .kattene__btn.__pink:hover { 252 background-color: #b42849; } 253 254 .kattene__btn.__pink i { 255 font-weight: bold; } 256 257 .kattene__btn.__pink i:before { 258 vertical-align: middle; 259 font-size: 1.2em; 260 margin-right: 0.2em; }
試したこと
カッテネ配布サイトでのプラグイン導入を試しました。
プラグインを全て削除して試しました。
別ドメインでなにもいじっていない状態でテーマをインストールして試しました。
が、改善せず。
別テーマを入れると正常に表示されます。(試した別テーマ:cocoon)
補足情報(FW/ツールのバージョンなど)
Wordpressテーマ:Thor1.32
使用サーバー:Xサーバー
ブラウザ:chrome
以上、よろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー