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




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


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

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

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


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

2008年05月22日

カテゴリの組み立て(4)

 「日記」カテゴリにはエントリ記事が何もありませんので、削除しましょう。

 カテゴリ一覧から、「記事カテゴリ名」のカテゴリ項目(カテゴリ名)の「日記」をクリックします。

 【画像1】のようにカテゴリ日記の詳細が表記されます。

【画像1】
see0521a.jpg
↑画像をクリック(拡大します)


 エントリ記事が無いことを確認して、右サイドの「ゴミ箱」マークの「このカテゴリを削除する」をクリックします。

 次画面で再確認の表示が出ますので「削除を確定する」をクリックして、カテゴリ削除の完了です。

 カテゴリ削除で注意すべき点は、エントリ記事が無いことを確認して、削除作業を行うことです。 

 記事も一緒に削除してしまうと、記事の復活は出来ませんので、注意しましょう。

 テストブログのため、カテゴリの追加や削除までの流れを説明しましたが、削除するのではなく「カテゴリ名」を変更する方法で、整理はできますので、自分のやり易い方法で行ってください。

 ★シーサーブログのヘルプ
  「カテゴリのヘルプ」 ← ここをクリック
 

カテゴリの組み立て(3)

すでに完成している記事の「カテゴリ」の再振り分けです。

今まで作成した記事のカテゴリは「日記」でしたね。
新しく作成した「カテゴリ」に入れ替えましょう。

「記事一覧を見る」のメニューから一覧を表示します。

現在は2個の記事があります。
左側にクリックウィンドウがありますので、2記事にクリックを入力します。
その次に「一括編集」をクリックすると「画像1」の画面が表示されます。

新しく登録した「今日の出来ごと」と「思い出の写真」のカテゴリもありますね。

カテゴリの項目は「選択メニュー」になっています。選択肢は現在のところ新たに登録した「カテゴリ」2個と「初期設定の日記」の3個です。

 その中から、設定したカテゴリを選択します。
2記事とも同じ方法で選択したら。「保存する」ボタンをクリックして、カテゴリの再設定は完了です。

【画像1】
注)【画像1】は新しいカテゴリを選択してあとの画像です。
see0518f.jpg
↑画像をクリック(拡大します)


 上段の右端「ブログを見る」をクリックして、ブログを見てみましょう。

【画像2】
see0518g.jpg
↑画像をクリック(拡大します)

 
 ブログには振り分けた「カテゴリ」に項目が表示されていますね。

 現在はテスト用のブログのため2記事分のカテゴリしか作成していませんが、将来、記事数が増え、カテゴリ分類に整合性がなく、雑然としているように感じたら、カテゴリを細分化するなりのブログの整理しましょう。

  「記事カテゴリ」のメニューから、「カテゴリ名」を変更したり、追加、削除が出来ますので、必要に応じて再整理をしておきましょう。

 「ブログのチェック」は常に心がけておきましょう。

  

2008年05月18日

カテゴリの組み立て(2)

 メニュー「記事投稿」のサブから「記事カテゴリ」を選択します。

 「画像1」のように、現在登録されている「記事カテゴリ名」には、初期設定の「日記」が、その下の枠には「新しい記事カテゴリの追加」「記事カテゴリ名」の入力ボックスがあります。

【画像1】
see0518d.jpg
↑画像をクリック(拡大します)


 追加ボックス内に「新しいカテゴリ名」を入力して「追加」ボタンを押すと「新しいカテゴリ名」が追加されます。

テストブログでは、「今日の出来ごと」と「思い出の写真」の2個のカテゴリを追加してみましょう。

【画像2】
see0518e.jpg
↑画像をクリック(拡大します)

 
 まず、「今日の出来ごと」を追加します。次に「思い出の写真」を追加して「画像2」の画面に移行します。

 新しいカテゴリ名が追加されていますね。

 カテゴリ一覧の最右端に0や1が表示された入力欄があります。

 この欄はブログを表示したとき、カテゴリを並べる順番を指定する枠です。

 数字の小さい順に並べ替える機能です。

 0、1、2(0は無くてもいいです)と並べる順の数字を入力すると、そのとおりに上から順に並べ変えてくれます。

 「今日の出来ごと」
 「思い出の写真」
 「日記」
 の順に指定してみましょう。

 「今日の出来ごと」に1、「思い出の写真」に2、日記に3(途中の数字が抜けていてもかまいません)を入力します。

 「日記」には、投稿記事が増えて、カテゴリを追加することを見込んで、数字を最初から5とか10のように大きい数字を設定しておき、新しくカテゴリを追加しても、常に最下段にセット(表示)されるようにしておく手もあります。

 数字の入力後に「表示順の変更」のボタンをクリックして決定します。

 順番が入れ替わりましたね。

 この順番がブログで表示される順番です。順番を変更したければ、いつでも「カテゴリ」のこのページで自由に変更できます。

 記事のカテゴリ名は作りましたが、記事が今のままでは「日記」に分類されたままですので、記事もカテゴリに振り分けましょう。


2008年05月16日

カテゴリの組み立て(1)

 カテゴリ(カテゴリー)=国語辞典では、カテゴリを範疇と訳しています。

 範疇…漢字は難しいですね。

 説明も難しいです。
 「同一性質のものが属すべき部類。分類・認識などを支える、根本的な枠組み」。

 ヤフーや楽天などでは商品紹介で細かく捜しやすいように商品を分類していますね。 

 新聞では「経済面」や「社会面」がありますし、雑誌では一記事に「大見出し」や「小見出し」があります。同じだと考えればいいです。

 ネットから訪問する、あなたのフアンの方に、分類わけをして読みやすい構成にすることが、ブログでは大切です。

  テストブログの「カテゴリ」はシーサーブログの初期設定どおりに「日記」にしてありました。

【画像1】
see0518a.jpg
↑画像をクリック(拡大します)


 「画像1」のように右サイドのカテゴリは「日記」ですね。
 
 カテゴリの分類では
 
 たとえば「愛犬ミロ」(仮です)についてを書いているブログでしたら
 @ミロの日常
 Aミロの面白い話
 B愛娘とミロ
  などと分けてもいいですね。

 @の「ミロの日常」については、日々の記録を中心に書き込みしたり、
 Aの「ミロの面白い話」では、ミロが取る特異な行動をまとめてみたり。
 Bでは「娘とミロ」の愛情あふれるエピソードをピックアップしてまとめた記事にすることが出来ます。
 
 また、貴方が犬について詳しい方で、作りたいブログも「犬の話」であれば、
 犬種別に
 @マルチーズについて
 Aゴールデン・リトリーバーについて

 などの分け方から、さらに「…の歴史」や「…の性格」まで細かく分けることが出来ます。


  

2008年05月12日

テンプレートの変更(2)

では、実際のブログを見てみましょう。

「保存」して「ブログを見る」でしたね。


【画像4】
see0511f.jpg
↑画像をクリック(拡大します)


 全体的には新しいテンプレートは「気に入った配置」になっていますか。

 バランスはどうでしょう。

 右サイドはうまく表示されていますか。

 時々、元のテンプレートの時にはうまく表示されているが、新しくテンプレートを変更したとき、サイドバーが表示されてなく、ブログの最下段に押し出されている場合があります。

 おもな原因は、写真などの画像の左右サイズが微妙にずれていたり、少し大きいときによく見られる現象です。

 左右を少し小さくすると、巧く表示されて解決することが多いですが、画像をどんなにいじっても、解決しないときは、HTMLタグの入力忘れが多いです。

<a href=”   >〜</a>の 終了タグ</a>を打ち忘れたとか、
<div style    >  〜 </div>
の</div>が見当たらないなど、結構忘れるものです。

 HTMLは記事入力ボックス内で、連続して入力することが多いので、開始タグと終了タグ、「入り子」の開始と終了など、完全に文法的に成立していないといけないのです。

 コンピュータが「どこどこが間違っています」のように指摘してくれたら、私のように素人でも気づき、訂正できますが、自分で捜すよりほかはないのです。

 調べるには結構煩雑な作業が伴います。

 HTMLやVB(ヴィジィアルベーシック)などの言語は、内側への「入り子」が多いですから、命令単位(タグ)で入力を確認しつつ処理していくと、ほとんど間違えずに入力できます。

 かりに失敗したら、メモをとる習慣をつけ、そのメモを確認しつつ訂正を重ねるうちに、入力の間違いが少なくなってきます。

 慣れが大事です。


テンプレートの変更(1)

■ 1-19 テンプレート


ブログを始める大まかな基本を再確認です。

練習で使ったブログの背景(テンプレート)を変更する方法を確認してブログのイメージを変更してみます。

左サイドのメニューから
パレットアイコンの付いた「デザイン」メニューを選択。
サブメニューから「デザイン一覧」をクリックします。

【画像1】の画面に切り替わりましたね。

【画像1】
see0511a.jpg
↑画像をクリック(拡大します)


seesaaブログが提供している背景画(テンプレート)は約300点もの作品が用意されていてその中から好きなデザインを選んで使えるようになっています。

画面の最下段には「現在使用中のテンプレート名」が表示されています。

使用中のテンプレートは「Cherry …」になっていますね。

テストで今使っているテンプレートは「右サイドバー」ですので
変更する新しいデザインのテンプレートも右サイドバーを選んだほうが無難です。

「シンプルシルバー」にしましょう。

「シンプルシルバー」のテンプレートのサムネイルの下に、小さい四角のイラストがあります。

その小さい四角内の右寄りに縦ラインが一本あります。
ラインが2本のものは両サイド、左よりのものは「左サイドバー」と見分けます。

また
デザインのメニューにも同じように
右・左・両方のボタンがあります。その中から右をクリックすると、右サイドバーだけのテンプレートが表示されます。

【画像2】
see0511b.jpg
↑画像をクリック(拡大します)


そのボックスにカーソルを近づけると「拡大」「追加する」が表示されます。

「拡大」をクリックして、「拡大画像」でレイアウトを見てみましょう。

【画像3】のように実際のブログで表示される、レイアウトのパターンが表示されます。
 
 このように各デザインをチェックして好きなテンプレートを選んでください。
 
 使って見たいテンプレートなら「このデザインをブログに追加する」をクリックします。

【画像3】
see0511c.jpg
↑画像をクリック(拡大します)



 表示画面が変わりました。
「追加したテンプレートを今すぐ使用する」をクリックして、新しいテンプレートへの変更は完了です。

【画像4】
see0511d.jpg
↑画像をクリック(拡大します)



 新しいテンプレートの全体的なデザインレイアウトと記事や画像の配置を確認しましょう。

 イメージと異なるデザインであれば何度でも、気に入るまで、変更はできます。

 最初に幾つかのテンプレートを選択しておいて、季節にマッチしたデザインで、四季それぞれにブログのデザインを変更して、ブログ全体を彩ることも出来ます。

 テンプレートはスタイルシートの使い方(変更・修正)さえ理解できれば
オリジナルの写真を使ったり、文字を大きくしたり、配置を変えたりと独自のブログが出来ます。



2008年05月07日

リンクの方法(3)

■ 1-18 リンクの種類とその機能

リンクはwebの特徴的な機能ですね。

web上のさまざまな情報をリンクで繋ぐことによって、ひとまとまりの情報記事、関連するブログ・ホームページとして情報網を構成します。

リンクには

■内部リンク
■外部リンク


の種類に大きく分けられ

●内部リンクは

●ブログ内の他のページにリンク。
●ページ内(記事内)の特定の項目にリンク。
●メニューに該当するページや記事にリンク。

あるいは
●次のページに進む。
●ブログトップ・記事のトップに戻る。

も同じ内部リンクです。

このように内部リンクは記事やページの関連する記事の階層の間を繋ぐ機能を持っています。

ブログでは、新しく書く記事が過去の記事と連動した内容だったとき
参照記事として過去記事へ行けるリンクを設定することで
補完的な役割を持たすことが出来き、充実した内容の展開ができる特徴があります。

訪問した人にとっても、
リンクを辿って目的とする記事を探し出し、まとめて読めるという利点があり
読者に優しい「ブログ構成」はリンクの効果を明確に使い、違和感無く丁寧に情報を提供しています。

リンクをうまく使ったブログは、見やすく、読みやすく構成されています。

リンクは非常に有用な機能ですが、設定も見苦しくならないように
ほどほどに使用することが基本ですね。


■外部リンクは

●web上の他のブログやホームページ、いわゆる他のサイトにリンク。
●相互リンク
●トラックバック

などになります。

外部リンクは
リンクの数やその質が検索エンジンの評価の基準になっているようで
SEO対策では重要視されている設定になっているようです。

内部リンク・外部リンクといっても多くの形式(種類)があります。

リンク関係で
頻繁に使用される語句(語彙)をチェックしてみましょう。


【リンクの用語の種類@】

●リンク元
(発リンク)



●リンク先


●被リンク








●相互リンク


●直リンク
(埋め込み)








●隠しリンク















他のwebや自分のwebにリンクをする時、そのリンクを張ったブログやページ。
リンク元には、記事・項目・ページ・画像などがあり、発リンクとも言います。

リンクした相手、ジャンプする相手先のこと。
リンクした先には記事・ブログ・webなどがある。

他のサイトやWebページからリンクされる(受ける)こと。
検索エンジンでは
他のwebページやブログからリンクされているということも評価の基準になり、
その数やリンクされたwebサイトの質が検索の結果に反映されるので
被リンクは重要であると言われている。

自分のブログと他のブログやページが、互いにリンクし合うこと。

