ブログ内の空白削除方法
- ブログ内のタイトル画像とその下のラインの間の空白を削除する方法について教えてください。
- ブログのテンプレートをいじっても空白が削除できないので、他の方法があれば教えてください。
- ブログの空白を埋めたいのですが、テンプレートを変更しても上手く行かない場合はどうすれば良いですか。
- ベストアンサー
ブログ内の空白を削除したい
ブログ内のタイトル画像とその下のラインの間の空白が1行程度空いており、その空白をどうしても埋めたいのですが、テンプレートをいじってもなかなか上手く行きません。テンプレートは以下のような記述になっています。是非ご教授ください。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://※※.dtd"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=euc-jp"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="content-script-type" content="text/javascript"> <link href="<%css_link>" type="text/css" rel="stylesheet"> <link rel="alternate" type="application/rss+xml" title="RSS" href="<%url>?xml"> <title><%blog_name> <%sub_title></title> </head> <body> <!--アクセス解析タグ ここから--> <script language="JavaScript" src="http://※※※"></script><noscript><div align="right"><a href="http://※※※/" target="_blank">アクセス解析</a></div></noscript> <!--アクセス解析タグ ここまで--> <a name="top"></a> <div class="container"> <!-- ヘッダー部 ここから --> <IMG SRC="http://※※※.jpeg" width="※" height="※" alt="※.jpg" border="0"></a></h1> <div class="banner"> <div class="banner_title"> <h2 class="intro"><%introduction></h2> </div> </div> <!-- ヘッダー部 ここまで --> <!-- 左メニュー ここから -->
- ブログ
- 回答数2
- ありがとう数23
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
ご丁寧にありがとうございます。 開始タグの件ですが、私の書き方も悪かったんですが<a><h1>ではなく<h1><a>です。入れ子の内と外はきちんと一致させてください。現状ではブラウザが強引に把握してくれるようですが… スタイルシートについて、ごく単純にお答えすると「h1のmargin-bottom」で調整です。上手くいかない場合は「h2のmargin-top」と同時に調整してください。質問者さんの狙いは分かりませんので具体的な数値は残念ながら出せません。 …あとから気づいたのですが、タイトルは画像なのですから<h1>で囲うのはどうなのかと疑問を感じました。音声ブラウザには優しい気もしますが…
その他の回答 (1)
<img>の手前に<a><h1>の開始タグが見当たりませんがコピペのミスということでいいんでしょうか？ どちらにしても<img>とその直下の要素がどちらも<hn>ですから見出し扱いされます。 ブラウザはInternetExpolerですか？その場合見出し同士(<h1>と<h2>)の間に隙間は発生する仕様です。どうしても詰めたい場合はスタイルシートを使ってください。
補足
ありがとうございます。コピペミスではありません。自分でいじったのか元々なのかは分かりません。<a><h1>を追記しましたが、やはり改善されませんでした。ブラウザはおっしゃるとおりIEです。スタイルシートをどのようにすればよいのか・・・こんな状態です。コピペミスはありません。 body { color: #ffffff; font-size: 14px; background-color: #000; text-align: center; margin: 0px; padding: 0px; } input, textarea { border: 1px solid #000; font-size: 14px; } form { padding: 0px; margin: 0px; } .container { margin-left: auto; margin-right: auto; width: 780px; background-color: #000; } a:link { color:#ADDE4A; text-decoration: underline; } a:visited { color: #E0FAAC; text-decoration: underline; } a:hover { color: #E0FAAC; text-decoration: underline; } .banner { width: 780px; padding: 0px; clear: both; margin: 0px 0px 15px 0px; } .banner_title { text-align: left; border-bottom: 1px solid #fff; background-color: #000; } .side_left { float: left; overflow:hidden; width: 180px; } .side_right { float: left; overflow:hidden; width: 180px; } .main { float: left; overflow:hidden; width: 600px; } .entryBodybox { width: 580px; margin: 0px 5px 10px 5px; text-align: left; border-top: 0px solid #000; border-right: 1px solid #8B898B; border-bottom: 1px solid #8B898B; border-left: 1px solid #8B898B; } .entry_title { font-size: 14px; font-weight: bold; letter-spacing : 1px; padding: 3px 5px 3px 10px; border-top: 1px solid #8B898B; border-right: 0px solid #8B898B; border-bottom: 0px solid #000; border-left: 0px solid #8B898B; background-color:#000; } .entry_title a { text-decoration : none; } .entry_title a:hover { text-decoration : underline; } .entry_body { font-size: 14px; line-height: 150%; font-family: "Verdana", "ＭＳ Pゴシック", "Osaka"; margin: 15px 10px 5px 10px; } .entry_state { font-size: 12px; color: #8B898B; font-family: "Verdana", "ＭＳ Pゴシック", "Osaka"; text-align: center; margin: 20px 0px 20px 0px; clear: both; } .comtitle { font-weight: bold; color:#ffffff; padding-left: 10px; } .tbtitle { font-weight: bold; color:#8B898B; padding-left: 10px; padding-top: 10px; } blockquote { font-size: 12px; margin: 5px; padding: 5px; background-color:#8B898B; border-top: 1px solid #8B898B; border-right: 1px solid #8B898B; border-bottom: 1px solid #8B898B; border-left: 3px solid #8B898B; } .nav { margin-bottom: 10px; } .sideSet { width: 170px; margin: 0px 5px 20px 5px; text-align: left; border-left: 1px solid #000; border-right: 1px solid #000; border-bottom: 1px solid #000; } .sidetitle { font-family: "Verdana", "ＭＳ ゴシック", "Osaka"; font-size: 12px; font-weight: bold; color: #fff; text-align: center; border-top: 1px solid #8B898B; border-bottom: 1px solid #8B898B; border-left: 1px solid #8B898B; border-right: 1px solid #8B898B; background-color: #000; padding: 4px 0px 2px 5px; } .sidetext { padding: 5px 2px 7px 2px; font-size: 12px; color: #8B898B; line-height: 140%; } .sidetext ul { padding: 0px; margin: 0px; list-style-type: none; } .sidetext li { background-repeat: no-repeat; background-position: 3px 5px ; color: #666; padding: 0px 0px 0px 0px; margin: 0px; } .prfimg { text-align: center; } .pagetop { color: #fff; font-size: 11px; text-align: right; margin: 0px 0px 20px 0px; } #sun { color: #c00; } #sat { color: #5982b2; } .footer { clear: both; width: 100%; font-size: 12px; text-align: center; letter-spacing : 1px; margin: 30px 0px 0px 0px; padding: 3px 0px 3px 0px; background-color:#000; border-top:1px solid #fff; }
関連するQ&A
- ＨＴＭＬ、ＣＳＳ
ＦＣ２（無料サーバー）でホームページを作っているのですが、ＦＣ２の広告（Ｐｏｗｅｒｅｄ ｂｙ…という下に一行だけ出るもの）が私のホームページに表示されなくて困っています。テンプレートを借りて作成したページで、テンプレートのカスタマイズはしていません。広告が表示されないと規約違反になってしまうので、表示させたいのです。何が原因でしょうか？ <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <meta http-equiv="content-style-type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <link rel="stylesheet" href="st.css" type="text/css"> <title>タイトル</title> </head> <body id="TOP"> <!-- ページ全体 --> <div id="page"> <!-- ヘッダー --> <div id="head"> <h1><a href="index.html">Your Sitename</a></h1> </div> <!-- メニュー --> <div id="menu"> <ul> <li><a href="sample.html">SAMPLE</a> <li><a href="link.html">LINK</a> <li class="on"><a href="text_menu.html">TEXT</a> <li><a href="index.html">INDEX</a> </ul> </div> <!-- コンテンツ --> <div id="contents"> <h2>MENU</h2> <div class="text"> <h3>SHORT STORY</h3> <ul class="sub01"> <li><a href="text.html">STORY01</a> </ul> </div> <div class="text"> <h3>LONG STORY</h3> <h4>TITLE01</h4> <ul class="sub02"> <li><a href="text.html">1</a> <li><a href="text.html">2</a> </ul> </div> <div class="text"> <h4>ILLUST01</h4> <ul class="sub02"> <li><a href="img.html"><img src="img/banner01.gif" width="31" height="31" alt="画像名"></a> <li><a href="img.html"><img src="img/banner01.gif" width="31" height="31" alt="画像名"></a> </ul> </div> <div class="pagetop"><a href="#TOP">▲Top</a></div> </div> <!-- フッター --> <div id="foot"> <ul> <li> </ul> </div> </div> </body> </html>
- ベストアンサー
- HTML
- DreamweaberCS5を使っています。
DreamweaberCS5を使っています。 ルートにフォルダを作り、その下層に新しいページを作りたいのですが、 ルートのライブラリィをそのまま使う方法が全くわかりません。教えてください。 下記の<head>からヘッダーのライブラリーのソースでわかりますか？ <?xml version="1.0" encoding="shift_jis"?> <!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" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="imagetoolbar" content="no" /> <meta name="Description" content="テキスト" /> <link rel="stylesheet" type="text/css" href="css/style.css" media='screen,print' /> <link rel="start" href="index.html" /> <link rev="made" href="mailto:ＵＲＬ" /> <link rel="alternate" type="application/rss+xml" title="RSS" href="http://otax81.com/index.xml" /> <title>テキスト</title> <script type="text/javascript" src="Library/java/rollover.js"></script> </head> <body> <div id="WRAP"><!-- #BeginLibraryItem "/Library/header.lbi" --> <h1>テキスト</h1> <div id="TOP"> <div class="float-left"><a href="http://otax81.com/"><img src="image/otaxheader.jpg" width="476" height="78" alt="ヘッダー" /></a> <a href="company.html"><img src="image/zeirisikailogo.jpg" width="140" height="44" alt="ロゴ" /></a> <a href="greeting.html">テキスト</a></div> </div> <div id="MENU"> <div id="MENULINK"> <div class="menubt"><a href="index.html">テキスト</a></div> <div class="menubt"><a href="menu1service.html">テキスト</a></div> <div class="menubt"><a href="menu2hinto.html">テキスト</a></div> <div class="menubt"><a href="menu4pay.html">テキスト</a></div> <div class="menubt"><a href="menu3actionsheet.html">テキスト</a></div> <div class="menubt"><a href="sitemap.html">サイトマップ</a></div> <br class="clear" /> </div> </div><!-- #EndLibraryItem -->
- 締切済み
- ホームページ作成ソフト
- ＪＳの記述を別ファイルに移す
下記のＨＴＭＬ内の <script type="text/javascript">～</script> をtest.jsとして別ファイルに移す場合にどのように、記述するればよいのでしょうか。単純にコピペしたのですがうまくいきません。 初歩的だとは思いますが、ご指導をお願いします。 --------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <link href="css/style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="js/Draggable.js"></script> </head> <body> <div id="test1" class="test"></div> <div id="test2" class="test"></div> <script type="text/javascript"> var test1 = new Draggable("test1"); var test2 = new Draggable("test2"); </script> </body> </html>
- ベストアンサー
- JavaScript
- CSSとSSI 一緒に使えますか？
今までテーブルでデザインしたサイトでSSIを使ってメニューなどを更新していました 同じような感じのデザインのサイトをCSSで作成し、SSIを利用しようと思ったのですが、どうしてもSSIが利用できません CSSも初心者でテンプレートをコピペしてなんとかやってみた感じです <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta name="description" content="このページの要約文"> <meta name="keyword" content="キーワード,キーワード,キーワード"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>このページのタイトル</title> <link rel="index" href="http://"> <link rel=stylesheet type="text/css" href=".css"> <div align="center"> <div id="outline"> <div class="header"> おお </div><!-- end header --> <div align="center"> <div id="frame"> <div id="frame-margin"> <div class="center_left"> <div class="center"> ああ </div><!-- end center --> <div class="left"> いい <!--#include virtual=".html"--> </div><!-- end left --> <br class="c-both"> </div><!-- end center_left --> <div class="right"> うう <!--#include virtual=".html"--> </div><!-- end right --> <br class="c-both"> </div><!-- end frame-margin--> </div><!-- end frame --> </div><!-- end centering --> ご教授のほどなにとぞよろしくお願いします
- 締切済み
- HTML
- JUGEMのブログデザインについて
JUGEMという所でブログをやっていて、cssやhtml自由に変えることが出来るんですが、添付した画像のようにコンテンツが重複してしまいます（画像小さくてすみません）。 cssの方を変えたとしても同じような現象になるので、htmlタグのどこかが原因だろうと思い色々いじっているんですが改善しません。 記述は以下の通りです。 <!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" lang="ja" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset={site_encoding}" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>{site_title}</title> <link rel="stylesheet" href="{site_css}" type="text/css" /> <link type="text/css" href="{gmo_header_css}" rel="stylesheet" media="screen,print" /> <link rel="alternate" type="application/rss+xml" title="RSS" href="{site_rss}" /> <link rel="alternate" type="application/atom+xml" href="{site_atom}" /> <link rel="alternate" media="handheld" type="application/xhtml+xml" href="{mobile_url}" /> <script src="http://imaging.jugem.jp/template/analogue/menu.js" type="text/javascript"></script> <script type="text/javascript" src="http://imaging.jugem.jp/template/js/cookie.js"></script> </head> <body onload="javascript:initval();"> <div id="layout"> <div id="header"> <h1>{blog_name}</h1> <div class="about"> {blog_description} </div> </div> <div id="menu"> </div> <div id="wrapper"> <div id="mein"> <div class="entry_title"><h2>{entry_title}</h2></div> <div class="entry_date">{entry_date}{entry_time}</div> <div class="entry">{entry_description}<br><br><br></div> </div> {ad} </div> </div> </body> </html> ヘッダー部分とメインとなる部分はちゃんと表示されているのですが、それの間にもう一つ同じものが表示されてしまうんです。 どんな所で探しても同じような質問がなかったので、こちらで質問させて頂きました。 分かる方いらっしゃいましたら回答お願いします。
- ベストアンサー
- ブログ
- テーブル内の文字が揃わない
検索したのですが、見当たらないので質問させてください。 私は、ほとんど無知でコピペやテンプレを利用させてもらってホームページを作っている初心者です。 テーブルの中の文字が下のテーブルの文字の位置と合わなくて困っております。 cssは外部から呼び出しで、 ------- .t{ font-size:15px; color:#666; margin:1px 8px; text-align:right; } .t:first-letter{color:#e68080;} .text2{ line-height:18px; margin:2px 0px 20px 0px; border:1pt dotted; padding:8px 2px 8px 2px; color:#e69999; } ------ htmlは ------ <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="content-style-type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <link rel="stylesheet" type="text/css" href="left.css"> <title>diary</title> <base target="main"> </head> <body> <div class="t">blog1</div> <div class="text2"><a href="http://■.jp">日記1</a></div> <div class="t">blog2</div> <div class="text2"><a href="http://●/">日記2</a></div> <div class="t">diary</div> <div class="text2"><a href="http://▲">日記3</a></div> </body> </html> ----- と記述しています。 この日記2と日記3の文字の開始位置はマージンで指定した左で揃っているのですが、 日記1が下の２つよりもっと左に表示されてしまいます。 別のページではテーブル内をテキストではなく、画像で使用しているのですが、 同じく１つ目のテーブルの中の画像だけが左に寄り過ぎており、 加えて別のテーブルではスペースが余計に空いていて、最初のオンマウスで位置が詰まります。（画像が動きます） テーブルを消してみたりしたのですが、文字位置は変わらないので原因はテーブルではないと思うのですが… どこをいじったら解消されるのかがわかりません。 説明が下手でわかりにくいかと思いますが、どなたかご回答宜しくお願いいたします。 記述しているソースがお門違いでしたら、貼り付けなおします。
- ベストアンサー
- HTML
- IEでCSSの中央寄せが効かない
common.cssという外部CSSファイルで .main{ width:800px; margin:0 auto; } としています。 HTMLを簡単に書くと <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" > <title>test</title> <meta content="text/javascript" http-equiv="Content-Script-Type"> <link media="all" type="text/css" rel="stylesheet" href="css/common.css"> </head> <body> <div class="main"> ここに中央寄せになった記述 </div> </body> </html> としています。 firefoxでは中央寄せになりますが、IE8では中央によりません。 どのようにしたら良いでしょうか？
- ベストアンサー
- HTML
- ModalBoxのIEでの表示について
質問です。 javascriptの「ModalBox」についてなのですがModalBox内で指定したhtmlファイルがIE7では表示されません。Firefoxでは表示されるのですが・・・なぜでしょう？ 一応javascriptは表示され上からウィンドウは表示されるのですが中身の内容がでてきません(Firefoxなら表示されます) ソースですが 表示するボタンがある側↓----------------- <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>ModalBox サンプル</title> <meta http-equiv="Content-Style-Type" content="text/css" /> <link rel="stylesheet" href="modalbox.css" type="text/css" media="all"> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script type="text/javascript" src="lib/prototype.js"></script> <script type="text/javascript" src="lib/scriptaculous.js"></script> <script type="text/javascript" src="modalbox.js"></script> </head> <body> <h1>ModalBoxサンプル</h1> <a href="sample.html" title="Sample 1" onclick="Modalbox.show(this.href, this.title); return false;">ダイアログを表示</a> </body> </html> --------------------------- 表示されるhtml側↓ <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>Sample</title> </head> <body> サンプル </body> </html> ----------------------------- となっています。 調べたところIE7にも対応しているとの事なのですが何故でしょうか？
- 締切済み
- JavaScript
- crossSlideがうまく機能しないです；
簡単な画像切り替えのプラグインとして、 crossSlideを見つけたので使用してみようとしたんですが、 全く何も表示されない状態で困っています。 下記のようにソースは記載しています。 <!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" xml:lang="ja" lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <meta http-equiv="content-language" content="ja" /> <title></title> <meta name="description" content="" /> <meta name="keywords" content="" /> <meta http-equiv="content-style-type" content="text/css" /> <meta http-equiv="content-script-type" content="text/javascript" /> <link href="css/base.css" rel="stylesheet" type="text/css"> <link href="css/index.css" rel="stylesheet" type="text/css"> <script type='text/javascript' src='js/jquery-1.9.1.min.js'></script> <script type='text/javascript' src='js/jquery.cross-slide.js'></script> <script type="text/javascript"> $(function(){ $('#mainvisual').crossSlide({ sleep: 1, fade: 1 },[ { src: 'images/01.jpg' }, { src: 'images/02.jpg' }, { src: 'images/03.jpg' } ]); }); </script> </head> <body> <p>タイトル</p> <div id="mainvisual"> <p>写真</p> </div> </body> </html> cssは何も指定していません。 jsフォルダに、jquery-1.9.1.min.jsファイル、jquery.cross-slide.jsファイルを入れています。 imagesフォルダには、01.jpg、02.jpg、03.jpgを入れてます。 ブラウザには <p>タイトル</p> は表示されるのですが、 div#mainvisualの中の <p>写真</p>の文字は表示されません。 何が原因なのでしょうか。 よければアドバイスの方よろしくお願いします。
- ベストアンサー
- JavaScript
- 下記のタグの中で必要ないのはありますか？
(1) <?xml version="1.0" encoding="UTF-8"?> (2) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> (3) <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> (4) <head> (5) <title>●●●●●●●●</title> (6) <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> (7) <meta http-equiv="Content-Style-Type" content="text/css" /> (8) <meta name="robots" content="INDEX,FOLLOW"> (9) <meta name="description" content="●●●●●●●●"> (10) <meta name="keywords" content="●●●●●●●●"> (11) <meta name="content="●●●●●●●●" /> (12) <meta http-equiv="Content-Script-Type" content="text/javascript"> (13) <meta http-equiv="Content-Style-Type" content="text/css"> (14) <link href="css/A1.css" rel="stylesheet" type="text/css" /> (15) <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
- 締切済み
- HTML
お礼
ご回答ありがとうございました。取りあえずなんとかなったので 助かりました。感謝いたします！
補足
遅くなってくみません、結局h1タグをを削除し、代わりに<br>を入れてみました。あと、h2を削除したら本題が解決したのですが、その上のタイトル画像の直下（画像の下部分）にラインがくっついています。これを削除するにはどのようにすれば良いのでしょうか？色々やってみたのですがイマイチ分からなくて・・・。