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




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


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

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

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


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

2009年10月31日

metaタグdescription(1)

■ 4-29 metaタグdescriptionの修正

HTMLの「meta」タグは、文字コードなどホームページやブログのページの構成に関わる設定を行います。
「meta」に書かれた情報を指定して、プラウザや検索エンジンに知らせるタグになり、<head> 〜 </head>の中に記入されます。

<meta>タグの中の<description>はサーチエンジンが検索するとき
ブログ(サイト)の説明文として検索される部分です。

  description  ⇒  「記述」「説明」の意味。

ブログ説明文は
SEO対策のひとつとして、検索エンジンに拾われ、さらに検索上位のページに表示させることを目的に
重要なキーワードを使用して文章を作成しますね。

一般的に<meta>タグの<description>は、下記の形式で組み立てられています。


<meta name="description" content="<% blog.description | nl2br | tag_strip %>" />


  
重要キーワードを用いて作成したブログ説明文も
更新を重ねるうちに、記事内容とそぐわなくなってくることが多々あります。

上記の<description>の形式ですと
記事の内容を更新し続けても<description>はブログの説明文に固定されてしまいます。

検索エンジンがチェックするのは
常に同じ「ブログ説明文」の内容からと言うことになります。

日記や個人的なブログですと
タイトルと説明文の検索とその結果の表示だけで十分ですが、

物販などのアフィリエイト用のブログは、
商品を取り上げ、商品名(記事タイトル)や紹介記事を書いたページを数多く作ります。

取り上げた商品の名前や紹介記事の内容は全て異なりますね。

アフィリエイトブログで、
とくに重要なのは「記事のタイトル」です。

「記事タイトル」はエントリーした記事の内容を要約した「見出し」ですので、
「ブログタイトル」や「ブログ説明文」よりも重要なキーワードになります。

検索エンジンに
「ブログ説明文」だけではなく「記事タイトル」や「ブログタイトル」がともにチェック(検索)される組み方が理想的な「metaタグのdescription」の形式と言えます。

記事は頻繁に更新します。

yahooやgoogleの検索結果で表示されても、記事のタイトルや内容が表示されていなければ、
訪問する方は少ないと言ってもいいでしょう。

そのため、主要となる記事を掲載したメインのブログに
「商品別の新しいブログ」を数多くのサブブログ(サテライト)として作成し、メインブログにリンクさせる手法も有ります。

サブブログは商品の紹介をするひとつのブログですので、商品名、商品説明が、<meta>タグの<description>に記入されることになり、新しい商品用ブログとしての独立した機能を持っていますね。

そのブログが「メインのブログ」にリンクしているので、商品紹介の幅が広がると同時に、メインのブログはリンクの数が増える「SEO」対策になることが重要です。

SEOの「リンク」対策の考え方のひとつです。


今回は、サブ(サテライト)ブログやリンクの考え方とは別の方法

メインブログ(このブログ)の「metaタグのdescription」を修正することで、表示される「ブログ説明」を新しい記事の内容に即した形に変更してみましょう。


HTMLを開きます。

左上段のメニューから
 デザイン  ⇒  HTML(使用しているHTML)
で開きますね。

メタタグは <head> 〜 </head> 構文の中に有りますね。

【HTML@】修正前
HTML

<head>

<!-- descriptionの修正前  -->

<meta name="description" content="<% blog.description | nl2br | tag_strip %>" />

<meta name="keywords" ……>

</head>


【HTMLA】修正後
HTML

<head>

<!-- descriptionの修正  -->

<meta name="description" content="<% if:extra_title %><% extra_title %><% /if %><% blog.description | nl2br | tag_strip %>-<% blog.title %>">

<meta name="keywords" ……>

</head>


HTML修正前の青文字
<meta name="description" …>を

下段・修正後HTMLの
赤文字ようにタグを追加入力します。

タグの
●<% extra_title %> は
⇒ 記事タイトルを

●<% if:extra_title %> 〜 <% /if %>
⇒ トップページ以外のページを開いた時の記事のタイトル。