他のサイトの内部ページへのリンクや他サーバーの画像などをタグで直接呼び出すこと。
「ディープリンク」「埋め込み」などとも言う。

直リンクは相手のデータ(記事や画像など)を直接呼び出すことになるので
守るべき約束事が多い。
無断で埋め込みをすると「著作権侵害」にあたることもある。

リンクしていることを隠している形式。
リンク文字をページのバックの色と同じ色
あるいは見えにくい小さいサイズの文字やアイコン・画像などを使い
リンクであることを悟らせない設定をして、特定のページに誘導する方法。

ほかに
表示しているリンク番地(偽装番地)に
別にのリンクを張って特定のページに誘導する方法も多く見られる。

これらの方法は
ワンクリック詐欺でも良く使われていて、ブログサービスでは硬く使用を禁止している。



【リンクの用語の種類A】………………………………………


●トップページ(ホームページ)
サイトの表紙として作者が指定したページ。必ずしもindex.htmlとは限らない。

●内部ページ
トップページではないページ。
ブログページ、サブページ、下位ページ、下層ページなどとも言う。

●文中リンク
一般ページの文章の中に、リンクを設定すること。
クリック率が高いという話もある。

●デッドリンク(broken link)
リンク切れ。
リンク先が存在しない、あるいはアクセスできなくなっているもの、リンク先のページが移転・閉鎖などで存在しなくなった状態。

●リンクファーム(link farm)
検索エンジンの検索結果で特定のWebページの表示順位を上げるために、そのWebページへの不自然なリンクが大量に張られている状態。

また、そのような不自然な大量のリンクを掲載したページ・サイト群。

●リンクレピュテーション(link reputation)
リンク先のページの内容を判断するために、リンク元サイトのアンカーテキストの情報を元に判断するという検索エンジン・アルゴリズムのこと。

 ※ロボット型検索エンジンはWebページの評価する際に
  対象ページに対して張られるリンク内のアンカーテキスト情報を分析し
  分類していると言われる。

●リンクポピュラリティー(link popularity)
検索エンジンの評価基準のひとつ。

被リンクの量と質を加味した評価方法で、多くのリンク(被リンク)を受けると検索エンジンから良い評価を得ることができ、評価の高いサイトからのリンクであれば、さらに質が高く評価される。

リンクポピュラリティを高めていくことは、SEO対策上重要となる。

●リンクフリー(link free:和製英語)
Webサイトのオーナーに許諾を求めることなくリンクしてもよいという意味。
「このページはリンクフリーです」のように使っている。

 ※本来、インターネットではリンクは自由ですが、悪質なリンクを避ける
  ため「許可を求めるのがマナー」という共通認識がある。

●バナー(banner)
banner (英)は旗を表し
他のウェブサイトを紹介する役割をもつ画像やアイコンのこともバナーと言うようになった。

●バナー広告
インターネット広告の一種。

Webサイトに広告の画像を貼り、広告主のWebサイトにリンクする方法で、インターネット広告としては最も広く用いられる手法である。

  ■成果報酬型
  ■インプレッション型
  ■クリックスルー型

などの種類があり
物販アフィリエイトの商品紹介もバナーをクリックする手法を用いている。


【リンク設定の用語】………………………………………



●<a> 
アンカー(ancher) = 碇、最終走者、固定する、支えるなどの意。

HTMLに記述された他のURLなどをアンカーといい
それを記述するための要素のことを<a>タグ(アンカータグ)という。

a要素にhref属性を指定するとリンクが設定できる。
リンク先のurlは絶対urlかまたは相対urlの指定になる。

記入(ソース)の形式は
a href="http:// url ">アンカーテキスト</a

<a>要素は従来「インライン要素」であり、「ブロックレベル要素」には入れることができなかったが、最新のHTML5からは、ブロックレベル要素でも使用が可能になっているようだし、href属性のないa要素での記入も認められているようだ。

●アンカーテキスト
リンクを設定するための<a>アンカータグで囲まれたテキスト部分。
リンクテキストという。
画像やアイコンなどもアンカーテキストと言ってもかまわない。

検索エンジンのクロームは「アンカーテキスト」の内容も評価の基準としているようだ。

●ターゲット
target="・・・"の値でリンク先を表示するウィンドウの形式を指定。

一般にはリンク先のコンテンツはリンク元と同じウィンドウで開きますが
target属性で開くウィンドウを指定することができます。

属性と値の形式
a href="http://url "target="_・・">アンカーテキスト</a

初期値は「target=""」
targetの値を記入しなければtarget="_self"と同じ意味になり
同じウィンドウ(同窓)に表示される。
 
 ▲target="_blank"
  新しいウィンドウを新規に開いて表示(別窓)。

 ▲target="_self"
  リンク元と同じウィンドウに表示(同窓)。
  
 ▲target="_top"
  TOP(最上位)のウィンドウ(プラウザ領域全体)に表示。
  ウィンドウがフレームに分割されていれば、分割を解除して表示。

 ▲target="_parent"
  ウィンドウがフレームに分割されていれば、その親フレームに表示。

    注
   ● target="_・・・"
    には「 _ 」(アンダーバー)が付きます。



<a>要素の中の
urlは、拡張子を含め大文字/小文字まで完全に一致させる必要がありますね。

リンク先に指定する「url」や「ファイル名」は
一文字でも間違っていると正常にリンクししません。

<>などの半角括弧を全角括弧<>で書いたり、抜かしたりする間違えも多いです。

    注)
   ●このシリーズでは
    確認のためにhtmlタグを例題(HTMLソース)として記入するとき
    英字の小文字の<>を「漢字の全角の<>」で記入しています

   ●記事設定の「url補完しない」にしてリンク機能のない
     <> 半角カッコにする方法もありますが、

   ●記事の説明の中で
     ※リンクさせないHTML
     ※リンクさせるHTML
    のHTML構文を、説明のため混在して使っています。

    リンクさせないHTMLには、漢字の<>を使用することで
    HTML構文と判断されない表記方法をとっています。

   ●使用する段階で漢字の「 <> 」を英文の小文字の「 <> 」に
    書き換えて使いましょう。


HTMLファイル名の拡張子「html」は「htm」の形もありますが
現在ではほぼ「html」を使うのが主流になっています。



▲ブログについて関連記事
   holder01.gif ブログについて「目次」
    http://tosiji-dreamafi.seesaa.net/article/96745429.html

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



リンクの方法(2)

■ 1-17 画像にリンクを張る

リンクは良く知られているように
画像やイラストなどの図版類にでも設定ができます。

画像にリンクを張る前に、
HTMLで画像を呼び出し表示する<img>タグの確認をします。


■img要素の形式

HTMLで画像を表示するタグは<img>ですね。
記事の中の画像を表示したい位置に<img>タグを記入して呼び出して貼り込みます。

    注
   ●img = (image:イメージ)
    画像、像などの意。webでは、静止画像のことをイメージと言う。

PCで使われている画像の形式にはbmp(ビットマップ)など
多くの種類が有ります。

ブログやホームページなどのwebサイトで画像を使う時には、
快適に送受信できるように、ブログサービスのサーバーにアップロードする
前に、画像専用のソフトでデータ容量を軽く(圧縮)して使用するのが理想(基本)です。

その圧縮形式が
頻繁に使用している「 jpeg、gif、png 」などの種類です。

圧縮ファイルについては



<img>要素には
画像ファイル名を指定する src 属性 が必要であり
<img>タグのみでは画像は表示されません。

【参照<img>要素の形式】

<img src="http:// … ;">

img
src
"http// ・・・"

⇒ image(イメージ) 画像を表す英語の省略形。
⇒ source(ソース)の省略。基、源の意。
⇒ 画像ファイル名。(ダブルコーテーションで括ります)

の各タグから構成され、要素全体の働きをします。

src属性の
画像のファイル名を「 " " (ダブルコーテーション)」で囲む形に注意しましょう。

さらに
<img>タグには</img>のような「終了タグ」は有りません。

▲画像にリンクを張る

前回の記事「リンクの方法(1)」では
ブログのタイトルのようなテキストにリンクを貼って
目的とするサイトやページにジャンプする形式でしたね。

画像にリンクを張る方法は
テキストにリンクを張る時と同じHTMLの形式です。

テキストの代わりに、<img src=" … ">要素で画像を呼び出し
リンクの<a>要素で括る形です。

専用サーバーを活用するホームページとは異なり
ブログサービスを利用しているブログでは
画像などのデータ類は、ブログサービス側のサーバーに保存されていますね。

そのサーバーから画像を呼び出して使用する形です。

<img>要素の中に記入する画像のurlの形式は
「絶対番地」を記入することになります。

絶対番地(絶対パス)とは

<img src="http://tosiji-dreamafi.up.seesaa.net/image/・・-thumbnail2.jpg"

の記述のように

 tosiji-dreamafi.
 up.seesaa.net/
 image/・・.jpg    

⇒ seesaa.netの「利爺とゆったり…」の中の
⇒ seesaaのサーバーにアップしている
⇒ データの中の、このファイル名の画像


 ●ブログアドレス
 ●画像を保存しているブログサービス名(例ではseesaaブログ)
 ●使用する画像類のファイル名

を含んだurlの全てを記入する方法です。

●このブログのように
独自のサーバーを持たず、レンタルサーバーも用いず
ブログサービスを利用している方は、サービスが提供しているサーバーの
一定の容量を利用する形式ですので、サーバーとその中のデータに辿り着ける道筋(絶対番地)の記入が必要になります。

●一般的に個人や企業などが運営しているホームページ(ブログ含む)では
独自のサーバーを用意して使用していることが多いです。

そのサーバーの中で、ドキュメントのHTMLファイル、画像ファイルなど一元管理しています。

同じツリー構造内での
リンク形式は、その構造内のホルダー毎の相対的な番地(相対パス)の記入になりますので「相対番地」での指定と言います。


実際に画像にリンクを貼ってみましょう。


<a href=" リンク先url "><img src=" 画像ファイル名 "></a>

<a>要素が「リンク先」

使用するサンプルは、前回から使用している画像(廊下)にします。

【画像1】
・・.jpg

画像(imgタグ)のHTMLは


【HTML】
<img src="http://tosiji-dreamafi.up.seesaa.net/image/・・-thumbnail2.jpg" width="150" height="92" border="0" align="" alt="・・.jpg" />

の形式になりますね。

元画像より小さいサムネイル画像を使用しています。


imgタグの中の<alt="">属性は
代替テキストを表します。

「代替テキスト」とは
画像が表示されない時に画像の代わりに表示する文字情報です。

初期値は自動的に「画像のファイル名」が表示されますが
「リンクを張るためのサンプル画像・廊下の写真」

のように説明文を<alt>属性の"・・"のなかに「廊下の画像」のようにテキストを入れておくと、何らかの原因で画像が表示されない時には、替わりにそのテキストが表示されます。


また、カーソルを乗せた時に画像の説明文を表示させるには
<titlle=" ">属性の「" "」の中に説明文(テキスト)記入します。

  「テキストの記入例」
  <title="沖縄の離島に仲間と行ったとき、宿泊したホテルの部屋の
   外側をはしる廊下です。自然光を生かした造りになっています。"

<alt>属性と<title>属性は
同じ仕組みのように見えますが、表示の状況が異なります。

最近では
<alt>属性に、音声再現などに対応出来るように、ページの記事を要約したテキストを記入して
リンク画像にカーソルを乗せると、音声でテキスト文を再生する仕組みもあるようです。


リンク先を、このブログのトップページ
「http://tosiji-dreamafi.seesaa.net/」
に指定して

画像の<img>要素を <a>要素で括って、リンク形式にしたのが下の「HTML」です。


【リンクのHTML】
<a href="http://tosiji-dreanafi.seesaa.net/"target="_blank"><img src="http://tosiji-dreamafi.up.seesaa.net/image/k・・-thumbnail2.jpg" width="150" height="92" border="1" align="" alt="・・.jpg" title="・・" /></a>

 ↓
【リンク設定をした画像】
k-ho01.jpg

カーソルを画像の中に移動してみると
yubi.jpgのマーク」に変わりますね。

同時に<title>に記入した「画像説明のテキスト」も表示されます。

画像の周囲の罫線を<border="1">にしていますので
リンクを表す「薄青色ので罫線」で囲まれています。

リンクが設定されたということですね。

   注)
   ● <border=" ">
    属性値の数値(0、1〜)が大きくなれば、準じて罫線も太くなります。
    「0」「" "」の時は罫線は表示されません。

   ●リンクを設定したサンプル画像は、
    画像にカーソルを乗せると画像が動き、罫線の色が
    レンガ色に変わるように
    CSSにリンク時の形状を変える定義をしています。

    ●初期値の表示とは異なりますので、ご了承下さい。


■リンク先の表示(同窓・別窓)の設定

リンクの設定には、リンク先のサイトやページを

●新しいウインドウで開く
●今見ているウインドウで開く


= 別窓(別ウィンドウ)
= 同窓(同ウィンドウ)

の方法があります。



●別窓(別ウインドウ)とは

今、表示しているウインドウを残したまま、別のウィンドウを開き
デスクトップに同時に表示させる方法で

<a>要素のリンクタグに<target="_blank">を記入します。

    注)
   ●target="_blank"  blank = 空白ページを意味します。
   ●別の空白ページを開き
    その中にurlで指定したページを開きなさいの意。
   ●blankを使用するときには、blankの前に「 _ 」が付きます。
   ●target=" " の行き先は指定には self・topなどがあります。 

別のサイトや他のページを参照させ
リンク元に戻りやすくする時によく利用されます。

