TOP ブログの基本 アフィリエイト アクセスアップ カスタマイズ ブログ・HTML ブログ・CSS




ハイサイ(ようこそ)利爺のブログへ


●ブログの基本、アフィリエイト、HTML・CSSまで
初めての方にも分かり易いように下記のシリーズで纏めています。

・・・・・・・・・・・・・・・・ 各章の項目(目次) ・・・・・・・・・・・・・・・
= 現在、シリーズ記事を書いているブロックです。

エントリー順に確認できるように【目次】を作ってありますので
上段のコンテンツバー(menu)または上記の項目から各ブロックに入れます。


●本文中に表示しているアイコンは
= 参照記事  = 頁中の章  = 注釈  = 記事ブロック
を表します。

2009年05月25日

検索ツールを新しく作る(1)

■ 4-15 記事内を検索する独自のツールを作る

ブログサービスでは、ブログ内を検索するための窓(ツール)が設置されていますね。

Seesaaブログでの「検索ツール」はラジオボタンの機能で、
「ブログ内の検索」と「Yahooのウエブ検索」から選択出来るようになっています。

ブログに訪問した方が、その場から
●ブログ内の関連する記事を調べたり
●ウエブ全体を調べる
ことが出来るように、両方の機能を持った窓にしてあります。

訪問した方に使いやすいようにと
考慮された親切なツールではありますが、プラウザは独自の検索ツールをメニューバーに組み込んで提供しています。

大方のユーザーは、そのプラウザの検索ツールを利用すると思ってもいいでしょう。
さらに、ブログの中にツールを二重に置いていることになります。

便利なようにと設置したツールですが、
ウエブから、ほかの関連あるブログや記事を探し出す「検索窓」として利用され、
逆に訪問した方がブログから出て行くことが考えられます。

ブログを出て行った方は、余程のことがない限り戻ってこないと考えていいでしょう。

そのデメリットの方が大きいと考えられます。
ブログに留まらない仕組みになっていたら、ツールは設置すべきではないということになりますね。

● ブログ内の他の記事を検索する方は、記事に興味のある方だと思ってもいいでしょう。
●有益な情報、為になる記事が書かれているから、関連する他の項目を調べに行くのです。

「検索ツール」
そのものをブログ内に表示したくなければ、コンテンツを削除すればいいだけのことですが

訪問した方のことを考え
選択ラジオボタンの無い、「ブログ内だけを検索する」機能に絞った新しい「窓」に修正します。


【画像1】
ken01.jpg

「画像1」はSeesaaブログの初期設定検索窓の画像です。

ラジオボタンで、
ウェブの検索やブログ内の検索が選択出来るようになっています。

ブログを発信している方
とくにアフィリエイトをしている方には
プラウザの「ウェブ検索」機能はメリットがありませんので、

設置したツールの目的、
ブログの中を案内する機能として、活用してもらえる「窓」に作り変えます。

検索ツール専用のHTMLの書き換えになりますので、

左上段のメニューから
「デザイン」 ⇒ 「コンテンツ」を選択して、コンテンツに入ります。

ブログに設定している各コンテンツの配置が表示されますね。
その中の「検索」コンテンツをクリックして

「コンテンツHTML編集」と進みます。

コンテンツHTML編集の内容は

<script type="text/javaScript">
    ↓ 省略 (実際に開いて確認してみましょう)
<input type="hidden" name="fr" value="sb-sesa" />
<input type="hidden" name="ei" value="Shift_JIS" />
</form>


30行ほどのHTML構文になっています。

HTMLは経験していないと判断が難しいですね。
構文の中から該当するHTMLを確認して、修正するのは結構骨の折れる作業です。

ラジオボタンの「ウェブ検索」だけを、機能しないように書き換える方法もありますが、
必要のないボタンが表示され、見た目にも悪いです。

このHTMLをすべて削除します。

削除する前に戻すことを考えて、HTMLはコピーして保存しておきましょう。


● 新しいHTMLに書き換えます。

<div class="sidetitle"><% content.title %></div>
<div class="side">
<% content.header -%>

<form method="get" action="<% blog.page_url %>pages/user/search/" style="margin:0;padding:0;" name="seesaaform" >

<input value="" name="keyword" type="text" size="30" />
<input value="ブログ内検索" type="submit" class="input-submit" /><br>
<div align="left" style="padding-top:2px;">

