ブログメニュー

2012年02月

スポンサーリンク

上記の広告は、30日以上更新がないブログに表示されています。
新たに記事を投稿することで、広告を消すことができます。  

Posted by のらんば長崎運営事務局 at
2012年02月

2012年02月23日

皿うどん(自宅)

皿うどん
今日は食事当番。
皿うどんを作りました。

いつもとは具材をちょっと変えて、
キャベツ、にんじん、もやし、コーン、長ネギ、
豚肉、エビ、イカ、かまぼこの超スタンダード。

皿うどん少し薄めたむすめ用に
バクバク喰らいついています。  
タグ :皿うどん


Posted by いーじー at 19:22Comments(3)長崎探訪
2012年02月

2012年02月12日

スタイルシートのお話

テンプレートを触って文字サイズや文字色を変えてみる前に
スタイルシートのお話をしておきます。

ちょっとメンドクサイ話なので、
テンプレート実践編に直接進みたい方は
読み飛ばしていただいて結構です。



のらんば長崎ブログやSeesaa、Livedoor、FC2、exciteなどの
レンタルブログには「HTML」と「CSS」を修正・調整して
ブログの見栄えを変更する機能が備わっています。

HTMLとは、
ホームページやブログなどWeb上のページの構文を構成する
プログラム言語だと思ってください。

CSS(カスケードスタイルシート)とは、
HTML上でやってしまうと、
構文以外の余計な文書がページ上に追加されてしまうため
そうならないように
デザインの制御をHTMLと別にする言語だと思ってください。


ホームページの主要コンテンツは、
「内容そのもの」=「構文」ですから、それ以外の余計な文書が
HTML上にたくさん在ると、
GoogleやYahoo!などの検索エンジンが
そのホームページやブログの主要な内容を
正確につかみきれないという現象がおきるので、

インターネット上の言語を統括している世界的な機関が
デザインと内容は分けてホームページを作りましょう」
という勧告を発令しました。

デザインと内容が分かれていない例として
それまでのホームページの多くは、
デザインを細かく指定するために
表を組み込み、表の罫線を見えなくして
細かなデザイン部品を配置していました。

私がホームページ制作インストラクターをしていた
10年前には、まだ国内の官公庁も大手メーカーもテレビ局なども
ほとんど全てのホームページが表(テーブル)を配した
デザインを主流としていました。

しかし、表はあくまでもデータなどを
表形式で見せるための機能なので、
デザインに用いないように勧告されたわけです。

その勧告に従って、
Google等の検索エンジンも検索アルゴリズムを
組みなおしましたので、

現在のようにHTMLとCSSの組み合わせで
レイアウトデザインや各種パーツの設定が
なされているホームページが
より検索上位に表示されるようになっていきました。

それと時を同じくして、
日本国内でもブログが日記として広まり始め
ブログの構造がHTMLとCSSを組み合わせた
理想的な言語構造でできていたため
企業などでは、いままで持っていたホームページに
ブログを追加設置し、記事を更新することで、
アクセスを伸ばそうという動きがありました。
その後、
ホームページそのものをブログ型のシステムで作ってしまう
CMS(コンテンツマネージメントシステム)などが流行るわけです。
CMSのお話はまた改めていたします。


それでは、
我々がブログの見た目やデザインを変えたい場合、
どこを触ったらよいのか。
そうです。スタイルシートに修正・加筆します。

記事中の文字サイズを変えるには、
他にも、ひとつひとつの記事を書くときに
いちいちサイズを拡大・縮小するという方法もありますが、
それでは手間もかかりますし、
記事中に文字サイズを制御する言語が書き込まれてしまうので、

ピンポイントで文字に色をつけたり
拡大したり太字に(強調)するのはよいですが、
ベースとなる文字サイズの大きさは
テンプレートのスタイルシート上で設定してしまうと良いでしょう。

というわけで、いよいよ次回
テンプレートのスタイルシートを調整して
文字サイズや文字色を設定してみましょう。
  


Posted by いーじー at 04:41Comments(0)ブログあれこれ
2012年02月

2012年02月08日

文字サイズ

先日の記事のつづきです。
前回は、白い背景色のホームページやブログには
真っ黒から少しだけ薄くした
濃い色の文字色が映えて読みやすいですよ、というお話でした。

