注目タグ

質問・疑問

トピック詳細

記事本文の文字の大きさをCSSで変更したい

「flash_anime03wt_dso」のテンプレートで記事本文の文字の大きさをCSSで変更したいんですが、どこを変え ればいいのか教えていただけないでしょうか。

2011年04月16日 22:20  by フラゲーム

コメント一覧 3件中、1~3件表示

  • その後
    スタイルシートに
    /* Headline
    -------------------------------------------------- */
    h1 {
    font-size : 200%; /* ブログ名の文字の大きさ */
    }
    h1 a {
    font-weight : bold; /* ブログ名を太字に */
    }
    h2 {
    font-size : 130%;
    }
    h2 span {
    font-weight : bold;
    }
    h3 {
    font-size : 120%;
    font-weight : bold;
    }
    h4 {
    font-size : 110%;
    }
    h5 {
    font-size : 105%;
    }
    h6 {
    font-size : 100%;
    }

    .entry-text {
    font-size : 150%;
    }


    赤色部分を追加します。
    150%はシメノが試してみた数字です。お好みの値に修正してください。


    きのう試したときは
    もっと下の方の/* Entry Body Text
    という部分にフォントサイズ指定を加えたのですが
    そのときはエントリーのフレーム自体が崩れてしまってうまくいきませんでした。

    今日うまくいったのは
    フォントサイズに関する指定が集められている場所に
    置いたからなのだろうと思います。

    スタイルに関する指定を追加する場所によって
    表示が大きく変わってくる例はシメノ的には初めてだったので
    正解に辿り着くのにヒマがかかってしまって混乱したお返事になって申し訳ないです。

    ちなみに
    このテンプレートの場合は
    作業する環境や手順によっても表示が違ってくるかもしれません。


    うまくいかなかったらゴメンなさい。

    2011年04月18日 12:12 by 標野ゆき

  • 前述のコメント後
    ふと思い立って、ちょっと違ったやり方をしてみたら
    今度はうまくいったので、そちらをご案内してみますね。

    以下・黒文字部分は
    flash_anime03wt_dsoテンプレートのHTMLの抜粋です。
    (アタマから7分の1くらいのアタリにあります)


    <div class="entry-body">

    <div class="entry-date"><%topentry_year& gt;年<%topentry_month>月<%topentry_day>日 (<%top entry_wayoubi>) <%topentry_hour>:<%topentry_minu te></div>
    <div class="entry-community-category">カ テゴリ : <a href="<%topentry_category_link>" ><%topentry_category></a></div>
    <!--not_permanent_area-->
    <div class="entry-text">& lt;%topentry_body></div> <!--mo re_link-->
    <p class="entry-more-link"><a href=& quot;<%topentry_link>#more" title="「<%top entry_title>」の続きを表示">⇒続きを表示</a> / <a hre f="<%topentry_link>" title="「<%topen try_title>」の全文を表示">⇒全文を表示</a></p>
    <!--/more_link-->
    <!--/not_permanent_area-->
    <!--permanent_area-->
    <div class="entry-text">& lt;%topentry_body></div>

    赤文字部分を追加します。

    2011年04月18日 12:11 by 標野ゆき

  • ブログのデザイン指定をCSSで行なうときは

    HTML内に
    <div class="×××">指定したい部分</d iv>こういうタグを書き込んで

    CSS内で
    .××× {デザインの指定
    こんなカタチの指示をする場合が多いんですが。


    件のテンプレートには
    記事本文の部分のみにはクラス指定が行なわれていません。
    本文部分のほかに投稿日時・カテゴリー表示・追記部分までを含んで
    div class=entry-body という指定がなされており
    このクラス名により大まかなデザインが指定されています。

    ですから、たとえばCSSに
    .entry-body{font-size:120%;}
    または
    div.entry-body{font-size:120%;}

    こうした指示をつけ加えた場合
    記事本文といっしょに 投稿日時・カテゴリー表示・追記部分も120%の大きさになってしまいます。

    ためしに
    記事本文部分を表示する変数の前後にだけ
    全く新しいDIVクラス名をこしらえて、フォントサイズを変えるCSS指定をつけ加えてみたら
    見事に表示が崩れてしまいました。

    この手でなんとかなるテンプレートも多いのですが
    記事内にいろいろなタグを用いた場合のケースにまで、事細かに設定がしてある所為か、なかなか手ごわいテンプレートです。

    それに
    このテンプレートではどうやら
    絶対値でのフォントサイズ指定はなされておらず、それぞれの環境設定にしたがって、パーセンテージで動かすようにしてあるよう です。

    投稿日時・カテゴリー表示・追記部分には別々のクラス名がつけられていて
    フォントサイズの指定はないものの、隙間の空き方などが指定されているので
    ここでフォントサイズを変えられるか試してみたのですが、これまたうまく行きませんでした。

    ご自身で試してみられれば、もしかするとうまくいくかもしれませんし
    もっとスキルの高い回答者さんなら別の優れたやり方もあるかもしれませんが
    私見では、このテンプレートで記事本文部分だけのフォントサイズをCSSで変更するのは厳しいのではないかと思います。

    2011年04月17日 10:30 by 標野ゆき