<div style="clear:left;"></div>
</div>
<% content.footer -%>
</div>
<input type="hidden" name="fr" value="sb-sesa" /><input type="hidden" name="ei" value="Shift_JIS" />
</form>


    注)
   ● HTMLをコピー・ペーストする時には、全構文の
    大文字で書いてある <>
    小文字の <> に置き換えてペーストをして下さい。

HTML構文の
<input value="" name="keyword" type="text" size="30" />
が、検索語句の入力窓の横サイズです。

size="30" は
日本語文字は一文字で2ビット使用しますので<size="30">その半分の15文字です。

15文字の入力まで可能なように制限をかけています。

その数値を調整することで、窓の横幅を大きくしたり、小さくしたり出来ます。
(2ビット単位で調整します)

調整する上での注意点は
CSSで定義している「サイドの幅」から、はみ出るような設定は避けるべきです。

サイド列が、ブログの下の方に追い出される「カラム落ち」のエラー原因になります。

<input value="ブログ内検索" type="submit" class="input-submit" />

のクリックボタンに表示する語句は、自由に書き換えられます。

簡潔に「検索」だけにするか
「ブログ内の関連項目が調べられます」など、訪問した方の気を引く言葉を自由に設定できます。

窓のサイズ、文字の大きさ、位置を
「プレビュー」
で確認します。

●書き換えたHTMLを「保存」しなければ、何度でも修正してプレビューで確認が出来ます。

「保存」して検索窓の完成です。

表示を確認してみます。

【画像2】
ken02.jpg

ブログ内だけを検索する、すっきりしたツールになりました。

画像3は
検索ワードを「段組」として、記事内を検索した結果の表示です。

該当する項目がピックアップされています。

【画像3】
saku02.jpg
 ↑ 画像をクリック・元画像が開きます。

項目の表示は、表示件数の過多を考え
@ 記事タイトル A 記事のサブタイトル、本文の一部(半行程度)だけの表示です。

現在の記事と、他の関連する記事が読める仕組みになりましたね。





▲カスタマイズの関連記事 【別窓での表示です】
   holder01.gif ブログのカスタマイズ-目次ー
    http://tosiji-dreamafi.seesaa.net/article/115424617.html

▲HTMLの関連記事 【別窓での表示です】
   holder01.gif ブログで使うHTML-目次ー
    http://tosiji dreamafi.seesaa.net/article/133635358.html

★ご協力お願いいたします★   
      kame.jpg
    banner_01.gif
……人気ブログランキング……



2009年05月23日

プリンタや印刷のカラー表現

■ 4-14 プリンタ・印刷の色の概念

※今回もまたカスタマイズから横道にそれます。
 
テレビやPCのモニターなどでカラーを表現するのは
「光の三原色」赤、緑、青の各比率を変えることで、1600万色あまりの細かい色が出せることを確認してきました。

今回は
印刷やよく使用している家庭用プリンタの、色の組み合わせ方を確認します。


光の色の組み合わせをRGB(アールジービー)カラーと言いました。



インクや塗料類の組み合わせは
CMYK(シーエムワイケイ)カラーと言っています。

「色の三原色」「色料の三原色」と言われ、
その合成の元になる基本色は、一般には下記の3色を用いています。

● シアン ( Cyan = 緑青、碧 )
● マゼンタ( Magenta = 赤紫、紅 )
● イエロー( Yellow = 黄 )

【画像1:色の三原色】

ymck001.jpg

この三色のインクを
100%単位(ベタ)で用い3色の重なった領域部分を見ると、画像のように光の三原色の場合の「白」とは逆の「黒色」になっています。


■ 印刷の色の出し方

印刷では「色の濃さ」は網点(ハーフトーン)の密度によって表現します。

【画像2】
ami001.jpg

「画像2」は見た目の印刷仕上がりですが、色の濃い左から右の方に段々と薄くなっています。

いわゆるグラデーション処理ですが、刷り面をルーペで拡大して見ると「画像3」のように「網点」がはっきりと確認できます。

インクはその網点(●の部分)に乗りますので、
網点が大きいほど、乗るインクの量が多くなり、色がはっきりします。

逆に網点が小さければ、乗るインクの量も少なく
また網点と網点の間の隙間が広がりますので、薄い色が表現できます。

【画像3】
ami002.jpg

カラー印刷では、
その網点で出来た版を「CMY」の3版作って、お互いに重ねて印刷することになります。

