見やすいブログ ~幅・フォント変更(ウェブリブログ)~

※この記事はPC画面のお話です。スマホ版が表示されている場合は下記のURLクリックで開き直してください。
http://kotobuki1174takasui.xyz/201510/article_8.html


ウェブリブログで、ブログを開始して4ヶ月が経ち、色々と記事を掲載しているうちに、ブログのレイアウトが気になりだしました。

ほんとに気まぐれで記事を作成しだしたのですが、いろんな人が見ている事を考えると、記事の良し悪しは今回抜きにして

まず、見やすいブログを心がける


のが礼儀だという考えに至ってしまいました。


そして、特にこの1週間、ブログのレイアウトを、どうすれば見やすくなるのかを調べ・考えて、今見て頂いているレイアウトになりました。


このブログは

■全体の幅 : 1024ピクセル
■トップの記事の幅 : 682ピクセル
■記事本文の幅 : 672ピクセル
■サイドバーの幅 : 328ピクセル
■使用フォント : メイリオ
■フォントサイズ : 15ピクセル


となっています。
※広告表示微調整の為 トップの記事の幅:680→682、記事本文の幅:670→672、サイドバーの幅:330→328 に2015/11/28に変更しました


CSSの変更はネット情報を頼りに、何度も確認を繰り返し編集しました。その為、この作業でブログのアクセス数が増えちゃいましたwww


そして、ブログ本文以外の情報は右側サイドバーに集約


その他、自分の経験から全然使わないと思うカレンダー等を非表示にしました。


どうでしょう?自分ではデフォルトより見やすくなったと思っています。


レイアウトの情報をつらつらと書いてきましたが、全て意味があります。


まず、全体の幅は今時の最低と思われる解像度のディスプレイの幅にしています。と言っても1024X768のディスプレイなんて今やほとんど見ないですけどね。

でも、どうでしょう?幅があると安定感ありませんか?


次に、記事の幅を672・682にしているのは、ネット情報で、人はどうも600~700の間にある記事が見やすいという事が書かれていたからです。
実際にやってみて、なるほどと思えたし、全体幅の1024を崩したくないので672・682を採用しました。


そして、サイドバーはそれを補う為、太くしています。それと、どうせブログをやるなら多少は収入があればなと思い、私は“Google Adsence”“Amazonアフィリエイト”を使用していて、その広告の横幅・余白も考えて328としました。

あっ、そうそう、ちなみに全然儲かっていません。ある程度お金が溜まってからでないと、Google・Amazonから振り込まれないのですが、このままいけば5年後に振り込まれそうですwww


また、ブログ本文以外の情報を右サイドバーに集約しているのは、人の目線は左から右に移動し文字を読むため、左に広告等があると読み始めの視線の邪魔になる為です。


フォントに関しては、“メイリオ”の方がスッキリするし、サイズを14~16にした方が見やすくなるとのネットでの情報があり、実際に行ってみて納得出来たので変更しました。



以下の赤字がCSSに追加した部分です。

※ウェブリブログの「設定」→「オプション」→「CSS編集(上級者向け)」の【設定画面へ】クリックで開いた画面に下記の赤文字を追加すれば、このブログと同じレイアウトになります。


■全体の幅


/*----------------------------------------------*/
/* 共通スタイル */
/* (トップ、月別、テーマ別、記事ページ共通) */
/*----------------------------------------------*/
body{
}

/* コンテナ(広告・フッタを除くメイン領域) */
#container{
width:1024px;
}


/*-------------- ページフッタ領域 --------------*/
#footer{
width:1024px;
}


■トップの記事の幅


/*------------------ 新着記事 ------------------*/
#contents{
width:682px;
}


■記事本文の幅


/*-- ブログ(記事+トラックバック+コメント) --*/
#blog{
width:672px;
}


■サイドバーの幅


/*-------------- コンポーネント群 --------------*/
#utilities{
/* 右サイドバーの幅 */
width: 328px;

}


■フォント種類・大きさ


/*------------------ 記事本体 ------------------*/
#blog-body{
font-size:15px;
font-family:"メイリオ",Meiryo;

}

----------
2015/11/12追記
フォントの設定を一括指定する事にしました。
詳しくは記事:見やすいブログ ~CSS フォント一括変更~
----------


実際には、プロフィールのフォント変更等も行っていますが、私自身お教えできるほどの知識を持っているわけではないので、明確にお教えさせてもらえる個所のみ掲載しました。


デフォルトが見にくいのは、PCの画面が小さく・フォントが少ない時代にこれらは定義されたので、それを引き継いでしまった為でしょうね。仕方ない事です。



最後に、広告についてですが、私は“プレミアムオプション”の契約をして、既存のものは消して、私が管理できるものを載せています。

また、今回のレイアウト変更で色々なブログを拝見しましたが、『ブログに広告って必要』と感じました。

簡単に言うと、「新聞に載っている広告って不要ですか?あるから助かった事ありません?」と言う考えからです。


他にもどうしてそういう考えに至ったのか書きたい事があるのですが、本文も長くなりましたので、次回にしたいと思います。


ではでは。


関連記事:
見やすいブログ ~広告も大事でしょ?~
見やすいブログ ~フォントの話~
見やすいブログ ~CSS フォント一括変更~


 ・ブログ 記事一覧
  ―こんな記事も読まれています―

パンチが効いていれば人気ブログランキング   

この記事へのコメント

このブログへのお問い合わせ

ブログ名:
きになるてん
読者メッセージを送る