●<% blog.title %> 
⇒ブログタイトル

を表します。

追加入力後、スペルなどの間違いなどが無いかをチェックして「保存」します。

「保存HTML名」は、現在使用している名前にしてもいいのですが
保存の失敗や元のHTMLに戻すことを考え、新しい名前にした方がいいでしょう。

HTMLが反映されているかどうかは

●ブログを表示して

  マウスの右クリック(プルダウンメニュー) ⇒
  ページのソースを表示

●または、プラウザ(IE)のメニューの
  表示  ⇒  ページのソース

からも開けます

「ソース」を開いて確認します。

【このぶろぐのソース画像】
meta01.bmp
 ↑ 画像をクリック・元画像が開きます。

赤色の罫で囲んだ部分<description>の内容
<meta name="description" content="metaタグdescriptionの修正……>
と表示されていますね。

この箇所が記事のタイトルです。
ここでは省略していますが、記事タイトルの後ろには、ブログの説明文、ブログのタイトルと続きます。

表示する順番を変更していますので

@記事のタイトル
Aブログ説明文
Bブログタイトル

の順に並んでいます。ブログを検索して拾ってもらう順番です。

常に新しい記事のタイトルは重要です。
記事のタイトルだけで、書いている記事の内容が分かりますね。

<meta>タグの<description>の修正は
●検索結果が上位表示されている「ブログ」でしたら
あえて修正しないくてもいいでしょう。


検索エンジンのアルゴリズムが、常に変化しているため、SEO的に効果があるかどうかは検証していませんが、試してみてもいい<description>の形だと思います。




▲カスタマイズの関連記事 【別窓での表示です】
   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年10月21日

セレクタ「h」要素(2)

■ 4-28 セレクタh要素の組換え(1)


ブログでのhセレクタでは
 h1 = ブログタイトル
 h2 = 記事タイトル
定義されているのが一般的です。

このブログが利用している「seesaaブログ」では
 h1 = ブログタイトル
 h2 = 日付
 h3 = 記事タイトル
の順になっています。

「h」要素は「見出し」タグといい
検索エンジンはh1、h2、h3 … の順に、重要な文章・語句・文字と判断して検索しますので

このブログの形式では、h3の「記事のタイトル」より、h2の「日付」が重要です。
と言っているようなものです。

その結果が
前回の記事で疑問視した、検索結果の概要の頭に「日付が表示」されていたことですね。

参照 
セレクタ「h」要素(1)
●セレクタh要素の組換え(1)
http://tosiji-dreamafi.seesaa.net/article/130296935.html


一般の「日記」ブログでは、表示されている日付を見て「最近の記事」だということで、訪問して来るという利点もありますが、

日付は「物販」などのブログではあまり重要ではなく、むしろ表示されない方がいい場合が多いです。 

 h1 = ブログタイトル
 h2 = 日付
 h3 = 記事タイトル

の順で、重要度に応じた「h」タグに修正をした方が検索結果も良好です。

とくに
「記事のタイトル」は内容を要約した見出しですので、タイトルだけでどのような内容か分かりますし、日付より重要な位置づけになりますね。

ホームページやブログは

HTMLとCSS

HTML
CSS


⇒構 造
⇒見栄え

のように、分担していることを以前にお話しました。


 
さらにHTMLの構造を会社組織に当てはめてみれば

HTMLとCSS

HTML
コンテンツの配置
コンテンツ記事HTML
CSS


⇒管理局
⇒総務部・人事部
⇒編集部
⇒制作局

のように、会社における部署のような階層(ツリー)構造的な処理方法になっています。

管理局がブログ全体の組織を掌握し、総務・人事部が部署単位の配置を行い

編集部で書き上げられた記事は、

制作局で、表題ロゴ(ブログタイトル)、記事のタイトル、使用する画像の貼り込み、リンクなどが組み込まれ体裁を整えてから発行(発信)されます。

しかし、制作局も自由気ままに組版をしている訳ではなく
基本のマニュアルに基づいたレイアウトの中に、データ(記事類)を流し込み
ページとして完成します。