(各版を製作するとき、仕上げる網点を配列する角度がありますが、ここでは説明を省略します)


CMYKカラーの「CMY」はシアン・マゼンタ・イエローの3色の頭文字ですが

「K」は何でしょう。

印刷では、フルカラー刷りのことを4色カラーといっていますが、実際は「色の三原色」で見るように、3色で印刷が可能ですね。

多くの印刷物には
写真やイラストだけではなく、文字(文章)や表などの罫線があります。

文字の色を黒で刷り上げようと思ったら
● シアン、マゼンタ、イエローの3色を使う必要があります。

3色の色を混ぜ合わすと言うことは、インクそのものを混ぜるのではなく
● 網比率に応じた版を各版作り上げ、印刷に使うということになります。

バックの色などのように比較的に大きい範囲に、CMYの三色ベタを使って黒色に印刷することは楽にできますが

文字や罫線のような場合には
● 細い線の3版をズレのないように重ねていくことになりますね。

● 3色をずれないように重ね合わせ、刷版(さっぱん)を作る作業。
● 印刷機械に3色の版を、ズレないよう取り付ける作業。

印刷経験の長いベテランの方でさえ至難の業です。

また3色を混ぜて出来た黒色は
見た目にどんよりとして鈍く、すっきりしない「黒」になります。

  ※チェックしてみて下さい ⇒ 印刷フイルム、刷版、版ズレ、トンボ。

黒色をだすには、3色の版を重ねて印刷するより、

インクの「黒」を1色追加して印刷した方が
すっきりとしたシャープな「黒色」になり、簡便に印刷をすることが出来ます。


そのため、CMYの3色に
単色の黒インクを追加して4色で印刷しています。

その黒が「K」です。

「CMYK4色カラー印刷」ということです。

  ※ Kは Key plate の頭文字 = 基本になる版。
    日本語の「Kuro」と表現したほうが、覚えやすいですね。 

その4色に印刷機械も対応しています。

黒の略語がKなのは
英語で黒(Black)の頭文字がBになるため、ブルー(Blue)の頭文字と混同されるのを避けるためです。

「Bk」と表示する場合もあります。

  
色の組み合わせは
小学生のころから馴染んできた、クレヨンや絵の具などもその仲間になりますね。

家庭用のプリンタも、理論的には同じです。

基本3色と、黒1色が標準になっています。

最近では、家庭でデジタルカメラなどで撮影した写真を打ち出すことが多くなり、より微妙な色合いが求められ、5色や6色のインクやトナーを備えたプリンタまで、市場に出てきています。

印刷では「網点」で色合いを調整しました。
プリンタではノズルから噴射する、インクやトナーの量を調整して、カラーを表現しています。

さらに、
PCやデジカメのデータはRGBカラー
インクを使うプリンタや印刷のデータはCMYKカラー
ですね。

「光の世界」と「インクの世界」

異なる世界のデータでプリントアウトしています。
データ変換(カラーマネイジメント)が行われているから可能ですね。

モニターで見るカラーと、プリントされたカラーに色合いの違いがあるのは、反射カラーと透過カラーの違いにもよります。

……

■ 白い色の表現

「画像1」でも分かるように、白い色はありませんね。

白はどう表現(印刷)するのでしょうか。

特色としての「白」インクはありますが、
白は4色では表現出来ませんね。

「この文字を白抜きにしてくれ」
などとよく聞きませんか。

「白抜き」

インクを一切乗せない色。
バックの色。
  ↓
紙の色です。

インクを乗せていない「紙そのものの色が白抜き」です。

紙には色のついた色紙などもありますね。

白抜きは紙の色が「白」でしたら白。
色紙でしたら、その「色紙の色」になる考えです。

色紙を用いて印刷したとき、白インクを使用しなければ、
白文字などあり得ないということになります。

バックの色は「ピンク系」、文字を「白色」で仕上げたければ
ピンク系の紙に「特色の白いインク」を使って刷り上げるのではなく

白い紙を使い
● 文字以外の部分はピンク系のインクで
● 文字の部分は白抜きにして

刷り上げればいいことです。


また、4色で表現できない
「金」「銀」「オレンジ」などの特別な色は、始めから調合されたインキを使用します。

これらは「特色」といいますが、
このほかにもプロセスカラーでは発色が難しい色の場合、特色インキの別版によって補っています。

雑誌のロゴや吊広告などによくみられる蛍光カラーなども特色です。

