自分でホームページのサイズ・文字・デザインを調整する方法

  • 772 views

「ホームページの横幅のサイズを変えたい」「文字の大きさを変えたい」「デザインを大きくしたい」

見た目やデザインはホームページとして「おもてなし」の部分になるため大変重要です。いくら内容がしっかりしていても、文字の大きさやデザインが整ってないと離脱率も高くなるでしょう。
今回の記事では、サイズや文字、デザインなどを改善するための方法を紹介します。
HTMLやCSSについてある程度知っている前提で解説するため、少々専門的な内容になりますが、ぜひ最後までお付き合いください。

ホームページの横幅のサイズを変更する方法

widthプロパティが最も簡単ですぐにできる方法です。やり方はcssファイルに、以下を記述するだけです。
#example { width:800px; }
#exampleの部分には、横幅を設定したい部分を記述してください。(上記の場合は800pxとなっています)
注意してほしいのは、htmlに記述しないことです。htmlに記述してしまうとサイトが崩れたり、文字化けを起こしたりするなど、管理が非常に面倒です。
cssファイルにコピペして、数字の部分を変更するようにしましょう。

ホームページの文字の大きさを変える方法

 

2通りあるので、使いやすい方法を選びましょう。
①スクロールマウスをいじる
設定なしで簡単にできる方法です。[Ctrl]キーを押しながら、スクロールマウスの真ん中をぐりぐりします。
すると、ページの文字を大きくしたり小さくしたりできます。すぐにできる簡単なやり方ですが、単位設定ができません。
「少しでもズレたらだめ」という方は、次のやり方をおすすめします。
②タグを設定する
タグに以下を記述しましょう。
<body>タグに以下のものを記述しましょう。
<basefont size=”5″>
この場合、文字の大きさは【5】で統一されます。数字の部分に必要なサイズの大きさを入力するようにしてください。なお、ほとんどのホームページは10程度にしています。

デザインを大きくする方法

横幅を基準にして、画像サイズを画面サイズに自動で合わせるだけなら、CSSソースに以下のものをコピペするだけです。
.resizeimage img { width: 100%; }

サイトにあった適切な画像表示がされるので、かなり見やすくなるはずです。
また、画面幅いっぱいではなく、左右に余白を残したい場合は数値を変えましょう。例えば数値を80％にすると、左右に10％ずつの余白が生まれます。余白がある場合とない場合を設定してみて、自分が納得する大きさにするのがベストです。

まとめ

今回は以下の問題に対する解決策を1つずつ解説していきました。
ホームページは中身がいくらよくても、第一印象の見栄えがダサかったり、見づらかったりすると読んでくれません。会社のホームページとして、相当な機会損失となってしまうでしょう。
現時点で問題が発生しているならば、今回の記事内容を参考にしてぜひ修正してみて下さい。
なお、今回解説した内容がさっぱりわからない場合は、ホームページ制作会社やクラウドソーシングのフリーランスの方にお願いして、改善してもらってください。
修正のための費用はかかりますが、下手にいじって問題を悪化させる事はありません。費用そのものも数千円単位で終わる場合もあります。
そのまま放置するのが1番問題ですので、早い段階で修正することをオススメします。

よく閲覧されるページ