Seesaaブログのデザイン変更ワザスマートフォン専用ページを表示Seesaaブログのデザイン変更ワザcssやHTMLを編集してSeesaaブログのデザインを自由に変えてみよう!御朱印集めが楽しくなるiPhoneアプリ御朱印マップを公開しています。ダウンロードはこちらからどうぞ。Seesaaブログで、投資関係のブログを3年半ほど書いています。そのブログを続けている中で、CSSやHTMLを編集してSeesaaブログのデザイン変更にチャレンジしてきました。Seesaaブログって、かなり自由にデザインをカスタマイズできるのがいいですね!このブログでは、その様々なカスタマイズ方法をご紹介していきます。投資関係のメインブログはこちらです。今回は、ブログの文字サイズとブラウザ表示について解説してみたいと思います。自分のブログの文字サイズが、実は見る人によって異なっている可能性があるということをご存知ですか?試しに、ブラウザの文字表示サイズを変更してみましょう。ブラウザのメニューで表示⇒文字のサイズ⇒最大を選択してみて下さい。(注)この時、ご自分の元の設定(下図では“中”)を忘れないようにして下さいね。すると、Seesaaブログのテンプレートこねこ(左サイドバー)のフォント設定では、ご覧のように表示が変わってしまいます。▼▼▼ブログのタイトル文字のサイズ、その下の説明文、記事のタイトル、日付、本文文字サイズ等々、ほぼすべての文字が大きくなっているのがお分かりかと思います。なってしまうかというと、フォントサイズの定義が、ブラウザ依存の定義になっているからです。a要素で以下のように定義されています。{font-size:x-large;}このx-largeがタイトル文字の大きさを表しているわけなのですが、ご覧の通り「大きい」という意味で、それが何pxあるいは何ptなのかが分かりません。これは、フォントサイズを7段階(xx-small、x-small、small、medium、large、x-large、xx-large)で定義する方法で、ブラウザの文字表示設定に依存してその大きさが変わるのが特徴です。小さな字を読みにくい人は、ブラウザの表示文字サイズを大きくすると読みやすくなるといったメリットがあります。一方でこの定義方法は、ブログのデザインが、作る人と見る人で異なってしまうというリスクをはらんでいます。この定義方法が良いかどうかは人によって意見が分かれるかもしれませんが、デザインも含めてブログを管理している立場から言えば、やはりフォントサイズは自分がイメージしているサイズで見てもらいたいもの。見る人がブラウザの文字サイズ設定を大きくしていても小さくしていても、自分が思った通りのサイズで表示したいですね。このように、文字サイズをブラウザの設定に依存させないためには、font-sizeを具体的な値で定義する必要があります。一度上の変更前/後の図を見比べて頂きたいのですが、この中でサイドコンテンツの本文文字サイズは変わっていないと思います。これは、第4回で文字サイズを以下のように数値で定義しているからです。font-size:11px;このようにfont-sizeを数値で定義してしまえば、ブラウザの設定によって文字の大きさが変わることがありません。[必須入力]※画像の中の文字を半角で入力してください。※ブログオーナーが承認したコメントのみ表示されます。Seesaaブログ×この広告は180日以上新しい記事の投稿がないブログに表示されております。