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




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


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

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

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


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

2009年11月21日

カスタマイズの基本はHTML(2)

■ 4-32 カスタマイズの基本的考え方(2)

HTMLは

Hyper Text Markup Language

と呼ばれるWebページを表示する内容を記述するマークアップ言語です。

タグを使用してマークアップをするため
ソフト開発でよく知られているC言語などのプログラム言語とは異なります。

同じHTMLにも、他にXML、XHTMLなどが有ります。

その中で、最もよく使用されているのがWWW(World Wide Web)の
基盤の1つであるHTMLです。

現状はインターネット(ブラウザ)上で表示することを目的としているため、
ブラウザに大きく依存している部分があります。

プラウザによって表示動作が違うときがありますね。

HTMLの当初の目的は、論理構造を記述するための言語として開発されたものであり、ブログやホームページの体裁(見え方)を表現すること目的としたものではないので、文字などの装飾、デザイン関係を掌握するために、HTMLとは別の言語、CSS(スタイルシート)が策定されています。

それが、HTMLとCSSの関係です。


●HTMLはタグを用いた「マークアップ」
●CSSは「セレクタ」を用いた記述が

メインになっていますから、

全体の論理構造さえ理解できれば、

●自分なりのカスタマイズも比較的簡単に出来るようになります。

●ブログの構造と異なったホームページの作成や
ブログとホームページを連結したサイトを持つことも可能です。


個人的には、
いままで進めてきたカスタマイズをスムーズに行うためには、
HTMLとCSSを理解することが一番の早道だと考えています。

さらに、カスタマイズをする目的と、
アフィリエイトを目指したブログの発信とは
表裏一体の関係に有ると思っています。




発信しているブログが

○整理されている。
○最新の情報や為になる情報が常に掲載されている。
○認知度を高める手を打っている。
○SEOなどでアクセスアップを図る手を打っている。
○アクセスアップを目的にカスタマイズをしている。
    ↓
○信頼度が高まり読者や訪問者が増える。
○信頼度の高いアフィリエイト商品を紹介している。
    ↓
★アフィリエイトが生きている。



と言うことになりますね。

  参照 ⇒ カスタマイズの考え方


何故そうするのか!
何故そうしたのか!

常に「ブログを発信する目的」を意識して、
アクセスアップやカスタマイズに挑戦して下さい。


次回から
比較的ブログで使用する簡単なHTMLについて
を纏めていきます。

カスタマイズ項目の追加、あるいは修正などは、
補遺で発信します。

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


2009年11月19日

カスタマイズの基本はHTML(1)

■ 4-31 カスタマイズの基本的考え方(1)


第4章の記事(1-30)で
シーサー(seesaa)ブログのカスタマイズの方法を、大まかに確認しました。

カスタマイズをするとき
比較的簡単にな時と
複雑でHTMLタグの組み合わせが難しいい方法もありました。

難しいと思われたカスタマイズでも、回を重ねるごとに
HTMLの全体的な構造形が理解できるようになると、思ったほど難解ではなくなってきています。

過去記事の中では
HTML・コンテンツHTML・CSS
の語句が何度も出てきています。

HTMLには
「HTML」「コンテンツHTML」の区分けがあり、、最初はその区分けが捉えにくく
ことさらHTMLは難しいと思った方もいるでしょう。

もともとは、その両者は区分けする必要はないのですが、区分けする利点を確認します。

さらにHTMLを装飾する「CSS」がある。

ブログ(サイト)でのHTML(コンテンツHTML含む)とCSSの関係は

HTML(構 造)
CSS(見栄え)

⇒ ウェブの内容を作成する
⇒ HTMLを修飾する


の形で作業を分担しています。

HTMLとCSSの関係は何度か確認していますので、両者のお互いの立場は、十分に把握していると思います。

その関係の中で、骨格を形成するHTMLは
ブログの構成から、各コンテンツに係る動作を管理していますね。


●HTMLと各コンテンツHTMLの関係

HTMLと各コンテンツHTMLの繋がりは、理解し難い面があります。

とくにHTMLを学び始めのころは
両者は、どのような仕組みなのか悩むことが多いのではと思っています。

HTMLと各コンテンツHTMLは
別個に分かれて存在しているのではなく

●HTMLは
Webページの根幹を構成し

●使用するHTMLのVer(バージョン)
●W3Cに準拠。
●CSSの使用。
●XHTMLとの互換。
●シフトJISコードの使用。
●ブログの形式。
●ブログのタイトル。
●ブログの説明。

など、
ブログの骨組みを構築する重要な役割を持っています。

一方、
記事コンテンツ、カテゴリコンテンツなどの各コンテンツ

例えば【記事コンテンツHTML】では、

●記事の掌握
●記事のタイトル
●記事のアーカイブ
●ヘッターやフッター
●コメントやトラックバック

などの
記事ページに関することに関わっています。


HTMLも各コンテンツHTMLも同じHTMLだから、別に分けなくても良いのではと思いがちです。

もともとHTMLは
論理構造を記述するためのもので、マークアップした数多くのタグを管理しているため、
各コンテンツのHTMLも一括に包括してしまうと、ブログの仕組み(HTML)を複雑にしてしまうことになります。

そのために、各コンテンツHTMLと区分け分担して、

いま、必要なコンテンツを

呼び出し、その分岐に沿ってブログの全体構造を軽くする意味合いを持っています。


そのツリー構造が「画像1」です。

【【画像1】
html-f.jpg



文字画像で見えにく
いですので、
クリックして拡大画像で確認下さい。








分担の仕組みのあるHTMLです。

かりにHTMLが、
記事や過去ログなどの各コンテンツを包括してマークアップしたのが100くらいの単位でしたら、分担することで処理する流れが50や60のような小さい流れになります。

今の処理に必要ないものは、
その流れから外してしまえば、処理(表示)速度が速くなると言うことですね。

それが分岐で分担です。

分岐や分担はプログラムソフトの基本です。

端的に分かりやすく言えば、
PCのデスクトップには、画像ソフトなど各種のショートカットアイコンが置かれています。

ブログ記事の作成など、普段の作業をしている時に、
PCの中で必要の無いその他の各種のソフトが稼動していることは無いですね。

必要の無い全てのプログラムソフトが
最初からメモリー上に読み込まれていて待機している状態でしたら
PCのメモリー容量(HDD容量とは別)が、常に飽和状態で、単純な処理にも時間がかかってしまいます。

悪くすればPCがクラッシュします。

ショートカットアイコンがクリックされて初めて、そのプログラムがメモリー上に読み込みされて、稼動するようになっていますね。

必要でない時に、
そのプログラムを読み込んでいることは無いです。

現在のPCでは当たり前の仕組みですね。
(昔はそのような仕組みは無かったのです)


HTMLと各コンテンツHTMLの関係も
同じような仕組みと考え方と言えます。





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

metaタグdescription(2)

■ 4-30 プラウザのタイトルバー表示方法の変更



●プラウザのタイトルバー・コマンド(タブ)バーの表示方法の組換え

前回は
metaタグのdescriptionを書き換えて、サーチエンジンに対して

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

のように、検索順番を変更しました。

その修正した箇所が

【資料】metaタグdescriptionの修正
HTML

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

<meta name="keywords" ……>

</head>

のHTML構文の変更です。

検索エンジンによる順位の変更に続いて

ブログを開いた時にアドレスやブログ名が表示される
●タイトルバー
●アドレスバー
●コマンドバー
の各バーに表示する順番の形を変更します。

HTMLを開きます。

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

ブログのタイトル用HTMLは

 〜 

の構文になりますね。

seesaaブログでの初期設定は、以下のようになっています。

HTML

<title><% blog.title %><% if:extra_title %><% extra_title ><% /if %></title>


<title> 〜 </title>   で囲まれた範囲のHTMLを修正します。

前回も確認しましたが、タイトルに係るHTML内の


