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




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


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

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

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


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

2010年01月28日

タグで指定するWebで使用できる書体

■ 5-17 Web上の書体について

前回まで
Seesaaブログの記事欄に設置されている
入力用の「アイコン」に含まれるHTMLの要素タグをシリーズとして、確認してきました。

最後のアイコン emoji01.png は「絵文字」になっていますね。

絵文字については、アフィリエイトや情報を提供するブログでは、
あまり必要ではないと思いますので説明は省略します。

記事入力用の各アイコンは
ブログ記事の入力時に、HTMLが分からなくてもアイコンをクリックすることで、必要なタグが使えるように入力を補助するために設置していますね。

基本的にはアイコンを利用せずに
HTMLタグを迷うことなく記入出来れば、今まで確認してきたHTMLの基礎を取得したと言えます。

しかし
便利なツールとして設置してあり、クリックすればタグ入力ができるのですから、大いに使いこなすべきですね。

参照 
記事欄アイコンの使い方
●記事入力枠の上段に表示されているアイコンの
 使い方シリーズ@です
http://tosiji-dreamafi.seesaa.net/article/134496905.html


今回から
ブログでのHTMLを確認するページになります。

「Web上の書体」から確認してみましょう。

ブログやホームページはデザイン的なレイアウトより、公開する情報の信憑性、信頼度が主となっているため書体を気にすることなく記事を書き込んでいます。

書体は
書籍や新聞、チラシなどの広告関係では、その使い方の良し悪しで出版物の形が決まると言うほど重要な要素を占めています。

出版社での編集者は
編集の基本はもとより、書体の使用感覚も最低条件として必要です。

またデザインを本業としているデザイナーは、
書体の「いろは」とその「特質」を知らなければ、職務が成り立たないほどです。

Webの世界と印刷の世界の大きな違いではありますが、

サイトのデザインを考えるとき
ある程度の基本として、書体の使い方を知っておくのも、基礎知識として必要なことです。

Webで使える基本的な書体として
Microsoft Windows日本語版 に標準で搭載されている馴染みの深いMS系の書体

「MS明朝」「MSゴシック」

とその仲間の書体を確認してみます。

MSとは Microsoft の省略で、
その書体は、ワードやエクセルの「日本語」入力の基準となっていて、
プラウザのInternet ExplorerやFirefoxには標準で搭載されていて、wwwに準拠しています。


■ 記事の書体を確認して変更する。

記事の一部の書体の変更、入力時にHTMLタグで指定しますね。


「MS明朝」に書体を変更することにして、その使用方法と表示例を確認してみます。


書体の指定

<div style="font-family:'MS 明朝',serif"></div>


【画像1】
aph01.png
 ↑ 画像をクリック・元画像が開きます。

「画像1」を参照に、
HTMLタグ入力の際の留意点を確認します。


●MS 明朝

@指定するfont-familyの「MS 明朝」
「MS」と「明朝」の間に半角のスペースが入ります。

A使用する書体名を
' 」(シングルコーテーション)または
」(ダブルコーテーション)
で括ります。

B代替フォントの指定。

の3点に注意して、正確に記入する必要があります。
<div style>の style指定形式ですね。

代替フォントとは

「MS明朝」は殆どのプラウザに標準で搭載されていますが、
搭載されていないプラウザも有ります。

搭載されていなければ、指定された書体の表示が出来ません。

搭載されていないプラウザを使用しているユーザーために
表示エラーにならないように、代替のフォントの指定しておきます。

代替の「serif」(セリフ)は明朝体のことです。

「serif」を指定しておけば、該当書体が無いときは
そのプラウザがデフォルトで搭載している明朝系での表示になります。

HTMLタグでの使用文字指定を確認してみます。
【表示例1】

MS 明朝:表示例
三国志は歴史を背景とした「歴史小説」ではあるが、今でも圧倒的な人気をほこり、最近では「レッドクリフ」の大作映画も公開された、根強い人気の歴史ドラマである。


明朝書体で表示されていますね。

MS明朝は等幅フォントです。
等幅フォントとは、MS明朝・MSゴシックなどのように、
それぞれの文字の横幅が統一されていて、

原稿用紙の枡目の中に一文字づつ記入したように、
文字幅が綺麗に揃って表示される書体のことです。

日本語漢字は2バイトで表示されますね。
1バイトで表示される漢字は有りませんので、「 」( )などの約物(やくもの)も
等幅の全角が基準になっています。

1バイト系のカタカナ、約物を半角で表示したいときには、入力時に半角の形にする必要があります。
  
    注
   ●約物の半角入力
    キーボードから該当する約物を入力してEnterで確定する前に
    ファンクション「F8」を押して半角に変更。
   

●「MS P明朝」

明朝系には他に「MS P明朝」が有りますね。

    注
   ●「MSP明朝」ではなく「MS P明朝」が正確な表記。
    「MS」と「P明朝」の間に半角のスペースが入ります。

Pはプロポーショナル フォント(proportional font)のことで

   ※proportion = 割合、比率

文字ごとに横幅が調整されています。

英文の組版からの派生で
例えば、アルファベットの「 I 」や「 H 」では
I は H に比べて横幅が小さいですね。

I をHと同時に使用すると
I の横の空きが広すぎて締りのないように見えるので

横幅を調整して小さくしています。

そのような横幅の違いを詰めて表示するのが「Pフォント」で
一般的には表示や見栄えを良くする目的で使用されます。

【表示例2】

MS P明朝:表示例
三国志は歴史を背景とした「歴史小説」ではあるが、今でも圧倒的な人気をほこり、最近では「レッドクリフ」の大作映画も公開された、根強い人気の歴史ドラマである。
⇒ 英文字 abcdefghijk


MS明朝との比較
三国志は歴史を背景とした歴史小説ではあるが今でも圧倒的な人気をほこり最近では「レッドクリフ」の大作映画も公開された根強い人気の歴史ドラマである
⇒ 英文字 abcdefghijk



「表示例2」はMSP明朝とMS明朝を比較するための表示です。

MSP明朝では(※MS明朝の黄ベタ部分を参照)

●文字と文字の間を、その形状に合わして調整。
●括弧などの約物を半角に変更(残った半角を取り去る)
●カタカナの字詰め。
● 。、などの句読点の半角表示。
 
文字の送り(字間)を詰めています。

とくに明確に違いが分かるのは
両書体の下方に表示した英文字ですね。

MS明朝とMSP明朝の表示上の、もうひとつの違いは

MS明朝が、
漢字、約物も等幅での表示が基本のため、文頭と文末がきれいに揃って表示されるに対して
MSP明朝は、
約物類(1バイト系カナを含む)が半角の表示のため、文末が揃わないという表示上の違いがあります。

同じ明朝系でも
MS明朝とMSP明朝には、このように大きな違いが有ります。




●ゴシック系の表示。

ゴシック系にも「MSゴシック」「MS Pゴシック」が有りますね。
使用する時のタグの使用方法は同じです。

表示例を見てみましょう。
【表示例3】

MSゴシック:表示例
三国志は歴史を背景とした「歴史小説」ではあるが、今でも圧倒的な人気をほこり、最近では「レッドクリフ」の大作映画も公開された、根強い人気の歴史ドラマである。



タグの形式は、先の例と同じですが
<div style="font-family:'MS ゴシック',sans-serif">

代替のフォント名が
ゴシック体を表わす「sans-serif(サンセリフ)」になります。

【表示例4】

MSPゴシック:表示例
三国志は歴史を背景とした「歴史小説」ではあるが、今でも圧倒的な人気をほこり、最近では「レッドクリフ」の大作映画も公開された、根強い人気の歴史ドラマである。


