--------(--)

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
●ランキング応援お願いします → 

 


2008-02-05(Tue)

「ひなた銀行」さん【生徒さんブログのカスタマイズ事例】

ひなた銀行 初期画面

生徒さんブログの
テンプレートカスタマイズ事例-その1
「ひなた銀行」さん



ひなた銀行」さんは、お小遣いサイトの紹介・ブログライター記事などで頑張っているブログさんです。

ひなた銀行~頭取のへそくり日記♪~

ひなた頭取」さんが運営されていて、ちょっと面白いコメントブログに書き込んでくれます。今時のインターネット銀行にしては一歩先をいく運営方針で、預金口座開設すると、他の銀行にはない高い利息が付くことでも有名です。

今回とりあげさせていただいた理由としては、この共有テンプレートには殆どと言っていいほどテンプレートhtmlテンプレートCSSSEO対策がほどこされていないと言うことです。

今回はこのかわいいテンプレートの雰囲気を保ったまま、検索エンジン対策SEO対策に合わせたアフィリエイト向けテンプレート改造修正のおこない、経過を講義してみたいと思います。

この作業は生徒さんの「ひなた頭取さん」が実際にご自身でされてます。


皆さんは自分でもできるの?とお思いでしょうが、テンプレート修正作業などは、この講座を読んだ生徒さん自身で作業をなされていて、不明点は私がアドバイスをしております。
ひなた頭取さんはパソコン使用歴は2年ほどで、今回のようなSEO対策テンプレートの修正なども初めての経験です。
分かりやすく説明いたしますので、皆さんも是非ご自身でチャレンジしてみてはいかがでしょうか?

質問等は質問フォームよりお願いします。


ご自身の運営されているブログについてアドバイスして欲しい方、または記事内容について、ご質問不明点などがありましたら、ご自身のお名前質問内容ブログURLを書き添えて質問フォームよりお待ちしております。

スポンサーサイト
●ランキング応援お願いします → 

 


2008-02-05(Tue)

第01回-テンプレートのバックアップ【生徒さんブログのカスタマイズ事例】

FC2ブログのテンプレート管理画面

ブログのテンプレート修正をする前に必ずバックアップを取りましょう。


ブログテンプレート修正・改造する場合、うまくいったと思っても不具合は必ずおきるものです。いつでも以前の状態に戻れるようバックアップを取る週間を身につけておくことは大事です。皆さんもPC・パソコンの重要データは必ずバックアップを取りますよね、ブログの場合も同じです。

今回はFC2ブログでのテンプレートのバックアップ方法を例として採り上げます。


1:まずテンプレートのバックアップを取ります。


ブログ環境設定テンプレートの設定をクリックします。
現在のテンプレート
pinkdot-mocomoco3cの名前を変更します。

編集をクリック
pinkdot-mocomoco3cのテンプレート名変更」の下の入力欄で
pinkdot-mocomoco3cを
hinata_originと変更して「更新」ボタンを押して下さい。


2:修正・改造作業用のテンプレートを作ります。


名前が変更されたhinata_originの 複製の部分をクリックして下さい。
hinata_origin_copyというテンプレートができました。
この名前を再度修正して
hinata_0205と変更して下さい。
( _0205は修正した日付けです)

最後にテンプレート名の前にあるチェックボックスを選択して
「適用」ボタンをクリックして下さい。作業完了です。

※これは、不具合が生じた場合いつでも前のテンプレートに戻せるようにするためです。
hinata_originがオリジナルとなります。
次回作業するときはhinata_0205を複製しhinata_0205_copyを作り
その名前をhinata_0206に変更して作業をし、最後にテンプレートの適用を行います。

修正作業はこの流れで行います。皆さんもテンプレート名を自分のご利用のものに置き換えて試してみてください。

なお、FC2ブログでは最近とくに閲覧障害データ消失などのサーバの不具合が続いてるようです、管理画面でのテンプレートバックアップだけでなく、自分のPC・パソコンにもテキストファイルとしてバックアップしておいた方が万が一のために安心です。
また、過去記事・画像のバックアップ方法は後日、講座にて取り上げたいと思います。


●ランキング応援お願いします → 

 


