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




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


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

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

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


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

2009年03月12日

カスタマイズの考え方

■ 4-2 カスタマイズに使用するCSS構造

ブログを「カスタマイズ」することは、

●見栄えを良くして訪問した方に優しいブログする。
●流れのいい構成にする。
●サーチエンジンに拾われやすいようにする。
●アクセスアップをはかる。

などへの対応ですね。


このシリーズでカスタマイズをしていく項目を確認します。

【カスタマイズの項目】
(seesaaブログ対象)
【見栄え】
●ブログの幅の変更。
●ブログのタイトル背景画像の変更。
●見出し(ブログタイトル)文字の表示位置の修正。
●検索枠を新しく作り上げる。
●検索結果にヒット無しを表示。
●サイドバーに見出しを入れる。
●ブログの日付を消す(とくに物販系)。
●リンクの先頭に画像を挿入する。
●新着記事タイトルの文字数制限。
など。

【検索エンジンに対策】
●プラウザのタイトルバー・表示内容変更
●リンクにアンダーラインを引く。
●h2とh3の修正(seesaaブログ対象)。
●トピックパス(パンくずリスト)の作成。
●ブログ記事タイトルの修正。
●記事の最下部に
 「トップページ」「この記事のトップへ」のリンクを貼る。

などの項目です。


【CSS(スタイルシート)】の確認。

ブログに「ログイン」した状態で、左の総合(メイン)メニューから

【デザイン】 → 【デザイン設定】をクリック → 下段の【テンプレート名】クリック
から「CSS」を開きます。

このブログで使用しているテンプレートのCSSは

【画像1】
2012-css.jpg
  ↑ 画像クリックで、元画像が開きます。

スタイルシートの一般的な表記の構造は
「画像1」のようになっていますが、ブログサービスのテンプレートよって多少、内容が異なります。

CSSの【基本形】は
@ セレクタ名 {
A プロパティと値
B セレクタ閉め }

の形式です。

各セレクタについている「 {  } 」の
body  {   ← ここから始まって 
 }   ← ここで終わり
の方式で{  }の中に細かい定義が書き込まれています。

詳細を確認します。

【このブログのCSS】
「bodyと#container」

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

#container{           
margin:0px …;    
width:800px;           
color:#666666;          
}

⇒ ■ ブログの設定
⇒ @フォントの種類
⇒ A背景に画像を使用
⇒ B読み込み画像のURL
⇒ C画像の貼り込み位置
⇒ D画像の貼り込み位置
⇒ E文字の表記位置
⇒ セレクタの閉め

⇒ ■ 表示域の設定
⇒ @左右の調整
⇒ Aブログ全体の横幅
⇒ Bタイトルの文字の色
⇒ Cセレクタの閉め



ブログで重要なセレクタ、ブログ全体の「枠組み」を定義している
「body」 と 「#container」(コンテナ)の記述内容です。

使われているプロパティと値は

font             
font-family   
px          
background  
image     
url            
margin          
text-align
width
color     
#666666        



⇒ 文字
⇒ 文字の種類
⇒ ピクセル(ドット)
⇒ 背景
⇒ 画像
⇒ リンクアドレス
⇒ 設定位置
⇒ 文章(文字)表示位置
⇒ 横のサイズ 
⇒ 色の指定
⇒ カラーコード



「body」要素と「#container」要素とが
関連するセレクタとともに、ブログの外観を組み立てています。

この両要素だけでも
プロパティ(属性)とその値(属性値)が数多く使われていますね。

ブログのカスタマイズでは、各要素と他の「セレクタ」との関係を把握することが重要で
CSSが見ているブログのデザイン・レイアウトは総合的に関連付けを理解することが大切です。

セレクタの一つを再定義したら、サイドのカラムが表示されなくなった。
ということも起こり得ます。

ブログをカスタマイズのためにCSSを定義することは

●CSSはブログ全体のバランスを取る設計図。
●HTMLとの絡みを理解する。

の考えが必要ですが、それほど難しいことでもありません。


【セレクタの形】

スタイルシートの書式は
上記の参照のセレクタ・プロパティ・値の【基本形】で構成されたセレクタを
HTMLとの関連付けで成り立っています。


その基本となるセレクタの見方

【記入例】

.text{
font-size:12px;
color:blue;
line-height:1.5em;
}

