float テキストの右下寄せ

質問

MTでブログを作っています。テンプレートを変更したのですが、躓いています。

width:800px;
height:287px;
のサイズのbackgroundの上で（中で？）右下寄せにブログタイトルと検索ボックスを表示させたいのですがうまくいきません。
かなりの初心者で独学のみでしています。どこが何なのかよく理解できていないのでheaderの部分をすべて貼ります。

/* header */
/* -------------------------------------------------------- */
h1 {
width:800px;
font-size:80%;
font-weight:normal;
color:#666666;
text-align:left;
margin:0 auto;
padding:15px 0 0 0;
}
#header {
width:800px;
height:287px;
color:#333322;
text-align:left;
margin:0 auto;
background:#eeeedd;
background-image: url(http://■■■.net/images/●●●.gif);
border-top:solid 1px #bbbb99;
border-left:solid 1px #bbbb99;
border-right:solid 1px #bbbb99;
border-bottom:0;
}
#header div.lbox {
width:510px;
float:left;
}
#header div.lbox p {
font-size:180%;
font-weight:bold;
line-height:120%;
margin:8px 0 5px 10px;
}
#header div.rbox {
width:170px;
padding:15px 0 0 0;
float:right;
}

#header div.rbox input {
vertical-align:top;
}
#header div.rbox input.box {
width:120px;
margin:0 5px 0 0;
}

#header a:link , #header a:visited {
color:#333322;
background:#eeeedd;
}
#header a:hover , #header a:active {
color:#666655;
background:#eeeedd;
}

現在、左上にブログタイトル、右上に検索ボックス（その下に検索ボタン）があります。
これを横並びに右下へ持っていきたいのですが・・・。
それと、タイトルテキストの部分がeeeedd色の背景の上に黒字になっているのですが、eeeedd色でなくbackgroundの画像に透過させるにはどうすればよいのでしょうか？？

回答No.3

Muller3 · ベストアンサー

＞タイトルは下へ移動しましたが、真ん中より少し右

#header div.lboxがwidth:510px;だからです。
数字を550とか、もっと大きくしてみて下さい。右に動くと思います。
要は、#header div.lboxの幅を拡げることで、右に動かす、ということです。#headerの幅が800pxありますから、その範囲内で加減します。でもちょっと問題が起こる可能性があるので、IE6、Firefox両方で表示を確かめるようにして下さい。HTMLの冒頭にxml宣言が入っているので、IE6では後方互換で表示するバグがあります。
参考：「ADP: IE6のwidth解釈バグ対処法」http://adp.daa.jp/archives/000265.html
今回の場合、このケースに引っかかります。
もし文字コードがMovable TypeデフォルトのUTF-8なのでしたら、問題が起こるようなら<?xml version="1.0" encoding="<$MTPublishCharset$>"?>は取ってしまっても構いません。

＞今度は白い背景になりました

画像のパス（URL）が間違っていませんか？
試しにそのURLにブラウザから直接アクセスしてみて下さい。画像は表示されますか？

＞h1が<$MTBlogDescription$>

<h*>というのは「見出し」で、<h1>は一番の大項目という意味です。これにはブログのタイトルを入れるのが真っ当だと思うのですが、そこに「ブログの説明」を持ってきていることになります。
検索エンジンは人間ではないので、こうしたマークアップ（<h1>とか）を頼りに、何がページに書かれているかを捉えてインデックスしていきます。
このページにおいては「ブログの説明」がトップ項目で、「ブログのタイトル」は、ただの段落です、と検索エンジンに伝えることになります。