それが、基本マニュアルに沿った
「HTML」「各コンテンツHTML」「CSS」の分担(分業)の役割です。


このブログの例から見ると、管理局(HTML)が基本マニュアルの中で
「h2」は日付だと決定しているため、

編集部(記事コンテンツHTML)
製作局(CSS)
も「h2」を「日付」として取り扱っています。

その形式が他のブログサービスとは異なる点です。


お互いに連携している
「HTML」「記事」「CSS」のタグや定義を確認して修正します。

修正する箇所は
下記の「HTML」「記事コンテンツHTML」「CSS」の3カ所です。

【HTML】
@ HTML


<div class="blog">
<h2 class="date"><% article.createstamp | date_format("%Y年%m月%d日") %></h2>

<div class="blogbody">
<h3 class="title"><a href="<% article.page_url %>"
class="title"><% article.subject %></a></h3>

</div></div>


【記事コンテンツHTML】
A 記事HTML

<% if:with_date %>
<h2 class="date"><% article.createstamp | date_format("%Y年%m月%d日") %></h2><% /if %>

<div class="blogbody">
<h3 class="title"><a href="<% article.page_url %>" class="title"><% article.subject %></a></h3>

</div>


【CSS】
B CSS

h2 {
font-weight:bolder;
font-size:12px;

}

h3 {        
font-size:18px;
font-weight:bolder;
font-family:Verdana;

}
h3 a{
text-decoration: none;

}


@ HTMLの修正

HTMLには
右上段のメニューから
 デザイン  ⇒  HTML と進みますね。 

@ のHTMLが
<div class="blog">
<h2 class="date">  …  </h2>  

<div class="blogbody">
<h3 class="title">  …  </h3>

と規定していますので、検索エンジンの重要度に対応するため

「h2」を → 「h3」に
<h3 class="date"> … </h3>

「h3」を → 「h2」に
<h2 class="title"> … </h2>

と順番の規定「h」の2,3の番号を変更するだけです。


A 記事コンテンツHTMLの修正

「記事コンテンツHTMLの編集」には、同じ右上段のメニューから

 ⇒コンテンツ  ⇒  記事(コンテンツボックス)をクリック 
 ⇒右上の「記事コンテンツHTMLの編集」

に入ります。

大元の「HTML」と「記事コンテンツHTML」は、同じ構造形ですので
修正箇所は同じ箇所になります。

h2、h3を修正します。


B CSSの修正(再定義)

CSSもHTMLと整合性があるように変更します。

右上段のメニューの中の

  デザイン  ⇒  デザイン設定   ⇒  下段の「テンプレート名」 
 
でCSSに入ります。

CSSの中の
●「h2」セレクタ(日付を定義)を 「h3」に書き換え
●タイトルを定義しているセレクタ「h3」・「h3 a」 を 「h2」・「h2 a」に書き換えます。

各セレクタの中の、プロパティや値は変更する必要はありません。

CSSを変更しないでそのまま使用しますと、ブログのデザインが
崩れてしまうことがありますので、忘れずに修正してください。

以上の3カ所を修正しましたが、
位置づけ(規定)の変更だけですので、ブログの見た目は変わりません。

検索エンジンの対策(SEO)として、変更しておくこともいいでしょう。

しかし
検索結果が、常に上位表示されている「ブログ」でしたら、あえて修正しない、今のままの方がいいことがあります。

検索エンジンのアルゴリズムは常に変化しているようです。

googleでは良くてもyahooでは悪いという結果もあります。

仮に
今まで上位表示されていたブログが、検索結果にも掛からないというような時には、修正してみることも考えましょう。




▲カスタマイズの関連記事 【別窓での表示です】
   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年10月15日

セレクタ「h」要素(1)

■ 4-28 セレクタh要素の組換え(1)

googleの検索結果で、SEO対策の考え方やそれに伴うCSSのセレクタ「h」要素
の参考になるデータがあります。