<% blog.title %> 
<% extra_title %>

<% if:extra_title %>


⇒ブログタイトル
⇒記事のタイトル(カテゴリページでは  カテゴリのタイトル)
⇒〜 <% /if %>の範囲はトップペ  ージ以外の表示。


【注】▲ 印は、表示されるブログタイトルと記事タイトルの分かれ目がハッキリするように、記号類を使用しているだけです。
スペースやその他の記号「●」「★」なども使用することが可能です。

前回の「descriptionの修正」の時、確認したHTMLと同じ形式ですね。

descriptionの修正を行った方には、
<title> 〜 </title>部分の書き換えは、
それほど必要ではないと思いますが、

タグを組み替えると、
どのように表示されるか確認してみましょう。


タグの組み換え用サンプルブログとして
利爺の関連ブログを使用します。

 参照 ⇒ 日々是悪爺(若いつもりのシルバー世代)

【画像1】

blog-top01.JPG

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

画像1は
ソースのまま表示したブログのトップページです。

画像の丸印で囲んだトップバーと表示バーには
「ブログのタイトル」だけが表示されていますね。


ソースのままの表示だと

●トップページ
●個別ページ

●カテゴリのアーカイブ
●月別のアーカイブ

⇒ 日々是悪爺(若い…)
⇒ 日々是悪爺(若い…)仲間の笑顔(2009同期会)
⇒ 日々是悪爺(若い…)▲ガテゴリ
⇒ 日々是悪爺(若い…)▲○年○月

のように、常に「ブログタイトル」が頭に表示され、
「記事のタイトル」や「カテゴリ」などは、
「ブログタイトル」の後になります。


トップページには「ブログのタイトル」より
最新の「記事タイトル」を強調して表示しておきたい場合は、
HTMLのタグを入れ替えます。

HTMLを下記のように変更します。

記事タイトルを強調

【ソース】
<title><% blog.title %><% if:extra_title %>▲
<% extra_title ><% /if %></title>
   ↓
【組み換え】
<title><% if:extra_title %><% extra_title %>
<% /if %><% blog.title %></title>



●トップページ
●個別ページ

●カテゴリのアーカイブ
●月別のアーカイブ

⇒ 日々是悪爺(若い…)
⇒ 仲間の笑顔(2009同期会)日々是悪爺(若い…)
⇒ ガテゴリ▲日々是悪爺(若い…)
⇒ ○年○月」▲日々是悪爺(若い…)


組み換え後の表示は「画像2」の通りです。

【画像2】
blog-top02.JPG
 ↑ 画像をクリック・元画像が開きます。

「記事のタイトル」が頭に表示されていますね。

【注】▲ 印は、表示されるブログタイトルと記事タイトルの分かれ目がハッキリするように、記号類を使用しているだけです。
スペースやその他の記号「●」「★」なども使用することが可能です。

この表示形式を用いると、訪問した方が自分がチェックしている
記事のタイトルが分かり易いという利点があります。

ブログは分かりやすさが一番です。


組み換えで、トップページ以外の時に、
「記事のタイトル」だけをシンプルに表示する方法は


記事タイトルのみ表示

【ソース】
<title><% blog.title %><% if:extra_title %>▲<% extra_title ><% /if %></title>
   ↓
【組み換え】
<title><% if:extra_title %><% extra_title %><% else -%><% blog.title %><% /if %></title>

とします。

<% if:a %><% a %><% else -%><% b %><% /if %>は「if-else文」と言います。

「if-else文」は
 if a が a であれば(真) a を表記(aの条件と合致するなら)  
 if a が a でなければ(偽) b を表記(else=条件に合わないなら)  
 の意味です。

この「if-else文」はプログラムの処理方法の基本で

身近なものには「パチンコ」の「当たり」「はずれ」の判定方法にも使われています。

ここでは「 a 」を表記しなさいと言うことで、記事タイトルだけの表記になります。

しかし、トップページだけで他の記事ページのないブログでしたら、ブログタイトルだけが表示されますね。
(<% else -%>から後の処理です)




▲カスタマイズの関連記事 【別窓での表示です】
   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月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
……人気ブログランキング……



2009年09月28日

アイコンの作成(2)-アイコンの修正-

■ 4-25 作成したアイコン画像の修正

独自のアイコンを作りブログに設置してみたら

●思っていたものと少し異なる。
●色合いがイマイチだ。
●他の画像との配色のバランスが悪いなどと

思う点がありますね。

作り上げたアイコンを修正する方法を確認します。

アイコン作成用に使用しているソフトは、フリーソフトの彩彩畑ですね。

sai-list01b.jpg←画像をクリック・元画像が開きます。

ソフトを立ち上げ
基本画面の上段のメニューツールのプルダウンメニューから「アイコン」をクリックします。

または下段の右端にある「アイコン」ボタンをクリックします。


「画像1」のような、アイコン入力画面になりますね。

 ↓

【画像1】
aic-02.JPG←画像をクリック・元画像が開きます。

アイコン作成の画面は、縦 32 横 32 ドットの正方形の画面ですが、
メニュから
16 × 16サイズの入力画面に切り替えることもできます。

アイコンの大きさを「16 × 16」の小さいサイズでブログに表示する時でも
大き目のサイズ「32 × 32」で仕上げ、縮小したサイズで表示した方がスッキリした画像になりますので、大きめに作っておきましょう。

 ↓

【画像2】
syusei01.JPG←画像をクリック・元画像が開きます。

上段のホルダー形式のファイルアイコンをクリックして、前回、作成して保存しておいたアイコン画像を読み込みます。

保存しておいた画像は
アイコンのバックにも色を乗せていましたので、ブログの背景色とは相異なる色合いになってしまい、
見た目にもバランスの取れない配色になっていることが考えられます。

色合いの変更は
右側のカラーボックスから、気に入った色を選択してその色を指定して塗り替えます。

 ↓

【画像3】
syusei02.png←画像をクリック・元画像が開きます。

作成用の画面は
アイコン類を製作しやすいように、グラフ用紙のような網目状の四角形で表現していますが、実際には、仕上がった画像類は一個いっこの丸いドットになりますね。

色の選択は、
カラーボックスの該当する色をマウスでクリックして、入力するドットの位置で、再度クリックすれば、
そのドットに選択した色が入力されます。

●矢印の上の部分は少し薄目の色。
●矢印の下方は、濃い目の色。

にしてアイコンに修正を加えます。

同色系の色合いの強弱で、平面的な画像が立体的(3D)に見えます。

カラーボックスの上段に「ペン」ツールがありますので、使いやすいツールを使用して、指定カラーに塗りあげます。

●下地(バック)は透過色(画面の赤丸印)を指定して塗ります。

透過色は表現のとおり
透過していく色で、透明のセルロイドに色の付いた矢印アイコンを描いたのと同じ効果です。

何も描いていないセルロイドの部分は、その下にある色が透過して、矢印のバック色になります。

アイコンを貼り込む位置のブログの背景色が「赤」であれば、透過色を使っている部分は「赤」になる理屈です。

白い色を使っても透過色にはなりませんね。

バックに透過色を使うことで、アイコンを貼り込む位置のブログの背景色が下地に反映され、矢印だけのアイコンに見えます。


 ↓

【画像4】
syusei03.JPG←画像をクリック・元画像が開きます。

バックや矢印の色の変更は出来ましたね。
左上の窓に仕上がりの形状が表示されていますので、確認します。

OKでしたら左上のメニューから「保存」です。



【画像5】
バックに透過色を使用した例。

   new06.gif
 
透過色を使えば、画像の貼り込み先の背景色が、どのような色であろうと
透過して、アイコンのバックの色が表示されません。

例では矢印部分の色のみの表示になっていますね。

【画像6】
バックに色を指定した例。

   ai03.gif
 
アイコンの修正方法は画像作成の基本になりますので、覚えていてください。

