WordPressの空白設定について

2023/11/01 20:19

このQ&Aのポイント

WordPressのサイドバー（ウィジェット）に余白を設定する方法
WordPressのサイドバーにコードを追加した際に余白ができない場合の対処法
WordPressのサイドバーに余白を設定するためのCSSコードの追加方法

ベストアンサー

wordpressの空白設定について

2014/07/27 00:18

wordpressのサイドバー（ウィジェット）に以下のコードを書きましたが、右側に余白ができずに困っています。（詳細は、画像をご参照ください）赤矢印のところに、5pxくらいの余白を設定したいです。どうすれば、右側にも余白を設定できるのでしょうか？どうぞよろしくお願い致します。 <div class="twibox"> <div class="textwidget"><img width="100" height="100" src="http://XXX.XXX.jp/pic/XXX.png" alt="" / class="float-left" style="margin:5px 14px 5px 12px;"><ul><li> 名前：XXXX<br/> 年齢：XXXX<br/> あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</li></ul></div></div>

mcse
お礼率55% (148/266)

ブログ
回答数2
ありがとう数8

みんなの回答 （2）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

Kaneyan-R
ベストアンサー率42% (1242/2891)

2014/07/27 12:59 回答No.2

基礎すら理解していないようで。 <li style="padding: 5px;"> これだと、全周囲5pxの余白が出来る。右だけなら右だけ指定するか、全周囲分指定する。全周囲分指定するなら、親要素や隣接する要素のmarginやpadding、size、width、heightの数値を考慮して指定しないと、レイアウトが崩れる。前にも書いたけど、カスタマイズするならHTMLとCSSの知識は必須。精進せよ。

質問者

お礼 2014/07/27 23:11

Kaneyan-R様詳細にご指導いただきまして誠にありがとうございました。やりたいことができました！！！まだまだ勉強不足なので、おっしゃる通り精進したいと思います。頑張ります！

その他の回答 (1)

Kaneyan-R
ベストアンサー率42% (1242/2891)

2014/07/27 00:41 回答No.1

liタグにpadding指定。もしくは、class作ってCSSで指定。 textwidgetでpaddingとってもいいかもしれないが、多分他がおかしくなると思うので。言ってる意味が分からないようなら、HTMLとCSSの基礎を勉強しましょう。

質問者

お礼 2014/07/27 08:10

ご回答ありがとうございました！あと１つだけ教えてください。「liタグにpadding指定」というのは、具体的には <li padding: 5px;> 名前：XXXX<br/> 年齢：XXXX<br/> あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</li> とすればよいのでしょうか？よろしくお願い致します。

関連するQ&A