「表示例3」のMSゴシックと比較してみて下さい。
文字の詰め具合が比較できます。

●明朝・ゴシック以外の書体

【表示例5】

HG正楷書体-PRO:表示例
三国志は歴史を背景とした「歴史小説」ではあるが、今でも圧倒的な人気をほこり、最近では「レッドクリフ」の大作映画も公開された、根強い人気の歴史ドラマである。



【表示例6】

HGP創英角ポップ体:表示例
三国志は歴史を背景とした「歴史小説」ではあるが、今でも圧倒的な人気をほこり、最近では「レッドクリフ」の大作映画も公開された、根強い人気の歴史ドラマである。



その他に使用できる書体は有りますが省略します。
ワードに搭載されている書体は使えるようですので、試して下さい。


■CSSに定義されている書体を変更する。

CSSの定義を書き換えて、
ブログの使用文字を一括で変更する方法を確認します。

まず利用しているブログサービスでの書体を確認しましょう。

CSSを開きます。

seesaaブログでは
メニューの「デザイン」→下段のテンプレート「タイトル」

から入りますね。


SeesaaブログのCSS

body {
font-family:Verdana;
background-image:url(画像url);
margin:0px;
padding:0px;
text-align:center;
}


CSSは

セレクタ  
プロパティ 
      

= body
= font-family
= Verdana

の構造ですね。

このブログでの使用書体は「Verdana」が使用されています。

VerdanaはWeb上で使用する目的で開発された
ゴシック系の書体で、見やすい書体ですので多くのプラウザで使用されています。

ブログの全ての書体を変更するには
このCSSのプロパティの「値」

font-family:Verdana;
  ↓
font-family:'MS 明朝',serif

の書き換えになります。

値の中のserifは記事上段で確認した代替フォントの定義ですね。

セレクタの body の他に「font-family」を指定しているセレクタが
いくつか有りますので、その全てを変更します。

以上がブログの書体を全て変更するときの、CSSを書き換えです。


Web上で使用する書体は、
ブログサービスで設定しているプラウザ対応のもので十分ですが、

●他のブログと差別化をする。
●文字でもって強調する。
●重要な資料を目に付くようにする。

などの目的で変更することも大切な考え方の一つです。




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

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



2010年01月24日

リンクの基本(中級2)

■ 5-16 ブログにリンクを張る(2)

前回の「ブログにリンクを張る(1)では、内部リンクの

●同一記事内の「特定項目へのリンク」
●他のページへのリンク
●他のページの「特定項目」への直接リンク

を確認しました。



リンクしてページを開く特徴には

●今見ているページに上書きしてブログを開く「同窓」
●別の窓を立ち上げて開く「別窓」が有りますね。

例えば、Seesaaブログでは「記事を書く」「確認する」などは同窓で、「ブログを見る」は別窓で開きます。

ほかのブログに訪問して「見やすい」「使いやすい」と感じるサイトは
「同窓」と「別窓」の互いの利便性を上手く使っています。

同窓にすると、
元のブログや最初のページに戻りにくい点がありますが

プロバイダのアドレスバーのアイコンには、ブルダウンの選択メニュー「最近表示したページ」を利用することで、道に迷うことはないようになっています。

別窓にすると
開いた分だけのサイトがモニターに次々と重なって表示されます。

表示サイズを調整することで
複数のサイトを同時に表示して、ページの比較や記事を参照することも可能ですが、
PCのメモリを消費してしまう点など、気になることもあります。

PCやWebには、閲覧している側が
キーボードやマウスを使って「別窓」で開く方法が組み込まれています。

別窓で開く方法

●「Shift」を押しながらクリックして別窓で開く。
●「Ctrl」を押しながらクリック、タブで別窓を開く。
●マウスのホイール(回転ボタン)をクリック、タブで別窓を開く。
●リンクを右クリック「新しいウィンドウで開く」で別窓。

同窓より別窓の方が使いやすいと言う方は試してください。
便利な機能です。

■「戻る」リンクの組み立て

【画像1】
他のページへのリンク構成図の表示。

前回、参照したリンクの略図です。

 ↑ 画像をクリック・元画像が開きます。

「ブログトップに戻る」
「この記事のトップに戻る」

   
●参照するために他のページからジャンプして来た。
●検索エンジンなどから特定のページに訪問してきた。

など
直接にページに訪問した人を「ブログのトップ」に
行けるように案内する「道しるべ」です。

訪問した特定のページだけでなく、ほかの記事も参照して欲しい時によく使われます。

その「戻る」リンクの仕組みを確認します。


■ ブログのトップと記事のトップ
 
ブログは記事を更新したときに、
新しい記事がつねにブログのトップページに表示されます。

この利爺ブログのトップのurlは
  ▲ http://tosiji-dreamafi.seesaa.net/

記事のトップ(最新の記事)のurlは
  ▲ http://tosiji-dreamafi.seesaa.net/article/・・・・・・・・・.html/

の表示形式になっています。


● ブログのトップ

 ● http://ブログURL/

ブログのトップは決められた位置に有ります。

ブログを表示した時
ブログトップには、最新の記事が表示されるので、ブログトップと記事トップは同じに見えますが

ブログは
構成部分と記事部分に分かれた構造になっています。

ブログの構成部分の表示にともなって、最新の記事を判断して
記事部分として合体して表示される仕組みになっています。

このブログの構成の形から分かるように
ブログトップはブログ表示の階層構造の最上段(トップ)にあり
表示する位置、構造形は記事によって左右されませんね。

● 記事のトップ

http://ブログURL/article/記事番号/

記事は
その記事が新しいのか、過去の記事なのかに関係なく絶対的な
記事番号(/article/記事番号/)を持っています。

ブログのトップを表示した時、新しい記事かどうかを番号で判断され入れ替えられます。

また、リンクなどで記事番号を指定した時は、その番号の記事を表示します。


● ブログトップへのリンクと記事トップへのリンク
上記のことから

@ブログのトップに戻るは
構造のトップ位置にある
<a href"http://ブログURL">(記事番号無しの表記)
へのリンクになります。

A記事のトップに戻るは、今見ている記事の番号へのリンク
<a href"http://ブログURL/article/記事番号.html">
となりますね。

記事のトップに戻るは
同じ記事へジャンプさせ、同窓で再び同じ記事を表示させる形になります。

それらの両方のタグを記事の該当箇所に、HTMLで記入してリンクを貼ればいいと言うことです。

しかし記事の更新のたびに内部リンクとして
「ブログトップに戻る」「記事のトップに戻る」と入力して、 リンクurlを書き込む作業は大変な煩わしさです。

■ 戻るリンクを「自動」で表示させる。

「戻る」リンクを記事の末尾に、自動で表示させる方法を確認します。

seesaaブログでは

●ブログの全体の構造を掌る、大本のHTMLと
●記事の構造をみるHTML

の二つのHTMLでブログを構築しています。

「戻る」リンクを置く場所は、更新をする記事内ですので、HTMLの修正は記事の構造をみる
「記事のコンテンツHTML」の書き換えになります。

「メニュー」→「デザイン」→「コンテンツ」→「記事」と進み
「コンテンツHTML編集」

を開きます。

入力するタグは

【資料1】
戻るリンクの設定

●ブログのトップに戻る「タグ」
<a href="<% blog.page_url %>">ブログのトップに戻る</a>

●記事のトップに戻る「タグ」
<a href="<% article.page_url %>">記事のトップに戻る</a>


が基本形です。

【画像2】記事の末尾
hyo01.jpg
 ↑ 画像をクリック・元画像が開きます。