慣れて理屈が分かれば、自分なりの「アイコン」を作成してブログの中で十分に生かせるようになります。


●独自のデザイン画像を、アイコン画像にする。

独自のデザイン画像や写真画像から、小さいアイコン画像を作るのもできます。

使用するサンプルは
このブログに設置している、ネーム画像ですが
「彩彩畑」の機能を使い、アイコンとファビコンに作り変えてみました。

製作の手順は、今まで確認した方法と同じです。

【画像7】
アイコンとファビコンのサンプル画像

@GIF画像           AICO画像       Bファビコン画像

tosiji02.jpgtosiji02.jpg




上記の「画像7」は
画像専用ソフトで作成した独自のデザイン画像(gif形式)を、フリーソフトの彩彩畑で「アイコン画像」と「ファビコン画像」に変更したものです。

元画の下色は青色系で仕上げていますが
透過色に指定し直したら、赤色の丸いロゴだけの表示になります。

アイコンのようなファイル名は、画像の大きさの違いでGIF画像(・・.gif)アイコン画像(・・.ico)ファビコン画像(favicon.ico)と区分けしているのではなく、使用する目的での保存形式が異なります。

●ファビコン画像は、必ず「 favicon.ico 」というファイル名と拡張子で保存します。

アイコンとファビコンは見た目が同じ大きさであっても
呼び名の違いと使用目的の違いが有りますので、次回以降で確認します。

アイコン類はネット上で無料で入手できますが、
このソフトでアイコン、ネームプレートなど、ブログで使う画像類が製作でき、ブログのデザインにマッチした独自の形を作る時に役に立ちます。

ダウンロードして手持ちのソフトにしても、損はありません。




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

アイコンの作成(1)-独自のアイコン-

■ 4-24 独自のアイコンを作成して使用する

アイコンとは
PCの画面で処理の内容や対象を小さな絵や記号で表現したものですね。

画面上のカーソルをアイコンにあわせ、クリックすることにより操作を行なう、デスクトップ上の小さい画像で、ファイルホルダーやショートカットの画像もその仲間に入りますね。

アイコンを使用することで、他のソフトプログラムなどを容易に起動して、操作できる特性があり
WindowsやMacなどのOSは操作がアイコンで行なえるように設計されています。

アイコンはネット上で無償で手に入れて使用できますが、
独自に簡単なアイコンを作って使用する方法を見ていきましょう。


●独自のアイコンの作成

フリーソフトを使って
アイコンやファビコンなどに類する画像の簡単な作り方を確認します。

過去記事でもフリーソフトの「彩彩畑」を紹介しましたが
使用していない方はダウンロードをして、用意しましょう。



  ⇒ 彩彩畑 ダウンロード頁

【画像】は「彩彩畑」のトップ画面です。

saitop-a.jpg

このソフトで「矢印」の形の画像を作ります。


【画像1】
sai-list01a.jpg←画像をクリック・元画像が開きます。

基本画面です。

基本画面の上段にはメニューが設置されています。
丸で印した「ツール」のプルダウンメニューから「リストマークの基本画像」
を選択します。

    ↓

【画像2】
sai-list02a.jpg←画像をクリック・元画像が開きます。

「リストマークの基本画像」です。

数多くの矢印の中から、赤丸で囲んだ太い矢印を選択します。

それが画像3になります。

    ↓

【画像3】
sai-list03a.jpg←画像をクリック・元画像が開きます。

矢印の種類の中から
赤丸で囲んだ太い矢印を選んでみます。

選んだ矢印が、D の箇所に表示されますね。

次に矢印の色を指定しましょう。


色は B のカラーボックスから選択します。
赤系を選んだら D には赤い矢印が表示されます。

同じようにバックの色を指定します。
透過カラーを使用していますので、ブログに使用しているバックの色に近い色で十分です。厳密な色でなくても大丈夫です。

指定したカラーがすべて D で確認できますね。

矢印の形状、色、バックの色、全体のバランスを確認しましょう。

確認したら「保存」をしておきます。


アイコンは
16 × 16、32 × 32px(ドット)の正方形が一般的ですが、
このソフトでは
6 × 6 のサイズから 36 × 36px のサイズまで指定できます。

表示するとき縮小できますので、32 × 32 や 36 × 36px の大きめの
サイズで保存しておきましょう。

拡張子は自動的に「gif」のファイル形式で保存されます。


new03.gif
矢印アイコンが出来上がりましたね。

アイコンは今回の矢印のような記号類から、文字類、顔型など数多くあります。

ブログの
アイキャチャーやポイントとしての使い道がいろいろありますので
必要に応じて使ってみましょう。

次回は「アイコン修正の方法」です。






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

最近のコメントの編集

■ 4-23 コンテンツ「最近のコメント」を再編集する

前回は
「最近の記事」のタイトルの頭に表示される日付を表示しない方法の確認でした。

コンテンツの修正(編集)方法は
他のコンテンツの場合も基本的には、同じ流れの同じような方法になります。

「最近のコメント」の修正

最近のコメントの「コンテンツHTML編集」には

デザイン  ⇒  コンテンツ  ⇒  最近のコメントに進み
⇒  コンテンツHTML編集 

に入りますね。

HTMLの編集に入る前にコメントの表示方法を「ノーマル」から
「ツリー」表示に変更しておきます。

ノーマルのベタ表示より「ツリー」表示の方が見やすく、見栄えもいいです。



【資料1】
「最近のコメント」コンテンツHTML編集

<div class="sidetitle"><% content.title %></div>
<div class="side">
<% content.header -%>
<% if:content_recent_comment.type == 0 -%>
<% loop:list_article_child -%>
<a href="<% article_child.article.page_url %>#comment"><% article_child.article.subject | tag_strip %></a> by <% article_child.writer | tag_strip %> <br />
<% /loop -%>
<% /if -%>
<% if:content_recent_comment.type == 1 -%>
<% loop:list_article -%>
<a href="<% article.page_url %>#comment">@<% article.subject | tag_strip C%></a><br />
<% loop:list_article_child -%>
 Aby <% article_child.writer | tag_strip B %> <br />
<% /loop -%>
<% /loop -%>
<% /if -%>
<% content.footer -%>
</div>

資料は
このサンプルブログの「最近のコメント」のHTMLです。
コンテンツ用のHTMLとしては長い構文になっていますが、全てを理解する必要は有りません。

コメントの表示方法を「ノーマル」から「ツリー」表示に変更している方の、チェックするタグは「青色」で表記している文字の部分です。

黒文字部分は「ノーマル」表示のタグですね。


●各役割を持ったHTMLの挿入箇所

修正するためのタグ類の挿入箇所は赤文字で表した「 @ 〜 C 」の位置です。

@ = の箇所は文頭、
訪問した方が読んでコメントを寄せた「ブログ記事のタイトル」の前(頭)。

A = は「by」(誰から)
の文字を表示。

B = はコメントを送った方
のニックネームの表示。

になります。


●記事タイトルの表示と、頭に記号の表示

@ のタイトルトップに目印(記号類や画像類)
を表示するには、その @ の位置に表示する記号あるいは画像のURLを直接に挿入します。

このブログでは、コメントの頭に記号や画像などのアイコンではなく、丸印(●)を表示していますので

挿入する箇所 = @
記号の形式は = 

<a href="<% article.page_url %>#comment"><% article.subject | tag_strip ">%>

の直接挿入になります。
使用している「●」は記号や画像ではなく、ワープロ文字で表示される「まる」を使用しています。

アイコンやファビコン風画像を挿入するためには
@の箇所にアップロードした画像のurlを直接に記入します。

画像をアップロードしているサーバーを
独自で所有(レンタルサーバー含む)方は、相対的な番地の記入になりますが

seesaaブログのような、ブログサービスを利用している方は

「例」
<a href="<% article.page_url %>#comment"><img src="http://  url  " /><% article.subject | tag_strip ">%>