リンク先が「別のウインドウ」で開き
デスクトップ上に他のブログやページが複数で同時に表示されますね。

その別ウインドウで表示しているサイトを閉じても、リンク元は閉じません。
プラウザのタグで開く時と同じ仕組みです。

●同窓(同ウインドウ)とは

リンク先のサイトも
今見ている「同じウインドウ」で開きますので
サイトを閉じたときには、同時にリンク元も閉じられます。

元のサイトに戻るにはウインドウを閉じるアイコン「 × 」ではなく、プラウザの左端上段の「 ← 」戻るアイコンを使用します。

<a>要素の
<target="_blank">タグを削除するか、または
<target=" ">の形にすれば同窓になります。


同窓でも別窓でも、プラウザの「閲覧の履歴」には、開いたサイトやページ
の「履歴」が残っていますので、該当するサイトをクリックして元に戻ること
が出来ますね。

同窓か、別窓にするかはページの使い方を考えて設定しましょう。

リンクを設定した後は
必ず「そのリンク」をクリックして、指定した場所(リンク先)に
ジャンプするか確認しましょう。

………

<img>要素で画像を表示して、<a>要素でリンクを張り
リンク先のサイトを開く「窓」の特性も確認しました。

その一連のHTMLの使い方が
「アフィリエイト」での商品画像やリンク先の設定の基本になります。




▲ブログについて関連記事
   holder01.gif ブログについて「目次」
    http://tosiji-dreamafi.seesaa.net/article/96745429.html

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



2008年05月06日

リンクの方法(1)

■ 1-16 リンクの種類と構造

リンクはブログやホームページには無くてはならない仕組みです。

    注
   ●(リンク 【link】(ハイパーリンク)

   文書内に埋め込まれた、他の文書や画像などの位置情報。
   ハイパーリンクを用いて複数の文書、および関連する画像などの
   オブジェクトを関連付けたシステムをハイパーテキストという。
   WWWはハイパーテキストの代表例で、Webブラウザで文書を
   表示し、リンクのある場所を,マウスでクリックすると
   関連づけられたリンク先にジャンプするようになっている。
                      【IT用語辞典】

辞書だけあって、書いている意味が理解し難いですね。


パンフレットなどの印刷物の場合
たくさんの情報を画像や説明文などを使用してまとめて情報を提供しています。

また雑誌や書籍など、ページで構成する本には「目次」があり
該当するページへ読み進めるような形式になっています。

ページに辿り着けば、欲しい情報の詳細が読めます。
そのような仕組みが、書籍、雑誌などの紙媒体です。

ブログなどのwebでは、モニタに表示される記事の情報を読み取ります。
関連する情報は、リンク先であるページやサイトにジャンプして取得します。

リンク機能でページを移動する形は
書籍の目次と同じ役割を果たしていて、webでも多くの情報を提供出来るようになっています。

「リンクで繋ぐ」と言う利点が、
webのブログやホームページの特徴であると言ってもいいでしょう。

その大きな特徴とも言える「リンク」の種類、仕組みを確認しましょう。


▲リンクの種類とその仕組み

日本語入力ソフトのワードや表計算ソフトのエクセルなども
リンク機能を備えていて「リンクは有って当たり前」の機能になっていますね。

リンクにはいろいろなパターンがあります。

●外部サイトにリンクを張る。
●ブログ内の別のページにリンクを張る。
●ページ内の「特定項目」にリンクを張る。
●アフィリエイトのための商品リンク。

などが一般的なリンクの形態ですが

外部へ、ブログ内の他のページ、同一ページ内へのリンク
と行き先が異なっていても同じ構造形になります。

前回のシリーズ「画像のアップロード」でも
サムネイルから元画像の表示にリンク機能を使いましたね。

リンクの
いちばん簡単な方法は、記事入力の際に
http://tosiji-dreamafi.seesaa.net/   ← このブログの「url」

のように、web上に存在するブログやホームページのアドレス(url)をテキストや画像にリンクを張らず
直接に記入して、該当するページを開く方法です。

    注
   ●http(エイチ・ティー・ティー・ピ)
   「HyperText Transfer Protocol」
   Webサーバとクライアント(Webブラウザなど)がデータを
   送受信するのに使われるプロトコル。
   HTML文書や、文書に関連付けられている画像、音声、動画
   などのファイルを、表現形式などの情報を含めてやり取りできる。
                           【IT用語辞典】

この形が、リンクの基本形であり「http」の機能を直接生かした使い方になります。

リンクを張り込む対象は
HTMLのリンクタグの使い分けで、その場に適したリンクの形式が取れますね。


■ブログタイトル、文章・語句などのテキストにリンクを張る。

この記事の 【利爺とゆったりアフィリエイト】 のトップページにリンクを張って見ましょう。

リンクタグは
<a href=" url " >  テキスト(ブログ名など)  </a>
の形式ですね。

<a>要素で
リンクする「文章や語句などのテキスト」を挟み込む形です。

a要素<a href="…">を分解すると


a
href

"・・・"
/a  

⇒ a要素、anchor 碇、目標。
⇒ hyper reference の略。
  reference は「参照:参考」の意。
⇒ リンク先は必ず "(ダブルコーテーション)で括ります。
⇒ a要素の閉め(/)です。  

の各タグから構成され、要素全体の働きをします。

テキスト(ブログ名)にリンクを張ったHTMLの形式は


【HTMLの形式】

<a href="http://tosiji-dreamafi.seesaa.net/"
target="_blank">【利爺とゆったりアフィリエイト】</a>


【表示例】

【利爺とゆったりアフィリエイト】

ブログのタイトルにリンクが張られました。

リンクのデフォルト表示では
ブログのタイトルには下線が付き、テキスト部分は薄青色に変わって表示されます。

  ※ 例では
   ●このブログのCSSではリンクを示す下線が表示されないように
    定義していますが、その定義のまま「表示例」に用いています。
       
   ●CSSの初期値(デフォルト)では「下線表示」です。   

   ●CSSでは、リンクの下線を表示しない、マウスを乗せたらテキ
    ストの色が変わる、画像が動くなどの定義ができます。    

リンクの基本形は

<a href=" リンク先 "> テキスト(リンク先のタイトルなど) </a>

ですね。

<a>要素はwebページにリンクを作ります。

<a>タグの中には「リンク先のurl」を記述します。

<a>要素の
テキスト」がリンク先のタイトルやページの項目になり、リンク元に指定したタイトルや項目を表示して、クリックすると
href属性で指定した「リンク先(url)」にジャンプします。

<a>要素で括られる「テキスト」は、下線や文字色が変わってリンクであることを示し、画像なら周囲にリンク用の罫線が表示されます。

この基本形を応用して、href属性のリンク先を変更して指定することで

【外部リンク】
●外部サイトにリンク。
 外部サイトのトップページ
 外部サイトの特定のページ
 外部サイトの特定の項目、特定の画像類 …など

【内部リンク】
●ブログ内にリンク
 ページ内の特定の項目
 ページ内の特定の画像
 別のページのトップページ
 別のページの特定の項目・画像類…など

に繋げ(ジャンプ)ます。

    注
   ●アフィリエイトのための商品リンクは、
    商品販売社を外部リンクとして接続。
    詳細ページを内部リンクや外部リンクとして応用している
    形式が多く見られます。

   ●リンク用のアイコンや画像・テキストなどは商品販売元からの
    提供が大方です。

リンク元には
テキストのほかに、写真などの画像類、アイコン・イラストなどの図版も使用でき
極端な例では「・」や「●」などの記号類にも適用できます。

悪い使い方の例では「隠しリンク」も可能です。

  ※隠しリンク =  このページ最下段を参照



このように
ブログの目的や用途に応じたリンクの形式を使い分けます。

内部リンクや外部リンクの具体的な表記方法については
下記のページを参照しましょう。

リンクの応用形を詳しくページ建てしています。



………

【隠しリンク】

記事文章の中には、リンク先のURLを表記しているように見せますが、クリックすると別のリンク先にジャンプするように、本物のリンクアドレスを隠して表示する方法。

簡単な判別方法は(個人的な考え)
リンクアドレス(URL)にカーソルを乗せるとIEやFirefoxなどのプラウザでは、下段のバーに(リンク先)のURL(記事中のURLと同じURL)が表示される仕組みになっているが、カーソルを乗せた記事中のURLとは、異なるURLが表示、またはまったく表示されず空白のときがあります。

【このブログの最下段に表示される参考画像】
150a.jpg
 ↑ 画像をクリック・元画像が開きます。

   @のリンクURLにカーソルを乗せると
   Aのプラウザの下段に同じURLが表示される。

   ※この欄に表示されるURLが異なっている。
    または何も表示されなければ注意したほうがいいでしょう。
   ※テキストリンクの場合は、判別が難しいです。
    表示されるURLのアドレスが、どのような形式になっているか
    個人の感覚に頼るしかないでしょう。


そのリンクURLをクリックすると、思いもしなかったブログやページにジャンプして戸惑うときがあります。

   ※ワンクリック詐欺の手口として
   ※ブログのアクセスランクアップ

などのため使われているようですが
信頼を得てこそのブログであり、被害は無くても、このような仕掛けをしたブログは避けた方がいいと思っています。

設定の方法は省略します。

ブログの記事を気楽に読むのもいいですが
注意を払うことも重要ですね。
 
    


▲ブログについて関連記事
   holder01.gif ブログについて「目次」
    http://tosiji-dreamafi.seesaa.net/article/96745429.html

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



画像のアップロード(4)

■ 1-15 画像の回り込みを指定する

ブログの記事を書いているとき
画像の右側あるいは左側に一連の文章を回り込ませたレイアウトにしたいと思うことがありますね。

記事と連動した画像が、文脈を断ち切ることなくスムーズな流れを維持し
同時に文章のポイントに画像をうまく配置できれば、
ユーザーの視線を考えたレイアウトができ、安定したページが作成出来ると
と思っています。

記事の流れや画像の使い方
その配置によってページの良し悪しが決まると言ってもいいでしょう。

記事とともに画像を使うとき、文章と画像の配置が重要になってきます。

画像を左に置いて右側は文章、画像は右側、または中央の配置、
見た目に違うデザイン・レイアウトになります。

画像を配置する位置を決める「回り込み」を確認してみます。

【参照図:ファイル編集】
up-etc02.jpg
 ↑ 画像をクリック・元画像が開きます。

「ファイル編集」のページ
「貼り付け」C の「配置指定」

●指定なし
●左回り込み
●右回り込み
●中央寄せ

の4つの項目から選択するようになっています。

デフォルト値は「指定なし」で、HTMLを理解して無くても、項目を選択するだけで
思い通りの画像の配置ができる非常に便利なチェック項目です。

サンプル画像と記事で表示の形を確認します。

【回り込みに使用する画像】
k-ho01.jpg

回り込みに使用する画像は、記事の表示範囲(スペース)を確保するため
設定サイズの「250px」を「150px」の小さいサイズに変更しています。

単独ページで使用するサムネイルは
この「ファイル編集」の中で自由にサイズ変更が出来ます。

数値を変更したあとは一旦「保存」をします。
保存を忘れると、画像に反映されません。

【使用する文章(テキスト)】

使用するサンプル画像とは関連のない記事ですが、
「利爺の他のブログ」に書いている「記事」を引用します。


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


■「回り込み」

    注
   ●画像の右に記事の流れ。
   ●画像の貼り込み位置を基準に捉えますので、
    この場合「画像を左に貼って、右は文章」です。
   ●画像は「左」、つまり「左回り込み」の指定になります。

    混乱しますね。

画像を左に置いて、記事は右側に表示ですので
選択項目は「左回り込み」になりますね。

【表示例1】 

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


HTMLタグを確認して見ましょう。

<img src="http://tosiji-dreamafi.up.seesaa.net/image/・・-thumbnail2.jpg" width="150" height="92" border="0" align="left" alt="・・.jpg" />テキスト<br clear="all">

画像表示のHTMLに左回りこみ<align="left">のタグが追加されています。

align 属性は
行揃えを指定するタグで、属性値「@left  Aright Bcenter」を持っています。
英文では行末を揃える「justify」と言う属性値も有りますが、日本語のテキストでは
「left」と同じ働きになりますので余り使用はしません。

align 属性は、文章や画像、table(表)など
さまざまなHTML構文で使用しますので、覚えるべきタグのひとつです。

この「align」属性がテキスト・画像などの、どのHTML内に在るのかが基準になります。
使用例では「画像のHTMLタグ」内ですので、画像の表示位置を指定します。

「注」で確認したように 
<align="left">の属性値は「left」指定ですので、画像位置が「左」文章は「右」の流れですね。


■「回り込み」

画像を右に置いて、記事は左側に表示。
選択項目は「右回り込み」です。

    注)
   ●左回り込みとは逆の配置です。
   ●align="right"

【表示例2】

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

HTMLの、align 属性の値は、<align="right">になっていますね。

■「中央寄り」

【表示例3】

k-ho01.jpg

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

<align 属性>の値は、<align="center">です。

「中央寄り」は中央に画像が表示されますが、記事は左右に分割されません。

<align> は
画像や文章などの表示位置「左、右、中央」を指定する属性値ですので
記事を分割する働きはありません。

分割表示は「段組み」の形式のひとつで
「table」や「float」属性を使っての表示になります。




<align 属性>の使用後、画像と共に使用した記事部分の末尾には
回り込み指定を解除する
<br clear="left">
タグを記入します。

解除を忘れると
その後の記事(テキスト)に影響を与えることがあります。

値が left や right であっても、指定を全てをクリアする
<br clear="all">
タグの方が使い易いですので、この形を覚えましょう。