「画像2」のように表示位置は
記事の最末尾、タグの語句やSocial BookMark のアイコンが表示されている
すぐ上に表示するようにします。

「コンテンツHTML」での上記戻るタグ追加位置は

<% if:glog.bookmark_service %>
の4行上の

<% if:list_tag %><div class="tag-word">
の前の空白箇所になります。

記事のコンテンツHTMLは長い構文体ですね。
挿入する箇所を特定するため、目で追って探すのは簡単なことではないです。

■ 検索機能を使う。

IEやFirefoxには語句を「検索する」ための便利な機能があります。
ブログを表示しているときやHTMLを開いている時に、検索窓を開くことが可能です。

@「コンテンツHTML編集」を開いた状態で

Aショートカット「Ctrl + F」
で検索窓を開き

B検索する語句「bookmark」を入力。

  ※検索する語句は「list_tag」でもいいです。

【画像3】検索状況
link-kensaku01.jpg
 ↑ 画像をクリック・元画像が開きます。

「画像3」のように語句「bookmark」が検索された状態になりましたね。

青ベタで表示されている「bookmark」は検索機能がHTMLを最初からチェックして、初めに探し出した「bookmark」の語句です。

その青ベタより前には、
該当する語句は無いという意味での青ベタになっています。

次に探し出した該当する語句からは
黄ベタbookmarkで表示されます。

青ベタや黄色ベタで表示されている語句をチェックしていけば、
該当するHTMLの列を簡単に探し出せます。

この検索機能はブログやネットのいろいろな箇所で使えますので活用してみましょう。


記事HTML

★ ← ← タグを挿入する箇所
% if:list_tag %><div class="tag-word">…
 ・
<% /if -%>
% if:blog.bookmark_service %
 ・


<% if:list_tag %><div class="tag-word">……
の上段の空白の部分印の箇所に

a href="% blog.page_url %"ブログのトップに戻る</a>
a href="% article.page_url %"記事のトップに戻る</a>

を直接に入力します。

<a href=" の後ろの
<>は「入れ子」の形式になっていますので、気をつけましょう。


挿入後の記事HTML

a href="% blog.page_url %"ブログのトップに戻る</a>a href="% article.page_url %"記事のトップに戻る</a>
% if:list_tag %><div class="tag-word">タグ…
 ・
<% /if -%>
% if:blog.bookmark_service %
 ・


入力した後
プレビューで確認して記入もれなどのエラーが無ければ「保存」して終了です。
 
 ※「保存」する前に、必ずプレビューで確認しましょう。

このHTMLの追加で、新しく記事を書き上げるたびに
直接にリンクタグを張り込まなくてすみます。


■戻るリンクに「ブログ名や記事タイトル」を自動で表示。

上記の記事HTMLの修正では、
「ブログのトップに戻る」「記事のトップに戻る」のように簡単なリンク表示にしていますが、


ブログ名・記事名の自動表示

@ 「利爺とゆったりアフィリエイト」のトップに戻る。
A 「記事欄アイコン「リンク」(2)」のトップに戻る。


「ブログタイトル」や開いている「記事のタイトル」を表示して、行き先が分かり易いのように表示することも出来ます。

@「ブログ名」を戻るリンクに自動で表示。
前述のタグに
<a href="<% blog.page_url %>"><% blog.title %>のトップに戻る</a>

の赤文字の<% blog.title %>タグを追加します。

A「記事名」を戻るリンクに追加して自動で表示。
ブログ名表示と同じように
<a href="<% article.page_url %>"><% article.subject%>のトップに戻る</a>

に赤文字のタグ<% article.subject%>を追加します。

これら自動表示のタグは「相対指定」の形式になっていますから、
仮にブログ名を変更した時でも、新しいブログ名の表示になります。

更新した新しい記事タイトルにも相対的に対応しますので、
一度、記事の「コンテンツHTML」を修正(編集)して置けばいいということです。

このような「ブログ名 + トップに戻る」の使い方は
ブログ名(例:利爺〜アフィリエイト)が入っていますので
検索エンジン対策にもいいと言われますが、真偽のほどは分かりません。


■戻るリンクに「アイコン」を挿入

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

この利爺のブログには、
リンクの頭に、訪問した方の目に付きやすいように
「画像」(アイコン)を使用しています。

画像のURLの挿入箇所は
  <a href="<% blog.page_url %>">ブログのトップに戻る</a>

印のどの箇所でもかまいません。


画像の挿入例

<a href="<% blog.page_url %>"><img src="http://画像URL" />ブログのトップに戻る<a>


HTMLを軽くするためには、アイコン類を使うこともないですが、
参考として下さい。

無料で使えるアイコンがネット上には沢山有りますので、
気に入った物を取得して使って見てもいいでしょう。

独自のアイコンを手元に置きたい方は
シリーズを参照にしてアイコンやファビコンを作ってみて下さい。






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

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



2010年01月19日

リンクの基本(中級1)

■ 5-16 ブログにリンクを張る(1)


link(リンク)の意味は ⇒ 「繋ぐ、絆、輪」を意味し、
ブログやホームページ内に埋め込まれ、他の記事(文書)や画像、あるいは他の人のブログなどと繋ぐHTMLの特徴的な機能の一つです。

その「link機能」を使うことをリンクを張るといい、
Webサイトでは、リンクをマウスでクリックすると、関連先にジャンプするようになっています。

リンクの形式はwebだけではなく
日本語入力ソフトや表計算ソフトでの関連付けの機能として使われています。

Seesaaブログでのリンク指定は、左から12番目、鎖形のアイコンをクリックです。
ki-ic01.jpg
                                 ueya.gif

アイコンのタグは
 <a href="http://… url…>〜</a>
の形式になっています。

リンクタグの

【<a href=" ">】

<a>

<href>
  「h」
  「ref」
<" ">
⇒  anchor(アンカー)「錨、最終走者」を意。
    ウェブページにリンクを作ります。

⇒  hyper(ハイパー)の省略。「超越して、過度の」
⇒  reference(レファレンス)は「参照・参考」
⇒  「" "」内にリンク先のurl記入



<a>タグには
<href>属性にurl・ファイル名を記述することで、リンクを張る機能が働き、属性で指定したリンク先にジャンプする仕組みです。

指定するファイル名は、
大文字、小文字そして拡張子を含めて「完全に一致」させる必要があります。

馴染みのあるリンクには
■内部リンク   ■外部リンク
がありますね。

リンクの使い方には色々な方法がありますが、比較的に使用されている「外部リンク」の仕組みは、詳しいと思いますので「内部リンク」について確認しましょう。

    注
   ● リンクの方法の確認ですので
    相互リンク、バックリンクなどの説明は省きます。


■ 内部リンク種類と仕組み

ブログの同一ページ内へのリンクや、他のページへのリンクを内部リンクといいますね。
 
内部リンクには

●「同一ページ内の特定の項目」にジャンプ。
●「同じブログ内の他のページ」へリンク。
●「同じブログ内の他のページの特定の項目」


にリンクする方法があります。

【図1】
   「同一ページ」             「他のページ」
 hyo05.png
 ↑ 画像をクリック・元画像が開きます。

「図1」は内部リンクのサンプル図です。

図内の@〜Cの仕組みを確認します。

リンクを使うメニューの形には

「最近の記事一覧」なども一般的に使われていますが
その一覧は過去記事を含めた「記事のタイトル」がメインになっています。

記事の中に書いている項目(章・見出し)を案内するメニューにして
記事トップで内容を知らせるナビゲーションも有りますね。


下記の【資料】は
記事トップに用いる章立て(目次)のサンプルです。