上記例のように「絶対番地」での記入になりますね。


A の位置には本来は「 by 」の文字が表示されますので
訪問した方の注意を引くため「 by 」の代わりに、ワープロ文字の矢印の「  」に変更しています。

使用方法 @ と同じです。

「例」
<% loop:list_article_child -%>  <% article_child.writer | tag_strip B %>


●ニックネームの表示と表示文字数の制限

B が、コメントを送った方のニックネーム。
ニックネームが長すぎると、次の行に跨りますので、その表示の長さを制限するタグを挿入する箇所です。

文字数制限の | shorten(26) を挿入してみます。

<% loop:list_article_child -%>  <% article_child.writer | tag_strip | shorten(26) %><br />

 | shorten(26)のカッコ内の数字は、任意の表示する漢字の数を表します。

漢字は1文字で2バイト使用しますので
(26)でしたら、その半分の13文字を表示することになります。

任意の数字ですので、10文字の表示でしたら
 | shorten(20)の形式なりますね。


●記事タイトル文字数の制限

C
のピンク色の文字の位置は「記事タイトル」の表示する長さを制限するタグ、
 | shorten(…) 」を挿入する箇所です。

B の方法と同じです。

このブログでは記事タイトルの長さを15字に制限していますので、それ以上の長いタイトル部分は「…」で表示されます。

修正した結果が
このブログの右サイドの「最近のコメント」欄の表示(見え方)です。


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

●コメントが記入されたブログ記事のタイトルとその文字数の制限。
●タイトル頭の記号。
●コメントの内容。
●コメントの送り主(記入した方)のニックネーム

が表示されています。

最近のコメントを残した記事のタイトルには
リンクが張られていますので、クリックでそのページに飛び、コメントの前文が確認できるようになっています。

画像では、コメントの内容や送り主のニックネームは消去しています。

あとは、確認して「保存」で終了ですね。

タグ類は変更した後、ブログにすぐに反映される時と
ある一定の時間を経過して表示されることがありますので、
変更が反映されないときは、少し時間が経ってから確認してみましょう。



………

カスタマイズにはいろんな考え方があります。

●商品販売用だから、成約率が上がればどんなブログデザインでもいい。

という考え方でしたら、
時間をかけてブログデザインを修正する必要はないですね。

訪問する方がネットで一生懸命に検索して、せっかく訪問したのに

●ブログの構成も適当。
●画像の貼りこみも、左右バラバラ。
●視線の流れも滅茶苦茶。
●探している記事までなかなかたどり着けない。

のようなブログに出会ってしまったら、引き返しますね。
逆の立場だったら、おそらく訪問した方と同じように感じるでしょう。

●seesaaブログは
利用者がカスタマイズをすることを「柔軟にしていますが

●カスタマイズは
あくまでも自己責任の元に行いますので、慎重に進めてください。





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

最近の記事の日付を消す

■ 4-22 コンテンツ「最近の記事」の日付を消す


●「最近の記事」の投稿日付を消す方法を確認します。

このブログのように
左サイドの「最近の記事」コンテンツには、記事を投稿した日付が表示されます。

日記やエッセイを中心としたブログでは、投稿した日付が重要な要素をしめますが
すでに確認した「ブログの日付を消す(ブログにおける投稿日時)と同じ意味合いからも、商品の紹介をしているアフィリエイトブログには、なるべく投稿した日付が表示されない方がいいですね。




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

「画像1」はこのブログの、コンテンツ「最近の記事」のHTML修正前の表示です。

記事のタイトルの前に「投稿した日付」が表示されていますが、アフィリエイトなどでは、日付を表示しないブログの組み立てが一般的です。

日付は
コンテンツ「最近の記事」の中の「コンテンツHTML」が司っていますので、その構造を確認して、日付表示を再編集しましょう。


最近の記事の「コンテンツHTML編集」には

デザイン  ⇒  コンテンツ  ⇒  最近の記事に進み
⇒  コンテンツHTML編集 

に入りますね。

HTML編集を開きます。


記事コンテンツHTML

<div class="sidetitle"><% content.title %></div>
<div class="side">
<% content.header -%>
<% loop:list_article -%>(<% article.createstamp | date_format("%m/%d") %>)<a Href="<% article.page_url %>"><% article.subject | tag_break %></a>

<% /loop -%><% content.footer -%>
</div>


赤文字で記入している箇所

(<% article.createstamp | date_format("%m/%d") %>)

が、日付の表示タグです。

記事のタイトルや日付は

<% loop:list_article -%>    <% /loop -%

の<loop>タグの中で「入り子」で検索されて、条件に合ったものを表示する指示になっています。

日付を検索するタグがなければ、日付を表示しないということは明白ですね。

そこで日付に係わる

(<% article.createstamp | date_format("%m/%d") %>)

の一行を消してしまえばいいのですが
削除してしまうと何かの時に、元のタグの形式を忘れてしまい、戻せなくなることが有ります。

今回は、削除をする方法ではなく
ソフトプログラミングで頻繁に使用されている「コメント・注意書き」の

<!−−    HTML・CSS   −−>

の形式を使う方法で日付を消します。

<!−−  〜  −−>
 
のコメント記号のワンセットで括った範囲が
コメント・注意書きになり、該当するHTML構文を括ることで、実行されない(コメント扱い)ようになります。

HTMLやCSSでは、長い構文のどこに何が書いてあるのか、分かり易いよいうに、また記述した箇所を探し出しやすいように、コメント・注意書きを記入しておくのが一般的です。

元の構文に戻すときには、コメント記号を消してしまえばいいことです。

このコメント・注意書きは
/※   〜  ※/ 
の形で括っても、同じようにコメント記号を表します。

使用方法は、HTMLやCSSでも共通の形式ですので覚えておきましょう。


日付検索のループ部分
(<% article.createstamp | date_format("%m/%d") %>)
の頭に <!−− 記号を書き込み、後ろの部分を −−> で閉めます。

コメント・注意書きの形

<!−−
(<% article.createstamp | date_format("%m/%d") %>)
−−>

 ●注)使用するときには大文字の<>を、小文字の < > に変更します。


修正後の表示です。

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

修正前は、記事タイトルの前に日付が表示されていましたね。

このサンプル例のように、編集後は
日付は表示されず、タイトルだけになっています。

コンテンツHTMLでは
ループでもってブログ内の「最近の記事」の検索を続けていますが
該当する日付のデータがあっても、結果を表示しないようにしていますので、日付は何も無いのと同じ形です。

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

画像3の例は、タイトル頭に矢印のアイコンを表示しています。

タイトルの頭の位置に目印様のポイントを入れ
目立つ記事タイトルにするために、HTMLを書き換える方法は前回の記事で確認しています。





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

最近の記事タイトルの頭に画像

■ 4-21 最近の記事のタイトル頭に画像を表示


随時、記事の更新を行っているが、どうも訪問者反応がよくない。
連続した記事を読んでくれたら、こちらの意図することが相手にうまく伝わるのに。

サイドに設置している
「最近の記事」や「過去ログ」「コメント欄」などもゴチャゴチャして見づらい。

ブログを発信している側の悩みです。

いろいろと応用の利く機能があったら
思っているとおりのブログの構成が出来るのに、などと悩みは多いですね。

前回、確認した
記事のトップに「最近の記事のタイトル」を表示することも、記事に入りやすいレイアウトを目的にした手法ですね。

基本のレイアウトをあまり弄りたくないと言う方には
サイドの「最近の記事」や「コメント欄」などを、今より少しだけ目立たせ、タイトルが把握しやすいように定義を加えてみます。

@ サイドバーの「最近の記事」のトップ(頭)にファビコン風のアイコン画像を入れる。
A「最近の記事」のタイトルの表示文字数を制限する。


の2件を確認します。

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


「画像1」は「最近の記事」の修正前の形です。

