• 締切済み

gooブログのフォントサイズについてなんですが・・・

gooブログはCSSの編集ができるのでテンプレートのCSSを変えてフォントサイズを小さくしているのですが、英数字が極端に小さくなってしまうので悩んでいます。 HTMLでいう<font size=1>のサイズにしたいのですが、そうすると英数字が読めないほど小さくなってしまって・・・ CSSは↓です。 /* エントリー本文 */ .etBody { font-size: 8px; line-height:160%; word-break:break-all; text-align: left; } テンプレートはクリアホワイト左です。 10px、9pxだと大きすぎ、（どちらにしても英数字は小さくなってしまいます）8pxだと読めないほどになってしまい・・・ 他のブログではそんなことは無いので似たようにしたいのですが、できません。困ってます。 なにかアドバイスお願いします。

  • HTML
  • 回答数2
  • ありがとう数0

みんなの回答

noname#56851
noname#56851
回答No.2

フォントの大きさを固定するのはアクセシビリティーの観点からあまり良くないようです。 emで設定するほうがよいと思います。 8pxと9pxの中間って無いのでは？

  • akuhijrwq
  • ベストアンサー率35% (381/1064)
回答No.1

文字は10pxくらいまでが限界だとおもいます。 他にも方法はいろいろあります。 http://www5e.biglobe.ne.jp/%7eaccess_r/hp/css/css_font_004.html

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. HTML

