Q&A
webブラウザの開発ツールの類は使っていますか？ FirefoxやChromeなどは標準で装備しています。どのボックス要素のどの属性をいじればいいかリアルタイムに介入できて良いですよ。
ご質問されて頂きます。
WORDPRESS初心者です。
テーマは「Twenty Fourteenバージョン: 2.4」です。
トップページをスクショしました。
【不具合】
①メインコンテンツエリアが
IEだと右寄せ、グーグルクロームだとセンタリングされるのですが
左寄せにしたいのですが
Style.cssのどこを修正すれば良いのか分かりません。
css
1コード 2/** 3 * 6.0 Content 4 * ----------------------------------------------------------------------------- 5 */ 6 7.content-area { 8 padding-top: 8px; 9} 10 11.hentry { 12 margin: 0 auto auto; 13 max-width: 672px; 14 15 } 16
あたりをいじってみましたが、右寄せになりませんでした。
②テーブルの1列目の幅を広げたいのですが。
style.css
1 2.entry-content table.m01, 3.comment-content table.m01{ 4 width: 100%; 5 border-collapse: collapse; 6 7 8} 9 10 11 12 13.entry-content tr.m01, 14.comment-content tr.m01{ 15 width: 100%; 16 17} 18 19.entry-content th.m01, 20.comment-content th.m01{ 21 22 border-bottom: #e3e3e3 1px solid; 23 border-left: #e3e3e3 1px solid; 24 text-align: left; 25 background: #f7f7f7; 26 27 text-align: left; 28 background: #f7f7f7; 29 padding: 10px; 30 font-weight: normal; 31} 32 33 34.entry-content th.t_top, 35.comment-content th.t_top{ 36 37 border-top: #be1309 4px solid; 38 39 border-bottom: #e3e3e3 1px solid; 40 border-left: #e3e3e3 1px solid; 41 42 text-align: left; 43 background: #f7f7f7; 44 padding: 10px; 45 font-weight: normal; 46} 47 48 49 50 51.entry-content td.m01, 52.comment-content td.m01{ 53 border-top: #b3b3b3 4px solid; 54 border-bottom: #e3e3e3 1px solid; 55 border-right: #e3e3e3 1px solid; 56 text-align: left; 57 padding: 10px; 58} 59 60 61 62 63.entry-content td.t_top, 64.comment-content td.t_top{ 65 66 border-top: #b3b3b3 4px solid; 67 68} 69 70 71
html
1 2<table class="m01"> 3 <tr class="m01"> 4 <th class="t_top">カテゴリ</th> 5 <td class="m01"><?php the_field('THEMA'); ?></td> 6 </tr> 7 <tr class="m01"> 8 9 <th class="t_top">開催日</th> 10 <td class="m01"><?php the_field('kaisai_date'); ?></td> 11 </tr> 12 13 <tr>
クロームの開発ツールで調べますと
このようになるのですが、どこを変更したらいいのか分かりません。
すみません。
回答1件
0
ベストアンサー
開発ツールは**「右クリック＞検証(I)」**を使うと
自動的に起動してクリックした個所の該当要素までジャンプして
コードを選択してくれるので便利です。
- Chrome … 検証(I)
- Firefox … 要素を調査(Q)
- IE … 要素の検査(L)
①について
「右寄せ」ではなく「親要素から table がはみ出す」現象で
いまのIE系の仕様だそうです。
参考 https://designsupply-web.com/knowledgeside/2136/
<table> に table-layout: fixed; を指定するとはみ出さなくなります。
あとは 左寄せしたい要素（<table> は親要素）すべてに margin-left: 0; を指定すれば
左寄せになり、指定しなければセンタリングになります。
（おそらく「タイトル部分」「本文」「コメント欄」）
**「右クリック＞検証(I)」**でセレクタを探してみてください。<article> の内側の要素です。
②について
①を設定したことで <table> の列の幅が変わったんじゃないでしょうか。
「カテゴリ」と書かれてるセルの上で**「右クリック＞検証(I)」**すると
編集すべき要素までジャンプします。（おそらく<th>）
指定されているセレクタの width: に好みの横幅を指定してください。
投稿2018/12/30 13:49
編集2018/12/30 22:28
総合スコア254
こんばんは。
ご回答ありがとうございます。
親切に色々と丁寧に書いてくださったのに
なかなかうまく行かなかったのですが
ようやく出来ました!!
ありがとうございました。
あなたの回答
tips
プレビュー