●<.text>を「セレクタ」
●<font-size><color><line-height>を「プロパティ」(属性)
●<12px><blue ><1.5em> の箇所は「値」(属性値)

と呼称します。

●セレクタは、開始の「 {  」と終了する「 } 」が一区切り。
●プロパティと値は 「 : 」(コロン)で区切り、
●各プロパティと値のセットの終了には「 ; 」(セミコロン)を付けます。

記入例の<.text>セレクタでの

プロパティ<font-size>は
「文字の大きさ」と定義して、その値の<12px>が示されることで「文字の大きさは12pxです」
のひとつの完成形になります。

このようにプロパティには「値」を付けます。

同じように
<color>のプロパティに、値の<blue>を付けて「文字の色は青です」と定義します。

    注)
   ●「color」は単に「色」とだけしか定義していませんが
    文字の色を定義するプロパティです。

   ●罫線の色を定義するプロパティは<border color:blue;>
    のように、普通は組み合わせで使いますが、単に<color>
    と定義したときは「文字色」のプロパティになります。

プロパティと値はセットになっていますね。

セレクタの中に、必要であれば
プロパティをいくつ定義してもかまいませんが、各セレクタとの関係を確認して、省略できるセレクタやプロパティは削除して、
CSSを軽くするのが基本的な考えになります。

HTMLも軽く、CSSも軽くがプログラミングの基礎です。

記入例のように
各セレクタ毎に、プロパティ単位で箇条書きのように「縦」に表記していますが

まとめて
.text { font-size:12px;color:blue;line-height:1.5em;
}

横書きで、連続して記入してもかまいません。

スタイルシートは使い慣れるまでは複雑に思えます。

再定義をするよう場合に、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年03月10日

ブログのカスタマイズ

第4章 ブログのカスタマイズ

■ 4-1 個性溢れるブログを作り上げよう

ブログは
ブログサービスを利用して、文章を書き込み、画像類を貼りこんで公開するという簡単な作業で、ウェブの構築が出来る簡便さがありますね。

テンプレートを選んで、使用するデザインを自由に変更したり、いろんな機能を組み込んだHTMLのタグを使うことで、記事の文字の大きさやバックの色などを指定できるようになっています。

従来は、
www上のホームページ・ブログなどウェブページのデザインやレイアウトは、HTMLだけの機能を使って表示していました。

しかし、ページを構築するにしてもタグを多用するなど構造が複雑化して、HTMLだけでは無理な部分もあり、プラウザによって表示の形態が変わるなどいろいろな問題がありました。

このような
HTMLの誤用や解釈違いなどを解決、さらに構文や構造を簡単にしてウェブサイトを構築するという考え方の基に「CSS」が策定され

●「構造」と「見栄え」
をHTMLとCSSとで、互いに分担する方式が確立しています。

   注)
   ●HTML = Hyper Text Markup Language(マークアップ言語)
   ●CSS  = Cascading Style Sheet (スタイルシート)


【従来】

  HTML  →  「構造」 + 「見栄え」

【現在】

HTML
CSS




⇒ 構造
⇒ 見栄え(装飾)
  ブログ全体の形・フォントの指定・余白・
  枠線の色・画像配置・背景色など

●ホームページやブログの論理構造に関する情報はHTMLが
●デザイン(見栄え)に関する情報はCSSでと
互いに分担する仕組みになっています。

役割を分けることにより、構造を簡素化して、デザインの自由度を広げています。

画像や文字などを、自由に設定して「見栄え」を変えるには、
CSSを直接に編集(カスタマイズ)して定義するのが一番のいい方法です。

ブログサービスから提供されているテンプレートには、それ用のCSSが組み込まれています。

テンプレートのCSSは、自分の責任のもとに編集(カスタマイズ)することは許容の範囲です。

各ブログサービス(Seesaaブログ・fc2ブログなど)や
各プラウザの用いるCSSの構造形はすこし異なりますが、CSSの基本は同じです。

今回から
提供されているテンプレートのカスタマイズを確認していきます。


【マークアップ言語のマークアップとは】

●この文字は見出し(タイトル)です。<h1>  
●ここからは、ブログの説明。<h2>
●ここは文章(段落)にします。<p>
●記事に用いる文字の大きさや書体は、この形式を使います。<font>

など
文章の構造や修飾の情報を<タグ>を用いて、ある一定の方式で記述(マークアップ)する言語です。