実際に、この記事の中でリンクの構造を確認するために
章立てした項目の見出しの箇所にジャンプします。


クリックして行き先を確認してみましょう。

【資料】
目次サンプル
※この記事の章(項目)にリンクしていますのでジャンプします。

 @同一記事内の「特定の項目へのリンク」
 A他のページへのリンク
 B他のページの「特定項目」への直接リンク

各項目にジャンプしましたね。

書籍や雑誌類では、記事の内容をページを順に進めて読んでいきます。

また読者が読みやすいように章や項目分けをして、
筋立てするのが一般的です。

同じことがWebのブログにも言えますね。

ブログの記事内に上記のような「項目メニュー」があれば
書籍や雑誌の目次と同じ働きをして、訪問した方は読みたい記事をすぐ探せます。

Webでは、リンクを使って情報を提供する仕組みがあり、
ブログにおける「カテゴリー」や「最近の記事」もその一種です。

ブログは、新しく更新した記事がメインとなり、
過去記事が重要な内容の情報を含んでいても
トップページからは消えてしまう点があります。

その為、訪問した方はトップページだけに目を通して
帰ってしまうことが非常に多いです。

重要な情報を提供しているページは
トップページだけではありませんね。

多くの情報を提供していることを、訪問した方に明確に伝えるために、
リンクで情報を提供する仕組みにすることは重要なことです。

ページが長い文章で構成されているときは
なおさらリンク機能を生かすべきだと考えています。

リンクの基本は内部リンクも外部リンクも同じ考え方です。


@ 同一記事内の「特定の項目へのリンク」

内部リンクのひとつ
同一記事内の「特定の項目へのリンク」を確認していきます。

【図2】
 同一ページ内の特定項目へジャンプ
link-kom01.png
  ↑ クリック・元画像が開きます。

参考図2のように
メニューから各項目にジャンプさせるのもリンクの一つですね。

記事内項目へのリンクは他のページ出ることなく
同一記事内でのリンクになりますので「リンクの形式」が異なります。

■ リンク先(ジャンプ先)の「項目」につけるタグ

ページ内の特定の位置に移動するには

(1)特定の項目にアンカー名を付ける(リンク先:受け入れ先)
(2)その特定項目にジャンプするようにリンクを張る(リンク元)

の設定が必要です。

▲ 特定項目にリンク先(受け入れ先)であることを示す
アンカー名を付けます。

アンカー名は<a>要素に

「name」属性で指定します。

タグは
<a name="アンカー名">リンクさせる項目名</a>

<a name>の形式で「項目名」を括る(囲む)形式です。

アンカー名は自由に付けて構いませんが、
リンクと同様に使える文字は、半角英数と一部の記号類で
漢字は使えません。

名前が重複しないように、
分かり易い判別のしやすいアンカー名がいいでしょう。


▲ リンク元(リンクを張る箇所)に付けるタグ

リンク元(ここでは記事のトップに置いた目次)には

記事内の「アンカー名」が付いた箇所にジャンプするようにリンクを張ります。
「アンカー」名でリンクすることに気をつけましょう。

<a href="#ジャンプ先の特定項目のアンカー名">目次項目</a>
の形で括る形式です。

一般のリンクと異なるところは
アンカー名の頭に「」が付きます。

この「#」を付け忘れるとリンクになりません。