背景色と文字色の関係は
コントラストの細かい調整なので慣れが必要ですが、
もっと重要な読みやすさの要素に
「文字サイズ」と「行間設定」があります。


近頃はホームページやブログを見る側のパソコンが
多種多様になっていて、
画面サイズや解像度もまちまちです。

また、MacやWin7のノートPCのパッド部分には
指でアクションすると拡大したり縮小したりする機能も付いています。
それ以外でも、
今のバージョンのブラウザは
拡大縮小が簡単にできるようになっていますので
小さな文字のホームページがどうしても見づらい場合は
拡大してもらえば良いのですが、

見る側に極力アクションをさせないのも
読みやすさ・見やすさの要素になりますので、
できれば始めから読みやすい大きさで
表示されているに越したことはない。

ちなみに
IntenetExplorerやFireFox、Chromeといったブラウザでは、
「ctrl」キーを押しながら「+」や「-」キーを押すと
表示サイズが拡大縮小します。


文字のサイズについて

のらんば長崎やその他のレンタルブログサービスでは、
多数のテンプレート(あらかじめ用意されたレイアウトデザイン)の
文字サイズ設定が
12px(12ピクセル) になっています。

12pxというと、このくらいの大きさになります。
のらんば長崎で作ったブログによく見かける文字サイズだと思います。
改行を頻繁に入れて、
1行ごとの折り返しを短めにしてあげると、
多少読みやすくなりますが、

あまり改行をせずに、1行を長くしてしまうと、行が詰まっていて読みづらい印象を与えます。パソコンの画面上の文字を横に追うのは実は人間にとって疲れる行為であることに加え、1行に入っている文字の数が多いため、全体の量を多く感じてしまうためでしょう。これで文字色がより濃い真っ黒だとよりいっそう詰まって感じることになります。

このように12pxという文字サイズは
微妙な大きさであるにもかかわらず
デザイン上のバランスに因るところが大きいため
大多数のテンプレートで利用されています。

この欄内は文字サイズ16pxです。
私自身、よりわかりやすく書きたいサイトでは、
16pxにしているところもありますが、

このブログは間を取って
文字サイズを14pxに設定しています。

行送り幅、行間について

文字サイズと連動して大切なのが
行間の隙間、行送りの間隔の設定です。
印刷物では、行送り間隔が125%程度が読みやすいといわれますが

Webページ上のテキストの場合、
170%前後(許容値140~190%)の行送りが
読みやすいといわれています。
つまり、文字サイズの7割の行間を空けるとよいということです。

さきほど、文字サイズ14pxくらいが
読みやすいと書きましたので、
7割というと、行間は10px程度ということになるでしょうか。

このブログの行送りは、
145%とっていますので、
行間は、おおよそ6pxくらいあいていることになります。

文字サイズは、ピクセル(px)で固定値にする他にも
em単位やsmall・medium・largeといった
相対値にする設定方法もあります。


実は、文字サイズを12pxから14pxにするという
このほんのわずかな修正だけで
ぐんと読みやすくなるのですが、いかがでしょうか。


さて、次回はいよいよ
具体的にテンプレートの該当箇所を修正して
文字色や文字サイズ、行送り幅の設定をしてみましょう。

>>次の記事 「スタイルシートのお話」  


Posted by いーじー at 04:27Comments(0)ブログあれこれ
2012年02月

2012年02月07日

Gmailの便利ワザ

ここ数日、ブログの背景色と文字色の話が続いていますが、
閑話休題して、Gmailの便利な使い方をひとつご紹介します。
知ってる方は読み飛ばしてください。

一応前提として、Gmailの簡単なご説明。
Gmailは、Webメールの一種だと思ってください。

Webメールとは、Yahooメールやgooメールなど、
パソコン内のメールソフトを使わず、
インターネットを閲覧するブラウザ上から
ログインして利用するメールシステムです。

検索エンジンで有名なGoogle社が提供する
いろんなWebサービスのひとつに
GmailというWebメールがあります。

ひとつのアカウントで複数利用


さて、このGmail、
@より前の部分の「.(ドット)」と「大文字・小文字」の
認識・判別をしないことになっています。

どういうことかと言うと、
例えば、私のGmailアドレスは

easyhomejp@gmail.com ですが

easyhome.jp@gmail.com も

e.asyh.ome.jp@gmail.com も

EasyhomeJP@gmail.com も

すべてひとつのアカウントで受信できる、ということです。