……
▲画像と記事(テキスト)の間に余白を入れる。

「左回り込み」「右回り込み」の表示形式を確認していますが
表示された画像と記事の表示を見ると

【表示例1】のように、「画像」と「テキスト」の間に隙間が無く
画像のヘリと記事の頭がくっ付いて表示されていますね。

このような表示は窮屈なイメージを与え
デザイン・レイアウトの視点からは避けるべき表示の仕方になります。

ネット上の他のブログでもよく見かけるパターンですが、

画像と文章を同時に使うとき、画像のヘリと、それに続く文頭との間には
使用書体を基準とした1文字分程度のスペースを取る(離す)ことが、理想的なレイアウトの基本になっています。

ブログサービスの用意した「回り込み」のHTMLタグでは、余白を取ることを考えていませんので
余白が取れるように、独自でタグを追加してHTMLを修正します。


【表示例1】
k-ho01.jpg中国の「三国志」が好きな日本人は多い。
三国志は歴史を背景とした「歴史小説」ではあるが、今でも圧倒的な人気をほこり、最近では「レッドクリフ」の大作映画も公開された根強い人気の歴史ドラマである。


【表示例1の修正】
k-ho01.jpg中国の「三国志」が好きな日本人は多い。
三国志は歴史を背景とした「歴史小説」ではあるが、今でも圧倒的な人気をほこり、最近では「レッドクリフ」の大作映画も公開された根強い人気の歴史ドラマである。

「表示例1の修正」が画像と記事の間に余白を取った例です。
文章の頭が画像のヘリから離れているので読みやすくなっていますね。

ブログでの画像や記事の表示は
「見やすく、読みやすく」
が基本ですね。

画像のHTMLに
「margin」属性と、その値の「right」を用いて
記事の表示開始位置を、画像から右に1文字分寄せるタグを追加した形式です。

追加するHTMLタグは 
<style="margin-right:●px"> の形式で「 px  」の ● 部分に
使用文字の大きさを基準とした余白(スペース)のサイズを記入します。

この例では1文字の大きさ「 12px 」を空けています。

marginタグの挿入箇所は

<img src="http://… 画像url … align="left" style="margin-right:●px" />

<align 属性>の後ろにしていますが、その前に挿入しても構いません。

参照 
●表示位置指定(画像と文章)
●画像と文章を組み合わせる

●marginとpadding・その応用(1)
●枠内に余白を空ける。


回り込みの特性を生かし、
HTMLの属性・属性値をうまく使用して、デザイン・レイアウトのスッキリしたブログ構成を目指しましょう。

次回からは、
ブログやホームページの特性とも言える
アフィリエイトでも頻繁に使用する「リンク機能」について確認します。



▲ブログについて関連記事
   holder01.gif ブログについて「目次」
    http://tosiji-dreamafi.seesaa.net/article/96745429.html

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



2008年05月05日

画像のアップロード(3)

■ 1-14 サムネイル画像のリンクの仕組み

ブログでは画像にリンクを張って
元画像を表示する手法はよく使われますね。

ブログサービスのテンプレートの基準は
表示するモニタとの関係で横幅サイズを決めていることが多いために
ある程度の制約があります。

モニタのサイズは「1024×768px」(XGA)が一般的と言えますが
中には「800×600px」のサイズも存在します。
最近では「Quad-VGA」(1280×960)の普及も進み、モニタのサイズが大きくなる傾向にあります。

ブログのデザイン・テンプレートは
PCのモニタとして使用率の高い「1024×768px」サイズを基準として、
そのサイズより少し小さいサイズで作成されているのが一般的です。

さらに
2カラム、3カラムとフレームでサイドと記事領域に分けているため
ブログを初めて作成するときには、記事表示領域の幅にも気を付ける必要があります。

画像を表示する時
縮小した画像より大きい元画像を表示したいと言う時がありますね。

デジカメで撮った、スキャニングしたなど
画像は、表示領域内に収まらない、モニタ一杯の大きいサイズが比較的に多いですね。

ブログに画像をアップロードする前に
専用のソフトでトリミングや圧縮を行い、適正な画像にしてアップロードすることが
理想的な使い方です。

気楽に記事や手持ちの画像を表示できるのが「ブログの魅力」ですね。
その手軽さから、ブログを書き始めたという方が大半でしょう。

ブログを書くのに
難しい作業や工程があって、なかなか前に進めないというような障害があったら
今ほどブログは人気が高まることは無かったでしょうし、定着することも無かったのではと思っています。

画像にリンクを張って、元画像を表示する機能は
ブログの特性と言ってもいいくらい、頻繁に使われる方法です。


▲サムネイル画像およびリンクタグを確認。

画像アップロード後「ファイル編集」の「貼り付け」の項目で

●サムネイルを表示。
●別ウィンドウで表示する。

の両方にチェックをいれ、ファイルの添付を行うと記事の中にサムネイル画像が表示されますね。

そのサムネイル画像をクリックすると、アップロードした元画像が別窓(ウィンドウ)で表示されます。

クリックして元画像が表示されると言うことは
●サムネイル画像にリンクが張られ
●その行き先(リンク先)が元画像の指定になっているからですね。

記事にサムネイル画像を使う最も基本的な考えは

●記事中に大きいサイズの画像を貼り込むと、ファイルデータが重くなりすぎ表示に時間がかかることと、
●モニタから溢れるほどの大きな画像を、適正なサイズに変更する。

と言うことです。

色々なwebサイトを見ていると
あまりにも多くの画像を使用し、さらに表示サイズが大きいため
記事を表示するまでに時間がかかりすぎるサイトもあります。

表示までの時間がかかるブログに訪問しようとは思いませんね。
表示を待つくらいだったら、別のサイトを調べた方がいいとユーザーは思っているでしょう。

表示する画像類は小さいサムネイル画像で軽くして、HTMLやCSSには無駄な構文を作らず
省くものは省く考えで、全体的に軽くするが基本です。

その方法のひとつが
「サムネイル画像にリンクを張り、元画像を表示する」です。


▲HTMLタグの確認。

前回も確認したように
画像アップロード後「ファイル編集」ので
●サムネイルを表示。
●別ウィンドウで表示する。
画像のHTMLには、下記のようにサムネイル表示用のHTMLタグが自動で生成されています。

【サムネイル表示用HTML:参照1】

@<a href ="http://tosiji-dreamafi.up.seesaa.net/image/・・.jpg" target="_blank">
A<img src="http://tosiji-dreamafi.up.seesaa.net/image/・・-thumbnail2.jpg"width="250" height="150" border="0" align="" alt="・・.jpg" /</a>

この例での
HTML構文の中に、画像ファイル名が

「・・.jpg」「・・-thumbnail2.jpg」

2個ありますね。

さらに
@<a href="http://……> …… </a>
A<img src="http://……>
HTML構文が並んでいます。

@の<a> … </a>の要素で囲んだHTMLの形式がリンクを表します。

<a>タグの中の「 href 属性(ハイパーリンク)」は
外部のリンク先のwebページurl名、ファイル名、ブログ内部の他のページ、article名など
該当するファイルを開く属性です。

Aの<img src="http://……>は画像ファイル名が」「・・-thumbnail2.jpg」になっています。

「ファイル編集」での「●サムネイルを表示」
にクリックを入れて「ON」にした段階で、自動的にサムネイル画像用のHTMLが生成されます。
クリックをはずし「OFF」の選択では、AのHTMLは生成されません。


    
青色で記入された
<img src="http://"画像ファイル名">
がサムネイル画像を表示するためのHTMLです。

青色のHTMLの構文は
リンクを指定する赤色のHTML<a><……></a>要素の内側に記入され、赤色のHTMLに内包されています。

<a>要素で括る形がリンクですので
青色のHTMLにリンクを張ると言う表現になります。


参照HTMLの読み方は

@サムネイル画像(・・-thumbnail2.jpg)を表示して
Aそのサムネイル画像がクリックされたら
B元画像が保存(アップロード保存)されている場所に行って
 該当するファイル(・・.jpg)を呼び出し
C別窓で( target="_blank" )で表示しなさい。

という意味になりますね。

リンクの形式は

●内部リンクとして
「画像にリンク」「文章・文字にリンク」「ブログ内の別のページにリンク」

●外部リンクでは
「webの別のブログやホームページにリンク」

などが有ります。

そのほとんどのリンク形式が
アフィリエイトを展開する時に頻繁に使われています。


リンクのHTMLタグを直接記入するためには
HTMLタグの意味、使い方を理解していなければ上手く構文が作れませんね。

ブログでは
記事入力のときに、主要なHTMLの構文が簡単に入力出来るように、アイコンを用意しています。
記事入力ボックスの上段に表示している「入力用の各アイコン」がそれに当たります。

各々のアイコンの使い方は、別の章でページ立てをしています。



また画像のアップロードから表示は「ファイル編集」以外に
上段のメニューの「ファイルマネージャ」からも出来ます。

次回は
ブログに画像を張り込むときの基本
「画像の回り込み表示」の方法を確認します。




▲ブログについて関連記事
   holder01.gif ブログについて「目次」
    http://tosiji-dreamafi.seesaa.net/article/96745429.html

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



画像のアップロード(2)

■ 1-13 サムネイルのサイズとは

写真やイラスト、アイコンなどの画像は「px」の単位で表しますね。

px(ピクセル)の単位は、
皆さんの良く知っているデジタルカメラや携帯電話で話題になる「画素」と同じですが、よく使われるドットとは異なります。

このデジカメは1200万画素、携帯のカメラは1000万画素などと表現しますね。

    注
   ●ピクセル = 画素
    デジタル画像を構成する単位である色のついた「点」。
    デジタル画像は正方形(まれに長方形)のピクセルを規則正しく
    縦横に並べることで一枚の画像を表現する。
                         (IT用語辞典)
   ●ドット
    階調やカラー情報を持っているものをピクセル。
    ドットは白と黒の情報(2値)しか持っていない。    
                          
Pxの単位は
画像やイラストだけではなく
PCの表示域、ブログで用いられているフレームのサイズ、使用する文字の大きさ、
あるいはやtable(テーブル)の縦横のサイズなどに頻繁に用いられる単位です。

ブログで使う単位はpx のほかにinなど数多く有ります。
そして単位には絶対単位と相対単位があります。

今回は
アップロードした画像の表示数値の絶対単位「px」と「サムネイル画像」について確認します。


前回、確認したように
サムネイルは画面上で画像を小さく表示する方法でしたね。

商品を販売しているアフィリエイト・ブログで
テーブル機能を使って、商品の小さい画像を数多く貼り込み
商品を紹介しているページを良く見かけます。

その個々の画像には、リンクが張られ
クリックすると商品のことを、より詳しく書いた別ページに導く手法が取られていますね。

リンク先のページでは
商品のイメージを明確に伝えるため、大き目の画像を用いてアピールしています。

商品の概要は箇条書きなどで纏め、申し込みのためのクリックアイコンや、より詳しい内容が確認できる商品販売業者のページへジャンプするリンクも用いられています。

「明瞭な画像」と「読みやすく分かりやすいページの構成」
がアフィリエイトの販売促進に繋がっています。

その手法で使われている画像が「サムネイル画像」になります。

ブログやホームページでは、サムネイル画像の使い方次第で
ページの良し悪しが決まると言ってもいいくらいです。


seesaaブログでは
初期の「ブログ設定」の段階で
サムネイルのサイズ(長辺)を決めることが出来るようになっています。

初期設定でサイズを決められるようにしていることは

ブログ記事を更新するたびに
表示する画像の大きさが異なっていたら
各ページがデザイン的な統一性に欠け、見づらいブログになってしまいます。

ブログ作成の経験の少ない人のなかには

画像のアップロードは上手く行けたが

●画像を表示するHTMLタグの使い方が良く分からない。
●タグで画像の表示サイズの変更が出来ない。
●元画像が毎回異なるサイズなので、表示サイズを計算するのが面倒。

と悩む方もいます。

サムネイルのサイズを決めることで

●一定の大きさの画像を表示出来るのでレイアウトの統一感を活かせる。
●毎回、表示サイズを計算する必要がない。
●表示領域からはみ出すエラーの原因を避けれる。
●画像の張り込みを簡略化できる。

などの利便性に優れ

ページに統一感を持たせ、読みやすいブログの作成が無理なく出来るような
仕組みにしている意味合いが大きいです。

サムネイル画像は
一定の基準に則った「サブ画像」と捉えることも出来ます。


もともとサムネイル画像は
名前のとおりに小さいサイズの画像のことを言いますが
元画像より小さいサイズであれば「サムネイル画像」と言っても構わないと思っています。

サムネイル画像を上手く使いさえすれば
画像を思い通りに使用することが出来ます。


このブログは

使用しているテンプレートは3カラムです。
記事の領域は左右で400px、2カラムを使用している記事領域の3分2くらいの大きさです。

個人的に
使用する画像の横幅は最大で350pxまでと決め、サムネイルのサイズは、250px に設定しています。

この基準サイズは、ブログサービス側が決めるのではなく
あくまでもブログを書いている個人の一定の基準として決めています。

雑誌や書籍、新聞どは頻繁に画像を多く使用しますね。

各出版物は
ある一定の基準で取り扱う画像の大きさを決めています。

新聞では段数組みが基本になっていますので
画像のタテのサイズは段の上下の大きさが基準となっています。

記事を組む2段、3段の上下のサイズで画像をトリミングして
その段からはみ出ないように、またはその段よりあまり小さくならないような組み方をします。

