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




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


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

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

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


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

2009年11月29日

タグの仕組みと基本形

■ 5-2 タグの基本形

HTMLは、いろいろなタグを使って、
「ここは見出し」「ここには本文」のように、WEBページを構成する要素を指定します。

見出しや本文の表示、文字の形や大きさ、色の指定などをHTMLの各要素を使って、
マークアップしていくのが基本になります。

プラウザはHTMLで書かれたソースを読み込み
その内容を解釈して、利用者が見やすいように表示します。

ページのフレームの形作り、デザインレイアウト、文字の大きさや文字に乗せる色、画像やアイコンの大きさや位置の指定をしたりと、HTML構文だけでページを作成するには結構苦労する部分があります。

従来は、デザインや画像処理などを全てHTMLで記入して、ホームページやブログを構築していましたが

HTMLとは別にWEBデザインを指定するための仕組み(CSS)が考案され、組み込まれています。
(※HTML4.01以降)

   ※CSSとHTMLの関係・使い方については後述します。

CSSでデザインや文字などの修飾を行い、HTMLはCSSを呼び出し使用する形になっています。
そのため、HTMLの構文は軽くなり、使いやすくなっています。

それらのHTMLやCSSの機能を発揮して、一般の人にも利用しやすい形にしたのがブログです。

ブログにはHTMLやCSSが理解できなくても、
WEB上に簡単に記事を表示する仕組みが作り上げられています。

スタート時のブログは、個人的な日記類が主流でしたが、
今ではブログの機能を使ってアフィリエイト専門のページや
ドロップシッピングなどを展開しているページが数多く見られます。

それらに記事は、
商品紹介のためにtable機能を使ったり、frameで表示ページを分割したりといろいろなテクニックを使用しています。


前回の記事でも述べましたが、
構文のhtml、headやtitleの構造は省略しますが、
body要素の
とくに記事入力で使用するHTMLタグの構造や使い方をみていきます。



タグの基本形。

タグの基本形

<タグ名 属性 = "属性値" >テキスト</タグ名>

<font size="12">利爺とゆったりアフィリエイト</font>

<●>       
font
size     
12      
利爺とゆったりアフィリエイト
</●>       

=開始タグ
=タグ名
=属性
=属性値("") 
=テキスト(文章)
=終了タグ


■タグの基本的な規則。

タグは半角で表記します。
半角の大文字、小文字のどれを使用してもいいことになっていますが、できるだけ統一しておきましょう。
空きは半角スペースです。

開始タグ <●> から終了タグ </●> までを要素と言います。
終了タグは</font>のように要素名の前に「/」スラッシュを付けます。

基本的には、開始タグと終了タグのペアで成り立っていますが、
<br>=改行タグ
<hr>=水平線タグ
<img>=イメージタグ
などのように終了タグがないのも有ります。

■タグ名

タグ名 属性 = "属性値" >テキスト</タグ名>

<font>や<table>のように、その要素の機能を表すタグ。開始タグ・終了タグと対になる組み合わせがあります。

ホームページ、ブログはこの開始タグ名と終了タグ名で括られた「要素」を記入し、デザイン・レイアウトを施し、タイトル、メニュー、画像や表などHTML構文を組み立てwebで表示しています。


■属性

<タグ名 属性 = "属性値" >テキスト</タグ名>

要素内で詳しい情報を定義するものを「属性」と言います。
<font size="12">の「size」が「属性」に当たります。

「要素」は
「属性と属性値」のセット「属性のみ」「ひとつの属性値」または「複数の属性値」を持ちます。


■属性値(値)

<タグ名 属性 = "属性値" >テキスト</タグ名>

属性値は「属性に順ずるアタイ(値)」を意味するものです。

属性値には、文字や数値などを使用することができ、
これらの指定する文字や数値を「 " " 」(ダブルコーテーション)で括る形です。

<font size="12">
の 12 (文字の大きさを指定)の数値
よく使用するカラー指定などの< "#000000" >も属性値で
ほかに数多くあります。

■テキスト

<タグ名 属性 = "属性値" >テキスト</タグ名>

テキストの部分には文章・画像・表・・・目的とするのが入ります。

■終了タグ

<タグ名 属性 = "属性値" >テキスト</タグ名>

要素の終了には</font>のように終了タグを記入します。

終了タグがないと、要素は終わってないので、次の要素へと続きます。
結果、web上ではデザイン・レイアウトが入り乱れた、崩れた表示になります。

……

要素はタグの基本形のように
<タグ名 属性 = "属性値" >テキスト</タグ名>
という形で表されますね。

この要素を、いくつも組み合わせて構造的にマークアップしていくのがHTMLの基本です。

HTMLには複数の要素が含まれていますので
「どこから始まって、どこで終了」
するのかを明確に的確に記述する必要があります。

