タイトルとサブタイトルの位置を変えたい。

無料新規登録

会員の方はログイン

トピック

コミュニティ

お知らせ

テンプレート・プラグイン

ブログをHP風に、と色々試行錯誤しております。

タイトルとサブタイトルの位置を別にしたいのですが、
どうしても上手くいきません。

下が使用しているスタイルシートのヘッダー部分です。

text-align:left;
と言う部分をrightと書き変えると、
タイトルもサブタイトルも一緒に移動してしまいます。

.header a {
text-decoration: none;
font-size:26pt;
color:#ffffff;
}

の部分がタイトルのようなのですが、
ここに
text-align:left;
と加えてみても、反映されません。

どのようにしたら、別々になるのでしょうか？

.header {
background-image: url(http://hitsuji.atnifty.com/uploads/photos/425-800.jpg);
height: 200px;

background-repeat: no-repeat;
text-decoration: none;
font-weight:bold;
font-size:13pt;
color:#ffffff;
　text-align:left;
　width:800px;
height:150px;
padding-top:25px;
}

.header a {
text-decoration: none;
font-size:26pt;
color:#ffffff;
}

.header a:hover {
color:#ffffff;
text-decoration: none;

}

by 海老名ハウスクリーニング 2012年02月07日 11:51

by 海老名ハウスクリーニング
2012年02月07日 11:51

コメント一覧新しい順に表示▽ / 古い順に表示△

コメント一覧
新しい順 | 古い順

このコミュニティにご参加頂くと、コメントの書き込みができます

大変分かりやすくご説明して頂きまして、
ありがとうございました

さっそく試してみたところ、思うようにできて満足しております。

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

by 海老名ハウスクリーニング 2012年02月08日 12:23

by 海老名ハウスクリーニング
2012年02月08日 12:23
オーロラ背景の中で白抜きになっているブログ名<%blog_name>と概要<%introduction>は

<div class="header">
<a href="<%url>"><%blog_name></a><br>
<%introduction>
</div>
このような文字列によって表示されています。

どちらもheaderというクラス名によってデザイン指定を受けていますが
<%blog_name>にだけリンクが張られているので
CSSにおける.header a と .header a:hover
以下のデザイン指定はブログ名にのみ反映されるようになっているようです。

aタグを利用することで
同じクラス名の中で２種類のフォントサイズが指定されているわけですね。

本来デザイン指定を分けたい場合には
別のクラス名を新設して、別のデザイン指定をCSSファイル上で行うやり方が推奨されるのですが
テンプレートの作者さん以外がこの手のカスタマイズをするとうまく行かないことが多いのです。

ですから
ちょっと不細工ですが
テキストの表示位置を編集したいのなら

<div class="header">
<a href="<%url>"><%blog_name></a><br>
<p style="text-align:right;padding-right:50px"><%introduction></p>
</div>

上記のようなスタイル指定を
テンプレートのHTMLに書き加えた方が確実なように思います。
rightと50pxの部分はお好きに置き換えてください。

他のコメンテーターさんには
また違ったご意見があるかもしれませんし
試行錯誤すれば、本来的なやり方でのカスタマイズも可能だと思います。
これだけが唯一のカスタマイズ法というわけではありませんので、ご参考まで。

by 標野ゆき 2012年02月07日 15:09

by 標野ゆき
2012年02月07日 15:09