ちなみに、いろんなWeb上のサービスに登録するとき、
例えば、ひとつのレンタルブログ提供会社に
別のアカウントでブログを開設したいときなどは、
きちんと別のアドレスだと認識されます。

任意のラベルをそれぞれ準備しておき、
メール設定からフィルタ設定「To」の部分を
それぞれのアドレスにしてラベルを分けておく
「メールの自動振り分け設定」をしておくと
どのアドレス宛に届いたか、
自動的に振り分け表示をすることもできます。

これを利用して、
仕事用、プライベート用と使い分けるのも便利ですね。


えっ、こんなの常識? みんな知ってたの?!
私は少し前に知ったばかりですが、
すでに大変重宝しています。  
タグ :Gmail


Posted by いーじー at 05:28Comments(2)雑記帳
2012年02月

2012年02月06日

文字色

昨日の記事の続きです。
前の記事では、
サイトのテーマカラーに沿った暗色を背景に敷き
同系色の明るい文字を乗せると
読みやすくなりますよという話でした。

しかし、
白い背景色のテンプレートを使用していたり、
白い背景でスッキリさせたい場合はどうしたらいいのか
というのが本日のお話です。

前々回の記事で、
白い背景は眩しくて目に優しくない
と書きました。

使用しているテンプレートが
背景に画像を使用していない場合の白背景は
「ブログの設定」>「テンプレート」の使用中テンプレート、
「カスタマイズ」で「スタイルシート」の中の
該当するタグを修正するだけで

背景色を変えることができますが、
テンプレートの多くは、
背景にも画像を使ってあります。

背景画像は、
レイアウトや内部のデザインと
合体していることが多いので

記事部分の背景だけを
変更することが難しい。

また、
ちょっと眩しいとは言え、
大多数のホームページやブログの背景は白色で
みなさんに馴染みがありますし、
清潔感を演出できるのも間違いないので
背景色を白にするケースも多いでしょう。

このブログも記事部分の背景色を白にしています。

では、背景色が白の場合、
文字をどうすれば視認性が上がる
または目に優しいのでしょう。

まず文字色を調整します。

暗色背景の時も、
背景と文字の色の輝度差(コントラスト)を
少し縮めてあげれば良いと書きましたが
白い背景の場合も同じです。

文字色を黒では無く、
少しだけ薄いグレーにすると
かなり読みやすくなります。
これが真っ黒の文字。
数行程度なら読みやすく感じますが、
ハッキリしすぎていて
行が増えると目が疲れることがあります。

このくらい薄い灰色の文字だと
ちょっとボヤけてしまいます。
これはやり過ぎ。
もう少し濃くします。

真っ黒からちょっとだけ薄く設定。
真っ黒から20%ほど落としたグレーの文字色です。
これなら長文でも読みやすそうです。

色を付ける場合も
このように
あんまりハッキリした明るい色を付けると
色味によっては眩しくなったり
輝度差が小さくて読みにくかったりするので

このくらい
濃くしておくほうが良いでしょう。
(↑)この部分、ちょっとだけ茶色が混じった濃い色です。


文字に関して大事な設定要素が
もうひとつあります。
文字のサイズ(フォントサイズ)について。

それは次回の話にしましょう。

>>次の記事 「文字サイズ」  


Posted by いーじー at 00:55Comments(0)ブログあれこれ
2012年02月

2012年02月05日

サイト背景色と文字色

昨日の記事の続きです。
前の記事では、
ホームページやブログの背景色は
真っ白より黒のほうが

見ている人の目に負担をかけませんよ

という内容でした。
では、背景が黒のとき文字色は何色がいいのか。

その前に、「黒」が良いと言っていますが、
真っ黒がいいのか。
についてお話します。

これは文字色とのコントラスト、
簡単に言うと背景色と文字色の明るさの差によっても
視認性に差異が出ますので、

背景の色だけで
判断するわけにはいかないのですが

背景を真っ黒にしてしまうと、
文字色を明るくしたときの輝度差が大きくなりやすいので

背景色は真っ黒ではなく、
「ちょっと暗い色」というくらいが良いでしょう。

上段の黒い背景色と比べると
この部分の灰色の背景色のほうが

幾分読みやすいのは、
文字色との明るさの差が縮まったからです。