【記入例】
●リンク元には
ジャンプ先がアンカー名で記入されていることを示す「#アンカー名」
(#が付きます)

  【例】ジャンプする先のアンカー名を仮に「komoku-b」としての
    記入形式は
    <a href="#komoku-b">ジャンプ先の項目名</a>

●ジャンプする(リンク)先の項目には
<a>タグの「name」属性で受け入れる「アンカー名」であることを設定します。

  【例】アンカー名を「komoku-b」
    <a name="komoku-b">ジャンプを受ける項目名</a>
   (#は付きません)で受け入れます。

    注
   ⇒リンク先とリンク元の項目名は同じ名前です。
   ⇒リンク元(リンクを張る項目)には「#」が付きます。
   
   ⇒ 【図2】を参照


実際に使用して気づく点は
●リンク元もリンク先も、<a>要素形式のため、両方ともリンク表示の薄水色の文字色になっています。

●リンク先はリンクを表す文字の色になっていますが、リンクタグとしては働かないので、クリックは出来ません。

リンク先の
文字色を変化させないようにするには、CSSの「class」での定義になります。
CSSの説明のときに確認します。


 ●リンク先の「 name 属性」(アンカー名)の付け方
 ●リンク元の<a href=" #アンカー名 "> 〜 </a>の形式を覚えましょう。

    注
   ●ジャンプした項目から、記事のトップに戻すため
    その章の末尾に「記事のトップへ戻る」と表記して
    戻るリンクを設定することも出来ます。

   ●リンク形式は
    <a href="http:// ブログurl /article/記事番号.html">
    記事のアドレスを記入して、トップに戻します。

    ※詳しくは次回の「リンクの基本(中級2)」で確認します。


A他のページへのリンク

他のページへのリンクは、頻繁に使用されている形式ですね。
使っていないブログを見つけるのが難しいくらいです。

おもにブログ内の記事同士を繋ぐ方法で、形は外部リンクと同じ「絶対指定」です。

数多くの記事の中の特定のページ(記事)へのリンクになりますで、
ページ番号(ページアドレス)が付加されることが特徴的です。

事例として、
このブログの他のページにリンクを張ってみます。

   「使用例」

        ↑
      ※該当ページにジャンプするようにリンクを設定しています。
      ※article/133954766.html が記事番号(アドレス)ですね。

タグは
 <a href="http:// ブログurl /article/記事番号.html" target="_blank">タグの仕組みと基本形</a>

の形式ですね。
 
●article(アーティクル)は「記事、論文、品物」と言う意味。

●/article/記事番号.html 

の記事番号はこの Seesaaブログの記事番号でプラウザのアドレスバーに表示されます。

記事番号の付け方は、
各ブログサービスによって異なっているようですので
使用しているブログサービスの記事番号の附加に準じてください。

この形式で指定されたページにジャンプします。

<target="_blank">は
前述したジャンプ先を「別窓」で開くの意味ですね。  


B他のページの「特定項目」への直接リンク

このリンクの方法は
他のページのトップにリンクするのではなく

「他のページの特定の場所にリンク」する方法です。

形式は

「他のページへのリンク」
「記事内の特定の項目へのリンク」

の二つを組み合わせて使います。

●「他のページへのリンク」のタグ形式 
<a href="http://ブログurl/article/記事番号.html" target="_blank">〜</a>
 
  +

●「同一記事内の特定の項目へのリンク」のタグ形式
<a href="#アンカー名">〜</a>

  ↓


<a href="http://ブログurl
/article/記事番号.html#アンカー名"
target="_blank">〜</a>


/article/記事番号.html#アンカー名
の間には「スペース」や「/」記号などは入れません。
空白無しでの連続記入になります。

他のページであっても該当項目には

@ 同一記事内の「特定の項目へのリンク」と同じように「アンカー名」を付ける必要があります。

さらに、他のページへのジャンプですから、別窓で開く「 target="_blank"」のタグを記入しておき、リンク元のページに戻れるようにします。


「使用例」
このブログの過去記事のページ

●記事欄アイコン「表示位置指定」(画像と文章)の中の特定項目
「画像は左揃え・文章は画像の右(余白有り)」

にジャンプするリンクを作ってみます。
 
<a href="http://tosiji-dreamafi.seesaa.net/article/136498096.html#hi03"
target="_blank">画像は左揃え・文章は画像の右(余白有り)</a>

他の記事の特定項目へのリンク例

  参照 ⇒ 画像と文章を組み合わせる
       項目名 → ●画像は左揃え・文章は画像の右(余白有り)


「該当するページ」の「特定の該当した項目」に直接ジャンプしますね。

    注
   ●内部リンクの項目へのリンク
    リンク先が「項目」だけに限られるのでなく、「段落」や文章の中の
    特定の「文字や語句」あるいは「画像」にも使用できます。

   ●キーワードマッチ(アフィリエイト)でも、外部リンクと共に
    よく使用されています。

……

リンクは数多くあったほうがいいとは言い切れません。
数多くのリンクを張って、逆に迷路になることもありえます。

「アクセスアップの為に」
「SEO対策の為に」

内部リンクを充実させよう。

とよく耳にしますが
アクセスアップやSEOは二次的なもので、

内部リンクの充実は
訪問した方のことを考え、使いやすさに配慮したブログを作り上げること目的にしています。

コンセプトが明確であり、内容も充実して利用しやすい。
「また訪問したい」
という気持ちにさせるブログが、アクセスアップやSEOの対策にも繋がります。

……

●この例では、HTMLとCSSでの内部リンクの形式を確認するのが主な目的ですので
参照画像では説明上、該当ページと他のページの2ページのリンク例にしています。

●参照画像から、全てのページを数多くのリンクで繋いだ方がいいと捉えられる恐れがありますが
「リンクの数は多ければいい」
ということではないですね。

●自身のブログの命題にそった「道筋を示すリンク」をどのように設定するかを考えましょう。


次回は「戻る」リンクを確認します。




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

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


画像類の無断使用を禁止します。必要であれば、確認了承を得る手続きが必要です。

2010年01月13日

色(color)を使う

■ 5-15 カラーイメージを確立しよう


ウェブの世界には、企業や個人のホームページ、ブログが溢れています。

それらの中で、
ビジョン(テーマ)をもって作り上げられたブログやホームページを閲覧していると、
発信している管理者のしっかりとしたコンセプトが感じられて、内容にも信頼感を持ちます。

企業はCI(コーポレートアイデンティティー)に沿ったイメージを確立して、ロゴ、制服、CMなどに統一した戦略を展開しています。
色使いも一つのビジョンであり、コーポレートカラーとして経営戦略の一部を構成しています。

  ※現在ではCIの理念を強化して「ブランディング」と表現をしています。

ホームページやブログの世界でも
背景、テキスト、見出しなど、独自のビジョンに沿った色使いを、どのように生かしていくかがポイントになります。

ブログを「目立たせる」には全体の色合いのバランスも重要ですが、

●文字を大きくする。
●文字に色を乗せる。

ことも、サイトの構成には無くてはならない手法です。

訪問者を記事へ導き、読ませる手法の一つが文字使いや色使いです。

カラーの使い方は、書体の使い方とも連動するもので
文字の大きさに「適度」があるように、色にも「適度」は有ります。

色使いを誤ると
ターゲットユーザーにとっては、読みにくい、馴染まないという結果になってしまいます。

文字で強調する、色で強調する
ブログやホームページのテーマに沿って基準値を決めておくことも、大切なことです。



Seesaaブログでのカラー指定のタグは、左から11番目のアイコンのクリックですね。
ki-ic01.jpg
                             ueya.gif

ブログでは
記事入力時にHTMLの各要素で文字の書体、大きさ、太さ、文字色などを変更しなければ、CSSのセレクタの定義が反映されますね。

記事を入力している時
文章の一部、あるいは文字や語句の色や大きさを変えて強調したい、修飾してアピール度を高めたいと思うことがあります。

HTMLタグで部分的に文字色を変更して、修飾を設定する方法を確認します。

タグの使い方は、文字サイズの変更と同じ方法です。


を確認しておきましょう。

coai01.jpg アイコンをクリックすると

color02.jpg

カラーチャートが表示されます。
このカラーチャートは色指定用としてのセーフカラーの色見本ですね。

カラーにはwwwに準拠した「基本16色」と「セーフカラー216色」が有り、プラウザやOSの異なる環境でも同じ色で表示されるようになっています。

PCやネット、TVでも表現可能なRGBカラーは、その組み合わせによって「1600万色余」の色合いを表現できますが
緻密な細かい色指定をしても、ユーザー環境の違いで表示される度合いは変化します。




●印刷物や広告の制作では「色を多用(乱用)しない」

の原則が有ります。

目立たせようと多くの色を使ってしまうと、肝心なポイントが、逆に目立たない結果になります。

この原則からみると
文字に使用するカラーは、表示されているセーフカラーの色で十分だと言えます。


■ 文字・語句・文章の色指定。

【例1】

文字色・下地色

@ 三国志は歴史を背景
A 三国志は歴史を背景
B 三国志は歴史を背景


@は頻繁に使用される文字の色乗せですね。

単純に色文字にしたい時は、指定したい文字や語句をドラッグして範囲を指定します。

範囲をドラッグすると、下記のように反転した表示になりますね。

【ドラッグ範囲の反転表示】
テキスト

反転させたまま、
入力アイコンのカラーチャートから使用する色を選択してクリック。

仮に赤色 = <#FF0000> を選択すると
  
表記されるHTMLタグは
<span style="color:#FF0000;">テキスト</span>
の形式になっています。
 ↓
「表示」
テキスト
赤色の文字で表示されますね。

このHTMLは
<span style>」の要素名で括った形です。

<span>はとくに意味を持っていませんが
<span>〜</span>で括った範囲の要素にCSSを適用するのに用います。
     ※<span>要素  ← このページ下段を参照

他のHTMLの形<font>タグを使用して表示する方法もあります。

    注)
   ●<font>タグは、現在では使用を推奨しないタグになっています。
   ●CSSを適用する<span>タグの使用が推奨されています。

文字に色を乗せる属性は<color>のみの表記になります。
<font-color>の形は取りません。

形式は
<span style="color:#FF0000;">テキスト</span>
の形を取ります。

属性の<color>は、文字に色を適用することを表し、属性値の<#FF0000>はカラーコード(番号)で、文字に乗せる色を指定しています。

カラーコード<#FF0000>は「赤」を表示しますが
「red、blue」のような「カラー名称」での指定でも構いません。

文字色は比較的、楽に指定できるため、多用する傾向にありますが、一定のコンセプトの中で使うことが望まれます。

コンテンツ毎に文字色が変わったら、色の異なる文字が何のためなのかユーザーは戸惑ってしまいます。

色を使うメリットとデメリットを十分に考え、色の多用は避けるようにすべきです。


■ 文字のバックに色を使う。

A 三国志は歴史を背景

文字のバック(下地)に色を使っています。
seesaaブログのアイコンには
文字のバックに色を使用するタグは用意されていませんので、HTMLの直接入力になります。

HTMLは
<span style="background-color:#dddddd;">テキスト</span>

文字のバックに色を乗せる属性の「background-color」を指定しています。色(属性値)は、この例では<#dddddd>(薄ねずみ色)を指定しています。

例のHTMLには、文字の色が指定されていませんね。
文字色<color>の指定が無ければ、CSS定義のデフォルトの色で表示されます。

デフォルトは「黒」色です。

多くのブログで見かける色を使った強調ですね。

バックに色を乗せる範囲(文字の上下左右の範囲)は
使用文字の大きさ分ですので、基準書体「12px」の文字幅でバックが表示されます。


B 三国志は歴史を背景

は@とAを組み合わせた方法です。
タグの形は
<span style="background-color:カラーコード;color:カラーコード;">テキスト</span>

<background-color>=「バックの色」と
<color>=「文字の色」を同時に指定しています。
   (注:<font-color>の使い方はしない。colorのみ)

バックの色と文字の色が、お互いに干渉しないような配色を考えて指定することが重要ですね。

文字や語句に色を使う強調の方法では、上記の@〜Bまでの使い方が多いようです。

 
■ 文字列(行)や段落を色で強調する。

【例2】

文字列・段落のバックカラー(1)

三国志は歴史を背景とした「歴史小説」ではあるが、今でも圧倒的な人気をほこり、最近では「レッドクリフ」の大作映画も公開された、根強い人気の歴史ドラマである。

【例3】

文字列・段落のバックカラー(2)

三国志は歴史を背景とした「歴史小説」ではあるが、今でも圧倒的な人気をほこり、最近では「レッドクリフ」の大作映画も公開された、根強い人気の歴史ドラマである。


文字の色乗せのHTMLは、前述したとおりです。
「例2」「例3」は文字列、あるいは「段落」を強調する方法です。

「例2」では、文字列のバック(下地)にカラーを
<span>要素
で表示しています。

複数行や段落に
<span>要素での指定は、間違った使い方ですが
<span>と<div>要素の違いを確認するための使用例として表示しています。

HTMLタグは「style」指定です。
span style="background-color:カラーコード;">テキスト</span

Aの文字の下地にカラーを使うと同じ形式ですが、
複数の文字列に<span style>を適用しているため、行と行の間(行間)には色が乗っていません。

<span>はインライン要素のため、段落では使用しません。
結果的には表示されますが、構文的には間違った使い方ですので薦める方法ではありません。

しかし見た目では面白い強調ですね。

学生時代に教科書の重要箇所を覚えるために、マーカーで文字に色を太く塗った感じです。

この方法を使うのは若い人に多いように思えますが、バックの色が文字を邪魔しないような配色で指定することが重要です。

「例3」は<div style>で指定しています。

この形式は
div style="background-color:カラーコード;">テキスト</div

文章の「段落」全体の指定になっていますので、複数の文字列をカバーしています。
<div >要素は「ブロック要素」であり、文章の段落にCSSを適応するときに使用します。

●文字、語句、文章の一部には<span style>
段落では<div style>を使うことを覚えましょう。


ブロック要素とインライン要素は
使っているうちに理解できてきますので、当初は間違っていても試して結果をみましょう。

    注)
   ●HTMLの構文上では明確に使い分ける必要があります。
   ●このブログでも、HTMLやCSSは、体系に基づいて正しく使っている
    とは言えません。
   ●一歩でも正確な使い方に近づくようにしましょう。