特色には
インクメーカによるカラーガイド表があり、客観的な色指定としての「インクの番号」が割り振られています。
その番号を指定することによって、希望する色が明確に相手に伝わり、インクが用意されて印刷されます。

……

版を重ねて刷る方法は、日本では有名な「浮世絵」があります。

10色以上の色を、木版を使って微妙な色遣いを表現する技法は世界的に有名ですね。
その当時から、色の感覚や印刷技術が高かったと言えます。

最近、その木版(原版)が見つかったとのニュースがありました。
世界に誇れる素晴らしい「文化遺産」です。



▲カスタマイズの関連記事 【別窓での表示です】
   holder01.gif ブログのカスタマイズ-目次ー
    http://tosiji-dreamafi.seesaa.net/article/115424617.html

▲HTMLの関連記事 【別窓での表示です】
   holder01.gif ブログで使うHTML-目次ー
    http://tosiji dreamafi.seesaa.net/article/133635358.html

★ご協力お願いいたします★   
      kame.jpg
    banner_01.gif
……人気ブログランキング……




2009年05月13日

PCでのカラー表現について

■ 4-13 インターネット・PCでのカラー表現

※今回もまたカスタマイズから横道にそれます。

テレビやPC、携帯電話、スマートフォーンなどで、赤や青など綺麗で美しい色が表現されています。

それらは生活の一部となって、カラーで映し出されるのが当たり前の時代です。

その色の基は「光」ですね。

可視光の赤(Red)・緑(Green)・青(Blue)の三原色ですね。

頭文字をとって【RGBカラー】と言います。

この三色の比率を変えることで、色彩の違うさまざまな色が表現できます。

いろいろな組み合わせで、
ブログやインターネット、テレビなどで色を表示させている訳です。

【画像】
rgb001.jpg


コンピュータを使っているとき、「8ビット」や「にごろ」という言葉をよく耳にします。

基本的にコンピュータは、「0」と「1」しか判断できない2進法の世界です。
 
「0」と「1」の2通りの情報をもつデータの単位は「1ビット」と言われ、最小の単位です。
 
1ビットだけですと「0」か「1」の2通りしか情報は扱えませんが、
2個(2ビット)並べると、

 00  01  10  11

の4通りの組み合わせができます。

8個(8ビット)並べますと、

 00 00 00 00 〜 11 11 11 11 の ように、
 = 2の8乗 = 256

256通りの数字の組み合わせ(数列)が出来上がります。

8ビットはその上位単位で1バイトと言いますので
8ビット=1バイト=256
となります。

コンピュータ(情報処理)では、8ビット=1バイト(256通り)が一つの単位として扱われています。

その「256」と言う数字が「にごろ」と言われています。


PCでの入力に必要な「キーボード」は、数字やアルファベット、記号類、さらに半角のカタカナを表示するためには、128通り以上(7ビット以上)の情報が必要ですので、基本8ビットで十分にカバーしています。

また
日本語のひらがなや全角カタカナ、それと数多くの漢字類は1文字で2ビット使用します。

8ビットで表示できる漢字類は、256の半分の128文字ではないかと思いがちですが、そこはよく考えたもので、漢字にはJISコード、シフトJISコードなどのコード表があります。

8ビット上で漢字(日本語)をコードに対応させていますので、ひらがなや漢字が表示できる仕組みになっています。


同じように
カラーを表示するのにもカラーコードがあります。

カラーコードは256(にごろ)に対応した16進数を使用しています。

16進数の表現は
0 1 2 3 4 5 6 7 8 9 A B C D E F
ですね。

赤(Red)緑(Green)青(Blue)の三原色の
各原色に16進数を2個づつ振り分け

「赤」に
0 1 2 3 4 5 6 7 8 9 A B C D E F 
0 1 2 3 4 5 6 7 8 9 A B C D E F
の16進数2個
16の2乗ですから = 256 の組み合わせが可能です。

同じように
「緑」にも16進数を2個
「青」にも16進数を2個

赤・緑・青の組み合わせは
16の2乗 × 16の2乗 × 16の2乗 = 16,777,216

この16,777,216色のカラー表示が可能なように、
カラーコードに対応させています。

# 00 00 00 → 形では #RRGGBB です。(RGBカラー)

左から
   1桁と2桁が「赤」
   3桁と4桁が「緑」
   5桁と6桁が「青」
の16進数です。

「0」の色を使用しない(0%)から
「F」の100%フル使用までの16段階の階調です。