関連するQ&A

  • gooブログ　本文と背景の間に余白を入れたいのですが、できません。

    gooのブログを使用しています。 スキンはシンプルなものを使用してCSSで編集しています。 ブログのスタイルは、全体の背景色は白ですが、 さらに文章の後ろに読みやすいようにベージュの背景色つけています。 しかし、その背景と本文（左側）がきちきちで、もう少し右にずらして 余白を作りたいと思っています。 CSSの編集画面で、このようにしていますが、全く反映されません。 paddingとmarginどちらかよく分からないのですが、どちらでやってみても無理でした。私のやり方が間違っているのでしょうか。 よろしくお願いします。 /* エントリー本文 */ .etBody { font-size: 10pt; line-height:130%; word-break:break-all; padding: 0px 0px 0px 50px; } /* エントリー本文背景 */ .entryBg{ padding: 10px; background-color:#EEE5DE; margin: 0px 20px 30px 0px; }

  • IE8でtableのレイアウトが崩れる

    Wordpress3のTwenty Tenテーマを使用して、投稿ページを作成しています。 複数列、行のテーブルを表示させていため、カスタマイズしているのですが、 どうしてもIE8のみレイアウトが崩れます。 IE7,9は正しく表示されています。 よろしくお願いします。 ■不具合点 ・テーブル内の文字を上部にしたいが、下部に表示されてしまう。 　 ■css table#testtable { border: 1px solid #e7e7e7; text-align: left; background: #f2f7fc; margin: 0px; padding: 0px; background: #FFFFFF; line-height: 20px; font-size: 12px; height: 100px; width:700px; word-break:break-all; } th#testphoto { text-align: left; margin: 0px; padding: 0px; line-height: 30px; font-weight: bold; font-size: 12px; height: 30px; width:110px; word-break:break-all; } ・ ・ ・ ・ td#testphoto { text-align: left; margin: 0px; padding: 0px; line-height: 30px; font-size: 12px; height: 90px; width:110px; word-break:break-all; } ・ ・ ・ ・

    • ベストアンサー
    • CSS
  • ブログの本文のみリンク色を変えたい

    FC2ブログを使用しています。 ブログの記事タイトルを除いた、ブログ記事のエントリー内のみURLやリンク文字の色を設定したいです。 今まではブログ本文のリンク色を変更する際<a href="～"><font color="～"></font></a>のように、毎回文字色を指定するやり方をしていました。 ですがこれだと酷く手間がかかるので、様々なブログを参考し、htmlやcssを弄ってみたのですがびくともしません。 私が使用しているテンプレートにはリンク色の個別の指定は無く、全体の文字色がそのまま適用される形となっています。 例えば、 .all_entries_main{ color:#f0f0f0; text-align:left; font-size:12px; margin:0 0 0 0; padding:0 15px 15px 15px; } のように、本文のカラーは指定できるものの、リンクの色までは指定できません。 ここにリンク文字を変更する記述をしてみたのですが、全く適応されず、また何が間違っているのかも分かりません。 あるブログではCSS以外に、hrmlにも同様の記述を行なう必要があるとありましたが詳細は載っておらず、適切な方法が知りたいです。 是非ご回答宜しくお願いいたします。

    • ベストアンサー
    • CSS
  • ブログとブラウザについて

    先日、ライブドアでブログスペースを借り、ブログを始めました。 ブログを付けるのは初めてなもので分からないことだらけなんですが、 IEでブログを閲覧した場合と、Firefoxで閲覧した場合に、レイアウトにズレが生じてしまいます。 常にFirefoxを使用しており、Firefoxでしか自分のブログのレイアウトを確認していませんでした。 ですが、今日IEで閲覧したところレイアウトがすごくズレていて・・・。 特に記事本文がガタガタになっていました。 改行を考慮して1行に文章をまとめていたのに、IEでは2行にわたって本文が続いていたりしていて。 デザインは"デフォルト2005 (ブラック)"を使用しており、カスタマイズ出来るのでCSSを確認してみました。 .main,.mainmore{ font-size:x-small; margin:10px 20px 0; text-align:left; 最初、上記のようになっていたのを、 .main,.mainmore{ font-size:9; margin:10px 20px 0; text-align:left; ブラウザ間でCSS内の"x-large"や"x-small"にズレがあるのかと思ったもので、上記のように直しました。 するとIEではレイアウトがきれいに整ったんですが、Firefoxでは文字が小さすぎて非常に読みづらくなってしまいました。 フォントサイズには、ブラウザ間で差があるのでしょうか。 上の方法はIEで見やすくなったのは良いんですが、Firefoxで見にくくなってしまうのはどうも・・・。 既にたくさんの記事を書いたので、新たに行を整え直すというのは困難を極めます。 同じフォント、同じフォントサイズにも関わらず、ブラウザによって微妙に生じてしまうズレを無くすのは不可能なのでしょうか。 ちなみに、CSSの知識については皆無なので、上記のようにフォントサイズを変えるくらいしか出来ません。 分からないところがあれば訊いてください。 難なく補足します。 贅沢な質問かもしれませんが、回答よろしくお願いします。

  • CSS・フォントサイズ変更は どこをいじれば？

    ホームページビルダー17で、以下のサイトのテンプレートをダウンロードして編集中です。 http://nikukyu-punch.com/template/giin1_pink/index.html 本文部分の文字が小さいのでもう少し大きくしたいのです。 これまではテーブルタグで作っており、CSSは初心者です。 文字部分を右クリックしてスタイルの設定を見ると 本文や見出し部分などのfont-sizeが100％だったり75％だったりします。 たぶんCSSのfont設定が細かく分かれているのでしょうが… あまり細かく分類せず、右のサイドメニューと本文の文字の大きさを font-size : 14px line-height : 150% にしたいというのが希望です。 このようなスタイルの設定の変更はどうすればいいのでしょうか。 スタイルシートマネージャーから変更すればいいのでしょうか？ 一度スタイルを削除すると戻せないようなので、なかなか試行錯誤に踏み出せません。 画像などは変更できたのですが。 ご教授願えませんでしょうか？

  • フォントサイズと行間

    フォントサイズと行間についてご質問します。 フォントサイズ12px。文字上下に3pxのアキをとり行高18pxとする場合、 スタイルシートは下記ようになると思います。 font-size: 12px; line-height: 1.5 フォントサイズが13pxで文字の上下に4pxのアキをとり行高21pxとする場合、line-heightは21/13=1.61538462と計算されます。 font-size: 13px; line-height: 1.61538462 このように小数点以下が多い場合でもスタイルは正常に動作するのでしょうか(ちなみに13pxで行高19の場合1.46153846になります)。 普段、YUI 2: Fonts CSSを利用しております。デフォルト(100%)は13pxです。文字の上下に4pxのアキをいれ、行高を21pxに設定したいと思っております。その場合 font-size: 100% line-height: 1.61538462 というのは正常に動作するのでしょうか。

    • ベストアンサー
    • CSS
  • ＧＯＯブログのタイトル・文字位置について

    ＧＯＯでブログをやってます。 無料でカスタムできるテンプレートを使用してます。 タイトルの位置がどういうわけか、自然とタイトル画像の ど真ん中に来てしまいます。 これを左斜め上に、表示させたいのですが これは、どうしたらいいのでしょうか？ 今こんな　↓　感じであります。 /* ブログのタイトル */ .bTitle { color: #FFFFFF; font-size: x-large; font-family: VERDANA,ARIAL,SANS-SERIF,Helvetica,'ＭＳ Ｐゴシック',Osaka; font-weight: bold; text-shadow: #fff 2px 2px 3px; text-align: left; } ↑ leftになってるのに、ど真ん中にタイトル文字が表示されてしまいます。 もしよければ少しアドバイスをいただきたいです。 よろしくお願いします。

  • CSSでライブドアブログのレイアウトがIEでだけ、崩れてしまう。

    CSSでライブドアブログの左サイドバーのレイアウトがＩＥで見ると、崩れてしまいます。 Fireboxなどでは、きれいに表示されますが、IEでは、左サイドバーの表示がはるか下方に表示されてしまいます。 下記のＣＳＳに問題がないか教えていただけないでしょうか？ 参考になりそうなサイトとして(1)(2)なども見たのですが、結局わからなかったです。 (1)CSSによる段組（マルチカラム）レイアウト講座 ​http://www.geocities.jp/multi_column/index.html​ (2)CSSバグリスト ​http://cssbug.at.infoseek.co.jp/ よろしくお願いします。 /********************************** =2.Common **********************************/ table#header{ width:100%; font-size:12px; color: #cffdcc; } table#header a{ color: #cffdcc; } table#header th{ width:1%; } table#header th img{ margin:2px 10px; width:132px; height:24px; } table#header td.catprbox{ width:1%; white-space:nowrap; } table#header td.catprbox span{ margin-right:15px; } table#header td.newstickerbox{ width:97%; text-align:right; padding-right:10px; } table#header td.startblogbox{ width:1%; padding-right:10px; white-space:nowrap; } table#header td.startblogbox img{ width:17px; height:16px; margin-right:3px; border:0px; vertical-align:middle; } #container{ width:800px; margin:0 auto; text-align:center; } #cgmmenu{ display:none; } #banner{ height:200px; border:solid #fff; border-width:6px; background:#240000 url(http://image.blog.livedoor.jp・・・・・) no-repeat; text-align:left; margin:0 auto; clear:both; } #banner a{ color:#fff; text-decoration:none; } #banner a:hover{ text-decoration:underline; } #banner h1.blogtitle{ padding:80px 30px 5px; font-size:20px; } #banner div.description{ width:500px; padding:0 30px; line-height:135%; font-size:12px; color:#fff; } #blogcontainer{ background:url(http://image.blog.livedoor・・・・) 0 0 repeat-y; border:solid #fff; border-width:0 6px 0; padding:0 0 30px; margin:0 auto; height:1%; } #wrapper{ float:left; width:605px; } #content{ float:right; width:420px; text-align:left; background-color:#F9F3EE; } #contentin{} #left{ float:left; width:180px; } #right{ float:right; width:178px; } #lefttop , #leftbody , #leftbottom , #righttop , #rightbody , #rightbottom {} #footer { background:url(http://image.blog.livedoo・・・・) 0 0 no-repeat; border:solid #fff; border-width:0 6px 6px; height:46px; } #outfooter{}

  • ブログのレイアウトについて

    シンプルなブログを借り、日付やコメント欄を消して 1枚サイトのように見えるものを作っています。 画像を見ると質問内容が一目で分かるようになっているのでご照覧の上、 どこに何を書き加えれば希望レイアウトになるのか教えてください。 cssは初心者なので可能な限り丁寧にお願いします。 ※600px画像は縮小しない 現在css編集を開くと以下のようになっています。 ＦＣ2ブログの共有テンプレートのひとつです。 <STYLE TYPE="text/css"> <!-- body{ color: #4F0000; font-family: 'Verdana','ＭＳ Ｐゴシック'; font-size: 11px; line-height: 140%; margin:20px; } a{ color: #4F0000; text-decoration: underline; } A:hover{ color: #4F0000; text-decoration: none; } td{ color: #4F0000; font-family: 'Verdana','ＭＳ Ｐゴシック'; font-size: 10px; line-height: 140%; letter-spacing: 0; } .box{ color: #4F0000; font-family: 'Verdana','ＭＳ Ｐゴシック'; font-size: 11px; letter-spacing: 0; line-height: 120%; } .msg img{ border:0px; margin:0px 0px 0px 0px; display:inline; float:none; } .title{ font-family: 'Verdana','ＭＳ Ｐゴシック'; letter-spacing: 10px; font-size: 10px; line-height: 180%; } .small{ font-size: 8px; font-family: 'Verdana','ＭＳ Ｐゴシック'; } .r{ font-size: 10px; } --> body { background-image : url("背景画像.jpg"); background-repeat : repeat; background-position : 50% 50%; background-attachment : fixed; } img { vertical-align: baseline; } </STYLE> どう調べても希望通りにならないので何卒お願い致します！

    • 締切済み
    • CSS
  • フォントと文字サイズの指定方法

    HTML初心者です。 どなたか助言ください。 以下のソースのようなテンプレHTMLを変更しないといけなくなりました。 以下のソース部分のフォントと文字サイズを指定するにはどのようにすればよろしいでしょうか？ <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="X-UA-Compatible" content="IE=7" /> <title><?=$item_title?></title> </head> <body> <div style="width:100%;text-align:center"> <div id="wrapper" style="margin:0px auto;font-family:Arial, Helvetica, sans-serif;font-size:20px;color:#000;text-align:left;"> %IMAGES% <div class="sub_tit" style="padding-left:5px;height:25px;line-height:25px;border-left:solid 20px;color:#2214ff;font-size:25px;font-weight:bold;"> PRODUCT DETAILS </div> 　　＊＊＊＊以下で出力される文字のフォントと文字サイズを指定したい。 <p class="sub_text" style="padding-left:10px;padding-right:20px;"> %DESCRIPTION% </p> 　　＊＊＊＊ ......同じような内容が続く </body> </html> よろしくお願いいたします。

    • ベストアンサー
    • HTML

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する