【例4】

バックカラーの幅の設定

三国志は歴史を背景とした「歴史小説」ではあるが、今でも圧倒的な人気をほこり、最近では「レッドクリフ」の大作映画も公開された、根強い人気の歴史ドラマである。


「例4」は「例3」と同じ段落強調です。

「例3」では段落の上下左右ぎりぎりにバックカラーが表示されているため、文章に狭苦しさを感じます。

文章の下地の色の表示域を、段落(行列)の幅より大きく表示するため、一定のスペース
(ここでは使用文字の半分の6px)

<div style="padding:6px;background-color:#・・・・;">

を「padding」を使って、元のHTML構文に追加して、同じ色を記事(テキスト)の外側に下地として乗せています。
二重構文になっていますが、レイアウト上では「例3」より下地が広がり、見やすくなっています。

「例3」に比べて
バックカラーはゆとりある表示になっていますね。

スペースや範囲を指定するタグには
「margin」「padding」が有りますが、それぞれ用途が違います。

参照 
■ marginとpadding・その応用(1)~(3)

■(1)=枠内に余白を空ける。
http://tosiji-dreamafi.seesaa.net/article/151906476.html

■(2)=余白の考え方
http://tosiji-dreamafi.seesaa.net/article/151906476.html

■(3)=文字や文章の表示位置
http://tosiji-dreamafi.seesaa.net/article/152597959.html


テーブル作成やファレーム作成のとき
この両方のタグの使い方を覚えていた方が、見栄えのいい、形のいいテーブルやフレームが作成できます。

上記の参照ページを確認して見ましょう。

ブログやホームページの読みやすさを考えるとき
重要なものは背景に使用している色と文字の色、
つまり「明度」の差です。


「明度」とは色の明るさをいい、
色の明るい方を「明度が高い」暗い方を「明度が低い」と表現します。

明度の低い色を使った背景に
同じように明度の低い黒色のような文字を使うと、判別がし難く読みにくいことになります。

また逆に明度の高い淡い色に
白のようなさらに明度の高い色を使った文字も読みにくいですね。

明度の高い背景(下地)には、明度の低い文字色を、
明度の低い背景には、明度の高い文字色を

使用するようにしましょう。

色には
「明度」のほかに、
「彩度」= 色の鮮やかさの度合い
「色相」= 色の移り変わり
があり、お互いに相関的な働きをします。




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

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



2010年01月10日

文字サイズの変更

■ 5-14 文字の大小で記事にメリハリを


年末から年始にかけて、新聞にチラシ類が平日の倍以上折り込まれています。

それぞれのチラシは、
ターゲットとするユーザーやコンセプトによって、商品画像のトリミング、アイキャッチャーなどの配置を考えたレイアウトをもとに制作されいます。

フォントも使い分け
商品とターゲット層に、よりアピールできるように「文字の種類」「表示する大きさ」を決め、上手くレイアウトに取り込んでいます。

紙媒体では
使用出来る書体も豊富で、発行する媒体に合致するように揃えていて、覚えきれないくらい有ります。
あまりにも多すぎるので、どの書体を使って表現するかデザイナーの才覚が問われます。

しかし、ブログやホームページのサイトでは、
書体がwwwやプラウザに準拠していなくてはならないという問題が有ります。

ネット上での書体の種類は、紙媒体に比べれば極めて少ないものですが
少ないなりに、その使い方さえしっかり捉えておけば、ひけを取らないくらいの文字の配列が可能になります。

ネットで使える明朝体やゴシック体などの書体の比較、使い方については下記参照で確認下さい。



Seesaaブログで使用している、ゴシック系の「Verdana」を基準にして
文字サイズの変更を確認しましょう。

Seesaaブログでの文字サイズ変更用のアイコンは、左から9と10番目ですね。
ki-ic01.jpg
                        ueya.gif  ueya.gif

言うまでも無いことですが、
ブログでの使用文字の書体や大きさは、CSSのセレクタ定義項目の一つですね。

定義項目の一つであるため、
個別記事の書体もサイズも、全てCSSの定義を書き換えないと使えないのではと思いがちですが、

CSSはブログ全体(body、記事、サイドなど)の設計図であり

記事の一部の文字やサイズの変更など「部分的な調整」は、
HTMLタグを使用して行うことが基本になっています。

■ 文字サイズを記事入力用アイコンで指定する

【例1】

アイコン使用での文字の大きさ

@ 明けましておめでとうございます。(基準)

A 明けまして、おめでとうございます。
B 明けまして、おめでとうございます。



記事のCSS定義を確認します。


【記事のCSS】
.text{
font-family:Verdana;
font-size:12px;
line-height:1.5em;
padding:・・・・;
}

⇒セレクタ
⇒文字種類:Verdana(ゴシック系)
⇒文字の大きさ:12px
⇒行の高さ(行送り):文字の1.5倍
⇒表示位置
⇒セレクタ閉め



利爺のこのブログの仕様を定義しているCSSの、記事関係での基準書体と文字の大きさです。
書体、文字、送りなどのサイズは、この基準に沿って表示されます。