これが新聞組版の一定の基準と言うことになります。

同じようにブログでは
使うテンプレートの種類によって、画像、文字の大きさ、行送り、色使いなど
個人的な基準を設けておくべきです。

その基準に沿ったブログの作成は
思った以上に簡便になり、編集(記事の入力)もすごく楽になります。


画像の相似形の計算

【サンプル画像】 
k-ho01.jpg
 ↑ 画像をクリック・元画像が開きます。

サムネイル画像を使用する前に
画像の相似形の数値の出し方を確認して見ます。

上記のサンプル画像の画像解像度は「500×307px」です。

長辺(横)が500pxも有りますので
記事の表示領域「400px」より大きいサイズです。

元画像をそのまま表示したら領域からはみ出しますね。


画像のサイズの計算方法は(サンプル画像を例にします)

元画像の大きさ「500×307px」は最初から分かっていますので、

設定しているサムネイルのヨコのサイズ「250px」から
タテのサイズを計算すればいい訳ですね。


【画像サイズの割り出し】

「元画像」
  ヨコサイズ 500px   タテサイズ 307px

「表示画像(サムネイル)」
  ヨコサイズ 250px   タテサイズ  


表示する画像と元画像の関係は相似形ですので、
サイズの分かっている元画像とサムネイル画像の
「ヨコ同士の比率」を計算して出せば、タテのサイズが割り出されます。

………………

【計算式】

 サムネイル 250 /(割る)  元画像 500 =  0.5 ( 50% )
 元画像   307 ×(掛ける) 50%     =  153.5(約153px)
 
………………

表示する画像の大きさは、横250px 縦153px になりますね。

この計算式は覚えておきましょう。
画像サイズの出し方で、結構重宝する数式です。


▲ブログに於ける画像の表示サイズ

「ブログ設定」で入力したサムネイルのサイズは
「ファイル編集」ページのサムネイルのサイズに反映されていますね。

このブログではサイズを 250px にしていますので、

「ファイル編集」ページの上部にある
「サムネイル長辺のpx数」
に250pxと表示されています。

記事の中に「ファイル添付」をすると
画像挿入のHTMLタグに、タテのサイズ(height)が 「自動で計算」 されて記入されます。

自動で計算する点がブログでのサムネイルの使い方の大きな特徴です。

【参照HTML】

<img src="http://tosiji-dreamafi.up.seesaa.net/image/k-ho01-thumbnail2.jpg" width="250" height="153" border="0" align="" alt="k-ho01.jpg" />

挿入されたHTMLを確認してみると
<width="250" height="153">(HTMLの青文字部分)

として、HTML構文内のサムネイル画像の長辺「 250px 」と
自動で計算された短辺(タテ)のサイズ「 153px 」が記入されていますね。

先の計算式で出したタテのサイズと同じ値ですね。


「ファイル編集」ページのサムネイルのサイズは
固定されていませんので
記事に表示する画像サイズを変更したければ、望む大きさのサイズを新たに入力すれば変更できます。

    注)
   ブログ全体に係るサムネイルのサイズ変更は「ブログ設定」の項目で行います。

サンプルHTMLでは、画像ファイル

●元画像のファイル名は「・・.jpg
●表示している画像のファイル名は「・・-thumbnail2.jpg

が2種類表記されています。

ホームページなどでは
HTMLを駆使して、表示画像のサイズを決めたり、
元画像と大きさの違うサムネイル画像を設定したりと煩雑な工程があります、

ブログでは気楽にブログが作成できるように

画像の取り扱いにおいても、クリックで小さいサイズのサムネイル画像が
できる仕組みを持っています。

元画像とサムネイル画像を同時にHTML内で処理することで
ブログの特性を活かしています。

ファイル名に「thumbnail」が附加されているのがサムネイルの画像です。

そのブログの特性から
アフィリエイトのようなリンクを活かした商品の紹介ページ作成に
自由度が増し、アフィリエイトの仕組みがスムーズに作れるようになっています。

アフィリエイトを行うには、ホームページよりブログの方が組み立てやすく
また、検索エンジンの上位に表示されやすいと言われています。

ブログサービスでは
利用者に対して、随時、使いやすいように新しい仕組みのシステム化を行っています。

利便性を考え、仕組みを上手く利用するように考えて行きましょう。


次回は「サムネイル画像」にリンクを張って見ましょう。

…………

【チョッとしたサムネイルのような小さい話】

サムネイルのサム(thumb)は親指のことですね。
「童話の親指サム」も有名ですが、ネイルは女性の方が大好きな
ネイルサロンのネイル(nail:爪)になりますね。

サムのように小さく
また親指の爪のように小さい画像という意味の言葉ですが
自分の親指を見てみると「なるほど」と納得します。

英語圏で新語を作る時、洒落た語彙を考え付きますね。
なかなか面白い、分かりやすい表現で感心です。





▲ブログについて関連記事
   holder01.gif ブログについて「目次」
    http://tosiji-dreamafi.seesaa.net/article/96745429.html

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


画像のアップロード(1)

■ 1-12 画像のアップロードとブログでの表示

ネット巡回して、いろいろなブログを見ていますと
デザインや写真画像を前面に出して、
強烈にアピールしている個性豊かなwebサイトも数多くあります。

ブログはどうしても文字中心の構成になりがちですので
画像やイラストを適宜に使用して、ビジュアル化を図ることは重要な課題です。

ブログに訪問した方は、文字中心のブログだと
読みながら途中で飽きて興味を失ってしまうことも考えられます。

また写真ばかりだと
適当に手抜きをして作っているのではと思われたりします。

その結果、ブログから立ち去るということがあります。

ブログには適宜な文章と内容、適切な画像とのバランスが求められます。

個人的には、読みやすい平明な文章の記事と
それにマッチするビジュアルなイラストや画像で組み立てられたブログが
訪問者・読者に受け入れられやすいと思っています。


■画像のアップロードの方法。

●データの管理

ブログサービスは
ブログ全体の構造に係る「HTML」や「CSS」、テンプレートなどに使用する一連のデータ類
利用者がアップした画像などのデータ、全てを一元管理する仕組みになっています。

seesaaなどのブログサービスを利用している方は
そのブログサービスのサーバーに一度アップロードして
そのサーバーから呼び出して、ブログで用いるデータ類を使う形です。

    注)
   ●個人でサーバーを用意したり、レンタルサーバーを契約して
    データ類を自分で管理する方法もあります。


ブログには欠かせない画像の
アップロードと使用方法を確認しましょう。


アップロードの基本的なことは
記事編集の入力画面の下段の項目タイトル「ファイルのアップロード」の
「?」のヘルプから確認するか、下記のリンクでチェックしておきましょう。

参照 
画像のアップロード方法
●seesaaブログhelp


▲アップロード

【画像1】のように、記事の投稿入力ボックスの下に
ファイルのアップロード」の項目がありますね。

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

その項目を開くと
今までアップロードした画像の「サムネイル」画像B
その下段に新しく「アップロードするファイルを追加」の入力ボックスが表示されます。

【画像1】を参考。

その右側には「参照」@と「アップロードする」A
の2個のプッシュボタンがあります。

「参照」ボタンは
アップロードする画像ファイルをどこから取り込むのか
保存している場所と画像のファイル名の確認になります。

seesaaブログのようなサービスを利用している方は、
PCのマイドキュメントやデスクトップの上に、専用のホルダーを作って
そこに保存管理している方が大方だと思います。

そのPC上の
保存場所の中からアップするデータのファイルを指定します。

今回は確認を簡便にするため下の「画像2」の写真をデスクトップに
ホルダー無しで単独で置いておきました。

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

【画像2】はPCのデスクトップに置かれた、ブログにアップロードする元画像です。

元画像は 解像度が「500 × 307px」です。
デジカメで撮影した原画を
グラフィック専用ソフトの「Adobe-Photoshop」で <jpeg> 形式に圧縮加工しています。
 
▲ブログサービスへの画像のアップロード

アップロードするファイルを追加のボタン「参照」をクリックすると、PCに保存されている画像類のファイルの一覧が表示されたウインドウが開きますね。

画像2のファイルの保存先は
デスクトップですので、参照先を「デスクトップ」に設定します。

その一覧から該当するファイルを選択して
ウィンドウの右下の「開く」ボタンをクリックです。

ブログのファイル「参照」の枠内に取り込むファイル名が表示されますね。

ファイルが正しく選択されているのを確認したら
「アップロード」ボタンをクリックして取り込みを開始します。

取り込みが完了したら
現在までアップロードしたデータのサムネイル一覧の中に表示されます。

サムネイルが表示されていれば
ブログサービスのサーバーにアップロードした今回の画像データは保存されたと言うことですね。

    注)
   ●ファイルなどアップロードしたデータは、元データのコピーが
    作成され、ブログサービスのサーバーに移動保存されます。

   ●PC上の元データはそのまま残っていますので、
    もしもののトラブルを考え、大切に保存しておきます。

▲記事内に画像を添付

記事文中に画像を貼り込んで見ましょう。

画像を使用する記事の位置(場所)に
カーソルを移動して、アップロードした画像のサムネイルをクリックします。

カーソルで指定した位置に
画像の「img」HTMLタグが自動的に生成され記入されます。

そのHTMLの例が下記のタグです。(本物です)

【画像のHTMLタグ:例1】

<A href="Http://tosiji-dreamafi.up.seesaa.net/image/k-ho01-dc6db.jpg" target=_blank><IMG border=0 alt=k-ho01.jpg src="Http://tosiji-dreamafi.up.seesaa.net/image/k-ho01-dc6db-thumbnail2.jpg" width=250 height=153></A>


画像のサイズは
width="250" height="153"
の大きさになっていますね。

参照用の元画像は 解像度が「500 × 307px」でしたね。

アップロードした画像は、元画像のサイズでブログサービスのサーバーに保存されますが、
確認しやすいように一旦サムネイルの大きさで表示するようにしています。

サムネイル画像のサイズは「ブログ設定」の時に記入した設定サイズです。

利爺のブログは、3カラムのテンプレートを使用しています。
記事の表示領域の横サイズは =「400px」 の大きさになっています。

「ブログ設定」の時に記入したサムネイルの設定サイズは「250px」ですので
この「250PX」のサイズでしたら十分に記事の表示領域内に収まりますね。

サムネイルの設定サイズは自分で確認しておきましょう。

    注
   ●サムネイル = thumbnail
   ●多くの画像を一覧表示するために縮小された画像。
    thumb(サム)=親指  : nail(ネイル)=爪
   ●親指の爪ほど小さい画像の意味。

元画像(500 × 307px)の大きさで直接表示すると領域から溢れてしまいますね。
領域から溢れると、カラム落ちなどの表示エラーの原因になりますので注意が必要です。

アップロード画像の一覧に表示されているサムネイル画像には
「編集」」と「「ごみ箱」」のアイコンが付いています。

▲画像(ファイル)の編集方法

アップロードしたファイルの編集を確認してみましょう。

サムネイルの中の「編集」の文字をクリックすると「ファイルの編集」のページ」が開きます。

【画像3:ファイルの編集】ページ
up-etc02.jpg
 ↑ 画像をクリック・元画像が開きます。

    注)
   ●ここでの「ファイル(画像)の編集」とは
    「トリミング」「画像解像度」「圧縮」「色味」などの一般的な画像の
    編集ではありません。

   ●トリミングなどに関する画像の編集(修正)は
    アップロードする前の作業として、自分なりに専用ソフトで
    処理しておきます。

このページでは
画像(ファイル)の「タイトル」「ファイルに付けるタグ」「サムネイルのサイズ」などの編集が中心です。

参照画像のようにページの右側の欄には、アップロードした画像が表示されています。

編集の詳細は

●タイトル
●ファイルのタグ
●サムネイル長辺
●画像の回転
●貼り付け

大きく5項目になっていますが

その中で
●タイトル
●ファイルのタグ
は過去の記事で確認しています。

●サムネイル長辺のPX数は「ブログ設定」の段階で記入したサイズですね。
例では「250px」の設定ですが、大きくすることも小さくすることも可能です。

    注)
   ●サムネイルの表示サイズ「ブログ設定」の段階で設定した数値が
    表記されます。
   ●ブログ全体のサムネイルの表示サイズの修正は「ブログ設定」で
    行います。
   ●ファイル編集のページは今、開いた画像だけの修正です。

参照 
画像の使い方
●画像・アイコンマーカーの表示位置の調整
http://tosiji-dreamafi.seesaa.net/article/136699008.html



●貼り付けCの中の

「サムネイル」D「別ウィンドウで表示する」E

のチェックボックスが「ON」になっていますね。デフォルト値は「ON」です。サムネイルを使用しないときには「クリック」外します(OFF)。

クリックを外しても
記事に中に書かれたHTMLは、そのままサムネイルのPXサイズで表記されていますので、
記事のHTMLを一旦削除して、再度サムネイル画像をクリックして、そのHTMLで表記されているpxサイズを修正、

または
サムネイル画像のHTMLを削除しないでそのままにして、表示したい大きさの画像のpxサイズに修正します。

「別ウィンドウ表示」
も同じチェックボックスです。
クリックを外すと記事中の画像をクリックしても、別窓での元画像の表示はしませんね。

その下段の
「位置指定」

画像の配置を指定する選択ボックスですね。選択項目は
●指定なし
●左回り込み
●右回り込み
●中央寄せ

HTMLの画像の配置(回り込み)のシリーズのページで確認しますので、ここでは省略しますが、

画像を左にするか、右に配置するかを選択するだけで、HTMLが自動で生成されますので、
悩みつつHTMLを書き込む必要がない分、非常に便利な選択項目になっています。