そのHTMLの構造とCSSとの関係を理解することが
ブログのカスタマイズの道です。

例えば、よく用いられるタグに<h>タグがあります。
見出しを作るタグですね。

【h1】から【h6】まであります。
メインの大見出しに「h1」を使い、その下位に「h2」「h3」と続きます。

「h1」タグを使用すると大きい文字を表示しまが、
●「h1」「h2」の定義は、文字の大きさを変えたり、太字にするタグではないのです。

見出しをレベル分けするためのもので
文字の大きさやスタイルはスタイルシート(CSS)で定義します。

誤解しやすいのは
「h1」は大きい文字を表記するものだと
文字を大きくする時に「h1」で指定してしまうことです。

「h1」は「見出し」と言う意味ですから
ブログの初期の設定では「見栄え上」文字が大きく表示されるようになっています。

さらに、CSS定義の「h1」要素(セレクタ)の中で
文字の大きさや太さ、書体、文字色などの定義を変更しても

●「h1」は見出しだと言うことに変わりはありません。

人間の目には

●大きい文字を使っている。
●使っている文字の色はデザイン上、よく目立つ。
●ブログタイトルと説明文の配置やバランスがいい。

などを見て、好みをブログの判断します。

インターネット上で情報を集めるとき、各プラウザの機能を使って
検索をかけますね。

●検索エンジンは
このブログは「綺麗なデザインだ」とか「よくまとまっている」などとは見ません。

「h1」は見出しですので
検索する段階で、このブログの「見出し」として「h1」を見ていくのです。

文字が大きい、太い、色がついているなどには関係ないのです。

そのことを記憶に留めていて下さい。
HTMLと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年03月07日

伝言板を利用する

伝言板を利用する

携帯サイトの「伝言板」は数多くありますね。

とくに、携帯の普及が進み、気楽に「伝言板」を利用する流れになって
から、数が増えたように思われます。

前回のMIXI資料の中に、携帯PV数を記述しました。

今やMIXIのようなSNSへのアクセスは
PCの月間41億PVを抜いて、101億PVにもなっています。

携帯からサイトへのアクセスは大きく伸びています

その携帯使用者がよく利用する伝言板を用いて、
アクセスアップを図るのも、ひとつの手段です。

【画像】
den001.jpg
  ↑ 画像をクリックすると、元画像が開きます。

伝言板は、大方が【画像】のようなスタイルになっています。

携帯の小さい画面のため、
簡単に表示が出来る文字中心のデザインです。

それら「伝言板」に皆さんが、よく知っている
有名アフィリエイターも「書き込み」をしているのを見かけます。

 ★有名なアフィリエイターは、これだけの大きな市場を放っておかない。
 ★「大きな稼ぎ」をしている背景には、アピール(宣伝)するチャンスを
   自ら作り上げている。


と言えますね。

アピールやアクセスアップの出来る場所は100%に活用しています。

ある「伝言板サービス」の利用案内の内容です。

●無料でご利用いただけます。
●めんどうな登録作業は不要!
 1分であなたの投稿板ができます。
●パソコンはもちろん、
 i-mode、EzWeb,Vodafoneに対応。
●動画変換エンジンを搭載。
 すべての動画(3GP,3G2,MP4,FLV)が
 携帯会社が違っていても再生可能!
●画像や動画など、ファイルアップ数無制限。
●1ファイルにつき2MBまでOK
●携帯3社の絵文字を自動変換


「伝言板」は、

「商用利用」も大方、認めていますので、
ブログやホームページの「宣伝」「誘導リンク」も貼れます。

「伝言板」はあくまでも伝言を伝える場ですが、利用する考え方や捉え方しだいです。

 ★自分のアフィリエイトをしているブログまで導くことに利用する。
 ★アクセスを集めるために「書き込み」をする。

という考え方が必要でしょう。

 ★出会いとして利用する…

 アフィリエイトをしている方は、
 そのような使い方はしないでしょう。


「伝言(ブログの宣伝)」は
1日に2、30件程度、
あるいはそれ以上を書き込むことが望ましい作業ですが、

週末にでも時間を作って集中して書き込む。
宣伝のため、1件でも書き込んでおく。

という考えで、
ブログやホームページの宣伝(アクセスアップ)に利用しましょう。


PCの画像や豊富なデータを携帯の画面で
表示するのは難しいことです。