データを確認しながら、
seesaaブログのhtml、CSSセレクタ「h」要素について考えてみましょう。


【画像1】
kensaku-gog01.jpg
 ↑ 画像をクリック・元画像が開きます。

「画像1」はごく最近、プラウザのgoogleが
検索した結果を表示したページです。

画像上部の青丸で囲んだ@Aが、検索のとき入力された検索ワードで、
そのワードを持つ数多くのサイトの中から一致するブログを選択しています。

ページのトップに利爺のこのブログ名が表示されています。

何故
1ページ目のトップに表示されているのか、SEOの得意な方はすぐ分かりますね。


@ の「アフィリエイト」と言う検索ワードが

●このブログのタイトル 「利爺とゆったりアフィリエイト」 
の「アフィリエイト」に一致していること。

「アフィリエイト」のワードを使用してブログ名にしているサイトは、ネット上に数多くあります。

ひとつ検索ワードが一致しただけでは、トップに表示はされませんね。

つぎに
A の検索ワードの「ページのレイアウト」が
投稿した記事のタイトル「ページのレイアウト
と完全に一致しています。

アフィリエイトとページのレイアウト

重要なことは、この二つの検索ワードは
ブログ名」とブログを構成する「記事のタイトル」と完全一致したという結果です。

結果、検索の1ページ目の、さらにトップに表示されています。

検索に使用した、二つの検索ワードが、ブログの説明文や記事の中の語句だけではなく
検索エンジンが最も調べやすい

「ブログのタイトル」と「記事のタイトル」

が一致した結果ですね。

仮に検索した方が、上記の検索ワード以外に、あと1ワードでも追加して検索していたら、結果は異なっていたでしょう。

同じ検索の結果でもgoogleではトップ表示ですが、yahooは何頁目なのか分かりません。

きっと番外でしょう。

SEO対策は難しい問題です。

今回のように
ブログのタイトルと記事のタイトルが、検索に使用したワードと完全に一致する形は稀と言っていいのです。

特異に近い検索表示です。

検索エンジンで完全一致の形を確認してみたい方は、利用しているプラウザに、あなた自身の「ブログ名」を検索ワードにして検索してみてください。

1ページ目のトップに表示されますね。

それが完全一致の形です。

しかし
普通は「ブログ名」で検索されることはないですね。

何故なら、何十万、何百万のサイトの見知らぬ世界の中で
友人や特定の知人、身近な人以外の、付き合いの無い方が
ブログ名を知っていることは有り得ません。

ほぼゼロに近いといって言っていいでしょう。

ブログを書き始めの頃は
自分の「ブログ名」を検索ワードにして、上位に表示される結果を見て、喜んだ経験が有ると思います。

同時に、同じページ内に
自分の「ブログ名」に近い、他のブログがピックアップされているのを、
似たタイトルを付けた、ブログも有るのだと思ったことでしょう。

SEOではこの点が重要になります。

このように
ブログタイトルや記事のタイトルは検索エンジンにとっても重要な検索項目です。


●検索結果に日付が表示される。

「画像1」の赤線で囲んだブログ説明文の頭、青丸で囲まれた文字に日付が確認できますね。

ほかに抽出されたブログには表示されていませんね。

なぜこのブログ「利爺の…」の検索結果には、日付が表示されているのでしよう。

過去記事でも確認したように

「ブログの日付を消す」
「コンテンツ最近の日付を消す」



の段階で
日付表示をしないように、コンテンツHTMLを編集し直しましたが、
検索では日付が表示されています。

次回は
seesaaブログでの日付の位置に係わる、「h要素」を確認して見ます。




▲カスタマイズの関連記事 【別窓での表示です】
   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年10月07日

ファビコン画像の表示

■ 4-27 ファビコン画像の使用

ファビコン画像を作り上げましたので、HTMLにリンクurlを追加して
画像を表示する方法を確認します。

画像を表示するには、ブログに画像をアップロードする必要がありますね。

画像のアップロードは、今まで何度も確認していますので、方法は分かりますね。

