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

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

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

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

801閲覧

Wordpress カッテネでのボタンのズレについて

beans

総合スコア13

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2019/03/10 04:46

編集2019/03/10 05:00

お世話になっております。

下記サイトを見て、カッテネの導入をしたいと考えています。
しかし、ボタンがズレてしまいます。

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

以上、よろしくお願いいたします。

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

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

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

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

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

kei344

2019/03/10 04:54

コードブロックにはコード/エラーのみを入れるようにしてください。文章はコードブロック外にあるほうが読みやすいです。コードブロック中では画像が表示されません。
beans

2019/03/10 05:01

失礼致しました。 ご指摘ありがとうございました。
guest

回答1

0

ベストアンサー

直接の回答ではありませんが、テーマのCSSが影響しているならどの記述かをデベロッパーツールで確認してください。その上で上書きするスタイルを指定すればよいです。(上書きに関してはCSSの入門書を読んでください)

【ChromeデベロッパーツールでCSSをチェックする方法 | なんでものびるWEB】
https://nandemo-nobiru.com/2944/

【初心者向け!Chromeの検証機能(デベロッパーツール)の使い方】
https://saruwakakun.com/html-css/basic/chrome-dev-tool

あと、WordPressテーマはテーマ名だけではなく取得したURLを提示されたほうが、環境を確認しやすいので次からの質問では書かれることをお勧めします。公式ページには高確率で実働サンプルがある上、人によっては(私はめったにしませんが)検証環境にて同じテーマを使用して確認してくれたりしますよ。

投稿2019/03/10 05:10

kei344

総合スコア69366

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

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

beans

2019/03/10 07:44

kei344様 教えていただいた情報を元に試行錯誤したところ、ボタンずれを修正することができました。 今回のことは非常に勉強になりました。 ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問