その小さな画面に、

 ★いかに短い、簡潔な文章でもってアピールするか。
 ★どのようにツールや画像を使っての「視覚的な効果」を出すか

が重要な要素になります。

今や、iPhoneやPDA(携帯情報端末)など、

PCと変わらないモニタや機能を増強した機種も開発が急ピッチに進み、
市場に投入され人気を得ています。


携帯利用者は「携帯から携帯サイトへ」への流れが多いですね。

携帯の市場を利用して「アフィリエイト」をするには、
PCのほかに、携帯のアフィリエトサイトを持つことが理想的ですが、

ブログやアフィリエイトを始めたばかりの方には
「PCのサイト」以外に「携帯のサイト」も持ち

両方を管理して、維持していくには負担が大き過ぎます。


「伝言板」への書き込みは、
時間の取れない方は、無理して書き込む必要はありません。

メイン(本業)はアフィリエイトです。

管理している「サイト」を育てることが重要ですね。
本末転倒にならないようにすべきです。


「伝言板」は無料で利用できます。

それほどの市場を放って置く手は無いので「宣伝活動の場」
として利用を考えましょう。

PCから、「書き込み」の出来る「伝言板URL」を選んであります。

必要でしたら、そのページを覗いてください。

  ⇒ PCから書き込みの出来る「伝言板」

アフィリエイトの目的のため、
宣伝のほかに、
いろんな使い方がありますのでドンドン利用しましょう。

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


2009年03月06日

SNSを利用するA

SNSを利用するA

その膨大な会員を誇る各SNSサイトを、

アクセスアップのひとつとして利用しましょう。

利用方法として、
数あるSNSの中からMIXIを例にとって、見ていきます。

  ⇒ MIXI(ミクシィ)ホームページ

【画像】
mixi01.jpg
  ↑ 画像クリックで、元画像が見れます

MIXIはサイトの安全性、健全性などを考え、登録には友人からの「招待」が必要になっています。

近々「オープン制(登録制)」になるという噂もありますが、まだ確認できていません。


会員登録後、
自己紹介の欄や日記などに記事を書き込みます。

最初は、自分の方から出かけていって「あし跡」を残すか、相手からの足跡を訪問します。

MIXI内にはいろんなコミュニティー(グループ・集り)があります。

検索する「機能」が付いていますので、「コミュニティー」をさがして、気に入ったグループに参加出来ます。

新たに「仲間同士のコミュニティーの場」を自ら作ることも可能です。

 
1件1件足あと付けに巡回すると、気の遠くなるような時間がかかりますね。

その時、利用するのが
  ★MIXIなどで自動で足跡をつける簡易ソフト
   ⇒ http://www.mixisurf.com/
 
この自動ソフトを使えば、ほったらかしでMIXI内を巡回していって 限りなく「足あと」を残す事ができます。

やり方はダウンロード不要ですので簡単です。

MIXIにログインした状態で、MIXIサーフを立ち上げ、
【ランダムアクセス画面へ】をクリックして、次画面に進みます。

  ※(プルダウン・メニューの初期選択は、MIXIになっています。
    他のSNSの利用のときは、該当するSNSを選択します)

上段のメニューに設置された「サーフ開始」をクリックするだけです。

 MIXIサーフには、他のSNSも設定できるようになっていますので、使い勝手のいい巡回ソフトです。

 現在、【GREE】【FC2ネットワーク】【ライブドア】【キヌガサ】など
 142のSNSに対応しています。

 巡回すると言うことは、「お金」の掛からない「ブログ」の宣伝と言えます。
 お金の掛からない宣伝方法を使って、一人でも多く人に自分のブログをアピールしましょう。

ただし、
MIXIは商用利用禁止になっています。

「露骨な営業目的の利用」には、
最悪の場合、参加禁止(ID削除)の措置がとられる場合があります。

とくに「プロフィール欄」には、誘導リンクの設置や「商用目的の文言」を書き込むことは、やめておきましょう。

「日記欄」を利用して、日記の中に興味の引く言葉で「案内」した方が無難です。
「コミュニティー」の仲間うちでは「情報提供」という形で解決できます。


MIXIサーフは
「迷惑防止」の目的から、サーフ時間を最高26分に設定しています。

1サイトへの「訪問間隔(滞在時間)」も5秒とか10秒などと、最高60秒まで設定できるようになっていますので、あし跡は残せます。
(コメント回り用の簡易ツールがあれば、なお便利です)