参照 
画像の回り込みを指定する
●指定なし●左回り込み●右回り込み●中央寄せ
http://tosiji-dreamafi.seesaa.net/article/95778172.html


ファイルの
「タイトル」「ファイルのタグ」「サムネイルで表示」「別ウィンドウ表示する」の各項目は
ファイルをアップロードする時に開くウィンドウにも同じ項目があります。

ファイルの編集ページを開かなくても
入力設定できるようになっていますので、適宜に使い分けましょう。

……

画像のアップロードの基本的な仕組みを確認しました。
ブログを展開するうえで、画像を用いることは、今や必須なことです。

利爺も画像をアップロードして記事に張り込み、気に入らなくて削除をして
修正してまたアップロードするの繰り返しです。

画像はブログにとって重要なパーツですので
自分で納得するするまで「アップロード」「削除」「元画像の修正」「再アップロード」の作業を続けてもいいでしょう。

その繰り返しで納得して表示したアイコンやイラスト・写真画像が
訪問した方にとって、見やすい、読みやすいと受け入れられるブログになります。

……

同じ画像を別の記事で再び使う時には
アップロード済みのファイルを指定してpxサイズを変えて使い回します。

※同じ画像を2度も3度もアップロードする必要はありません。



▲ブログについて関連記事
   holder01.gif ブログについて「目次」
    http://tosiji-dreamafi.seesaa.net/article/96745429.html

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



2008年05月04日

コンテンツの配置(1)

■ 1-11 コンテンツの配置

一般にコンテンツ(contents)とはブログの記事内容のことを言いますね。

seesaaブログではメニューの中のコンテンツは
ブログのカラムの形状やカレンダーの様なツールの配置などの
デザイン・レイアウトのことを言っています。

「コンテンツ」を変更するには
左のメニューから「デザイン」を選択して、そのサブメニューの「コンテンツ」から入り、そこで配置などを修正します。

    注)
   デザイン → コンテンツ の流れです。

【画像1】=コンテンツの配置
【画像1】
see0501c.jpg
 ↑ 画像をクリック・元画像が開きます。

入力確認用の「テストブログ」で使用している「テンプレート」は「Cherry Blossoms=右サイドバー」の2カラムタイプですね。

このテンプレートでの初期設定(デフォルト)のコンテンツ配置は
「画像1」で確認しているように

上段の枠内に「ブログタイトル」と「ブログ説明
そして中段にブログの中心を占める「記事」が配置されていますね。

コンテンツボックスをクリックすると
ボックスの名前と使用するHTMLが表示されますので、何のボックスか迷ったら、クリックして中身を確認しましょう。

右サイドには「検索」「カレンダー」「ボックス広告」「プロビタ」…と置かれ
それらコンテンツの配置が反映されるのが、Web上で表示される「ブログのデザイン」になります。

その配置は、自由に設定変更が出来るようになっています。

「ブログタイトル」
「ブログ説明」
「記事」

の配列は初期の設定を変更する必要がないので
そのままの置くことにします。

右サイドのコンテンツの配置を確認して変更しましょう。

コンテンツの編集方法には
「編集モード:エキスパート」と「編集モード:ノーマル」の2種類から
切り替えの選択ができるようになっています。
初期設定(デフォルト)は「ノーマル」です。

「ノーマル」はアイコン(コンテンツボックス)を使用して
簡便に設定する方法です。
分かりやすい編集方法ですので、ブログ作成に慣れるまでは「ノーマル」の方法がいいでしょう。

●「編集モードノーマル」でのコンテンツの配置。

ノーマルでの特徴は
マウスを使う「ドラッグ&ドロップ方式」の編集になっています。

右サイドのコンテンツの並びは「検索」「カレンダー」「ボックス広告」「ブロビタ」「…」と上から並んでいますね。(デフォルトの配置でしたら位置が異なっている)

そのコンテンツを参考に

「移動および配置」の方法
「コンテンツの削除」の仕方
「新しいコンテンツ」の作り方

の順で確認しつつ、右サイドのコンテンツの並びを
「最新の記事」「カテゴリ」「過去ログ」…の順に組み立ててみます。


コンテンツの移動

コンテンツのボックスは、
バックに水色(ブルー)の箇所と中央に白抜き文字でのアイコンで、アイコンの右片隅に「×」印が付いていますね。

その水色の部分にカーソルを当てるとマウスの形状が移動を表す【矢印型十字形】「 」に変わりますね。

マウスの左をクリックして、ボタンを押した状態でカーソルを移動させると
ボックスはカーソルと共に動きますね。

移動させたい位置(設置したい位置)でクリックを離すと
「ボックス」はその位置まで移動します。
 
移動したいコンテンツは、全てこのドラッグ&ドロップで移動させます。

移動したい位置にドラッグ&ドロップで持っていけることはブログの特質です。

HTMLを駆使して作り上げるホームページでは
HTMLタグを打ち換える作業が伴い簡単にはいきません。


コンテンツの削除

コンテンツボックスの青い部分の右上には「 × 印 」が付いています。
その「 × 印 」が削除の記号です。

該当するコンテンツボックスを表示する必要がなければ
その × をクリックするとその場所から削除され、左サイドにある「ゴミ箱」に移動します。

「ゴミ箱」は
削除されたコンテンツボックスが入るだけで、その場では削除しません。
「ゴミ箱を空にする」ではじめて完全に削除されます。

PCのWindowsOSで使用するゴミ箱の機能と同じで
誤って削除してしまった「コンテンツ」を元に戻せる仕組みになっています。


新しいコンテンツを選択して配置する。

ゴミ箱のある左サイドの上段の方に「ブログパーツ」「コンテンツ」などのメニューが有りますね。

その中の「コンテンツ」には
「プロフィール」「トラックバック」「RSS」など
いろいろな機能を持つ「コンテンツ」が保存されています。

その中から、必要なコンテンツを選んでドラッグ&ドロップで該当箇所に移動させます。

非常に簡便です。

webで色々なブログを表示してみると
記事の上部に「画像」を張り込んだり、独自で作り上げた「最近の記事一覧」
あるいはサイドバーに「アフィリエイト」の広告が貼り込まれている形式をよく見かけます。

一般に「コンテンツ」を追加する時には
seesaaブログがデフォルトで持っている「コンテンツ」一覧の中から選びますが
探しているコンテンツが無い時には

自由形式

のコンテンツを使います。

「自由形式」の使い方次第で
同じ「テンプレート」を使っているブログとは異なる表示を実現して
独自のブログデザインを完成させることができます。
「自由形式」に使い方は後述します。

ブログはレイアウトだけではなく
「HTML」と「CSS」を理想的に使うことによって、ホームページに負けない表現が出来るうえ
簡便に発信できる特徴が有りますので、自分なりのブログを作成する思いは常に必要です。

まだまだ初期段階ですので、焦らずゆっくりと確認して
自分の「ブログ」を確立しましょう。

 
コンテンツが【画像2】のように並びましたね。

【画像2】
see0501d.jpg
 ↑ 画像をクリック・元画像が開きます。
 
配置を確認して、保存しましょう。

記事入力のときと同じ作業ですね。

右上のメニュー「ブログを見る」で
コンテンツを変更した後のブログの表示画面を見てみましょう。

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

右サイドバーでは設定したとおり
上から「最近の記事」「カテゴリー」「過去記事」「最近のコメント」「ボックス広告」
と並んで表示されていますね。

コンテンツの自由に並べ替えできる利点を活かし

ブログに訪問するする方が「見やすい」「読みやすい」「使いやすい」
コンテンツの配置と並びはどの様なものなのかを考えましょう。

ネットでいろいろと他の人のブログを見て

参考にして自分でも取り入れて学びましょう。



▲ブログについて関連記事
   holder01.gif ブログについて「目次」
    http://tosiji-dreamafi.seesaa.net/article/96745429.html

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



2008年05月03日

テストブログの確認

■ 1-10 テストブログを確認してみる


記事のエントリは完了しましたね。

実際にインターネットで公開される「テストブログ」を確認してみましょう。

保存終了後に上段のメニューから「ブログを見る」をクリックします。

【画像1】の表示になりました。

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


●ブログタイトル
●ブログの説明文
●ブログ記事のタイトル 
●本文
●右サイドバーの並び
●下段のタグ
●ニックネーム
●コメント
●トラックバック 


 
この画面がトップページで、
Webで公開されているブログの表示画面です。 

今まで確認した初期の設定
ブログタイトルからトラックバックまでの全てが表示されていますね。


バックに使用したテンプレート(画像)も「Cherry Blossoms 桜の花」になっていますね。

仮に書いて置いた少しの記事も表示されています。

ブログでは、記事を随時更新していくと
新しく書いた記事、日付の新しい記事がトップページに表示されます。
 
右サイドにはカレンダーなどのツールが配置され
ブログらしく見えますね。

シーサーブログの初期設定(デフォルト)では
カレンダーが表示されるように設定されています。

このような「カレンダー」「過去記事」などのコンテンツを
表示するかどうかは自由に設定できます。

詳しくは次回の「コンテンツ」の表示の項で説明します。

この「画像」のように
Webでの表示に至るまでには

●インターネットの接続
●ブログサービスでのアカウントの取得

●テンプレートの選択
●ブログ設定
●記事設定
●記事の詳細の設定
●記事入力

の流れが有りましたね。

   ▲ブログについて関連記事
   holder01.gif ブログについて「目次」
    http://tosiji-dreamafi.seesaa.net/article/96745429.html

とくにブログのデザイン、テンプレートの選定は
どの様なブログを作成するかを基本に考え「選択」することが重要です。

今回、使用したテンプレートは
2カラムの「右サイドバー」「左サイドバー」
3カラムの「両サイド」

の中から「右サイドバー」を選んでいます。

使用するデザイン(テンプレート)は途中でも変更が可能ですが
テンプレートの選択、そして変更では
気を付けるべき点として、各テンプレートのサイズ
つまり記事の表示領域のサイズやサイドバーの幅や大きさが微妙に異なることです。
    
最初は2カラムの「右または左サドバー」を持つテンプレートを選択して

その2カラムのブログで
デザインからレイアウト、記事まで作り上げて何度か更新したあと

テンプレートを3カラムの「両サイド」用に変更をしたとき
表示のデザインが崩れることがあります。

2カラムを基本として貼り付けた画像の左右サイズが
3カラムでの記事表示領域より大きいことも
原因の一つにもあげられますが、修正するのは面倒です。

●どのテンプレ−トを使うか
●カラムは何列にするか

などを最初から決めておき

変更するときも
2カラムなら2カラム用のテンプレートのものに変更することが無難です。

今回はブログを作り上げる行程の確認としての
テストブログを作成して表示をチェックしています。

デザイン的にも初歩の段階のです。

基本的な事柄だけを確認していますが、
デザインテンプレートとCSS(スタイルシート)・HTMLとの関連や

HTMLとCSSの連携などの仕組みを確認していきながら、
独自のブログを作り上げる基本をみていきましょう。

仕組みや基本が分かれば、ブログ
ひいてはHTML・CSSを使うことで、
ブログに少しだけ味付け、
スパイスを加えることでブログが見違えるように生き生きとします。

訪問する方が増えてくると
記事の更新、書き込みも楽しくなります。

次は
デザイン(テンプレート)の「コンテンツの設定」を確認します。



▲ブログについて関連記事
   holder01.gif ブログについて「目次」
    http://tosiji-dreamafi.seesaa.net/article/96745429.html

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



記事を書く(2)

記事を書くの後半です

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

●ファイルの追加
●追記
●トラックバック
●この記事の詳細設定

の項目があります。


ファイルの追加

ブログを一般の方に興味を持ってもらうには
書かれた内容は勿論のこと、関連する写真や画像に目を向けさせることも重要です。

そのような考え方から
多くのブログが「写真」や「デザイン画」などを記事の中に組み込んでいますね。

記事入力欄(枠)のすぐ下に「ファイル」項目があります。
左端の「+」をクリックするとファイル項目が開きますね。

写真、いわゆる画像類をブログで使う仕組みは

使用する画像をseesaaブログの管理するサーバーに保存(アップロード)する必要があります。

アップロードの仕方は、記事入力枠の上方右端に
「画像のアップロードの方法」
seesaaブログのヘルプへのリンクがありますので開いて確認して下さい。

写真や画像は
ブログで使用する大きさや画像の解像度など、レイアウトの基本線に沿って
トリミングをした、圧縮した画像をアップロードすることが重要です。

画像の加工、圧縮、ブログでの配置の方法については
ブログの作成に慣れた段階で確認しても遅くはありません。


追記

長い文章を分割する機能ですね。

追記については、「記事設定」の項目で確認しています。

クリックしたら追加する文章を入力するボックスが開きますので、
追加文章を入力します。


トラックバック

「記事設定」の段階での設定をそのまま生かします。


この記事の詳細設定

「記事設定」での設定はブログに対してでしたね。

この詳細設定では

今書いているページへの設定になっていますので、
ここで変更した事項は
この記事だけに反映され
大元の「記事設定」には影響しません。


公開/非公開
 
記事の書き込み途中では「非公開」に設定、
記事完成後に「公開」に変更することが理想的です。

ひとつの記事を書くのには時間がかかりますね。

最初から「公開」にしていると、書きかけの記事も公開されますので
その段階で訪問した方は、未完成の記事を読む結果になります。

「纏まりの無い文章」「意味も分からない記事」
と捉えられることが無いように「公開/非公開」には気をつけましょう。