「例1」の@は
CSSに沿った基準書体の表示で
ゴシック系の文字「Verdana」を、12pxの大きさで表示しています。

「例1」のAは入力用アイコン
kaku01.jpg
を使って、表示を大きくしたものです。


タグの形式を確認してみると
<span style="font-size:large;">テキスト</span>
文字サイズは「large」で指定されます。

BもAと同じように、小さい文字入力用のアイコン
syuku01.jpg
で、サイズを変更したものです。


タグ形式は
<span style="font-size:x-small;">テキスト</span>
文字サイズは「x-small」で指定されます。

このように、
記事入力用のアイコンを使っての文字のサイズ変更には

●文字を大きくするのは「large」
●文字を小さくするのに「x-small」


の2種類のHTMLタグが用意されています。

文字のサイズを指定するタグ(属性値)には

【資料】

サイズを指定する属性値(簡易形)

xx-small
x-small
small
medium
large
x-large
xx-large 

⇒ すごく小さい
⇒ 小さい
⇒ やや小さい
⇒ 普通
⇒ やや大きい
⇒ 大きい
⇒ すごく大きい


など、サイズ別のタグが有り、簡便に使えるようになっています。

アイコンには「large」と「x-small」の2種類しか設定されていないので、属性値を直接書き換えて使用する方法が簡便です。

アイコン指定した、これらのタグを使うと

●表示される文字が思ったより大き過ぎる
●表示文字のほんの少しだけ、小さい方が見栄えがいいのでは
●文字の大小でブログのバランスを取りたい。
●思うどおりの文字サイズにしたい。

など、気になることがありますね。

■ 文字の大きさを数値で指定する

【例2】

文字サイズの数値指定

C 明けまして、おめでとうございます。
D 明けまして、おめでとうございます。
E 明けまして、おめでとうございます。


上記「例2」のC〜Eは、全て同じ文字の大きさでの表示ですが、
使用しているHTMLタグは

C<span style="font-size:large;">テキスト</span>
D<span style="font-size:18px;">テキスト</span>
E<span style="font-size:1.5em;">テキスト</span>

の形式です。

Cは前述の「例1」で確認した「large」を使い

DEは比較のため
そのlargeと同じ大きさの文字を表示させるように、別の属性値に変えています。
  
【絶対サイズ】での指定



DのHTMLタグは
<span style="font-size:18px;">テキスト</span>

文字サイズは「18px」での指定です。

「px」や「pt(ポイント)」などで指定するのは絶対サイズでの指定ですね。
「px」は 1px単位で文字の指定が可能なので、文字を思うどおりの大きさに指定できる利点があります。

「絶対指定」は文字バランスを取るときには、使い勝手のいいタグですが、

過去から、何ページかにわたる記事を書き上げていて、
●新たにブログ全体の基本文字サイズをCSSに定義し直して変更した時に、

●CSSに新たに定義した文字とのバランスを考え
ページ毎にサイズを変更しなければならないという事態も生じます。

そのような絶対サイズでの指定に対して

【相対サイズ】での指定

Eの<span style="font-size:1.5em;">テキスト</span>

の属性値「em」は相対サイズの指定で、
基準とした文字サイズが変更されると、過去記事も含めて相対サイズで定義されている文字の大きさも自動的に変更されて表示されます。

「em」は = emphasis(エンファスイス)

のことで「強調」という意味があります。

<em>要素で囲まれた文章を強調するときに使用していますが
<span style="font-size:1.5em;">テキスト</span>
のような時には「倍率」を表します。

参照 
強調タグ<em><i>
●<em>要素<i>要素について、実例をもとに確認
http://tosiji-dreamafi.seesaa.net/article/134766203.html


「1em 」が等倍を表します。
例Eでは「1.5em」ですから、基準書体の1.5倍表示になります。

基本文字のサイズを忘れていたり、
CSSを確認するのが煩わしければ、相対サイズ指定のほうが楽です。

相対サイズでの定義は、絶対サイズとは異なり、
CSSの基本文字サイズの定義を途中で変更した時でも、

相対的なサイズが反映されますので
過去記事の文字サイズを変更する必要もない、安心した使い方が出来ます。

例Eのタグ「1.5em」の表示文字のサイズは
このブログの基準サイズが12pxですので、pxの単位で見ると
 
 12px  ×  1.5em = 18px

になりますね。

結果的には、Dの
<span style="font-size:18px;">テキスト</span>
とは同じ文字の大きさになります。

このように「em」での表示は、基準使用フォントの em 倍のサイズで表記されます。

文字の拡大には 1.2em、1.4em のように数字を大きくして
縮小では0.9em、0.8emと数字を小さくする使い方ですね。

同じ使い方の属性値に
<span style="font-size:150%;">テキスト</span>
「%」を使う値も有ります。

使い方は「em」と同じですので、どれを使っても同じ結果になります。

………

文字の大小の使用は、基本形をしっかり取得して、見栄えのいい比率でうまく使うことが
しっかりしたブログの構成に結びつきます。

単に文字を大きくしたり、小さくしたりするだけではなく

●「文中の見出し項目」には1.5倍の大きさ
●「中見出し項目」には1.2倍を
●「参照記事」は少し小さく0.9倍

などと書体・大きさ・種類など、自分なりの基本を決めておき
統一した「割付」を意識して組上げてることが重要です。

ランダムに、適当に、文字のサイズを変更することは、
ブログの見栄えやレイアウトを悪くすることになりますので注意すべきことです。

書籍類や新聞などは、明確にしっかりとその基本が守られています。

同じように、ブログもしっかりと【CSSに定義】していますね。




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

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



2010年01月02日

画像を加工・圧縮して上手に使う

■ 5-13 画像をうまく使う基本


●ネット上の数多くのサイトは、画像を使って構成しているのが大方ですね。

●画像の使い方が上手なサイトや、少し工夫したら、素晴らしいレイアウトになるのにと思うブログ、
またページが重たく、表示するまでの時間がかかるサイトもあります。

訪問した方に、画像を上手く使って、興味を持続させることも大切ですが
データを軽くして、表示するまでの時間を短くすることも重要な課題です。

■サイトで使用する画像容量を軽くすることの意義。

現在は光ケーブルやADSLなど通信環境が整って、大容量のデータも瞬時に送れる時代ですが、そのような時代でもブログやホームページなどのサイトの課題はデータを軽くすることが重要な案件となっています。

ブログの容量を大きく使うのは、記事より画像類ですので、
その画像の使い方が「ブログの良し悪し」を決めると言っても良いでしょう。

データを軽くすることは

●ブログサービスにアップロードする画像類が軽いため、多くの画像を保存することが可能。
●データが軽いためサイトのビジュアル化のための画像が十分に使える。
●画像を多く使ったサイトでも、データが軽い分読み込みの速度が速い。
●訪問した方(ユーザー)にとっても、快適なウエブ操作になる。

が基本的で一般的な考え方です。


このブログでは加工・修正用として
画像ソフト(グラフィックソフト)としてadobeの「Photoshop」(フォトショップ)を使用しています。
「Photoshop」は画像処理に特化し、デザイン会社や印刷業界では無くてはならない業務上での、必要なソフトの一つです。

最近ではこのソフトに匹敵するくらい、機能が充実した「無料で使える」ソフトが数多くあります。

ブログやホームページで使う画像は
それら無料ソフトで十分に対応が出来ますので、手元にない方は取得して手持ちにして下さい。



■圧縮ファイルを作り、ブログで使用するまでの具体的な流れ
  
●画像の説明で分かりやすいように、使う用語を決めておきます。


【用語】

親画像  
子画像  
圧縮画像
横サイズ

保存形式