2008-02-07(Thu)

第02回-ブログタイトル・記事タイトルへの<h1><h2>タグの追加【生徒さんブログのカスタマイズ事例】

h1・h2タグ追加説明画面

ブラウザのタイトルに、記事タイトルが始めに表示されるように順序を変更します。
ブログタイトル・記事タイトルへ
<h1><h2>タグを追加します。



まず、予備知識から。ブログで書いた記事はテンプレートによって自動的に「htmlタグ」というのがつけられます。
そのタグの中で<h1><h2>タグに書かれている内容はgoogleなどの検索エンジン検索順位結果に大きな影響を与えます。しかしながらこのテンプレートにはこのタグを付ける設定がされていませんでした。
また、ブラウザタイトル欄の記事タイトルの順番がSEO対策的によくないものでした。記事タイトルブログタイトルの次に表示されています。SEO対策的には、【記事タイトル】+【ブログタイトル】の順でブラウザのタイトル欄に表示されるテンプレートが、検索エンジンHIT率影響があると言われております。

今回は、これらhtmlテンプレートスタイルシートテンプレート問題点修正を行いたいと思います。
みなさんも自分の使用しているテンプレートをぜひ確認してみてください。


■テンプレートの修正作業の前に


慣れるまでは、作業はブログ管理画面で直接行わず、該当する入力欄のなかのhtmlテンプレートスタイルシートテンプレートを全てコピーして、テキストエディタなどにペーストしてから作業して下さい。
テキストエディタをお持ちでないのでしたら、以下のページからダウンロードして下さい。
窓の杜 - 【特集】あなたにオススメのテキストエディターあります!
最初は「TeraPad」で始めてみて、html編集になれてきたら「HTML Project2」を使うのがいいと思います。

■では、アフィリエイト対策・SEO対策用テンプレートへの修正作業の第1回目です。


今回の作業内容は記事右上の画像を拡大してご覧下さい。
作業内容は以下の通りになります。

(1):ブラウザの「ブログタイトル」+「記事タイトル」を
  「記事タイトル」+「ブログタイトル」への順序変更。
(2):ヘッダの「ブログタイトル」への<h1>タグの適用。
(3):「記事タイトル」部分への<h2>タグの適用と、リンク設定の追加。
(4):スタイルシートの記事タイトルのリンク色の変更。

以下の順で作業してください。
※重要:この記事での修正作業はこのテンプレートのものです、お使いのテンプレートによって設定が違う場合がありますので確認しながら作業して下さい。(不明点は講座でお気軽にご質問下さい。)

●hinata_0205のhtmlテンプレートの編集


(1):「記事タイトル」+「ブログタイトル」への順序変更。
9行目の
<title><%blog_name> <%sub_title></title>

<title><%sub_title>&nbsp;<%blog_name></title>
に変更してください。
(&nbsp;というのは半角文字を開けるという意味です)

(2):ヘッダの「ブログタイトル」への<h1>タグの適用。
28行目の
<div class="top_title"><a href="<%url>"><%blog_name></a></div>

<div><h1 class="top_title"><a href="<%url>" title="<%blog_name>"><%blog_name></a></h1></div>
に変更してください。

(3):「記事タイトル」部分への<h2>タグの適用と、リンク設定の追加。
52行目の
<div class="entry_title"><a id="<%topentry_no>" name="<%topentry_no>"><%topentry_title></a></div>

<div><h2 class="entry_title"><a id="<%topentry_no>" name="<%topentry_no>" href="<%topentry_link>" title="<%topentry_title>"><%topentry_title></a></h2></div>
に変更してください。

●hinata_0205のスタイルシートテンプレートの編集


(4):スタイルシートの記事タイトルのリンク色の変更。
   ※(3)の部分でリンクを追加した事への対応です。
23行目に以下5行を追加