投稿日時

記事を最初に「保存」した段階での日時が記録され表示されます。

投稿日時は変更が可能です。

ある記事だけは「常にブログのトップの記事」にしたい
記事の内容が「お正月」など時節に関するものなので、その時点までは常に「トップ記事」として置きたいなどの場合があります。

ブログは更新された新しい日時の記事がトップページに表示されますので
トップページに表示させる簡便な手法として

日時を「未来の日時」に変更すれば
常にその指定期日の時間まではトップページとして掲載されます。

その逆に「過去の日時」に変更したら
指定した日時の「過去のブログ」になります。

ある記事に対して日数が経ってから
関連する記事を書き上げて、差込みページにする時に用いることが出来ます。


●記事の再構築
●コメント    
●URL補完 
●改行HTMLタグの変換 
●有効期限・予約投稿


は「記事設定」どおりににしておきます。


更新を通知する

通知することを「ping」と言います。

記事設定の箇所での確認していますが、ブログを更新したとき通知するサイトです。
seesaaブログでの通知は自動になっていますが、仮に追加したサイトがあれば、
表示されているか確認してみてください。

当初はseesaaブログが設定しているping先だけで十分ですので
ブログを作りつつサイトを調べて追加する方向で考えましょう。

  
キーワードマッチ

設定は無効にしましたか、有効な設定ですか。

キーワードマッチを有効に設定したときは
seesaaブログが自動的に語句(キーワード)を選んで表示します。
(シーサーブログの提供するアフィリエイトです)

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

以上で記事の入力および設定は終了です。

ここでの設定はあくまでも、この記事だけの設定になります。

ブログ全部に反映させるには「記事設定」で、
新しく書き上げた記事への設定は、このページでと使い分けましょう。



記事を「保存」します。


他のページの閲覧に行く、PCの前を離れる
などの行為は「保存」を完了してからにしましょう。

何かのトラブルで保存されていないと
折角時間をかけ、悩みつつ書き上げた記事が消えてしまいます。

常に保存には気を付け、習慣化することが大切です。
 



▲ブログについて関連記事
   holder01.gif ブログについて「目次」
    http://tosiji-dreamafi.seesaa.net/article/96745429.html

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


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



 

2008年05月01日

記事を書く(1)

■ 1-9 ブログ記事の入力

いよいよ記事の入力です。
ブログに記事を入力して投稿することをエントリと言います。

入力の順番として

●記事のカテゴリ
●ジャンル
●記事タイトル
●記事のタグ
●内容
●ファイル
●追記
●トラックバック
●この記事の詳細設定

の流れになっていますね。

【画像1】=入力画面
入力画面の画像は分割しています。
【画像1】
see0430a.jpg
 ↑ 画像をクリック・元画像が開きます。

記事のカテゴリー
seesaaブログでの初期設定は「日記」ですね。

カテゴリーの追加の方法は後述しますので、日記のままにしておきます。

ジャンル
はseesaaブログが分類した「ニュース」「健康」「生活・日常」など大項目の中にさらに細かくジャンルを分けた選択メニューになっています。

ジャンルを指定した場合、シーサーブログ内の指定されたジャンルのページへあなたの記事がリンクされ、表示されるようになります。

今回は仮に「ショッピング」を指定しておきます。

記事のタイトル
は、今回書き上げる記事のタイトルですね。

仮のブログ作成ですから
「もうゴールデンウイーク」とでもしておきましょう。

記事のタグ

ブログの設定の時に確認したように
ブログの性格の位置づけとして「アフィリエイト」などのタグを記入しました。

そのとき記入したタグは
「ブログ」全体としてタグを設定して、
Seesaaサービスを使って登録できる多くの情報を横断的に関連づけることを目的にしましたが

ここのタグは日常的に行う
記事の更新・エントリーの段階で、その記事そのものの位置づけをすることになります。

ブログを検索している人は検索エンジンを使って語句(タグ)を入力しますが
入力された語句とタグが一致すれば検索エンジンにピックアップされる可能性が大きくなります。

ことを前提に記事の中から重要な語句を選んでタグとして入力します。

また訪れた方が、タグをクリックすると、
そのタグの内容で書かれたブログを検索することになり、関連した一連のブログが読めるようになる便利機能です。

タグを入力する、しないは自由ですが
タグには横の繋がりが広がりますので書き込んでいたほうがいいでしょう。

タグはブログ記事の一番下の段に表示されます。

試しにクリックして、どのような仕組みになっているか確認してみてください。


内容:エントリー

いよいよ本文記事の入力です。

………

平成23年が明けたかと思ったら、もうゴールデンウイークです。
「光陰矢の如し」といいますが……

………

と入力してみます。

【画像2】
ki-ic01.jpg

入力ボックスの上段に並んでいる「B」「U」などのアイコン(画像2)は
記事の入力を簡便にするため、アイコンをクリックするだけでHTMLの
タグが入力できるようになっています。

文章の一部をマウスでなぞって反転表示したあと、該当するアイコンをクリックすると
その反転した範囲は、指定されたHTMLで括られます。

例えば「B」は書体の「bold」を表しますが、文字を太くして強調する意味から
強調を表す「strong」タグが入力されます。

  例  <strong>B</strong> ⇒ 

「U」のアイコンは指定範囲にアンダーライン

そのほかに、文字に色を付けたり
文章を右揃えや中央揃えにするなどの指定がアイコンで出来ます。

入力した記事を赤い文字で表示してみましょう。

先ほど入力した文章の

頭の「平成」の文字から、末尾の「〜です。」までをドラッグして、
「Aに ▼ が付いている」アイコンをクリックします。

「画像3」のカラーバーが表れますね。

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

その中から赤い色(指定したい色)をクリックすれば
反転した文章が

<span style="color:#FF0000;">平成23年が明けたかと思ったら、もうゴールデンウイークです。
「光陰矢の如し」といいますが……</span>

のようにHTMLタグ(青色の文字)で括られていますね。

<span style=   >文章(テキスト)</span>

HTMLタグで、ブログで入力をするときに頻繁に使いますが
取り敢えずはアイコンの使い方を覚えて下さい。

アイコンの使い方やその役割はHTMLの関連記事に纏めています。
参照して下さい。

    ↓

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

これがホームページを作るときに使用するHTMLのタグです。

ブログはHTMLを意識することなく
文章や画像の入力、配置が簡単に出来る利点をもっています。

より詳しいことは下記のリンクをクリックして、シーサーのヘルプで確認して下さい。





▲ブログについて関連記事
   holder01.gif ブログについて「目次」
    http://tosiji-dreamafi.seesaa.net/article/96745429.html

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



2008年04月30日

記事の設定

■ 1-8 記事の入力項目の細かい設定

記事の細かい設定を確認します。 

設定ページへの入り方は
前回の「ブログの設定」と同じように上段のメニューの「設定」をクリックです。

左から二番目「記事設定」ですね。

【画像1】のようになります。

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

確認する項目は

●公開/非公開
●デフォルトカテゴリ
●ダイエット・ログを投稿する記事カテゴリ
●コメント
●トラックバック
●改行HTMLタグ変換
●URL補完
●キーワードマッチ(アフィリエイト)
●続きを読む文言
●更新されたとき通知するサイト

ですね。


■公開/非公開

ブログを「公開」するか「非公開」にするかですが
せっかく作ったテストブログですから公開しましょう。

「非公開」にしてもかまいません。

「非公開」にした記事が
web上での表示がどのような形になっているかを確認するには、web広告の右下のメニュー「記事を見る」のクリックです。

ラジオボタンの「公開」にクリックを入れておきます。


■カテゴリー

  kategorie = 範疇・分類・枠組み

の意味ですね。ブログで書いた記事の種類分けのことです。

記事のデフォルトカテゴリを設定します。

 ※デフォルトカテゴリ=seesaaブログが分類分けしたカテゴリー。

デフォルトに無いカテゴリを追加するには「新しいカテゴリの作成」します。

書いた記事を「日記」の分類にするか
「友人との思い出」や「遊び」のコーナーにするか
の分け方です。

ブログを日記として書く時には、一般的にテーマを決めずに
友人のことを書いたり、おいしい食べ物について、楽しい遊びなど
いろいろな内容で書いていますね。

記事を友人・食べ物・遊びなどのように、カテゴリー分けにして纏めてあると
訪問した方がそのカテゴリーをクリックすることにより、ひとまとめの単位として読んでいけます。

このブログでの例では、メニュー立てしている項目

または左サイドの「ブログの作り方」「物販アフィリエイト」「アクセスアップ」
などの項目がそれに当たり、関連する記事を纏める便利な機能です。

記事を書き込みつつカテゴリー分け、カテゴリ名の変更も出来ますので
当初はデフォルトの「日記」だけの分け方でいいでしょう。


■ダイエット・ログを投稿する記事カテゴリ


あまり必要ではないので設定通りにしておきます。
ブログに慣れてから再度記事設定を確認して下さい。


■コメント

あなたの記事を読んだ方から
記事の内容に対する賛同、あるいは意見などを書き込める機能です。

投稿されたコメントを受け付けるか、受け付けないかの設定です。

●受付/表示
●受付しない/表示しない
●受付しない/表示する
●受付/承認後表示

に設定できます。

「受付/表示」は
全てのコメントが無条件でブログのコメント欄に表示されます。

その設定で注意すべきことは
社会にはいろんなタイプの人たちが居ますね。

すごくいいアドバイスをしてくれる方もいますし
誹謗中傷のコメントを書く方もいます。

最近では出会い系のコメントが多く投稿される傾向にあります。

また「受付しない/表示しない」
に設定してしまうと、

ブログを訪問して、記事を読んで感動したり
コメント友達(コメ友)になりたいと思っても

コメント欄が封鎖されていては
感想を書くことが出来ないような状況になります。

記事を書いている本人にもどの様な人が訪問しているかも伝わらないですね。

個人的な考えでは
「受付/表示」を設定してコメントを全て表示することや
「受付しない/表示しない」で、逆に全てのコメントを拒否するより

「受付/承認後表示」
に設定して、多くの方の意見や考え方を聞き、
誹謗中傷などのコメントは削除する形にした方がいいと思います。

訪問した方にも、その方がむしろ親切で
「コメントを認めて表示した」と言うブログ管理者の気持ちは伝わります。


■トラックバックも同様です。

トラックバックはブログの優れた機能のひとつで
エントリ記事に対して

「同じ内容の記事、あるいは関連する問題を取り上げています」
リンクしていますので読んでみて下さい。

と、ブログのタイトルやURL、記事一部が表示される機能です。

AというサイトにBのサイトからトラックバックが有れば
訪れた人がAとBのサイトを連続して読める利点と、いろいろな考え方に
触れる機会が多くなるという独特な機能がトラックバックです。

  注)トラックバックの設定の仕組みは
    ブログサービス各社少しずつ異なります。

コメントと同じように
トラックバックを受け付けるか否かの設定になります。


■改行HTMLタグ変換

一般的に日本文では、文章の段落の終わりに「改行」(enter)を入れ
一まとめの区切を作り、次の段落に進みますね。

ブログやホームページを作り上げるには
HTMLと言う「マークアップ言語」を使用しますが
そのHTMLでは改行のタグは<br>の形式になっています。

HTMLの形式では
こんにちは、利爺です。<br>
のよう改行する箇所に記入して使い方をしますが

「記事設定」の初期の設定では
「改行を<br>タグに変換する」
になっています。

文章の改行が必要な箇所に、タグをいちいち書き込む必要がないように設定されていて、キーボード上のenterを押せば自動的にHTMLの内部で<br>に変換されます。

改行が自動的にタグに変換される機能が
気楽にブログを作成して発信できる要素のひとつにもなっています。

初期設定は
「改行を<br>タグに変換する」
になっています。

稀に文章のレイアウト上
どうしても<br>タグを直接書き込むことが必要なときが有ります。

参照 
テーブル作成とその応用(1)
●統計データなどに使うテーブルを作成する。
http://tosiji-dreamafi.seesaa.net/article/140029583.html


そのような時には
「改行を<br>タグに変換しない」
に設定します。

この設定にしてしまうと
ブログの記事を書く、画像を挿入する、リンクを張るような時にも
記事の初めから、改行のたびに<br>タグを一個いっこ直接書き込むことになります。

注意をすべき点は、今、確認している
この「記事設定」の段階で
「改行<br>タグを変換しない」
にしてしまうと、今から書き上げていくブログの全記事を対象にした設定になります。

記事を書くたびに各ページに<br>タグを直接書き込まないといけなくなりますので
「改行を<br>タグに変換する」
にしておきます。

「改行を<br>タグに変換する」の初期設定のままにしておきます。


■URL補完


■キーワードマッチ(アフィリエイト)

書き上げた文章の中の単語(キーワード)に、
対応したアフィリエイトのリンクを張るかどうかです。

アフィリエイトリンクが貼られると
ブログを読んでくれている方がそのキーワードをクリックすると
対象としたスポンサーのページに飛ぶ仕組みです。

そのページから
資料請求や購買などの成果があれば一定の報酬が支払われる仕組みです。

そのクリックを「有効」にするか「無効」かは自由です。

「有効」に設定すると
記事の語句に広告を提供しているSeesaaブログからのリンクが自動的に貼られます。

【画像2】
see0429g.jpg
↑画像をクリック(画像が拡大します)


■続きを読む文言

ブログがあまり長い文章だと、読んでいる方もスクロールを続けることになり
飽きることがあります。

短い興味あるインパクトの強い、最初の文章だけ残して
全文は興味のある方だけが「続きを読む」をクリックすることで
読めるように途中から分割して表示する機能です。