経験上、100人訪問したら、サイトに訪れてくれる方は5〜6人。

   ※プロフィールに「爺」と明確に書いているから、
   若い人には興味が無いからでしょう。
    (MIXI利用の失敗例ですか!) 
 
MIXI以外で宣伝活動が自由にできるサイトもあります。 
自分のサイトを宣伝させてもらいながら、紹介報酬ももらえるサイトもあります。

また、巡回ツールも

各SNSサイト用の「巡回無料ツール」 
高機能の「有償ツール」
自動で「コメントを残す」ツールなどあります。

ブログは、とくにアフィリエイトをしているブログやホームページは、アクセス(訪問者)の数が重要ですし、商品の購買率も訪問者の10%もあれば、アフィリエイトに特化した素晴らしいブログです。

平均2〜3%程度と言われていますね。

訪問者の数が増えれば、購入者も増えることを目標に「アクセスアップ」を考えていきましょう。

SNSの利用は


★参加しているSNSからの「バックリンク」(評価アップ)
★外部に貼られたリンク(足あと)から訪問者の獲得(アクセスアップ)
★コミュニティーに参加(最新情報の入手)


などの効果が大きいと思っています。

↓↓★ご協力ください   
kame.jpg
banner_01.gif
★人気ブログランキング


 

2009年03月05日

SNSを利用する@

SNSを利用する@

SNS(ソーシャル・ネットワーキング・サービス)
(Social Network Service)は、

 人と人とのつながりを促進、サポートするコミュニティ型のサイトのことで、
社会的なネットワークをインターネット上で展開するサービスサイト。

 友人同士や知人、共通する趣味、あるいは住んでいる地域や出身校といったつながりを通じて、
新たな関係を作り上げる場を提供するサービスのことを指しています。


SNSは人のつながりを重要視していて、

「すでに登録している参加者からの招待がないと参加できない」

というシステムになっているサービスが多かったのですが、
 
最近では誰も自由に登録できるサービスも増えています。

SNSも数多く有りますが、代表的なSNSには、

  【MIXI】
    ⇒ http://mixi.jp/home.pl
  【あし@】
    ⇒ http://www.ashia.to/
  【Yahooログール】
    ⇒ http://logoole.yahoo.co.jp/stream
  【EDITA】
    ⇒ http://www.edita.jp/

などがあげられます。


MIXI(ミクシィ)は知っていますね。

 そのMIXIは1630万人も登録している活発なSNSのひとつですね。

 (2008年12月31日現在)
 月間のページビュー(PV)は

 PC版 = 41億77000万件

 モバイル版 = 101億3700万件

 合計 = 143億1000万件

もあるといわれています。

さらに、平均利用時間は3時間を超え、
最終ログインは3日以内が多いとのことです。

それだけ会員がいて頻繁に利用されているSNSです。


SNSの特徴のひとつには、

自分が訪問したサイト(ブログ)に
メッセージを残さなくても、キャッシュを利用した

「足あと」が残される(あし跡機能)があります。

また相手が自分のサイトに来たら、同じように、相手の「足あと」が残されます。

その仕組みでもって、いつ誰が訪問したか分かるようになっています。

「足あと」のほかに 


○プロフィール機能
○ユーザ検索機能
○日記(ブログ)機能
○コミュニティ機能
○メッセージ送受信機能

  
など、各種機能が充実しているため、繋がりが幅広くもてます。

そのほかに、RSS、アドレス、レビュー、アルバム、動画共有、ゲーム、デコメ作成、アバターなど、各SNSによって便利な機能が設置されています。

それらの機能を利用すれば、
MIXIという「大きなSNS」の中で

 ★ゴルフ・釣りなど同じ趣味を持つもの同士
 ★同郷・住んでいる地域などの繋がり
 ★日々の日記やエッセイの同好
 ★ネットでアフィリエイトをしている仲間


など、仲間を括った「情報交換」の場などを作り上げ、

自分たちのための「仲間内のSNS」
(それもSNSですね)

を作り上げることも可能です。

ブログでいう「メッセージ」や「相互リンク」も基本的には
「同じ」ですね。

ランキングサイトも同じSNSですね。

↓↓★ご協力ください   
kame.jpg
banner_01.gif
★人気ブログランキング


 
×

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