ジャンル

ジャンル一覧

ランキング

もっと活用

注目タグ

App Store
Google play

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

コミュニティランキング

トピック詳細

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

ブログを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/p hotos/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;

}

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

コメント一覧 2件中、1～2件表示

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

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

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

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

  • オーロラ背景の中で白抜きになっているブログ名<%blog_name>と概要<%introduction >は

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

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

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


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

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

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

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


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

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

Copyright(c)1999 FC2, Inc. All Rights Reserved.

ジャンル一覧