= デジカメやスキャニングで取り込んだ原画。
= 親画像をトリミングした画像(圧縮なし)。
= 子画像を圧縮形式で保存した画像。
= このブログは横700pxの3カラムの設定です。
   記事表示領域幅は横400px。 
= 写真類の保存を得意としたjpeg形式。
  イラスト類のgif形式がありますが、
  写真画像ですのでjpeg形式を使います。
 

次の順番で確認していきましょう。

@画像加工用ソフトの立ち上げ。
 ↓
A使用する親画像を読み込む。
 ↓
Bブログに掲載する理想的なトリミングを行う。


【例1:無加工の親画像】
oya001.jpg

デジカメ画像やスキャニングした画像をPCに取り込み、その中から
ブログで使用する「親画像」を専用ソフトに読み込みます。

どの大きさの画像を使うかは、レイアウトによって決めますが、
毎回異なったサイズで表示することは、基本レイアウトを崩してしまいますので、
使用サイズには一定の基準を設けておきましょう。


画像の必要な部分を切り取り
読者に注目させるように加工して、画像を作り上げることを「トリミング」と言いますね。

トリミングを行い、使用する画像を作成します。

【例2:トリミングした子画像】
moto-a.jpg

【子画像の容量】
motoga01.jpg

【子画像の画素数】           【jpeg圧縮】
motopx02.jpgasyuku01.JPG

Cトリミングした画像を、jpeg形式で圧縮する。
  ↓
D親画像や子画像とは「別名」で保存する。

この例での「子画像」は、切り取り後の画素数が(1000×339px)になっています。

一旦、その子画像を「jpeg」高圧縮(1〜2)をして
親画像や子画像とは「別のファイル名」で保存します。

「Photoshop」の圧縮率は

1,2
3,4,5
6,7   
8,9,10
 
= 低画質(高圧縮率)
= 標準
= 高画質
= 最高画質(低圧縮率)

の10段階から選択できます。ほかのソフトも同じだと思います。

jpegの圧縮保存は、
「不可逆圧縮方式」
の保存になっていますので、圧縮化した画像は元に戻せません。

作成や使用に失敗したとき、別の目的で親画像を再び使用する場合があります。
その保守のため親画像や子画像は残しておきます。

子画像や圧縮画像は、全て上書き保存をしないで別のファイル名で保存します。

それだけは必ず守って下さい。

圧縮画像の実例を確認しましょう。

【例3:圧縮した画像】
chen-a.jpg

【圧縮した画像の容量】
chen-apr.JPG

「例2」の圧縮前の子画像は1.04MB(1,096,500バイト)

「例3」の圧縮後のサイズは1.75KB(20,480バイト)

圧縮画像は
子画像の「 0.019(1.9%) 」に減っています。
 
この様に、
一般的には、圧縮前の画像の2〜10%位の容量に減ります。

子画像を1枚使うデータ容量分で、
圧縮した画像を50枚くらい使えるということですね。

圧縮して使うということはブログサービスの「Seesaaブログ」の

●保存画像容量として認めている「100MB」内に十分に画像類がアップロードでき、使用できる。
●データが軽い分、ページの読み込みが速い。

という利点があります。

しかし、そのような利点の逆方向には

●「密で細かな」表示は出来ないという欠点があります。

圧縮とは
上下左右から画像を押し潰すのではなく
画像を構成している画素(px)を圧縮の比率で抜いて、軽くすることです。

画素を抜かれてスカスカになった画像は、
抜く前の画素密度の濃い画像に比べたら、データ容量は軽くなりますが、画像そのものの切れ(シャープ)や色味の鮮やかさが失われます。

 ●画像を軽くしたら、画質が悪くなり、
    画質を上げれば、データが重くなる。


ネットやPCでの画像を取り扱う時の相反する問題点です。


子画像と圧縮画像を比較してみます。

左が子画像、右がjpeg 圧縮画像です。

【例4:子画像】          【例5:圧縮画像】
motoa01.jpgchena01.jpg

子画像(例4)が、
「花びら」の色味や「おしべ」などの明暗を細かく表示しているのに対して

圧縮画像(例5)は
全体的にぼやけた表示になっています。

芸術作品・画像を中心としたブログでなければ
例のような圧縮画像は、気にするほどに劣化している画像ではないと思いますので
アフィリエイトの商品案内やブログのポイント画像には十分に対応できます。

この「例5」の画像は、最高圧縮率(圧縮率1)で作成していますので、
もう少し明瞭にそしてシャープに表示したい場合には

圧縮率を変えた画像にして使用します。


Eブログサービスのサーバーにアップロード。

圧縮した画像を
ブログサービスのサーバーにアップロードです。



F記事の中に画像url(imgタグ)を貼り付ける。

画像のurl(imgタグ)を記事欄に貼り込みます。

更新する毎に、表示する画像のサイズが異なると、統一性に欠けたレイアウトなってしまいます。
ブログのページ、ブログの全体的なレイアウトを考えた、自分なりの基準サイズを設け見栄えを高める工夫をしましょう。

該当する画像のurl(imgタグ)をクリックで入力します。

仮にアップロードした画像が
「横サイズ 500px × 縦サイズ 400px」
の画像でしたら

<img src="http://…画像url… width="500" height="400" border="0" />

のようなHTMLの形式になりますね。

前述したように
この利爺のブログでの記事表示枠の「横幅は400px」ですので
画像サイズの500pxは大きくて記事枠からはみ出しますね。

「横幅400px」の記事表示枠一杯の画像をフルに使うとしても

アップロードした画像を

 「アップロード画像」 ⇒  横500px × 縦400px 
    ↓
 「ブログ・表示画像」 ⇒  横400px × 縦「?」px 

の横400pxのサイズに変更する必要があります。

縦「?」pxの大きさは

「横500px」から「横400px」に縮小する比率(縮小率)が分かれば
相似形の縮小ですから簡単に計算できますね。


画像相似形の計算
  @横サイズ相似比率  400 /(割る)500=0.8
   ⇒ 表示サイズ400pxは、画像サイズ500pxの80%(0.8)
 
  Aこの相似比率で 
   縦のサイズ「?」を計算します。

   ⇒ 縦の400px ×(かける)80%=320px

    ?=320px


この数字を、画像表示の< img >タグに

<img src="http://…画像url… width="400" height="320" border="0" />

入力して img タグ修正します。

ブログには 横400px 縦320px の画像が表示されます。

    注
   ●説明のため横幅「400px」一杯の画像にしていますが、
    一般的にブログの記事表示幅は左右の内側に半角または
    全角(1文字)分くらいの余白が出来るように設定され
    ています。
   
   ●左右から1文字くらいの余白が取れる大きさで、表示する
    画像の大きさを計算したほうが表示した時の見栄えもいい
    でしょう。表示エラーにもなりません。
    ■ 横400px → 388px位

   ●フルサイズあるいは表示域を超えるサイズで表示した時
    ブログの横サイドが下段に追い出される「カラム落ち」の
    原因になる恐れもありますので注意しましょう。


上記した画像のサイズ確認では
「縮小サイズ」しか確認していませんが「拡大」も同じ方法ですね。

しかし、小さいサイズから大きいサイズにしてしまうと

画素の理屈どおり
ボケてしまいますので、画像の使い方としては「間違った使い方」になります。


画像の理想的な使い方としては

●アップロードする画像は表示するサイズより大きく。
●表示する時に縮小して用いる。


が基本になります。

大きいサイズと言っても、モニター一杯の大きいサイズの画像をアップロードすることは無いでしょう。
大きくて表示サイズの1.5〜2倍のサイズですね。




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

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



>
×

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