いまいちよく理解できていないという方は「seesaaブログ」のヘルプで確認しておきましょう。



アップロード後、保存した画像のサムネイルをクリックすると
記事入力欄に下記のようにurlが表示されます。

<"Http://  画像url   /image/favicon.ico">

注)HTMLを記入する時は <>、Hは小文字で表記します。


青文字の

<"Http://  画像url  /image/favicon.ico">

が保存場所と画像ファイル名で、独自で作ったファビコン画像をブログサービスのサーバーに保存している場所です。

利用しているブログサービスによって
画像保存場所が異なることも有り得ますが、基本的には同じ形式ですね。

そのurlをコピーしておきましょう。

ファビコン表示のサンプルとして、このブログの例を見ていきます。

【画像1】
ico-fav01.jpg
↑ 画像をクリック・元画像が開きます。

●「ブログのタイトル」の前
●「ブログURL」の頭

の2箇所にファビコンが表示されていますね。

ファビコンを表示するには、HTMLの

<head>  ……  </head>

のhead要素の中に、linkを記述してファビコンを呼び出します。

ファビコンの画像表示のための<link画像ファイル名>を追加する箇所は
各々の「コンテンツHTML」ではなく

ブログ全体を管理する「HTML」になります。

HTMLには、右端上段のメニュー

「デザイン」 ⇒ 「HTML」 ⇒ 「デフォルトHTML」

から入りますね。


HTMLにファビコン画像を追加

HTMLを開きます。


HTML

<head>
<meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS" />

@

<!-- ファビコン追加 091006 -->

<link rel="shortcut icon" href="Http://  ・・・ 画像のurl ・・・ /image/favicon.ico" />

<!--  ここまで -->

<title><% blog.title %><% if:extra_title %>: <% extra_title %><% /if %></title>
<meta name="description" content="<% blog.description | nl2br | tag_strip %>" />
<meta name="keywords" content="<% blog.keywords | oneline | tag_strip | __or__ | blog.title | oneline | remove_emoji | tag_strip %> <% extra_keywords | oneline | tag_strip %>" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<link rel="stylesheet" href="<% css.page_url(page) %>"type="text/css" />
<link rel="alternate" href="<% blog.page_url %>index.rdf" type="application/rss+xml" title="RSS" />

A

<% if:blog.has_foaf -%>
<link rel="meta" type="application/rdf+xml" title="FOAF" href="<% blog.page_url %>foaf.rdf" />
<% /if -%>
</head>

注)使用するときは<>、Hは半角文字表記です。


青文字のHTMLが追加したリンクです。

追加は箇所は <head>  ……  </head> 内の

@ Aのどの箇所であってもいいですが、今回は追加箇所が分かり易いように @ の箇所にしています。

追加したHTML

link rel="shortcut icon" href="Http://  ・・・ 画像のurl ・・・  /image/favicon.ico"

の詳細は

● 赤色文字で記入している
link rel="shortcut icon"
は、リンクの参照先を。

● 青色の文字
href="Http://  ・・・ 画像のurl ・・・ /
は、画像の保存場所。

● 緑色で表示している
image/favicon.ico"
は、画像のファイル名です。

「リンクの参照先」「画像の保存場所」「画像のファイル名」3つの構文に分けて考えます。


追加したHTMLは
ファビコン画像を「絶対番地」で指定して呼び出しています。

タグの入力に間違いがないかチェックしてHTMLの「保存」です。


● HTMLの編集後の保存の注意点

ファビコン画像を表示するためのHTMLを追加していますので
もとのHTML名「デフォルトHTML」でそのまま保存してしまうと、書き込みに失敗したときに元に戻せないと言うような問題が発生する場合があります。

新しいHTMLの名前
例えば「デフォルトHTML2」のような別の名前でなるべく保存しましょう。

新しい名で保存が出来るということは、
HTMLは非常に重要ですので、書き込みに失敗したような時に、元(デフォルト)のHTMLに戻れるように配慮されています。

保存したあとは
追加したHTMLを「適用」する必要があります。

デザイン ⇒  HTML に戻って