さらに、構造的に複数のタグを使用する場合は、開始タグと終了タグを
「入れ子」の形で記入する方法が多くとられます。

   「入れ子の括り方の例」
   <tag1><tag2>テキスト</tag2></tag1>

タグの括りが交差しないように、記入する順番は重要ですので
間違えてエラーにならないように注意する必要があります。

次回から実際にタグを使って、
実例をもとに、記事ページを修飾する方法を確認します。



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

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

2009年11月26日

HTMLはタグの集まり

第5章 ブログで使うHTML


■ 5-1 HTMLはタグの集まり


近年、インターネットは世界を網羅して企業だけではなく、個人の世界までその利用の幅が広がって、情報の閲覧や取得には無くてはならないツールとして定着しています。

とくにADSL・光ファイバーの通信網の普及に並び、スマートフォーンの広がりは、空中波(無線)の世界を結びネットを利用するに場所を選ばない時代になっています。

今後もネット技術革新はさらに急速に進み、情報通信網はますます広がる時代になると予測される。

インターネットのwwwの世界の恩恵を受け、
ブログ・動画配信・掲示板などさまざまなサービスがすばやく利用できる環境になっていますが、そのwwwに準拠するブログやホームページなどは、HTMLのマークアップ言語を用いて構成するのが基本になっています。

ホームページ作成にはHTMLが必要です。
ブログの作成にもHTMLが欠かせません。

今シリーズは
ホームページやブログを作成するに必要な基本的なHTMLの使い方を一歩一歩確認していきます。

■HTML

HTMLはタグの集合体です。
別の言い方では「タグのつけ方」が基本と言えます。

タグ(tag)は札・荷札・付箋と言う意味で、
HTMLでは いっこ一個の荷物をタグで区分けして、種類別の荷物を < >(山括弧:アングルブラッケット)を用いてまとめ(括り)出荷する作業(形式)のようなものです。

タグには
<始め><終わり>のひと括りがあり、<始め>に置かれたタグから<終わり>のタグまでに挟んだ荷物を「テキスト」「画像」と分けて、機能ごとに整理する形があります。

そのタグの仕分けの形式を使って成立しているのがHTMLで、ブログやホームページを
IEやFirefoxなどのプラウザ(www)で、どの様に表示させるかを定義する役割をもっています。


●HTMLの基本構造

【基本構造図】
<html> <head> <title> <body>
の構造形です。

<html>
    <head>
      <title>  
        ブログやホームページのtitleなどの情報要素
      </title>

    </head>
    <body>
        記事本文、記事見出しなどを構成する要素
    </body>

</html>


図の基本構造形のように
要素(element)という単位でタグ(tag)でマークアップして、情報を構造化する仕組みになっています。

マークアップすることで
文章やデータをプラウザに理解させることができるようになります。

■<html>〜</html>

開始タグ<html>から終了タグ</html>の範囲が
HTML文書ですと宣言をします。

html要素がもっとも重要で、構文を形づくる基礎となり
ほかの要素はhtml要素と子や孫の関係になります。

それぞれの要素は、構造的にhtml要素を頂点とする階層構造になっています。

html要素の直の子要素は
<head要素><body要素>になります。
  ⇒ 構造図の青文字と緑文字の要素


■<head>〜</head>

文書の情報などを記載する範囲。
ヘッダーと呼ばれ、head要素内に記述された内容はブラウザ上では表示されません。

スタイルシート(CSS)やJavaScriptなどを、読み込ませる記述はこのhead要素で指定します。
また、ヘッダ情報の指定、文字のエンコードなどを指定するmetaタグなどはここに入ります。
 
   「meta要素」=
    head要素の子として記述されプラウザが解釈できる
    keyword、description、contentなどの
    メタデータを記述するための要素です。


■<title>〜</title>

<title要素><head要素>の子要素になり、
ホームページやブログのタイトルを記述する要素です。

  
■<body>〜</body>

このbody要素に記述されたテキストなどの要素がブラウザ上で表示されます。
フレームなどをマークアップして
ホームページやブログのデザイン構成もこの<body>要素内で行います。

    注)
   ●ブログサービスでは、body要素は利用する段階では
    既にマークアップされ組み立てられていますので
    HTML(マークアップ)の追加などの方法などを
    このシリーズで確認します。

HTMLでは、親要素・子要素のほかに
ブロック要素、インライン要素などの決まり事が数多く有ります。

このHTMLのシリーズでは、ブログを中心にブログで使用できるHTMLを取り上げ、使用例などを参考にしながら確認する方向で進みます。

HTMLのより詳しい説明、難しい構造に関することは省きますので、
詳しく学びたい方、興味の有る方はネットでも十分に調べられますし、
多くの書籍が発刊されていますので独自で必要なHTMLを確認してください。

次回からは、ブログで使用する比較的に簡単なHTML
主に<body>〜</body>要素の中で使用するHTMLを纏めていきます。



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

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

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
……人気ブログランキング……



×

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