記事のタイトルが長く、2行に折れ曲がった表示や
次のタイトル行との区切りが分かりにくいですね。


● コンテンツ「最近の記事」のタイトル頭にアイコン画像を表示

コンテンツに修正を加えるには
使用しているコンテンツの種類の中から「最近の記事」のコンテンツを選択してそのHTMLを開き、必要な箇所を修正して書き換えるか、または削除などのHTML編集をします。

「編集」には

  デザイン  ⇒  コンテンツ  ⇒  最近の記事  に進み
  右上の  ⇒  コンテンツHTML編集

の順に進み、最近の記事「コンテンツHTML編集」を開きます。

【資料】
最近の記事「コンテンツHTML」

<div class="sidetitle">
<% content.title %></div>
<div class="side">
<% content.header -%>
<% loop:list_article -%>
(<% article.createstamp | date_format("%m/%d") %>)<a Href="<% article.page_url %>"><% article.subject | tag_break %></a>

<% /loop -%>
<% content.footer -%>
</div>


資料は、最近の記事の「コンテンツHTML」の構文です。

検索やループの機能を用いて、コンテンツ「最近の記事」の中に
新しくアップされたブログ記事のタイトルを表示するための構文になります。

HTMLはマークアップ言語ですが
C言語などのように、条件を検索して判定する仕組みのループ機能なども構成できるようになっています。

プログラミングの経験者なら、検索の構文を理解できますが
今回は、形式を一つひとつチェックすることが目的ではないですので、難しい構文を理解する必要はありません。


● 画像の挿入

タイトルの頭に表示する画像を作成するのに
Adobe などの専門ソフトを使うことはないです。

専用のソフトを使用するためには
デザインの知識が必要なことと、ソフトの価格も安くはないですから、ネットで無料で使える、気に入ったアイコンを探し出して、使用することも考えましょう。

画像は簡単なアイコンで十分です。

独自の画像を作りたいと言う方には、
アイコン類が簡単に作れる無料のソフトで「彩彩畑」というがあります。



    ⇒ 彩彩畑 ダウンロード

ソフトの「彩彩畑」は使いやすく、非常に重宝しています。
このブログで使用している、矢印のアイコンもそのソフトで制作しています。
 

● アイコンの表示の方法。

ブログで画像を使用するためには
ブログサービスのサーバーにアップロードしていることが基本ですね。

記事入力欄の下方にある
「ファイル」(ファイルマネージャー)からアップロードとダウンロードになります。

使用する画像ファイルのurlは
記事欄にカーソルで挿入位置を決め、アップロードした画像をクリックすると、記事欄に画像urlが表示されますね。

そのurlがアップロードされた場所とファイル名になりますので、コピーしておきます。


