- 締切済み
movable type ブログの罫線を画像に置き換えるには
ブログとブログの間に罫線を挿入するスタイルシートを応用して罫線部分を 画像に置き換えるために下記の記述をしました。 #content .posted { background:url(images/hand-stech.jpg)no-repeat; padding-bottom:10px; margin-bottom:10px; } firefoxでは罫線部分に画像が表示されるのですが、IEでは表示されません。 Movable Typeのサポートに質問したのですが、具体的な修正内容については 一般的な HTML や CSS などの技術的な知識が必要となるため、個別のご案内 を行っていないと云われてしまいました。 色々と検索したのですが具体的な解決方法が見当たりません。 皆様のお知恵を貸していただけると助かります。 よろしくお願いします。
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- Muller3
- ベストアンサー率81% (800/979)
回答No.1
IEだけで表示されないならIEのバグなのかもしれませんが、提示されている情報だけでは判断難しいと思います。 #content .postedの部分にって、中身（テキストなど）はあるんでしょうか？ 高さを与えてみたらどうなるかなあとはちょっと思いましたが、それも正しいのかどうか、他の部分を見てみないと。 ・xml宣言はあるか？ ・DOCTYPE宣言はどうなっているか？ ・エントリー全体のHTML構造は？（できればCSSも） を補足していただければ、何かわかるかも・・・ （全てのソースが見られるわけではないので答えが出るとは限りませんが）
お礼
Muller3様 早速のご回答誠にありがとうございます。 スタイルシートの background:url(images/hand-stech.jpg) と no-repeat; の間に半角スペースを入れたらIEでも表示されました。 とても初歩的なミスでお恥ずかしいかぎりです。 お騒がせして申し訳ありませんでした。
補足
罫線画像の表示については解決したのですが次の問題が発生しました。 「投稿者 ｜コメント(0) ｜トラックバック(0)」の下に罫線画像が配置さ れるようにしたいのですが、間隔が詰まっています。 background-position で位置決めしたのですが上手く間隔があきませんでした。 間隔を空ける方法を教えていただけると助かります。 ソースは下記の通りです。（文字制限でエラーが出たため部分的なソースになります。） よろしくお願いします。 【メインページ】 <body> <div id="container"> <div id="header"> <h1 lang="en"><a href="<$mt:BlogURL$>"><$mt:BlogName$></a></h1> <h2><$mt:BlogDescription$></h2> </div> <div id="category"> <MTCategories show_empty="1"> <MTIfNonZero tag="MTCategoryCount"> <a href="<$MTCategoryArchiveLink$>"> <$MTCategoryLabel$></a> <MTElse> <span> <$MTCategoryLabel$> </span> </MTElse> </MTIfNonZero> </MTCategories> </div> <div id="content"> <MTEntries lastn="3"> <MTDateHeader> <h2><$MTEntryDate format="%x"$></h2> </MTDateHeader> <h3><$mt:EntryTitle$></h3> <$mt:EntryBody$> <p class="posted"> 投稿者<$mt:EntryAuthor$>: <a href="<$mt:EntryPermalink$>"> <$mt:EntryDate format="%X"$></a> ｜<a href="<$MTEntryPermalink archive_type="Individual"$>#comments">コメント(<$MTEntryCommentCount$>)</a> <MTEntryIfAllowPings> ｜<a href="<$MTEntryPermalink archive_type="Individual"$>#trackbacks">トラックバック(<$MTEntryTrackbackCount$>)</a> </MTEntryIfAllowPings> </p> </MTEntries> </div> <div id="footer"> <p class="rss"> <a href="<$mt:BlogURL$>index.rdf"> <span class="rss-format">RSS</span> <span class="rss-version">1.0</span></a></p> <p>Powered by<a href="http://www.movabletype.jp"> Movable type<$MTVersion$></a></p> <p>Copyright(C)WALK IN THE WOODS,All rights reserved.</p> </div> </div> </body> </html> 【スタイルシート】 body { text-align:center; } #container { width:640px; margin-left:auto; margin-right:auto; text-align:left; } /*ヘッダー部分*/ #header h1 { font-size:24px; font-family:Arikal Black,Helvetica,sens-serif; margin-top:0; margin-bottom:0; } /*カテゴリーメニュー*/ #category { margin-top:3px; text-align:right; } #category a,#category span{ font-size:12px; color:#77a822; margin-left:10px; } #header h1 a { color:#2cccff; text-decoration:none; } #header h2 { color:#333333; font-size:12px; margin-top:6px; margin-bottom:0; } #header { background-color:#c7ddff; padding:16px 20px 60px; background-image:url(<$MTBlogArchiveURL$>head01.jpg); } /*エントリー部分*/ #content h2 { font-size:12px; color:#afbc0d; } #content h3 { font-size:14px; color:darkblue; } #content p { font-size:12px; color:#666666; line-height:140%; } #content a { color:darkblue; } #content .posted { background:url(images/hand-stech02.jpg) no-repeat; padding-bottom:30px; margin-top:20px; } /*フッター部分*/ #footer { border-top:solid 5px #b2cbff; padding-top:6px; } #footer p{ font-size:12px; margin-top:0; margin-bottom:0; } #footer a{ color:#77a822; text-decoration:none; } #footer .rss{ border:solid 1px #999999; padding:1px; width:80px; } #footer .rss a{ display:block; width:100%; background-color:#bbbbbb; color:black; font-size:9px; font-family:Arial Helvetica,sans-serif; } #footer .rss-format{ background-color:orange; padding:0 5px; } #footer .rss-version{ padding 0 5px; }