NAGASAKI BURABURABU～

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

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

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

少し薄めたむすめ用に
バクバク喰らいついています。  

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

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



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



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

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

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

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

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

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

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

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


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

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

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

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

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

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


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

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

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

文字のサイズについて

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



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

行送り幅、行間について

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

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


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



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


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

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

ここ数日、ブログの背景色と文字色の話が続いていますが、
閑話休題して、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」の部分を
それぞれのアドレスにしてラベルを分けておく
「メールの自動振り分け設定」をしておくと
どのアドレス宛に届いたか、
自動的に振り分け表示をすることもできます。

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


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

昨日の記事の続きです。
前の記事では、

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

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

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

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

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

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

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

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

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

文字色を黒では無く、
少しだけ薄いグレーにすると
かなり読みやすくなります。



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

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

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

昨日の記事の続きです。
前の記事では、



＞＞次の記事 「文字色」  

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

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

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

目に優しい背景色

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

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

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

ではどうやってそれを軽減するのか。

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

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

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


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