- ベストアンサー
ブログ内の余分な余白を削除できずに困っています
FC2でブログを作成中の者です。今、記事横のプラグインと呼ばれるカテゴリー等を表示する部分の調整をしているのですが、そのタイトルと内容の部分に余分な余白ができてしまっています(下記参照)。 ■＝余白 ■■■■■■■■■■ ■■■■■■■■■■ ■■■■■■■■■■ タイトル ■■■■■■■■■■ ■■■■■■■■■■ ■■■■■■■■■■ ※内容部分も同様の状態。 このように大きな幅の余白が上下にできてしまっています。marginやpaddingの問題かと思い確認しましたが、どうやらそうではないようです。 テンプレートは共有テンプレートからダウンロードしたものなのですが、その時点ではプラグイン部分は普通に余白もない状態でした。どうやら私の未熟な加工が原因のようです。 marginやpaddingの他にこのような余白(スペース)ができる要因はあるのでしょうか？もしご存知の方がいましたら教えてください。
- konota
- お礼率53% (88/165)
- ブログ
- 回答数2
- ありがとう数5
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
下記のURLにもありますが、P要素や<li>の影響はないでしょうか？ テンプレによってCSSも変わってくるのでなんとも言えませんが、その辺をもう一度さわってみてはいかがでしょう。ただ、↓にもあるとおり、たとえばあるP要素にmargin:0を適用するとそこのP全体にも影響しますので、個別に調整する必要が出てくると思います。 http://blog.fc2.com/forum/viewtopic.php?f=3&t=16900&hilit=%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3+%E4%BD%99%E7%99%BD
その他の回答 (1)
- Muller3
- ベストアンサー率81% (800/979)
プラグインだったらENTERキーによる改行も関係ないでしょうし・・・。 これだけでは推測が難しいと思います。 加工後のHTML構造とCSSを補足されてはどうでしょう？
お礼
解決しました。 良い回答をいただきありがとうございました。
関連するQ&A
- ＦＣ２ブログの両端の余白の消し方
ＦＣ２でブログを始めた初心者です。既成のテンプレート（pinkclown)を使っているのですが、ヤフーの画面で左の「お気に入り」を閉じた時にブログを見ると（画面を大きく見た時）、両端にできる白い余白を消す方法を教えてください。うまく伝えられないのですが、テンプレート全体の幅を広げるか、余白部分に色をつけるか何かで、とにかく両端の白い部分をなくしたいのです。よろしくお願い致します。
- ベストアンサー
- ブログ
- ページの一番上にできた余分な余白の消し方
ページの一番上に800×100の画像を用意し、それを背景画像として設定。 その上に<h1>のタイトルを表示しようとすると、 背景画像の上に無駄な余白ができてしまいます。 何か間違えているのでしょうか？この余白の消し方を教えてほしいです。 よろしくお願いいたします。 <html> <head> <title></title> <style type="text/css"> body { margin: 0; padding: 0; text-align: center; background-color: #000; color: #333333; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 100%; text-align: center; } div#container { width: 800px; background-color: #ffffff; text-align: left; margin: 0 auto; padding: 0; } div#header { width: 800px; height: 100px; background-image: url(image/sample.jpg); background-repeat: no-repeat; padding: 0; margin: 0; } h1 { padding-top: 15px; padding-right: 0; padding-bottom: 15px; padding-left: 0; font-size: 15px; font-weight: normal; line-height: 15px; margin-top: 30px; margin-right: 0px; margin-bottom: 0; margin-left: 0; color: #000; } div#mainContent { padding: 5px 15px 0 15px; } </style> </head> <body> <div id="container"> <div id="header"> <h1>テスト</h1> </div> </div> <div id="mainContent"></div> </body> </html>
- ベストアンサー
- HTML
- IE6で画像の下に余白が入ってしまいます。
CSSを使ってレイアウトをしているのですが、 <ul> <li>画像</li> <li>画像</li> <li>画像</li> </ul> でなぜか画像ごとに、下の部分に少しだけ余白ができてしまいます。 CSSでmarginやpaddingを0にしたり、 http://www.happy-crossing.com/tagmemo/log/eid11.html にあるようにvertical-align:bottomにしたり・・・ それでもなぜか下の余白が表示されています。 こちらの方は治ったみたいなのですが・・・ 他のブラウザはいろいろ見ましたが、余白などなく表示されていました。 Dreamweaver上でも少し余白が見えています・・・ お心当たりのある方がいらっしゃいましたら、どうかよろしくお願致します。 CSSは以下のように記述しています。 ul { float: left; margin: 0px; padding: 0px; list-style: none; margin-top: 45px; } li { width: 150px; background-repeat: no-repeat; padding-left: 13px; padding-bottom: 0px; height: 140px; float: left; vertical-align: bottom; margin-bottom: 0px; }
- ベストアンサー
- HTML
- ブログのテンプレートに関する質問です。FC2で 166_simple_
ブログのテンプレートに関する質問です。FC2で 166_simple_3cと呼ばれるテンプレートを使用していまして、ブログのトップに画像背景を設定したいと思いました。 いろいろ調べてこちらのリンクにたどり着きましたが、http://blog298.blog25.fc2.com/blog-entry-492.html cssを書いてある通りに編集してもうまくいきませんでした。 リンク先での説明によると以下の#headBlockより下の部分を設定すると画像が見えるように なるようですが、できませんでした。どこかおかしなところがありますでしょうか。 以下スタイルシートをコピーしてきました。 /*head要素 */ #headBlockBase { padding: 0px 4px 0px 4px; } #headBlock { background : #123456 url("ここに画像のURLが入っています"); } width: 100%; margin: 0px; padding-top: 10px; } html>div #headBlock { width:100%;margin: 0px; } h1 { font-size: 24px;margin: 0px;padding:5px 0px; } html>h1 { font-size: 24px;margin: 0px;padding:5px 0px;
- ベストアンサー
- ブログ
- ＦＣ２ブログテンプレートについて
ブログテンプレートのメニュー部分について ＦＣ２のブログです。 2カラムのテンプレートを使っていますが、 左メニュー部分が画面上ギリギリから始まるので、 少し下げたいのですが、どこを操作したら良いでしょうか。 padding-top:＊＊px; /* タイトルの位置 */ の＊＊に数字を 入れると、中央記事部分は下がったのですが、 メニュー部がどうしても出来ません。 分かる方いらっしゃいましたら、教えてください。 よろしくお願いいたします
- 締切済み
- ブログ
- 最上部の余白の原因
こんばんは、質問させてください。 XHTML 1.0 Transitional、CSS2で大枠のレイアウトを組んでいてはまっています。 コードは抜粋です。現在の書き方だと タイトル部分の上に対してのマージンによって <div class="header">の要素と一緒に余白がとられてしまい真っ白な余白が最上部にできてしまいます。 想定ではヘッダーの中で中央ぐらいにTitleという文字がくると思っていたのですが。。 原因はなんでしょうか？ 宜しくお願い致します。 -index.html <body> <div class="header"> <p class="title">Title</p> </div> </body> -style.css *{ margin:0; padding:0; } .header{ background-color:blue; width:800px; height:250px; } .title{ width:200px; height:50px; background-color:red; color:white; margin-left:210px; margin-top:100px; }
- ベストアンサー
- CSS
- blogのwrapperの上下に余白が10pxほど空いていますが、つめるにはどうしたらいいでしょうか？
wordpressを使用してブログを作成していますが、wrapperの上下の部分に、10pxほど余白ができてしまっています。 IE5 IE6 FireFoxのいずれでも、余白があるのですが、この余白をつめるには、どうしたらいいのでしょうか？ cssの定義は以下の通りなのですが、これは、cssでは、余白を埋めることはできないのでしょうか？ .wrapper { background: url(images/wrapper.png) repeat-y; position:relative; width:1000px; margin:0px auto 0px auto;
- ベストアンサー
- HTML
- フレーム構造のページで左右上下の余白を0にしたいのですが、以下の何れの
フレーム構造のページで左右上下の余白を0にしたいのですが、以下の何れの方法でも ほとんど変化がありません。 １．<frame src="green.html" marginwidth="0" marginheight="0"> ２．<body style="margin:0px;padding:0px;"> ３．<style type="text/css"> <!-- body { margin:0px;padding:0px;} --> </style> 確実な方法を教えてください。 宜しくお願い致します。
- 締切済み
- CSS
- Bloggerの画面上下の余白を詰めたい
広告のないブログを求めて、GoogleのBloggerに行き着いたのですが、 スタイルシート記述がVariable nameという馴染みのない記述で手探り状態なので御知恵を拝借したいです。 目下ヘッダー上にあったツールバーを #navbar-iframe { display: none !important; } の記述で消したまでは良かったのですが、そのあとの余白がうまく詰まりません。 下の余白も然り。 marginやpadding記述を追加してもどうもうまくいきません。 余白の詰め方を教えていただければ言うことはないのですが ひょっとして公式テンプレート改変だとここまでが限界なのでしょうか？ もしそうなら、比較的デザインのいじりやすいシンプルなテンプレートなどお教えいただければ幸いです。 製作中のブログアドレス http://shitumonyou.blogspot.com/ ソースが編集段階とページ表示で変わってくるので編集時のものを http://ll.la/a.7u DLパス：okweb
- ベストアンサー
- CSS
- wordpressで余計な余白を削りたい
WorpdressでTwenty Seventeenというテンプレートの子テーマを使っています。 静的HTMLページで作ったサイトをWordPressに持ってきたのですが、 静的ページより全体的に余白ができてしまって困っています。 画像と画像の間やヘッダーの上部です。 style.cssで追加したmarginやpaddingをいじっているのですが、静的ページと同じになりません。 余白を削る良い方法はありますでしょうか。 img { vertical-align:bottom; } で画像間の隙間を無くしてみました。 vertical-align:bottom; を追加する前とした後では隙間の出来が違うのですが、それでも静的ページと同じになりません。 「ヘッダー」もfunctions.phpに add_filter( ‘show_admin_bar’, ‘__return_false’ ); を追加したら追加する前よりは余白が減りましたがそれでも静的ページより余白ができてしまいます。 atyle.css以外の場所で余白を削るのかもしれません。
- ベストアンサー
- オープンソース開発
お礼
解決しました。 良い回答をいただきありがとうございました。