ある調査では、
この記事の冒頭のエリアのように
真っ黒の背景に真っ白の文字色だと
ページからの離脱率が高いという結果が出ています。
確かに行間に文字の残像のようなものが見えて
逆に目に痛い感じもします。

文字色を少し暗くしてあげると
それが軽減されるようですので、

サイトのテーマカラーが決まっているときは
その色を少し混ぜた暗色の背景を敷き

文字色も同系色の明るい色を使用すると
オシャレで読みやすくなります。
 (このエリアを参照)

しかし、

使用しているテンプレートの背景色が白で
背景色の指定が難しい場合、
または、やっぱり背景は白で
スッキリ感を出したい場合は
どうしましょう。

次回は白い背景色のサイトの
文字色についてお話します。

>>次の記事 「文字色」  


Posted by いーじー at 02:04Comments(0)ブログあれこれ
2012年02月

2012年02月04日

サイト背景色

このブログの看板タイトル部分とサイドの一部を作り直しているんですが、もうちょっと時間がかかりそうなので、記事だけちょびっと更新。

ホームページやブログの背景の色についてのお話です。主に事業用・商売用のホームページやブログに関する話が中心ですが、個人サイトにも通じる性質がありますので参考にしてください。

ホームページのメインカラーや背景の色を決める時、基本的にはそのサイトを主催する会社・事業のコーポレートカラーや取り扱う商材、読んでもらいたいターゲット、サイト運用をからめた戦略・戦術などなどによって、メインカラー、サブカラー、アクセントカラーなどを決定していきます。例えば建設関係だと、安全安心・冷静さを表す青系や緑系、大地(土)をイメージさせる茶色や自然を連想する緑などをメインカラーに。飲食関係は食欲を増進させる暖色系、洋食は赤やオレンジ、和食は黒や緑、紫、フレンチやイタリアンは白ベースといった具合に、業種や商材・サービスごとに向いているとされる一般的な色があります。
が、その話また別の機会にするとして、今日は視認性など視覚のお話。

目に優しい背景色


ホームページやブログの背景色で一番多い色は白です。
白背景は誠実さや清潔な印象を与えますし、ホームページやブログの制作過程ではペーパーベースの制作物と同様に白背景が初期設定になっていることが多く、白色ベースのサイトを目にすることが多いと思います。

では、背景色は白が一番良いのか。視覚と視認性から考えてみましょう。
パソコンのモニターは、ブラウン管CRTや液晶のELにしてもTFTにしても、非常に明るい光を放っています。懐中電灯のない暗闇で、携帯電話やスマートフォンの明かりを電灯代わりにモノが探せるくらい明るい。

パソコンに向かっているということは、この明るい光源を常に見つめているわけですから、白い背景のページを見続けると非常に目が疲れることになります。白いページが疲れるからネットサーフィンを長時間できないという方も実際にいらっしゃいます。高齢者に多いでしょうか。

ではどうやってそれを軽減するのか。
まず簡単に思いつくのは、黒い背景色でホームページやブログを作ること。
目に優しい色として青色や緑色も良いですが、
最も負担をかけないのは黒です。
もちろん背景を黒にしたら、文字色を明るい色にしなければなりません。
では背景色が黒のとき文字色は何色が良いのか。
次回は背景色の続きと文字色のお話をします。

>>次の記事 「サイト背景色と文字色」  


Posted by いーじー at 16:47Comments(0)ブログあれこれ
2012年02月

2012年02月03日

radiko(ラジコ)はじまる

ただいまこのブログのデザインをプチリニューアル中です。
リニュ完了までもうちょっと時間がかかりそうなので、ちょびっと小ネタを。

今週月曜日から、長崎でもラジコ(radiko.jp)が聞けるようになりましたネ。
ラジコ・アプリでスマートフォンからラジオ放送(NBCラジオとFM長崎)が聴けます。
3G回線やネットWifiのインターネット回線を利用してラジオを聴いているので、
実際のラジオ放送より1秒ほど遅れて聞こえるらしいですが、
スマホでラジオが聴けるって本当に便利です。
ラジコアプリ・アイコン

2/4追記
ラジコ・・・インターネット経由でPC・スマホを利用してラジオ放送が聴けるサービス。
ビルの中のオフィスや障害物でなかなか電波が入りにくいところ、
長崎だとFMが壱岐・対馬・五島などの離島でも聴けるようになりました。
  
タグ :ラジコ


Posted by いーじー at 03:41Comments(0)雑記帳