最初からこの状態だとしたら、どういう意図なのかなあ…？(^^;

お礼

ご回答ありがとうございます。
＞数字を550とか、もっと大きくしてみて下さい。右に動くと思います。
いきました！
というか先日教えていただいたときに、ここの数字も変えてみたりしたのですが、700ぐらいにしてしまったため、この部分の背景やテキストが2段になってしまい、勝手に「ここは横幅じゃなく高さの設定なんだ」と思い込んでいました。

＞今度は白い背景になりました
次に回答してくださったとおり、ブログタイトルの背景色が、eeeeddから白に変わったということです。
/* header */の部分以外での設定ということですね。探してみます。

＞最初からこの状態だとしたら、どういう意図なのかなあ…？(^^;
そんなにおかしなことなんですね；；
私は知識がないのでそのまま入れ替えただけです。最初からこの状態です。
DLしたテンプレ屋さん？のサイトには、SEO対策とか書いてありましたが。。
やっぱり無料はよくないということなのでしょうか・・・

回答No.5

Muller3

＞SEO対策

いろんなSEO対策（？）があるようですから…
#小手先のことには興味がないので個人的にはスルーです(^^;

無料がよくない、ということではないです。
でも、もしそれが本当にSEO対策に効果のあるテンプレートなのであったとしても、そのテンプレートをとにかく使えば効果がある、とは思えません。
テンプレートを配布する側が、文書構造の基本に対して「敢えて」変則的な作りをするのであれば、その理由があるはずです。そのテンプレートがなぜそうなっているのか、またどういう使い方をすればいいのか、利用者に対し説明があってしかるべきと思います（無料とはいえ）。
それを理解した上で利用するのでなければ、そのテンプレートが想定している効果は得られないんじゃないかと思うんですけど…
（個人的には「ああいう理由かもしれない」と想像するところはあるんですけども…）

そういったことを説明されてないか、配布先を一応探してみては。でなければ、折角の「SEO対策テンプレート」をとんちんかんな使い方をしてしまうことになるかも。

その配布先さんを信頼するかどうかを判断するのは、利用者自身ですので。

お礼

SEO対策というコトバに惹かれたわけではなく、勉強になるかなとテンプレートを変えてみただけだったのですが、さっきアクセス解析を確認すると、テンプレ変更前と比べ検索エンジンからのアクセスが5分の1以下になっていました＾＾；
そのブログでアフィリエイトをしていると言うわけでもないのですが、ここまでアクセスが減るとちょっと寂しい感じです。

やっぱりテンプレートによってずいぶん違うのですね。
というか私が使いこなせていないのでしょう。。
まだまだ分からないことだらけですが、丁寧に教えていただき勉強になりました。

ありがとうございました。

回答No.4

Muller3

あ、失礼しました、背景画像はそのまま表示されているんですね。
ブログタイトルの背景色が、eeeeddから今度は白に変わったと。
だとしたら、ご質問に提示されているCSS箇所以外で、背景色が設定されているのかもしれません。
aに背景色が指定されていないかなど、確認してみてはどうでしょう。

回答No.2

Muller3

想像以上のものがありました…

＞タイトルテキストの部分がeeeedd色の背景の上に黒字になっている

#header a:link , #header a:visited
#header a:hover , #header a:active
にある　background:#eeeedd;　を取る。

＞横並びに右下へ

#header の　text-align:left;　を　right　に
#header div.lbox p　に　padding-top: 230px;　を追加
#header div.rbox　の　padding:15px 0 0 0;　を　230px 0 0 0　に

これで右下に行くと思うので、あとは微調整してみて下さい。各数値を微妙に変えたり。
各要素の中でどう配置するかですので、各要素が持っている範囲を知ることが大事です。要素の範囲を知りたい場合は、仮に背景色を付けてみると捉えやすいと思います。

h1が<$MTBlogDescription$>というのは文書構造的に問題あるんですが…とりあえず今回はご質問のみにお答えするということで。

お礼

ご回答ありがとうございます。
早速やってみたところ、タイトルは下へ移動しましたが、真ん中より少し右という位置になりました。
それと、タイトルのbackground:#eeeedd;を取りましたら、今度は白い背景になりました。タイトルが移動した先の背景が真っ白の部分なので見た目は分かりませんが。
いろいろ弄っては見るもののよく分かりません。。もう少し勉強が必要ですね。
＞要素の範囲を知りたい場合は、仮に背景色を付けてみると
なるほど。そうすれば分かりやすいですね。

＞h1が<$MTBlogDescription$>というのは文書構造的に問題
さっぱり分かりません＞＜
無料のテンプレートで練習がてら入れ替えをしてみたのですが・・・このテンプレートは良くないのでしょうか。

回答No.1

Muller3

ブログタイトルがどれで何がどうなってるのかCSSだけではよく理解できませんので、HTMLを提示していただいた方がいいと思います。

普通h1がブログタイトルだけど、なんかそうでもないような感じになっていますし…構造の部分を想像で回答するのはちょっと無理そうです。

補足

ご指摘ありがとうございます。これでは分からないものなんですね。すいません；；
これで分かりますでしょうか。

<?xml version="1.0" encoding="<$MTPublishCharset$>"?>
<!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=<$MTPublishCharset$>" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<MTIfNonEmpty tag="MTBlogDescription"><meta name="description" content="<$MTBlogDescription$>" /></MTIfNonEmpty>
<title><$MTBlogName$></title>
<link rel="index" href="<$MTBlogURL$>" title="home" />
<link rel="stylesheet" href="<$MTBlogURL$>styles-site.css" type="text/css" />
<link rel="alternate" type="application/atom+xml" title="Atom" href="<$MTBlogURL$>atom.xml" />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<$MTBlogURL$>index.xml" />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="<$MTBlogURL$>rsd.xml" />
</head>
<body>
<h1><MTIfNonEmpty tag="MTBlogDescription"><$MTBlogDescription$><MTElse>&nbsp;</MTElse></MTIfNonEmpty></h1>
<div id="header">
<div class="lbox">
<p><a href="<$MTBlogURL$>"><$MTBlogName$></a></p>
</div>
<div class="rbox">
<form method="get" action="<$MTCGIPath$><$MTSearchScript$>">
<input type="hidden" name="IncludeBlogs" value="<$MTBlogID$>" /><input name="search" class="box" value="" tabindex="0" accesskey="s" /><input type="image" src="<$MTBlogURL$>img/bt_search.gif" value="検索" class="submit" alt="検索" tabindex="0" accesskey="b" />
</form>
</div>
<br class="cl" />
</div>
<div id="main">
<p id="panlist"><a href="<$MTBlogURL$>">TOPページ</a>&nbsp;＞</p>
<div id="contents">
<MTEntries lastn="10">
<h3><a href="<$MTEntryLink$>"><$MTEntryTitle$></a></h3>

<$MTEntryBody$>

<p class="ri"><MTEntryIfExtended><a href="<$MTEntryLink$>">「<$MTEntryTitle$>」の続きはこちら</a></MTEntryIfExtended>　
<MTIfCommentsActive><a href="<$MTEntryLink$>#comments">Comments</a> (<$MTEntryCommentCount$>) </MTIfCommentsActive>　
<MTIfPingsActive><a href="<$MTEntryLink$>#trackback">Trackbacks</a> (<$MTEntryTrackbackCount$>)</MTIfPingsActive></p>
</MTEntries>
</div>
<div id="navi">
<img src="<$MTBlogURL$>img/title_contents.gif" width="140" height="20" alt="コンテンツ" />
<MTTopLevelCategories><MTSubCatIsFirst><ul></MTSubCatIsFirst><li><MTIfNonZero tag="MTCategoryCount"><a href="<$MTCategoryArchiveLink$>"><$MTCategoryLabel$></a><MTElse><$MTCategoryLabel$></MTElse></MTIfNonZero><$MTSubCatsRecurse max_depth="1"$></li><MTSubCatIsLast></ul></MTSubCatIsLast></MTTopLevelCategories>
<img src="<$MTBlogURL$>img/title_monthly.gif" width="140" height="20" alt="月別コンテンツ" style="margin-top:10px;" />
<MTArchiveList archive_type="Monthly"><MTArchiveListHeader><ul></MTArchiveListHeader><li><a href="<$MTArchiveLink$>"><$MTArchiveTitle$></a></li><MTArchiveListFooter></ul></MTArchiveListFooter></MTArchiveList>