「新しく名前を付けたHTML」の右側にある
「適応」のラジオボタンをクリックして、保存したHTMLを使えるようにします。

以上がファビコン画像用のHTMLの追加です。

ファビコンを初めて設置した直後は
すぐには表示されない場合がありますので、しばらく時間を待って確認してみてください。

表示されていなければ、ブックマークに自分のブログ登録してみたり、リロードやインターネットキャッシュの削除を試みてください。

この例では「IE」と「Firefox」の両プロバイダでは、サンプル画像のようにうまく表示されています。

ファビコン表示の特質として
yahooやgoogleはファビコンを見ただけでもサイトが分かりますね。

独自のファビコンが表示されれば
ほかの多くのサイトの中でも、ブログの存在をアピールできます。

おおいに活用しましょう。

………
【備考】

HTMLにファビコン画像を追加したとき使用した

<!--  ファビコン追加  091006 -->

のタグ形式は

<!--   -->
で囲まれた部分(範囲)がコメント、いわゆるメモを意味します。
 
複雑なHTMLの中に、
今回のように追加や修正を加えたとき、時間が経つとその内容や修正した箇所を忘れてしまう時がでてきます。

その対策として、コメントやメモを記入しておくことを薦めます。

さらに、HTMLやCSSで修正や定義をし直した時、古いHTMLを削除して新しいHTMLを書き込むのではなく、重要と思われる箇所には

● 一行メモの例

<head>

<!-- ファビコン追加 091006 -->
<link rel="shortcut icon" href="Http://kinkin-taka.up.seesaa.net/image/favicon.ico" />

</head>



● 構文全体をコメント化した例(削除しないで残しておく)

<head>

<!--
<link rel="shortcut icon" href="Http://kinkin-taka.up.seesaa.net/image/favicon.ico" />
-->

</head>

の使い方が有りますので、コメント・メモ化して残しておく方が安全です。

ソフト開発でのプログラミングの時によく使われる手法です。




▲カスタマイズの関連記事 【別窓での表示です】
   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年10月05日

ファビコン画像を作る

■ 4-26 ファビコンの作製と使用

ファビコンは最近多くのサイトでよく目にする画像です。

ファビコン(Favicon)とは

ウェブ上のサイトやページに関連づけられたアイコンのことで
Favorite icon(フェイバリット・アイコン)を略したものです。

【画像1】
ico-fav01.jpg
 ↑ 画像をクリック・元画像が開きます。

    注)
   ●利爺の一連のブログは、ファビコンとして独自で作った
   「亀」をイメージ化して使用しています。

「画像1」の赤丸で囲んだ小さい画像のように
「ブログのタイトル」の前や「URL」の頭に表示されている画像をファビコンと言います。

プラウザの
「お気に入り(IE)」「ブックマーク(Firefox)」などのメニューでよく目にする画像ですね。

ファビコンの語源から見ても、
画像的にもアイコンとの違いはほとんど有りませんが、

独自のファビコンを表示することによって、

●検索した方や読者にイメージ化された画像を意識させ
 注意を引きやすくする。
●ブログの独自性を強調し、他のサイトと差別化をはかる。

ことによく利用さています。

あし@などの、プロフィールイメージ画像などとは少し目的が異なりますね。


●ファビコン画像の作成

製作の流れは「彩彩畑」の「アイコンを作る」方法の続きになります。

前回はアイコンとして「 16 × 16ドット(px) 」の画像を作りましたね。

●ファビコンも基本的に「 16 × 16ドット 」の画像です。

Firefoxなどのプラウザでは、画像の拡張子が「GIF、JPEG」 などであってもファビコンとして機能しますが、IEでは拡張子を基本的には「ico」にする必要があります。


● このブログのイメージキャラの「亀」ファビコンを作ってみましょう。
使用するソフトは「彩彩畑」です。

作成から表示までの手順は

● アイコン(32 × 32ドット)を作成する
● そのアイコンをファビコン(16 × 16ドット)に変換する
● ブログHTMLの指定箇所に表示するタグを挿入(追加)する。