初期設定の文言は「続きを読む」
になっていますが、他の文言(言い方)を使用する場合はこの欄にて変更を行います。

「興味のある方は次へ」
「まだ続きます」
などの自分なりの表示が出来ます。

ただし
文章の分割(追記)は記事入力時での設定になりますので、ここでは「追記」に用いる「文言」のみの記入をおこないます。


■更新されたときに通知するサイト

ブログを更新したとき「更新しました」と通知をおくるサイトの設定です。

「Ping」といいます。
 
ブログが更新されたかどうかは重要なことです。
このブログの設定では表示された各サイトへ自動で通知します。

必要な通知サイトはあらたに追加も出来ます。

とりあえずは自動設定のままで十分ですが、下記の2サイトは追加しておきましょう。

  @http://ping.fc2.com/          Fc2ブログ
  Ahttp://rpc.reader.livedoor.com/ping  ライブドア

以上が「記事設定」の各項目です。

「保存」
をクリックして「記事設定」の終了です。

……

新しい「タイトル」でブログを作成するときは
初期値の「記事設定」をする必要があります。

例えば
ブログ@  「利爺とゆったりアフィリエイト -初級編- 」
ブログ@  「利爺とゆったりアフィリエイト -中級編- 」

のタイトルの異なる二つのブログを作成する場合
各々のブログに「初期の記事設定」をします。

seesaaブログには
このように初期値の「記事設定」の大枠で入力を管理して
設定の基本どおり、ブログの作成がスムーズに行えるようになっています。

この設定は各々のページ作成の段階で、反映されて行きますが、
そのページだけを対象にして「各項目」の設定の変更が出来る仕組みになっています。

この記事(ページ)だけは
「コメント」を受け付けるなど、設定を変更しておくという方法も取れます。

必要な時にそのページだけの設定を変更する考え方です。

設定はいつでも変更できますので
不都合が生じた時には該当箇所だけの再設定して変更しましょう。




▲ブログについて関連記事
   holder01.gif ブログについて「目次」
    http://tosiji-dreamafi.seesaa.net/article/96745429.html

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



2008年04月20日

ブログの詳細設定

■ 1-7 ブログの詳細の設定


●ブログ大まかな設定に追加で
「ブログの詳細」を設定します。

新しいブログを設定して
seesaaブログにサインインしてみると

【画像1】のように「新しいブログを作成しました」の画面になりますね。

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

本格的に
「自分のブログ」を作成する方法を経験しましょう。

「新しいブログを作成しました」の中に「●●さんのブログ」という形で
登録したあなたの名前のブログ一覧が表示されます。

今回は初めてですから1個のタイトルだけの表示になりますが、
シーサーブログは、1アカウントでブログを数多く作れますね。

例えば

ひとつは「個人の日記」
2つ目は「写真集ブログ」
3は小遣い稼ぎのための「販売ブログ」

など目的の異なる幾つもブログが作成できます。

「●●さんのブログ」の詳細に
作成した全てのブログのタイトルが表示されますので、更新する時に
該当するタイトルをクリックして、ブログのページに進む仕組みになっています。


【画像2】のように
登録した「新しいブログ」のタイトルが表示されています。

そのタイトルをクリックします。

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


設定の中には「ブログ設定」と「記事設定」の2カ所にしておきます。

ブログを作っている間に理解出来るようになりますので「広告設定」は省略します。


上段に表示されている

「メニューバー」の右端の「設定」をクリックします。

設定の専用メニューに替わりますので、その中の「ブログ設定」を開きます。

「画像3」のようにブログ設定画面になります。

新規ブログの設定の時より、項目の数が増えていますね。

今後はこの「ブログの設定」メニューで、表示方法などの修正や変更を行います。
重要な設定メニューですのでよく覚えていてください。

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

一度登録した「ホスト名」だけは変更できませんので
画面上に「ホスト名」は表示されていません。

「ホスト名」をどうしても変更したければ、前述したように
ブログの削除をする必要がありますね。


設定の詳細を確認していきます。

【☆ブログキーワード】

キーワードとは
おもにPCを利用している一般の人はYahooやGoogleのような検索エンジンを利用しています。

読んでみたい記事や情報がネット上に有るかどうか「キーワード」を検索窓に入力しますね。

検索エンジンは、入力された検索ワードと一致している
ブログや情報をピックアップして、検索結果として表示します。

検索をしているワード(言葉)が使われているブログなのかどうかを
判断する基準がブログキーワードになります。

検索エンジンは設定したキーワードを確認して
さらに、記事本文の中にも一致した語句があるかを調べます。

ブログの大枠(全体像)として検索エンジンにチェックしてもらい
その上、記事の内容まで確認してもらうためには最初のチェック段階の
ブログキーワードを選定して対策することが重要です。

検索エンジンを使って検索する方は
有名なタレントの方のブログを読みたければ

キーワードとして「タレント名」を入力すれば
本人のブログやフアンの方が書いた「記事」が検索結果に表示されますね。

それを辿って行けば本人のブログや情報が読めます。

それとは逆に、一般の方は
利爺やあなたのブログのことを知らないわけですから、タイトルや名前、ニックネームなどで検索することは無いですね。

調べたいワードを入力して検索エンジンの上位に表示されている
「ブログ」や「情報」を読んでいきます。

一般の人の目に触れさせる。

言い方を変えれば
検索エンジンにチェックしてもらう為にはブログのキーワードが重要になってきます。

キーワードを重要視して
検索されやすいように対策をすることを「SEO対策」といいますが
賛否両論があるくらい難しいことですので、記憶には残していてください。


このテストで作っている
ブログの「タイトル」と「ブログ説明」から内容にマッチしたキーワードは、

●テスト
●ブログ
●初めて
●作る

くらいですね。

今後いろいろと属性のあったキーワードの作り方を学んでください。
必要になります。


【☆ブックマーク】

ブックマークは
ブログ読んで方が面白いブログなので
自分のPC(よく利用しているプラウザ)に登録しておこうとマークをクリックしたら
登録される仕組みです。

    注
   ●ブックマーク (bookmark)、お気に入り。

   ●書籍の「しおり」に似たWebブラウザの機能。
   何度も訪れるWebサイトのアドレス(URL)を記録しておく機能で、
   マウスによる操作で、Webサイトのアドレスを指定することが出来る
   機能。   
   ●URLを入力したりリンクをたどっていく手間を省くことができる。


画像では
プラウザの名前とクリックボックスが表示されています。

読者がどのプラウザを利用しているか分からないので、知っている範囲で
クリックマークをしてもいいと思います。

seesaaブログでクリックが付いている程度のプラウザの設定でも
今は構いません。

クリックされたプラウザは
ブログ記事の最下段にマークとして表示されます。

あなたのブログを読んでいる方が、該当するマーク(プラウザ)をクリックしたら
そのプラウザのブックマーク(お気に入り)に登録される仕組みです。

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

    
●メルマガの配信
●ヘルプの表示
●コメント/トラックバック通知メールアドレス
●リッチテキストエディタ
●過去ログページ
●カテゴリページ


などは、あまり気にしないで初期設定のままでいいでしょう。

【☆コメント通知 ☆トラックバック】
は記事設定のとき、より細かい設定が有りますのでその段階で確認します。

「ブログ設定の変更」
をクリックしてブログ再設定を完了しましょう。




▲ブログについて関連記事
   holder01.gif ブログについて「目次」
    http://tosiji-dreamafi.seesaa.net/article/96745429.html

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



2008年04月10日

ブログの設定

■ 1-6 新しいブログの作成する

【画像1】はブログ作成のための細かい設定画面です。

新しいブログを作り上げる準備として

●ブログの設定
●記事の設定
●広告の設定

の各設定があります。

その中の【ブログの設定】は
白紙状態のブログのデザイン(テンプレート)やタイトルを決め、インターネットにブログとして発信する為の準備です。

項目順に確認して行きます。

【ブログの設定】

設定すべき項目が表記されていますね。

【画像1】
 seesaa007.jpg
  ↑画像をクリック(画像が拡大します)

最初に設定する項目は
☆ブログのデザイン 
☆ホスト名       
☆ブログタイトル
☆ブログ説明文
☆ニックネーム
認証コード
新しいブログを作成する
⇒背景に使う画像や全体のレイアウト
⇒URL(住所)
⇒あなたのブログ名前(タイトル)
⇒内容を要約表示(タイトルと共に表示)
⇒コメントなどで頻繁使用します
⇒シーサーが表示している数字を入力
⇒クリックで完了

ですね。

【画像2】
seesaa008.jpg

各項目の右端には「画像2」のように「?」マークが付いています。

そのマークはヘルプを表し、
クリックすると、項目の概要を説明したウインドウが開きます。

各項目を入力する前に
ヘルプの内容をよく読んで、入力内容や疑問点は理解しておきましょう。


上から順番で確認して行きます。

【☆ブログのデザイン】

ブログの背景に使用するデザイン(テンプレート)の選択です。

テンプレートは同じデザインであっても、
カラムの構成(参照図)が異なります。

ブログに応じた好みのカラムのテンプレートを選択して設定します。

【参照図】
column01.png
 ↑ 画像をクリック・元画像が開きます。

    注
   ●カラム
    column(列)
    ブログレイアウトの列数のことで、1カラムは1列、2カラムは2列
    3カラムは3列の構成となっている。

    記事を表示するメインカラムと
    カテゴリやパーツを設置するサイドカラムから成り立っている。

    一般的に見易さを考え1〜3カラムが主流となっている。

    ●利爺のこのブログは3カラムで構成。 

確認のため
「Cherry Blossoms(右サイドバー)」
の2カラムのテンプレートを選んでおきますが、
 
デザインは設定した後でも
豊富なテンプレートのサンプルの中から自由に好きなデザインを選んで変更できます。

デザイン的な好みは各人各様ですが

報告書・統計類あるいは自分史のようなブログに
漫画的な軽い感じのイラストを使ったテンプレート。

日常の軽い話題を掲載するブログに、重苦しいテンプレートを使用する。

など、記事内容にマッチしないチグハグなデザインは避けたほうが無難でしょう。

作成するブログの内容にあったテンプレートを選ぶことが重要です。


【☆ホスト名】

ブログのURL(住所番地)です。
1ブログに1ホスト名しか設定出来ませんので注意しましょう。


シーサーブログでしたら
「Http://blog.seesaa.jp/」 がホスト名ですね。

Http://***.seesaa.net/ の * 印部分に

例えば
tosiji-testblog のような自分の好きなURLを半角英数文字で入力します。

Http://tosiji-testblog.seesaa.net/
の形になり seesaa.net が管理している tosiji-testblog
の意味になります。

 ※説明のため
 リンクしないように使用している「Http」は正式には
 小文字の「http」です。



ホスト名(URL名)は
1度登録すると変更できませんので、正式なものを考えて入力してください。

    注
   ●URL (Uniform Resource Locator)
   読み方=ユーアールエル

   インターネット上に有る文書やファイル、画像などの場所を示すアドレ
   ス(住所)のこと。

   情報の種類やサーバ名、ポート番号、フォルダ名そしてファイル名
   などで構成されます。

設定した url を途中でどうしても変更したい時は
今作っているブログを削除して、新しくブログを作る必要があります。

削除してしまうと
すでに入力してあった「ブログの本文の記事」も
全て削除されますので気をつけましょう。

今回はブログ作成の経験のためのテスト入力ですから
確認後はブログを削除しますので、気軽に入力して構いません。


【☆ブログタイトル】

開設するブログの名前(タイトル)です。

ホスト名(URL)は途中変更が出来ませんが
各項目は設定した後も、必要に応じて手直しが出来ます。

気に入らないブログ名でしたら、何度でも付け直しが出来ますので
最初は、仮のブログ名でもいいでしょう。
 
確認用のブログ名を「「 …のテストブログ 」
としておきます。

 例)「利爺のテストブログ」のようにですね。


【☆ブログ説明文】

タイトルの下の方に公開されるブログの簡単な説明文です。

訪問してブログを読んでくれる方のために、どのような内容のブログであるかを
表示して、さらにブログをアッピールするためにも

端的で魅力的な説明文を入力しましょう。

ブログのSEO(検索エンジン対策)では、

ブログのタイトル、その説明文も重要な事項になりますが
まだ初期の設定段階ですので、簡単な説明文でいいでしょう。

今回の確認用の説明文は
「初めてブログを作るためのテスト用ブログです。」
とでもしておきましょう。

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


【☆ニックネーム】

ニックネームは名前だけではなく、好きな言葉でもいいです。

ブログページの下段に表示されますので、
コメントを受けるときや、その返事をするときにも頻繁に使いますので
相手に受け入れやすい、または印象に残る名前の方がいいでしょう。

このブログのニックネームは「利爺」としています。


【☆認証コードの入力】

今まで入力した各項目の認証のために
認証コード入力ボックスの下の網目の中の表記されている「数字」を入力します。

数字の入力後
「新しいブログを作成する」

のボタンをクリックしてブログの設定は終わりです。

ほかの人が使用しているホスト名と、今回設定したホスト名が同じであれば

次ページで「このホスト名はすでに使用されています」
と再入力を求めてきますので、指定項目を再度入力して設定し直してください。


以上でブログ作成のための項目の設定は完了です。

本格的にブログを発信するには

「記事の設定」
「広告の設定」

細かい設定が残っています。




▲ブログについて関連記事
   holder01.gif ブログについて「目次」
    http://tosiji-dreamafi.seesaa.net/article/96745429.html

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



×

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