/* 追加設定 */
.entry_title a:link {color: #ff9a9c; text-decoration: none;}
.entry_title a:active {color: #ff9a9c; text-decoration: none;}
.entry_title a:visited {color:#ff9a9c; text-decoration: none;}
.entry_title a:hover{color: #ff7dbe; text-decoration: none ;}


●最後に


(5):不要な説明書きなどの文章の削除
3行目(ダウンロード、、、)~
16行目(、、、助かります。)までのの文章を削除。


今回のところは以上です。


参考:ブログというのは変数というもので記事の表示などをコントロールしています。
FC2ブログでは下記の変数があります。
FC2ブログテンプレート機能一覧
このページをブックマークしてください。

●ランキング応援お願いします → 

 


2008-02-11(Mon)

第03回-SEO対策では見出し・小見出し<h3><h4>タグのマークアップが大事です【生徒さんブログのカスタマイズ事例】

h3・h4タグ追加説明画面

見出し・小見出しを付けて記事を書き、<h3><h4>タグでマークアップすることはSEO対策にとても効果があります。


前回までは、自動的にブログタイトル・記事タイトル<h1><h2>htmlタグが付く方法で、テンプレートの設定を修正しました。

今回は記事に見出しを設定し<h3><h4>タグでマークアップします。


ブログ記事には「見出し」を付けると検索エンジンのSEO対策上とても効果があります。
なお、この作業は記事を書くときにご自身で<h3><h4>タグを付けなければなりません。
(なお<h3><h4>の文字デザインは今回追加するスタイルシートで設定します。)

記事の構成をイメージしましょう


講座ブログでの私の記事の書き方を見ていただければイメージはつかめると思います。右の説明画像を拡大してみてください。
一つの記事の、文章構成見出し構成としては下記のようになるのがベストです。

<h2>記事タイトル</h2>
 <h3>見出し(1)</h3>
  ・本文
  <h4>小見出し(1-1)</h4>
  ・本文
  <h4>小見出し(1-2)</h4>
  ・本文
 <h3>見出し(2)</h3>
  ・本文
  <h4>小見出し(2-1)</h4>
  ・本文
  <h4>小見出し(2-2)</h4>
  ・本文

 これ繰り返します。

必ずしも全ての記事がこうなるとは限りませんが、最低でも1回は、見出し(1)で書き始めて本文で終わるという記事の書き方を心がけてください。

スタイルシートテンプレートの設定


前回のhinata_0205スタイルシートテンプレートを複製しhinata_0211と名前を変更し作業を開始します。

hinata_0211のスタイルシートテンプレートの編集


「ここから」「ここまで」のスタイルシートの設定を前回の/* 追加設定 */の14行目以降にコピーペーストで結構ですので追加してください。
/* 追加設定ここまで */の文章も忘れずに入れておいて下さい(あとから分かりやすくするためです)。

「ここから」=================================
h3 {
font-size: 13px;
font-weight: bold;
color: #ff9a9c;
text-align: left;
margin: 0px;
padding: 0px 10px 10px 0px;
}

h4 {
font-size: 10px;
font-weight: bold;
color: #ff9a9c;
text-align: left;
margin: 0px;
padding: 0px 10px 10px 0px;
}

strong {
font-weight: normal;
}

strong.bold {
font-weight: bold;
}

/* 追加設定ここまで */
「ここまで」=================================



追記:記事の入力を自動改行にしている方へ


<h3><h4>など<h>タグの場合は前後に1行分の開きが自動的に出てしまいます。
(つまり入力で改行した位置に自動的に<br />改行タグが入るので2行分の開きが出てきます。)
これを回避するために設定のmarginのところを以下のようにしてください。

margin: 0 0 -1.8em 0 ;

-1.8emの数字は自分の環境にあわせて変更してください。数字が大きいほど行間が詰まります。つまり-2.5emの方が開きが少なくなります。


※タグをいちいち手で入力するのが面倒な方へ。


Windows日本語文字変換(IME)で「みだし」と文字を入力すると<h3></h3><h4></h4>とそれぞれに変換するよう単語登録設定しておくと便利です。
設定方法はこちらをご参照下さい。
「単語登録の方法-ショートカットメニュー」

●ランキング応援お願いします → 

 


2008-02-11(Mon)

第04回-<storong>タグでのキーワードのマークアップはSEO対策では必須です【生徒さんブログのカスタマイズ事例】

記事本文中の重要キーワードは検索エンジンへのSEO対策のために必ず<storong></storong>タグでマークアップしましょう。


検索エンジンは検索結果を表示するときに<strong></storong>というタグで囲まれた単語=キーワードを重要視します。 記事内にこのタグで囲まれた「キーワード」があると、検索エンジンはブログの著者はこの言葉が大事なんだなと覚えておくわけです。この<strong></storong>タグでキーワードを囲む作業をマークアップすると言います。
FC2ブログでは新規記事書き込み記事修正管理画面で、キーワードを選択し、ツールのBというボタンを押すとキーワードが<strong></storong>で自動的に囲まれます。

具体的キーワード・サブキーワードの選び方、検索エンジンに効果的な適用方法などは、editaというSNSサービスで私が主催しているアフィリエイト稼ぐための実践形式のアフェリエイト講座(無料)で解説しています。

<strong>タグで囲まれたキーワードが太字(ボールド)表示で目立つのをスタイルシート(CSS)で標準表示にします。


<strong>タグで文章を囲むとそのキーワードの部分だけ「太文字」で表示されてしまい、わざわざキーワードを強調しているなと、ブログの閲覧者にわかってしまいますし、目障りになることもあります。
そこで strong {font-weight: normal;}スタイルシート(CSS)に最初から設定して、文字標準の太さで表示されるようにします。

●表示実例


以下の文章は夏目漱石こころ』より抜粋しております。(著作権期限切れ)

・スタイルシートの修正をしていない場合の表示はこうなります。
夏休み中に鎌倉に旅行に行った際、「」は「先生」と出会った。
先生は大学を出ているのだが就職せず、奥さんとひっそりと暮らしているのだ。
先生は雑司が谷にある墓地(雑司ヶ谷霊園)へ墓参りに行ったり、、、

・スタイルシートの修正をした場合の表示はこうなります。
夏休み中に鎌倉に旅行に行った際、「」は「先生」と出会った。
先生は大学を出ているのだが就職せず、奥さんとひっそりと暮らしているのだ。
先生は雑司が谷にある墓地(雑司ヶ谷霊園)へ墓参りに行ったり、、、

●hinata_0211のスタイルシートテンプレートの編集


/* 追加設定 */の32行目に以下のスタイル設定を追加します。

strong {
font-weight: normal;
}

strong.bold {
font-weight: bold;
}


<strong>タグで囲んだキーワードを太文字(ボールド)にしたいときは?


ではキーワードをマークアップしつつ、文字を太くしたい場合はどうするのかというと、strong.bold { font-weight: bold;} というスタイルを設定しておきます。
記事書き込みで<strong class="bold">キーワード</strong>としてマークアップすると、この部分は太字で表示されます。

※このタグも前回と同様に入力にWindows日本語文字変換(IME)を利用すると便利です。
「すとろんぐ」と文字を入力すると <strong class="bold"> <strong> </strong>とそれぞれ変換するように単語登録設定しておきます。


●ランキング応援お願いします → 

 


ブログオーナー

管理人:ぽっぷ教授

カテゴリー
アフィリエイトASP紹介
最近の記事
月別アーカイブ
このブログをRSSリーダーに追加
はてなRSSに追加
livedoor Readerに追加
My Yahoo!に追加
Googleに追加
goo RSSリーダーに追加
Bloglinesに追加
Powered by SEO対策 RSSプラス
ソーシャルブックマークに追加
免責事項
当サイトからのリンク先における各サイトの利用・登録につきましては各サイトの注意事項や規約をよくお読みになり自己責任でご利用・ご登録をお願いいたします。 万が一トラブルや、損害などが起きましても、当サイトは責任を負いかねますのでご了承ください。
メールフォーム

名前:
メール:
件名:
本文:

WEB制作のプロが薦めるSEO
Blogテンプレート、SEOマニュアル、サポートフォーラム。すべてにおいて、驚愕のクオリティを提供するSEO対策の3本セットです。特に『賢威』購入者専用SEOフォーラムにはプロも初見の最新のテクニックが集まりこれだけでも値段相応の価値があります。近日発売の「賢威3.0」への無償バージョンアップが可能です。
ランキング
 
ブログ内検索
 



このブログをリンクする
コミュニティ
edita.jp【エディタ】
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。