文字を見やすくするスタイルシートは100%必要です

  • 2007/02/06
  • このエントリーをはてなブックマークに追加

スポンサーリンク

ホームページから長文が消えているワケを理解しよう

ホームページでの長文とは5000文字以上の事を一般的に言われています。
本でいうと約2枚の見開きの文字量です。

実際に文字の見易さが重要なポイントなのは、年間嫌われランキング第2位が『文字』であることに起因します。
文字は基本的にみんな読みたくない、又は、読みにくい事が大嫌いなんです。

そこで、実際に文字を読みやすくするスタイルシートというものが日本では必須事項になっています。
これはアルファベットと比べてみるとわかります。
  • abcdefghi
  • あいうえおかきくけこ

  • このように、文字とアルファベットの違いは大きさにあります。
    日本語の場合、アルファベットに比べると大きいんですね。

    この大きい日本語を読みやすくする為には、行間が最も重要だといわれています。

    では、スタイルを使用しているケースとしていないケースを見比べて見ましょう。
    IT/Web業界に強い転職サイトGreen

    [1]スタイルを使用していないケース

    vist5.gif



    [2]スタイルを適応したケース

    0126.gif


    比べてみていかがでしょうか?
    行間に空間があるだけで読みやすくなっていませんか?

    これを実践するだけで、実際のリピート率は大きく変わります。

    それでは実践してみましょう。
    ここではもっとも単純な方法をご紹介します。

    <style type="text/css">
    <!--
    body {
    line-height: 100%;
    }
    -->
    </style>



    これを<head>と</head>の間に挿入してください。
    これだけてページ全体の行間が開くことになります。

    これを応用して、テーブルごと、又は領域ごとに決めることで、さらに読みやすいホームページを作る事ができるようになりますよ。

    スポンサーリンク

    トップへ戻る

    Twitter版のネタ帳では毎週月曜~金曜までWeb屋さんに役立つ色んな情報や単なるネタまでをつぶやいています。

    関連するエントリー

    コメント

    この記事にコメントする人はクリック

    コメントポリシーをお読みください
    管理者にだけ表示を許可する

    zondag

    こんにちは、はじめまして。
    いつも、文字間隔が詰まりすぎていて、もう少し見やすくしたい!と思っていたので、このお話はとても参考になりました。

    ですが、私はHTMLは全く判らないド素人でして、
    「これを<head>と</head>の間に挿入してください。 」というのがわかりません(泣)。
    文章の一番上に四角の中の文字を挿入したところ、プレビューでは文字間隔があいたのですが、実際に見てみると前と変わっていません。
    どのようにしたら良いのでしょうか?
    ご教授お願いいたします。

    2007/03/17 Sat 17:35| |

    Yamada

    はじめまして。
    私のつたない知識でよろしければお力になります。

    この記事は、通常ブログというものに対しての記事ではなく、HTMLによるホームページ作成に使う用途としてご紹介させていただいたものなんです。
    誤解を招くようですいませんでした。

    見たところZondagさんのURLをたどるとFC2ブログでしたので、この場合は『テンプレートの編集』が必要になります。
    管理画面の『環境設定』に、『テンプレートの設定』という項目があります。
    これをクリックすると中に現在使用しているテンプレートに旗のマークがあると思いますので、その『編集』を押します。

    すると『HTMLの編集』と『スタイルシートの編集』という二つのボックスが出てくると思いますが、このスタイルシートを変更する事になります。

    FC2は各ユーザー達が作ったテンプレートを自由に使えると同時に、人のCSSなので、全て決まりきっているわけではないのです。
    そのため、これから記述する事が使えるかどうかという保障もありませんので、よろしくお願いします。

    スタイルシートの中を探して

    .entry .body {
    line-height: 160%;
    }
    緑色の項目を探します。
    その中に赤字の項目があれば、そこを160%くらいにしてみます。

    数字を大きくすれば間が開きます。
    ただし、これはエントリー部分。
    日記の中の内容を示すスタイルなので、他の部分は他の赤字をいじるようにしてください。

    説明が苦手でもうしわけありませんが、がんばってくださいね。
    でわでわ。

    2007/03/17 Sat 21:49| |

    zondag

    ごていねいにありがとうがざいました。
    ですが、試してみたのですが、プレビューでは「ん!いいかんじ!」になるのですが、実際に見てみると変わっていませんでした。

    default というテンプレートなんですが・・

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

    2007/03/18 Sun 06:23| |

    縋里十里

    to zondagさん
     もしまだご覧になっていたら・・・FC2ブログテンプレートのカスタマイズに関するご質問は、ユーザーフォーラムのテンプレート掲示板などの方でどうぞ。

    FC2ブログユーザーフォーラム
    http://blog.fc2.com/forum/index.php

    ただし、下記は一読してください。

    初めて質問する前に読んでください:
    http://blog.fc2.com/forum/viewtopic.php?t=496

    #別に回し者ではありませんが、WebLOGサービスにおいては管理人に質問するより、フォーラムなどを利用する方が自然だと思いますので。

    2007/03/19 Mon 00:49| |

    zondag

    縋里十里さま:

    フォーラムの関連掲示板を読みましたが解決できなかったので、そちらに質問しました。フォーラムの存在を教えていただきありがとうございます。

    2007/03/19 Mon 01:57| |

    - 管理人のみ閲覧できます

    このコメントは管理人のみ閲覧できます

    2007/10/15 Mon 00:26| |

    名古屋・岐阜のホームページ制作 No title

    なるほど!とても勉強になりました。
    また来ます。

    2009/07/25 Sat 22:24| |

    FC2Ad

    広告


    IT・Web業界の求人なら転職サイトgreen(グリーン) ホームページテンプレート、WordPressテーマ、Facebookページテンプレートならクラウドテンプレート ネットマーケティングとは│ネットマーケティング検定 SEOコンサルティング&SEO対策 無料レスポンシブWebデザインテンプレート 広告主募集

    あわせて読みたい
    フィードメーター - ホームページを作る人のネタ帳

    人気の記事一覧

    あなたのブログの再訪問者を増やす50の方法

    私の経験から感じた事を書き記します。全てが全てその時々で、正しいとは限りませんが、一つの指針としてお使いください。因みに全部リスト化すると230くらいありましたが、それはきっとセミナーとかでやるかなぁと。

    http://e0166.blog89.fc2.com/blog-entry-824.html

    あなたの生活を確実に拘束し時間を浪費させる動画50

    今回は生産性を向上させる事ばかり考えて記事を書いてきたので、逆に年末にかけて忙しい皆さんの時間を出来るだけ拘束し、忙しさを倍増させるものが無いかを考えました。その結果、動画で行こうと言う事になったのが1ヶ月以上前。動画閲覧本数はおそらく600本以上。その中から、おもしろそうなものを50個ベストチョイスいたしました。

    http://e0166.blog89.fc2.com/blog-entry-820.html

    webデザインのセンスを磨く○○系のwebデザインまとめ

    webデザインを学ぶならwebデザインから。と言うわけで、今回は海外のエントリを中心に、○○系のまとめをまとめます。

    http://e0166.blog89.fc2.com/blog-entry-817.html

    jQueryプラグインのベストトレンド総まとめ2010

    もはやこの業界ではかなり浸透しつつあるjQuery。今回はそんなjQueryにスポットを当て、本年度紹介された中でも、ホットなトレンドプラグインをご紹介します。

    http://e0166.blog89.fc2.com/blog-entry-816.html

    ツイッターの日常における35の行動パターン

    私が良く見かける35の行動パターンに名前をつけてみようと思う。年末の誰も見てない時に公開しようと思っていた、ただのネタだったのですが、結構時間がかかりこの時期に・・・。

    http://e0166.blog89.fc2.com/blog-entry-823.html

    ウェブデザイナーのためのウェブアプリ15

    OSがWindowsであろうと、ubuntuであろうと、共通のサービスを受けることができるのがウェブアプリケーションです。ウェブデザイナーの中には、自宅ですでにubuntuを利用している人も多い。また、Mac、Windowsと、各自それぞれの使いやすい物を利用していると思います。

    http://e0166.blog89.fc2.com/blog-entry-784.html

    愛用するGoogleChromeエクステンション12個

    この2年でノートPC2台購入。自他のPCはクラッシュしてリカバリー。会社のPCは新しいのがあたり、再セットアップ。そんなこんなで、会社はまぁともかくとして、とりあえず全PCが比較的3ヶ月に一度リカバリーしてもいいように、自分用にメモとして残しておきます。

    http://e0166.blog89.fc2.com/blog-entry-784.html

    文章や会話のプレゼンテーションを向上させる方法

    文章力がないためにプレゼンに失敗した、会話がうまくできずにプレゼンに失敗した。こういう経験はなかなか無い。なぜなら多くの場合、失敗したことに気がつかないからです。

    http://e0166.blog89.fc2.com/blog-entry-802.html

    サイトの裏側の意識を変え売り上げをアップする方法

    ネットショップ運営者が、あることをちょっとだけ始めてみただけでわずか5ヶ月で売り上げが3倍になりました。はたして、webサイト運営がどのように変わったのでしょうか。。

    http://e0166.blog89.fc2.com/blog-entry-749.html

    webサイトのリピーターを増やすさりげない5つのコツ

    多くのビジネスサイトのアクセス数を支えている大手検索サイト、Yahoo、Googleのアルゴリズムが変わる事で、突然商売がひっくり返る事態を回避する方法。

    http://e0166.blog89.fc2.com/blog-entry-746.html