の流れです。



アイコン作成ソフトを立ち上げます。

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

上段のメニューからツールを選択すると、プルダウンになりますね。

プルダウンメニューの「アイコン」をクリックして、作成の画面を表示します。

 ツール ⇒ アイコン ⇒ アイコン作成画面 ⇒ 描画  

の順です。

「画像2」
がアイコン作成の画面です。使用する箇所に、赤文字で番号を振っています。

@ がアイコンを作る描画域の範囲

A は作成するアイコンの大きさの選択。

 32ドット と 16 ドットの2種から選択できますが
 16ドットの小さいアイコンだと細かい表示が出来ないので
 32ドットで描画します。

B はアイコンに使用する色のカラーチャートですね。

 このチャートの中で気に入った色がなければ
 E の「その他の色」をクリックして選択して使用します。

C はアイコンのバック(下地)を透過色(透明色)にする時に選択します。

 ブログなどWEBに使用する画像は、四角の輪郭ですがバックを透明に
 することで、見かけ上は切り取りしたような輪郭の画像の表示が可能と
 なります。

 ●描画の初期値は「透過色」が設定(塗られて)されています。

D は「反転」と「対称」

 「反転」は描く画像の位置を左右、逆にする時に使用。

 「対称」は左右対称の意味ですね。
 左に描いたアイコンを右にも対称として同じように描くときに使用します。

 ●このブログの「亀」も左右対称で描いています。

 最初は左(右)からドットを塗って、アイコンの片側を作り、完成させた後
 「対象」で右(左)に同じものを表示して、立体感を出すため同色系の濃い
 色に変更しています。

E は B を参照

F アイコン完成後の「保存」と「保存」形式です。

 形式は、拡張子が「ICO・GIF・CUR」の3種から選べます。

 gif形式は
 最大256色(8ビット)までを扱うことができる画像の圧縮形式です。
 アイコン、ロゴ、イラスト リンクのボタンなど、単色で作成される扁平な
 画像に向いていて、透過色が使えます。


透過色を使用するので「gif」形式で保存します。

完成したアイコン画像を確認します。

【画像3】
@バックに透過を使用。        Aバックに色を付ける
faga08.gif

● 画像は分かりやすいように「72 × 72ドット」で表示していますが、   実際のサイズは「16 × 16ドット」のアイコンです。


@ のアイコンはバック(下地)に透過色を使用していますので、ブログ内の貼り込み位置の背景色がバックの色として溶け込んだ表示になりますね。

A のアイコンは、四角い画像として作成するために、最初からバックに色を使用しています。


ファビコン画像のファイル名と拡張子は
「favicon.ico」
にする必要がありますね。

このアイコン作成ソフトでは、ファビコンが作れませんので、ファビコンに変換するサービスを提供しているサイトを利用します。

    ⇒ サイト名 favicon.iocを作ろう
    ⇒ サイト名 favicon japan

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

無料でアイコン画像をファビコン画像に変換して作成するサイトです。

ファビコン変換用の入力窓に、画像のファイル名を入力します。

手順は
「参照」 ⇒ 「製作する画像の元ファイル」 ⇒ 「favicon.ico作成」

の流れです。

ファビコン画像に変換されますと、「ダウンロードボタン」が表示されますので
PC内の指定のフォルダにダウンロードして「保存」します。

保存されたファビコンのファイル名は
「favicon.ico」
になっていますね。

ファイルを開いて確認します。

【画像5】

faga08.gif


「 16 × 16 」ドットのファビコンが製作されていますね。

このブログの基本書体の大きさは「12px」に定義されていますので、使用文字より大きいサイズでは有りますが、すごく小さい画像になっています。

このファビコン画像を

●ブログのURL
●ブログのタイトル名
●お気に入り(ブックマーク)

と同時に表示する画像として使います。


次回は「ファビコン画像の表示」について確認します。




▲カスタマイズの関連記事 【別窓での表示です】
   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年以上新しい記事の投稿がないブログに表示されております。