menuのHTMLタグとCSSが上手くいかない
画像(1)が現状です。イメージは(2)です。何故HTMLタグを別々にするかというとスマホにしたらsubメニューをボトムに配置したいのです。メニューとsubメニューの背景がくっつかないのです。 (1)を(2)にするにはどうすれば良いでしょうか？以下がHTMLタグとCSSになります。アドバイスをお願いします。 HTMLタグ <div class="div1"><ul><li>メニュー1</li><li>メニュー2</li><li>メニュー3</li><li>メニュー4</li></ul></div> <div class="div2"><ul><li>sab1</li><li>sub2</li></ul></div> CSSスタイル ul li { list-style: none; } .div1 { background: #ccc; float: left; } .div2 { width: 240px; background: #999; float: right; } li { float: left; padding: 5px 15px; }
- 締切済み
- HTML
可変すると、画像は重なり行も増えてしまいます
初めまして。リキッドデザインについて、どうぞ宜しくお願い致します。画像をご覧いただきながら、読んでいただけますと幸いです＞＜通常、画像(1)のように表示し、可変した際には(2)のようにしたいと思っているのですが、何故か(3)のように―― 画面を小さくするに連れ、【B】は2行に崩れ、その影響で下のimg［1］～［10］が重なり合ってしまいます。何か決定的な間違い等があるのでしょうか？お分かりの方がいらっしゃいましたら、是非ともご指南下さいませ！どうぞ宜しくお願い致します。 /*　CSS設定　*/ body { margin: 0 auto 0; padding: 0; } .bg01 { width: 100%; height: 30px; background-color: #C96; display: inline-block; clear: both; } .A { width: 400px; float: left; } .B { width: 400px; float: right; } .bg02 { width: 100%; height: 30px; background-color: #9cf; text-align: center; display: inline-block; } .bg02 ul { width: 80%; margin: 5px auto 0; text-align: center; } .bg02 ul li { list-style-type:none; width: 8%; border: solid #09C 1px; float:left; }  <div class="bg01"> <div class="A">ああああああああああああああああああああ</div> <div class="B">いいいいいいいいいいいいいいいいいいいい</div> </div> <div class="bg02"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> </ul> </div>
- 締切済み
- CSS
初心者です。floatでレイアウトしてるのですが、縦線とテーブルの間を広げる方法がわかりません
floatでレイアウトしてるのですが、縦線とテーブルの間を広げる方法がわかりませんメニューとコンテンツが縦線で区切られてるのですが右側のテーブルと縦線が合体してしまいます。縦線とテーブルの間に少し隙間を作りたいのですが、どうすればいいでしょうか？ HTMLとCSSを書いておきます。よろしくお願いします。・HTML <div id="contents"> <table> <tr> <td>×</td><td><p>あああ</p> </tr> <tr> <td>○</td><td><p>いいい</p> </tr> <tr> <td>■</td><td><p>ううう</p> </tr> </table> <br><br> a </div> <div id="left-menu"> <ul> <li><a href="index.html" class="a8">メニュー</a></li> <li><a href="league.html" class="a8">メニュー</a></li> </ul> </div> <div id="footer"> ああああああ </div> ・CSS body { width: 900px; } #contents { float: right; width: 740px; border-left: 1px solid #999;} #left-menu { float: left; width: 150px;} #footer { clear: both; }
- 締切済み
- HTML
リストタグを用いた段組みメニューの不具合（IE6）
数日間大変悩んだのですが解決しなかったため、どなたかご回答頂けると嬉しいです。リストタグを横に二列並べて段組みにするようなレイアウトを作っているのですが、 IE6で確認した際にdisplay:inlineを使用しているにも関わらずリストが縦に並んでしまいます。他のブラウザで見る際には問題が無いので、どうしたものかなと途方にくれています。以下がhtmlとcssです。【html】 <div class="test"> <div class="test_left"> <h3>テスト1</h3> <ul> <li><a href="#">・あ</a></li> <li><a href="#">・い</a></li> <li><a href="#">・う</a></li> </ul> </div> <div class="test_right"> <h3>テスト2</h3> <ul> <li><a href="#">・あ</a></li> <li><a href="#">・い</a></li> <li><a href="#">・う</a></li> </ul> </div> <div class="search_clear"></div> <div class="test_left"> <h3>テスト1</h3> <ul> <li><a href="#">・あ</a></li> <li><a href="#">・い</a></li> <li><a href="#">・う</a></li> </ul> </div> <div class="test_right"> <h3>テスト2</h3> <ul> <li><a href="#">・あ</a></li> <li><a href="#">・い</a></li> <li><a href="#">・う</a></li> </ul> </div> </div> 【css】 div.test { width: 500px; height: 370px; margin: 15px 0 10px 0; } div.test h3 { width: 220px; font-size: 16px; margin: 10px 10px 0 20px; } div.test ul { width: 220px; margin: 0 10px 15px 10px; list-style:none; } div.test ul li { width: 220px; display:inline; } div.test ul li a { color: #666; } div.test ul li a:hover { color: #999; } .test_clear { clear:both; } .test_left { float: left; width: 240px; } .test_right { float: right; width: 240px; } 仮にこの部分に問題が無いとすると、この要素を囲む他のcssやhtmlに問題あるのかもしれませんが、何卒宜しくお願い致します。
- ベストアンサー
- HTML
ie6　でリストが横に並ばず縦に並んでしまう
ie6のコーディングでノイローゼになりそうです。5時間くらいいろいろ試行錯誤しましたが、解決できません。 <div class="pic0"> <ul> <li class="pic1"><img src="images/pic1.jpg"/></li> <li class="pic1"><img src="images/pic2.jpg" /></li> <li class="pic1"><img src="images/pic3.jpg" /></li> <li class="pic1"><img src="images/pic4.jpg"/></li> <li class="pic1"><img src="images/pic5.jpg"/></li> </ul></div> .pic0{ width: 250px; height:40px; float: left; display:inline; padding-top: 10px; padding-bottom: 10px; overflow:hidden; } .pic1 li { float: left; height: 47px; width: 36px; display:block; margin-left:3px; margin-right:3px; } ie6のみ縦に並んでしまいます。疑ったもの・haslayout *{ zoom:1; } {line-height:0;} ・marginが倍になるバグ　widthの指定・cssが効いていない・ネガティブマージンなど ie6のcssを読み込ませるなど、何でもいいので、ie6のリストが横にさせる方法はないでしょうか。雑文ですが、どうかお願いします。助けてください。
- ベストアンサー
- CSS
リスト表示を左に寄せたい
いつもお世話になります。下記のようなCSSで縦並びのリスト表示をさせていますが、どうしてもリスト（全体）が左に寄らないので困っています。できたらボックス（id-=navi）の左から10ピクセルぐらいのところからリストを始めたいのですが・・・（ちなみに3段組みの一番左のボックスです）現在はおそらく30pxくらいのところから始まっていて、何をしてもうごきません。よろしくお願いします。 ---------CSS------------------ #wrapper { width: 855px; background-color:#A96223; } #main{ float:left; width:675px; background-color:#EBE3BE; } #navi{ float:left; width:150px; background-color:#A96223; padding-top:20px; padding-left:10px; text-align:left; margin: 0px; } #advertisement{ float:right; width:30px; background-color:#A96223; } #footer{ clear:both; background-color:#804C2E; height:20px; } #navi ul{ list-style:none; margin:0px; padding:0px; } #navi li{ list-style:none; color:#FFFFFF; margin-left:0px; padding-left:10px; line-height:10px; background-image:url(img/common/yajirushi.gif); background-repeat:no-repeat; background-position:left center; } --------------html---------------------- <body> <div id="wrapper"> <div id="navi"> <ul> <li>TOP</li><br /> <li>新着情報</li><br /> <li>おすすめメニュー</li><br /> <li>ご宴会・パーティー</li><br /> <li>お店のご案内</li><br /> <li>イベントご案内</li><br /> <li>お得クーポン</li><br /> </ul> </div> <div id="main"> <br /><br /><br /><br /><br /><br /><br /><br /> </div> <div id="advertisement"> <br /><br /><br /><br /><br /><br /><br /><br /> </div> <div id="footer"> </div> </div> </body>
- ベストアンサー
- HTML
センター寄せにするには
以下のようなhtmlなのですがulをdivのセンターに配置するにはどうすればできますか？ <div class="pager"> <ul> <li><a href="#">リンク1</a></li> <li><span>リンク2</span></li> <li><a href="#">リンク3</a></li> </div> これに以下のようなcssを設定しているのですが左よりになってしまいます。 .pager { width: 560px; text-align: center; } .pager ul { } .pager ul li { display: inline; float: left; } .pager ul li a, .pager ul li span { display: block; line-height: 20px; margin: 0 5px; width: 20px; height: 20px; text-decoration: none; border: solid 1px #ccc; }
- 締切済み
- HTML
ＣＳＳレイアウト　マージンについて
下記のタグにてメインスペースを両側10pxにしたいのですが、うまくいきません。下記のようなレイアウトにてうまくmarginなどを行う場合はどのようにしたらよろしいでしょうか？なお簡単にタグを記載してくださいますと幸いです。ＣＳＳ body { 　　　margin:3em; color:#339900; background:#ffffff; } h1 { padding:0.1em; text-align:center; leter-specing:1em; border-top: 1px solid #000000; border-bottom: 1px solid #000000; } .mainspace { background:#aaaaaa; width:480px; 　　　　　　margin-right:10px; 　　　　　　margin-left:10px ; position:absolute; left:260px; } .leftmenu { background:#bbbbbb; width:200px; position:absolute; left:50px; } .rightmenu { background:#cccccc; width:200px; position:absolute; right:50px; } ＨＴＭＬ <h1>メインタイトル</h1> <div class="mainspace"> <h2>サブタイトル</h2> <p> ただいまテスト中です。<br> ただいまテスト中です。<br> ただいまテスト中です。<br> ただいまテスト中です。<br> ただいまテスト中です。<br> </p> </div> <div class="leftmenu"> <ul> <li>メニュー</li> <li>メニュー</li> <li>メニュー</li> <li>メニュー</li> <li>メニュー</li> </ul> </div> <div class="rightmenu"> <ul> <li>メニュー</li> <li>メニュー</li> <li>メニュー</li> <li>メニュー</li> <li>メニュー</li> </ul> </div>
- ベストアンサー
- HTML
ホームページの質問です。
ホームページの質問です。 50音表を作りたいのですが、こんな感じのタグで大丈夫でしょうか？ちょっと自信ありません。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無題ドキュメント</title> <style type="text/css">  </style> </head> <body> <div id="iti"> <p>あ行</p> </div> <div class="ni"> <ul> <li>あ</li> <li>い</li> <li>う</li> </ul> </div> <div id="iti">か行 </div> <div class="ni"> <ul> <li>か</li> <li>き</li> <li>く</li> </ul> </div> </body> </html> 問題点等ありましたら、指摘願います。また、修正点があれば教えてください。
- ベストアンサー
- HTML
CSS で li を float させる方法
リスト項目を横並びにfloatさせたいいんですが、 li {list-style:none url(../image/icon/article.png) inside;} と指定すると、floatできないようです。どうすればlist-styleを指定したliをfloatさせることできますか？コートは以下のようにしています。よろしくお願いします。【HTML】 <div class="YYY"> <ul> <li class="movie"><a href="">MOVIE</a></li> <li class="photo"><a href="">PHOTO</a></li> </ul> </div> 【CSS】 .YYY {margin:10px 0;} .YYY ul {margin:0px;padding:0px;} .YYY li.photo {float:left;list-style:none url(photo.png) inside;} .YYY li.movie {float:left;list-style:none url(article.png) inside;}
- ベストアンサー
- HTML