<div class="sidetitle"><% content.title %></div>
<div class="side">
<% content.header -%>
<% loop:list_article -%>
(<% article.createstamp | date_format("%m/%d") %>

<img src="Http://tosiji-dreamafi.up.seesaa.net/
image/new5.png" />


  ↑ urlサンプルに、このブログの画像のURLを使用しています。

<a href="<% article.page_url %>"><% article.subject | tag_break | shorten(●) %></a><br />
<% /loop -%>
<% content.footer -%>
</div>



上記HTMLの構文の

<% loop:list_article -%>
(<% article.createstamp | date_format("%m/%d") %>

 ●  この箇所に挿入

<a href="<% article.page_url %>">

● 印の箇所に、先の確認してコピーしておいた画像の「URL」を挿入して、その箇所やurl名が正しく表記されているかを確認します。

一旦「保存」しておきます。


●表示文字数の制限

記事のタイトル文字数を、任意の数に制限する方法を確認します。

<% article.subject | tag_break %>

の後ろに、 | shorten(●)

のHTMLタグを追加します。

shorten(●) の「●」は数字(変数)を記入する箇所です。

漢字1文字は表示に2バイト使用しますので、仮にタイトルを10文字での表示にしたければ
10文字の2倍=「20」  shorten(20)  として記入します。

記事のタイトルが、10文字より長ければ
shorten(20) としていますので、それ以上の文字は表示されなくなり、省略を意味する点(…)に変わります。

サイドコンテンツの左右の表示幅をチェックして
1行に、最大何文字表示されるのかを計算して、その文字数内に収まるように変数を指定することが、次の行に折れ曲がるタイトル文字が調整されて、整然と揃って見やすくなるでしょう。


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

画像2は修正したブログの表示です。

左サイドの最近の記事

●記事タイトルの頭(トップ)の矢印。
●タイトルの表示文字の長さを制限。

記事トップの
●独自に作成した「最近の記事」コンテンツのタイトル表示

が今回、修正した表示方法です。

記事トップの修正も同じ修正方法ですので、後述します。

次回は

●コンテンツ「最新記事」の日付を消す。
●ファビコン画像の作り方。
●他のコンテンツの整理。

を確認します。



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

ページトップに最近の記事を表示(2)

■ 4-20 最近の記事のタイトル表示(2)


●CSSにセレクタの追加

前回は、記事のトップに最近の記事をピックアップしてタイトルを表示させるため
「表示記事のHTML」を編集しました。

ブログへ新しい機能を追加するときは
「HTMLの編集」と「CSSへのセレクタの追加」が必要でしたね。

HTMLが参照するCSSのセレクタの追加がまだですので、表示の段階には進んでいませんね。

ブログ作成のため使用しているテンプレートのCSSへは
左上段のメニューの
 
デザイン ⇒ デザイン設定 ⇒ テンプレート名

から入りますね。

記事HTMLが参照する、新しいセレクタを定義して追加します。
追加する箇所はどこでもいいです。

追加するセレクタ

.cont{
margin:5px;
padding:0px;
background-color:#ddcc99;
}
.cont-title{
font-size:12px;
font-weight:bold;
padding:5px;
margin:5px;
background-color:#ddcc99;
}
.cont-body{
font-size:12px;
padding:0px 10px 0px 10px;
margin:0px 0px 0px 30px;
text-align:left;
}
.cont-body a{
text-decoration:none;
color:#666666;
}


CSS用のセレクタ
.cont
.cont-title
.cont-body

は、前回のHTMLの編集のとき、新しく作ったセレクタ名ですね。
このセレクタは正式には「class」名です。

参照 



HTMLとCSSのセレクタは名前を統一しないと、参照しません。

挿入後、保存をする前にプレビューで確認してみましょう。

記事のHTMLは前回修正していますので、今回のCSSへのセレクタの追加でプレビューは表示します。

表示位置・タイトルの大きさ・文字(書体)・バックの色など納得のいく形(デザイン)になっていたら「スタイルシートの変更(保存)」です。

このブログでは、
記事トップに最新記事のタイトルの表示はしていませんが、
関連ブログでは修正していますので、使用状況をみてみましょう。

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

画像は利爺の「個人ブログ」です。

ブログ(日記)では個人的なことが多く、エッセイ風に纏められていることが多いですね。

利爺らの年代では
ブログのことは知っていても、実際に記事を読む経験があまりなく、トップ記事は読んでも他の記事は読めない(探せない)というのが大方です。

サイドのコンテンツの最新の記事から…
という話をしても、よく分からないとの返事です。

ブログトップに最新の記事タイトルが表示されていることが、記事が読みやすく、入り込みやすいようですね。

雑誌で言えば「トッピクス」です。


訪問した方に記事トップで最近の記事を案内することは、
興味を持たせる引き金になります。

検索された記事のタイトルは、
左からの表記指定(青文字)
  .cont-body{
  ・
  margin:0px 0px 0px 30px;
 (左から30pxの位置から表記)

バックの色は、右サイドの色に近いものを
  background-color:#ddcc99;
  (バックの色は#ddcc99)

を指定していますが、
ブログにマッチした色を指定することが、
見栄えのいいブログの基本です。

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

いろいろと試して見ましょう。


個人の日記ブログやアフィリエイトの展開用ブログ、

とくに商品を紹介している物販アフィリエイトにおいては、
記事のトップで、紹介している商品の案内をかけることは重要です。

シーサーブログでは、
記事トップに最新記事のタイトルを表示する機能が準備されていませんが、必要だと思う機能は、調べ上げて追加するという考えが方が重要でしょう。

苦労して作り上げた、
使い勝手のいいブログは必ずいい結果をもたらします。


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


トップに最近の記事を表示(1)

■ 4-19 最近の記事のタイトル表示(1)


訪問した読者にたいして
最近(最新)の記事のタイトルを記事トップに表示して、利用しやすくする方法です。

カテゴリや投稿記事が増えてくると、記事の管理に手間取ることが多く、カテゴリ内の情報の把握も難しくなってきます。

ブログ発行の当事者が情報の把握も難しければ、訪問者(ユーザー)にとっては、なお難しいページの構成になっていると思ってもいいでしょう。

カテゴリ内の新着記事をリストアップして、トップページに表示することで、記事の流れや纏められた内容を調べやすくして、訪問した方の意識を集中させる利点があります。


最近の記事のタイトルは、サイドに配置しているカテゴリには表示されていますが、最初に目の行く記事トップにはありません。

HTMLとCSSに手を加えて、記事トップに表示する方法を確認します。

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

画像は、記事のトップに「最近の記事一覧」を設置した例です。

画像の中のナンバー
@は
「最近の記事一覧」の記事を表示する領域に対するタイトル枠の表示です。

Aは
抽出した最近の記事のブログ記事のタイトルの表示域で、文字の位置などの定義があります。

Bは
本文記事の表示ですね。

Cは
左サイドに表示されているデフォルトでの、最近の記事のタイトルです。
この表示で、最近の記事の案内はトップに必要ではないのではと思いますが、左や右のサイドは
訪問した方にとって、あまり重要とは思わない傾向が見られます。


画像例の形にするため
HTMLでの追加、修正などのカスタマイズの項目の数は割りと多くなっています。

【資料1】
【カスタマイズの項目】

●タイトル「最近の記事一覧」の表示
●表示域を罫囲み
●表示域のバック色

●ブログの最近記事タイトル名
●ブログの最近記事タイトル名用の画像(頭)
●ブログの最近記事タイトル名の表示件数
●周囲の罫囲み

●文字の種類・大きさ・行の高さ
●表示した記事へのリンク


カスタマイズは
● 記事のHTMLの修正
● CSSへの追加


の2カ所の変更が必要です。


● 記事のHTMLの修正

記事のHTMLには、左上段のメニューから

デザイン ⇒ コンテンツ ⇒ 記事 ⇒ コンテンツのHTML編集

と進みます。

記事のHTMLは長い構文で出来ています。

その構文の中から
<% if:page_name eq 'index' -%>
のタグを探し出します。

記事HTMLの3行目くらいに有りますが、同じタグが別にもあります。

挿入する場所、該当するタグを探すのが難しければ、web上には便利な検索機能がありますので、その機能を使った方がスムーズに探し出せます。

「検索の方法」
HTML編集画面にカーソルを置いて
キーボードの「Ctrl」(コントロール)キーとアルファベットの「F」のキーを同時に押します。

日本語入力ソフトと共通の、検索の為のショートカットキーですね。

画面上部に「検索窓」が表示されますので
 <% if:page_name eq 'index' -%>
と入力して検索してください。

青色の反転文字でその該当するカ所を示します。

【資料2】
記事コンテンツのHTML

<% content.header -%>
<!-- Content -->
<% if:page_name eq 'index' -%>

 <div class="cont"
 <div class="cont-title"… 最近の記事一覧 …</div>
 <div class="cont-body"
 <% loop:list_article-%>
 <a href="<% article.page_url %>"class="title">
 <% article.subject|shorten(50)%><br></a>
 <%/loop-%>
 <br style="clear:both"></div>
 </div>
 <% if:pager.need_pager -%>
 </div>


<% if:pager.need_pager -%>
 ・
注)= 説明上<>は大文字を使用していますが
    正式には <> の小文字を使用します。


<% if:page_name eq 'index' -%>の下段に
<div class="cont">以下の赤文字で書いてあるHTMLのタグを追加します。

緑色の文字

cont  
cont-title
cont-body


のセレクタ名は、このブログ用に名づけたセレクタ名ですので、真似る必要はありません。
自由に付けて構いません。

ただし、セレクタ名の
「title」や「body」などはCSSの重要セレクタ名ですので、同じセレクタ名にしますと重複してエラーになりますので、注意が必要です。

新たに追加した赤色文字のHTMLで、
最近の記事を読み取り、指定した位置に表示する要素を記入しています。

CSSにはセレクタとして、表示上の装飾をする

「cont」     = ブログの記事のタイトル・文字の大きさ、行の高さなど
「cont-title」 = タイトル「最近の記事一覧」の表示とその位置
「cont-body」  = ブログの記事タイトルを表示する場所・位置

を作成して、定義の内容を読み込んで表示する形になります。

新しいセレクタを追加するときにCSSとHTMLのタグは同じ名前にします。
追加したセレクタ名は忘れないようにメモして置きます。


<div class="cont-title">… 最近の記事一覧 …</div>

は見出しのタイトルです。
簡単に「最近の記事一覧」にしていますが、訪問した方の気を引く言葉や語句に書き換えてもいいでしょう。

<% article.subject|shorten(50)%><br></a>

の(50)の数字は変数です。
ピックアップして表示する「最近の記事」のタイトルの長さ(文字数)をあらわし、数字(変数)を変えることによって、表示幅を変更できます。

日本語漢字は2バイトですので(50)は、25文字です。
25字を使うブログ記事のタイトルは、おそらく無いでしょうから漢字10文字として(20)でもいいでしょう。
仮に、タイトルが漢字10文字を超えていても
表示が10文字の意味ですから、余った字数が表示されないだけでエラーにはなりません。

青文字「<br>」は改行を表し、記事タイトルの表示方法です。

<br>が無ければ、記事タイトルは一行単位で表示します。

追加したHTMLは、本来は
<% if:page_name eq 'category' -%>
の構文の中に追加しますが、

この説明では「index」を利用していますので、
<% if:page_name eq 'index' -%>
の下段に追加しています。

まだ対応するCSSのセレクタを追加していないので、ブログやプレビューでは表示されません。

「保存」して記事のHTMLの編集は終了です。


次回は「CSS」にセレクタを追加します。




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

ブログの日付を消す

■ 4-18 ブログにおける投稿日時


ブログでは投稿日時が表示されるようになっていますね。

ブログが、もともと日記形式から発展したものであることを考えれば、当たり前のことですし、ブログの記事を読むときも、いつ書いた文章なのか気になるものです。

今日のようにインターネット、雑誌、テレビ、新聞などからの情報が溢れる世界では、当然であり、読者が「最新の情報」を求めているからだと言えます。

有益な情報には新しいも古いもないと思っていますが、1週間前、1ヶ月前の情報より「今日」の最新の情報が知りたいと思うことが、投稿日付を無意識に見ていくのだと思っています。

心理の作用でしょう。

その見方からいくと、
アフィリエイトを進めている方、とくに「情報商材」を展開している方の記事には「日付」を表記することは、常に新しい情報を発信している意味合いからも必須であり大事なことですね。

逆に「物販系」はどうでしょう。

今回の表題は「ブログの日付を消す」になりますので
物販のブログを始めたい方や、すでに展開している方を対象としています。

物販では
1商品を1ブログ記事で紹介するのが基本になっています。

ブログへの訪問者が検索エンジンからの経由が多いことを考えると
商品を買いたいと思う人の心理はどのようなものでしょう。

スーパーやコンビニで商品を買うときには、賞味期限などを確認しますね。
期限切れの商品は手にしませんね。

物販でも同じことが言えます。

物販の商品には「期限」の表示はありません。

そこで、購入を考えている方はブログの投稿日で判断することになります。

半年前や1年前の商品紹介の記事でしたら、商品は新しくても、その商品を案内している記事
記事が過去の日付だと、商品そのものが古いと思われる可能性が高いです。

結果、折角の検索エンジンから訪問したお客を逃がすことになりますね。

購入者にそのような意識を持たさないためにも、物販では「日付」をあまり表示しません。


■「ブログの日付を消す」

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

「画像1」はこのブログの日付を表示している画像です。
バックに画像を用いて、その上部に日付を表示しています。

CSSでの日付の定義、セレクタは「.date」ですね。

CSSには、左上段のメニュー 「デザイン」 ⇒ 「デザイン設定」
その最下段の「テンプレート」名のクリックで入ります。

参照 


【資料】
【CSS】日付のセレクタ

.date{
clear:left;
font-family:Verdana;
font-size:10px;
color:#666666;
font-weight:normal;
text-align:left;
padding:13px 0px 13px 15px;
margin:20px 0px 0px 0px;
}


⇒ セレクタ名
⇒ 左設定のクリア
⇒ 書体
⇒ 文字の大きさ
⇒ 文字の色
⇒ 文字の太さ
⇒ 文字の表示位置
⇒ 文字の表示位置
⇒ 文字の表示位置
⇒ セレクタ閉め


日付の表示を消す方法には

「.date」セレクタとそのプロパティの全てを、削除することが一番簡単ですが、マークアップ構造のHTMLと連結していますので、不可のエラーが起こることもありえます。

それを避ける意味からも

@ セレクタの「 { 」と「 } 」は残して、プロパティを削除して、空の定義にする。

セレクタ「.date」の中の定義、プロパティは全て削除して .date{ }  の形にする方法。

しかし、全てのプロパティを削除してしまうと
元の戻すときに、どのようなプロパティだったのか困ってしまいます。

A 参照の「 <!--   --> 」記号でセレクタを全て括って、新しく空の定義「.date」セレクタを作る。

参照記号<!--  CSS  -->を用いて、セレクタの要素を全て括る方法で、元の形式のままCSS上に残りますが、参照になっているので定義されません。

この場合も新しく@の形式 「.date{ } 」空定義のセレクタを作る必要があります。

B 現在の「.date」セレクタを生かし、表示させないようにする。

元に戻すことを考えて、現在のセレクタに、新しいプロパティを追加して、ディスプレイに表示させない方法。

セレクタの定義をいじることなく、エラーにもならず無難な方法です。


Bの方法を確認します。

上記の「資料」CSSに
.date{
 ・
display:none;
 }

赤文字で書いたプロパティ
display:none; 
を追加するだけです。

日付の表示が消されます。
消すというより「日付の非表示」になります。

プロパティ「display:none;」を追加して、日付を非表示にしていますので
「.date」の各プロパティは定義の意味を成さないようにみえますが

内部的にはプロパティは生きていますので、他のセレクタとの関係はそのまま継続しています。

物販では、日付のないサイトを数多く作って、検索エンジンから集客します。
その形が一般的で、多くのアフィリエイターが行っている方法です。



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

サイドバーに見出しを入れる

■ 4-17 自由形式コンテンツの活用


ブログでは「カテゴリ」「過去記事」などのように、ブログサービス側で用意したコンテンツが有りますが、それ以外に自由にコンテンツを作り、追加することが出来る機能があります。

それが「自由形式」のコンテンツです。

「自由形式」のコンテンツは、記事入力と同じように簡単に作れ、文章、画像、HTMLなどの挿入もできるようになっています。

カテゴリや過去記事などのコンテンツと異なる点は
タイトル(見出し)が表示されないため、そのままの形で配置したら、何のコンテンツか分からないことです。

構成上コンテンツバーが邪魔だと言う方もいますが
コンテンツのタイトルは「ナビゲーション」の役目も果たしています。

ブログを読みやすい、分かりやすい流れ、整然とした形にすることは
ブログの基本をしっかりと見極め、訪問した方の気持ちに対応するという考え方です。

ブログの構成はグラフィックデザインと同じ考え方で、如何にバランスの取れた配置をするか、如何に訪問者の目を引き付けるかになります。

ブログの基となるWEBデザインも、同じ考えに基づいています。

適当に作ってあるブログと思われたら
サイトの信頼性や、紹介している商品の信憑性までが疑われる結果になります。


■「自由形式」の活用

「自由形式」の使用方法には

@ 本文記事と同じように商品紹介のような画像、記事を書き込むページ構成にする。

 「例」
  このブログの上段に設置しているメニュー(ナビゲーション)や
  トップページに常に表示される「ブログの案内(見方)」のように
  タイトルを付ける必要のない形式。

A サイドに設置してタイトルを付けて、独自のコンテンツバーにする。

 「例」
  右サイドに表示している「利爺にお問い合わせ」など
  サイドに表示してタイトルを付けた方が分かりやすい表示形式。

が有ります。

@ は目的に応じて、比較的に楽で自由に設定できますので
A のサイドバーに用いて、タイトルを付ける方法を確認します。

【画像1】は
このブログのコンテンツの配置です。

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

右サイドの「利爺にお問い合わせ」などのコンテンツは
「自由形式」を使用して、タイトルを付けて使用しています。

「自由形式」のコンテンツに、タイトルを表示する方法を確認します。

「自由形式」のコンテンツ追加の方法は分かりますね。



左上段のメニューの  「デザイン」  ⇒  「コンテンツ」  に進み

現在使用している各コンテンツの配置図のページの左上の 「ブログパーツ」 「コンテンツ」 「ブログ広告」 の中から「コンテンツ」をクリックして一覧を出します。

一覧には「ブログ画像」「記事」など多数のコンテンツが用意されていて、その中に「自由形式」も有りますね。

「自由形式」をドラッグで設置したい箇所にドロップして配置します。

コンテンツを開くと、画像2のように表示されます。

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

タイトルを付けるためには、右上の「コンテンツHTML編集」から編集に入ります。

「資料1」のような表記になってますね。

【資料1】
「コンテンツHTML編集」

<% content.header -%>
<% content.free.text %>
<% content.footer -%>


サイドバーとして活用するために下記の「資料2」のように
CSSを参照する「赤文字」のHTMLタグを追加しします。

【資料2】
<div class="sidetitle">タイトル</div>
<div class="side">

<% content.header -%>
<% content.free.text %>
<% content.footer -%>
</div>


<div class="sidetitle">タイトル</div>
<div class="side">

の追加したHTMLは
CSSのセレクタ(class)「.sidetitle 」と「.side」の定義を参照にしますので確認します。

【CSS】
【CSS】

.sidetitle {
background-image:url(url);
background-repeat:no-repeat;
background-position:left top;
font-size:12px;
color:#1B6E90;
font-weight:normal;
padding:5px 0px 20px 0px;
margin-bottom:0px;
text-align:center;
}

.side {
font-size:12px;
line-height:18px;
padding:0px 5px 10px 5px;
margin-bottom:10px;
}


⇒ セレクタ名(class)
⇒ コンテンツバー画像
⇒ 画像の表示
⇒ バー画像表示位置
⇒ 文字の大きさ
⇒ 文字の色
⇒ 文字の形状
⇒ 文字の表示位置
⇒ 文字の下辺位置
⇒ 文字の左右位置
⇒ セレクタ閉め

⇒ セレクタ名(class)
⇒ 文字の大きさ
⇒ 行の高さ
⇒ 文字の表示位置
⇒ 文字の表示位置
⇒ セレクタ閉め


<div class="sidetitle">タイトル</div>

が、サイドバーの画像などの形状、文字の種類や大きさ、表示する位置を定義するCSSです。

その中のプロパティ<background-image:url(url);>がバーの画像を表示する定義です。

<sidetitle>のセレクタは、ブログで表示している各々のサイドバーに適用されていますので
<background-image:url(url);>を削除したら、全てのバー画像が表示されなくなります。

● バー画像を独自に作成して用いるときには、このプロパティ<url>の書き換えになります。


<div class="side">

が参照するセレクタ「.side」は
そのコンテンツの中に書き込んだ、文章や画像の表示位置などを細かく定義しています。

● セレクタ「.sidetitle」がコンテンツバーの表示やタイトルの表示
● セレクタ「.side」はコンテンツの中身の表示


になっています。

    注)
   ●「自由設定」の確認上、CSSの「.sidetitle」「.side」の
    各セレクタを開いて定義をチェックしていますが、CSSを
    確認する必要はありません。


■ コンテンツバーに名前(タイトル)を付ける。

追加したHTML(資料2)

<div class="sidetitle">タイトル</div>

の「タイトル」の箇所に名前を入力します。

タイトル名は自由に設定できますので
他のバーのタイトルとバランスをとって、分かりやすい名前がいいですね。

下段の「プレビュー」でうまく表示するかを確認してから「保存」します。

HTMLを追加してタイトルを振るだけの作業で、独自のコンテンツを作成しましたが
バーとそのバーに表示するタイトルの表示だけになっていますね。


■ コンテンツに表示する内容の作成

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

「画像3」は
このブログのサイドのコンテンツ「利爺の個人ブログ」に設定した内容の例です。

配置した「自由形式」のコンテンツを開くと
何も記入されていない空ボックス(自由入力欄)が表示されます。

その自由入力欄の中に
記事と同じ形式で、必要な文言、画像、リンクタグなどを記入して表示させます。

例では
●<div style="text">でテキスト形式を宣言して
●<a href="http: url ">でリンクを組んで、リンク先のブログ名を記入しています。

ブログ名をクリックすると、外部リンクで相手先にジャンプする仕組みですね。

自由設定の自由入力欄は名前のとおり、文章や画像、表、リンクなどが自由に設定できますので、アフィリエイトの商品紹介にも最適なコンテンツになっています。


このページ(画像3)の上段にあるタイトル(赤丸で囲んだ箇所)には「個人ブログ」と記入していますが

このタイトルは
コンテンツの配置(図)で「何のためのコンテンツ」かを判別のためのものですので、ブログを表示したときの「コンテンツバー」に表示されるタイトルとは違います。

タイトルを記入していないと「自由形式」とだけしか表示されませんので
数多くの自由形式のコンテンツを使用しているときには、混乱しないように「個人ブログ」のように目的のタイトルを付けておきましょう。

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

コンテンツバーにタイトルを表示するには、上記で確認してきた
「自由形式のHTML編集」で追加したHTMLタグの<sidetitle>に
「利爺の個人ブログ」とタイトルを記入して表示します(画像4)

「画像3、4」の各設定によって

【画像5】


「画像5」のコンテンツの「タイトル」と「その内容」が表示されます。

……

ブログデザインでは
構成の流れ上、タイトルが必要でないときがあります。

流れが断ち切られると感じた時には
あえてタイトルやコンテンツバーの画像を表示する必要はありませんね。

そのことも考えて「ブログの構成」を考えましょう。

納得のいくブログを作り上げることが、アクセスアップにも繋がります。




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

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

■ 4-16 検索結果の表示

ブログデザインを自分なりの納得する形にするため、カスタマイズをすることは、決して悪いことではないのです。

しかし、カスタマイズに捉われすぎて、本来の目的を忘れてしまっては「木を見て森を見ず」の例え通りになってしまいます。

●ブログを作って何をするのか。 … 第一の命題です。
●目的に沿うカスタマイズをする。… 第一を生かすための命題です。

ブログ作成の目的とブログのカスタマイズ。
本末転倒にならないように、目標をハッキリとさせておくことが重要です。

● 検索の結果で「検索項目無し」を表示させる。

前回はブログ内の記事を検索する「窓」を作成しました。



検索するキーワードを入力して、該当する項目が抽出された時は
結果として、記事のタイトルとサブタイトルが表示されるようにしました。

抽出の無い、キーワードに該当しない結果には何も表示しませんね。

【画像1】検索項目無し
befor01a.jpg
 ↑ 画像をクリック・元画像が開きます。

「画像1」の様に何も表示されないため、まだ検索中なのかどうかと迷ってしまいます。

検索に抽出する項目が無くても、無い項目には無いなりの結果を表示をするように、HTMLに書き換えます。


検索ツール(フォーム)を作るHTMLは「検索コンテンツのHTML」でしたが
今回は検索(search)を行う(司る)HTMLを書き換えます。

前回と同様、左上段の 「デザイン」から ⇒ 「HTML」に入り開きます。

<% if:page_name eq 'search' -%>

のタグを探し出します。

HTML

<% if:page_name eq 'search' -%>
<% loop:list_article %>
<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 class="text"><% article.entire_body | text_summary(240) %></div>
<div class="posted">posted by <% article.nickname %> at
<% article.createstamp | date_format("%H:%M") -%></div>
</div>
</div>
<% /loop %>

<!-- 検索結果表示 ここから-->
<% unless:list_article %>
<br>【該当する項目が見つかりません】<br>別の語句で検索お願いします。
<br><a href="<% blog.page_url %>">▲トップページに戻る</a>
<% /unless%>
<!-- ここまで-->
<% /if -%>

  注)HTMLの「 <> 」は記入段階で小文字の「 < > 」にします。

検索の終了を示すタグ
<% /loop %> と  <% /if -%> の間に

<!-- 検索結果表示 ここから-->  〜  <!-- ここまで-->
間に記入しているタグを追加します。

HTMLタグの

<% unless:list_article %> 〜 <% /unless%>

は抽出項目が無ければ 〜 を処理するのという意味になりますので
青文字で記入した

【該当する項目が見つかりません】

の文言が表示されます。文言は、自由に変えて構いません。

緑色で表示したHTMLタグ

<a href="<% blog.page_url %>">▲トップページに戻る</a>

は【ブログのトップページに戻る】のリンクタグです。

結果表示のページから、トップページに戻れるようにタグを追加しておきます。

タグの中に<br>(強制改行)を使用しているのは、
文言の表示位置が高い位置に行き過ぎていますので、改行(空白行)を入れて表示する位置を調整しています。

<br>(空白行)は
連続でいくつ使って構いませんので、空白行を調整して、好みの位置に表示させて下さい。


【画像2】検索項目無しの表示
after01a.jpg
 ↑ 画像をクリック・元画像が開きます。

「画像2」は修正後のブログです。
検索して該当する項目が無いときの結果を表示をしています。


● 表示文字数を制限する

橙文字で表示した

<div class="text"><% article.entire_body | text_summary(240) %></div>

のタグの(240)は、前回も確認した文字数の制限です。
検索して該当する項目を抽出して、表示するときの文字数を表しています。

●(240)ですから漢字表記で「120文字」という事になりますね。

表示される文字が「120文字」では多過ぎて、表示領域を取り過ぎますので
記事タイトルと記事の内容を2行程度に抜粋して、簡潔な表示にします。

●(240)を(40 =20字)〜(100 =50字)くらいの数字に書き換えておきます。
●表示文字数が多くても構わなければ、書き換えしなくてもいい」箇所です。

以上が
「検索項目無し」を表示させるHTMLの追加と、表示を簡潔にするHTMLの書き換えです。

HTMLに慣れていないと、何故ブログには

【HTML】
【各コンテンツHTML】
【CSS】

があるのかと悩みますが、ブログの作成やカスタマイズの経験を積み重ねて行くと、その仕組みが分かってきます。

焦らずに、ゆったりと進んで行きましょう。




▲カスタマイズの関連記事 【別窓での表示です】
   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月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
……人気ブログランキング……




×

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