「赤」「緑」「青」を100%づつ使用すると
コードは
「赤」 ⇒ #FF0000
  +
「緑」 ⇒ #00FF00
  +
「青」 ⇒ #0000FF
  =
「白」 ⇒ #FFFFFF
 
コードでの表記は 「#FFFFFF」 です。
rgb全ての色を100%使用した色が「白」になりますね。

上記の「画像」の例のように3色が重なった領域は「白」ですね。

その逆の 「#000000」 は「黒」になります。

●色のない世界は「黒」
●暗闇の世界です。

このように
カラー指定には16進数を各3色2桁で表示し、頭に「#」の記号をつけて表記します。

理論的には16,777,216色の表示が可能なのですが、wwwのブラウザの種類やモニターの性能で表示できない色もあります。

また、モニターを使用している環境

● 薄暗い部屋で使用している
● 明るい場所にモニターを設置してある
 (携帯電話を部屋の中で使用した時と外では色味が違いますね)
● モニターのメーカーによる発色の違い
 (デジタルカメラでは、発色の違いがよく分かります)

などの条件によっても、目に入ってくる色は左右されます。

環境や条件によって微妙な色違いが出るということになり、表現するプラウザ、OSによっても指定された通りの色が再現できないということにもなります。

そこで、異なったブラウザ、異なったOSでも
共通のカラー(セーフカラー)が表現(近似値として)できるように216色を定めています。

セーフカラー216色は、RGB の光の三原色を
6段階に分けて定義したものです。


R・G・B を「0%」 から 「20%」ずつ上げていった値の組み合わせ(階調)で作られています。

16進数で表すと、20%ずつの単位は

 00   33    66   99    CC    FF
(0%) (20%) (40%) (60%) (80%) (100%)
 
の6段階です。

この6段階の「階調」を3色それぞれで設定しますので
6×6×6 = 216色
ということになります。

その216色は
各ブラウザ、またはOSが異なっても
カラーの基準として取り決められた色になっていますので、
セーフカラーと言われています。


そのほかに
HTMLの仕様で規定されている「カラーネーム(色名)」

red black white blue yellow ・・・

などの英語の色の名称、基本16色があります。

HTMLでは、
 backgraound-color:#0000FF;
 backgraound-color:blue;(#記号は付けません)

の、どの表記を使っても、同じ色が表現出来るようになっています。

カラー表示には、さらに
● RGB256等分で表示する方法
● RGBを%で表示する方法
もありますので、興味のある方は調べてみてください。


…………

ノーベル賞級の発明として、また職務発明の特許訴訟で有名な
「青色発光ダイオード(LED)のことは皆さんの記憶にありますね。

青色のLEDの素晴らしいところは
従来から商品化されている、赤と緑のLEDに、青色が加われば、LEDディスプレイがフルカラーで表現することが出来るようになることです。

LEDは環境に優しい材料で作られていて、寿命が長く、信頼性や視認性に優れ、省電力、省スペースなどの特徴から、多くの場所で現在では活用されています。

携帯電話バックライト
デジタルカメラのバックライト
野外大型ビジョンのディスプレイ
飛行機コックピットディスプレイ
自動車パネル
自動車の室内灯

などに使用されていますが、

青色の発明で、3原色の組み合わせが出来るようになり、単色系から1千万以上の色での表示が可能になっています。

例えれば、交通信号機にまで多色が使えます。

 (単色のLEDを使った信号機は実用化されていますが、信号灯が赤や紫
  虹色など多色で表示されたら、よけいに混乱が起こりますね!)

LEDはフィラメントのように断線することはないようで、製品が劣化するまで寿命は長いといわれています。

色々な形でLEDを使用した製品が市場に出てきて、省エネ・省資源などに貢献する時代が来ることでしょう。

……

次回も寄り道して
「プリンタのカラー表現」を確認します。




▲カスタマイズの関連記事 【別窓での表示です】
   holder01.gif ブログのカスタマイズ-目次ー
    http://tosiji-dreamafi.seesaa.net/article/115424617.html

▲HTMLの関連記事 【別窓での表示です】
   holder01.gif ブログで使うHTML-目次ー
    http://tosiji dreamafi.seesaa.net/article/133635358.html

★ご協力お願いいたします★   
      kame.jpg
    banner_01.gif
……人気ブログランキング……




×

この広告は1年以上新しい記事の投稿がないブログに表示されております。