TOP > CATEGORY - FC2ブログのカスタマイズ

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
RSS twitter livedoorクリップ Buzzurl Google Bookmarks delicious Yahoo!ブックマークに登録 はてなブックマーク はてなブックマーク
タグ /

HTMLタグを初心者でも手っ取り早く覚えられる方法(1)

ブログの管理画面、現在CSSがうまく作動してない気がします。
障害報告もないし、blog20の皆さま、管理画面大丈夫でしょうか?

さて、今回はHTMLタグを初心者でも手っ取り早く覚える方法です。

よくタグの挿入位置とかカスタマイズを聞かれるのですが、実は
私もタグは独学で、きちんと本を購入して覚えたとかではないです。
必要にかられて覚えたものがほとんどです。

なので、タグを手打ちでサイトを作れ、と言われたら
作れません^^;
でも「これをこうしたいときはどうすれば?」という対応はできます。
これはどうすればできるようになるか!

続きを読む

スポンサーサイト
RSS twitter livedoorクリップ Buzzurl Google Bookmarks delicious Yahoo!ブックマークに登録 はてなブックマーク はてなブックマーク
タグ /

アドセンス・マイクロアドなどクリック型広告を記事下に掲載する方法

グーグルアドセンスやマイクロアドは記事下にポンとおいてあげると
クリックされる率が高くなる、と言われています。

記事に合った広告が表示されなければ、クリックされませんが^^;

FC2ブログでの記事下に広告を表示させる方法を掲載したいと思います。

どちらもブログ管理画面⇒テンプレートの編集⇒HTML
を開いて行ってください。

続きを読むの手前にアドセンスやマイクロアドを表示させる


まずは、記事が始まりますよというタグを見つけます。

<!--topentry-->

これが、記事の始まりを表すタグです。

そのすぐ近くに

<%topentry_body>

というタグがあるはずです。この下に

<br clear="all" />


と入れて、アドセンスやマイクロアドのタグを入れれば続きを読むの手前に表示されるようになります。

また、「続きを読む」を使っていない場合も同じところにタグを
入れてくださいね。


続きを読むでとんだページで記事下にアドセンスやマイクロアドを表示させる



この場合も一番最初に探すのは

<!--topentry-->

このタグです。次に

<%topentry_more>

このタグを探してください。
これは「続きを読むのあとの文章ですよ」という意味になります。

このタグの下にアドセンスやマイクロアドのタグを入れてください。


アドセンスの場合


アドセンスの標準広告ユニットは1ページに3つまでしか使えません。

ですから、ヘッダー、サイドバーにこのタイプの広告を使ったら
記事は1ページには2記事までの表示にしないと、それ以上のものは表示されなくなります。

アドセンスの規約で1ページに3つまで、と決まっているので
「表示されなくても面倒だから設定しなくていいや」
とはやらないほうがよいようです。

トップページやカテゴリーのページは検索エンジンで検索されやすいページです。
というのも、狙ったキーワードが集まっているのがそのページだから。

ですから、そのページにできるだけアドセンスを掲載させるか
それとも検索で有利になるから1ページの記事数を増やして
続きを読むでアドセンスをクリックしてもらうかは悩みどころです。

まずはとにかくアクセスを!と思うのであれば1ページでの記事数は多めに設定し
続きを読む、でアドセンスを踏んでもらう。

アクセスは安定しているから、クリックしてもらいたい
のであれば続きを読むの手前がいいかもしれません。

いずれにせよ、この辺はその人のさじ加減になります。

たまにアドセンスの色や配置を変更するとクリック率が上がる
ということもありますし・・・。

ヒートマップを上手に利用して、自分のサイトをユーザーがどう移動しているかを調べて
アドセンスを掲載すると結構クリック率があがったりしますよ^^

無料のヒートマップについての記事はこちら

RSS twitter livedoorクリップ Buzzurl Google Bookmarks delicious Yahoo!ブックマークに登録 はてなブックマーク はてなブックマーク
タグ /

ブログをカスタマイズするときの考え方

ブログのカスタマイズやリニューアルを考えているときに、あれこれみなさん悩むと思うのですが、
一番考えてほしいのが「ユーザビリティ」です。

ユーザビリティというのはここにも書いていますが、訪問者にとって親切なサイトであるかないか
ということも含まれます。

まず1番にみなさんが考えることは
「自分が見てほしいと思っている記事やコンテンツを見逃さないでほしい。そのためにカスタマイズしたい」

ということなんじゃないかと思います。

だけど、それが訪問者が見たいと思っているかどうかは別ですよね。

そういうことを知るためには
UserHeatという無料ツールを導入して、自分のサイトがどういう部分がクリックされているのかを把握すること。

アクセス解析で、自分のサイトのアクセスがどういう言葉でどこの検索エンジンから訪問者が訪れるのかを把握すること。

この2つで、結構、ユーザーの思考を図ることができます。


逆に、どうしても見てほしかったら、TOPページできちんと紹介してあげることです。

ブログをカスタマイズする前に


質問の中で「記事がどんどん後ろに行ってしまう。どうすればいいでしょう」
「昔の記事は削除したほうがよいのでしょうか」
といったこともよく聞かれます。

記事の削除はオススメしません。なぜかというと、コンテンツ不足は検索エンジンから嫌われます。
また、せっかく書いた記事。その記事の中から検索エンジンがキーワードを拾ってくれることもあります。

ですから、記事の削除はオススメしません。

ここでまずやらないといけないことはカテゴリーをきちんとわける、ということです。

私の場合はカテゴリーを細分化しすぎてしまったので、ヘッダー下に横メニューを挿入して
大きく分けちゃいましたけど、それを補うように、関連記事タグを入れたり
ヘッダーメニューのASP比較一覧などから、各ASPのカテゴリーに移動できるようにリンク設定しています。

カテゴリーをきちんとわけたら、今度はサイトマップを作成すること。

私のサイトマップはこちらから見られます。このサイトマップは結構、クリックされて、見に行く方が多いので必ず配置しています。

次にTOPページをきちんと作ってあげること。

ふつうのサイトは検索エンジンから訪問するとダイレクトにその記事に行くことが多いんですが
お小遣いサイトやショッピングサイトなどの場合には、訪問者がそのサイトに興味を持ったら
必ず、TOPページに戻ります。

TOPページも記事ページも大して変わらないようであれば、そのまま去ってしまうか、カテゴリーメニューで見たいものを探すでしょう。

つまり・・・・


ブログをカスタマイズする、というのは見映えだけではなくて


いかに訪問者にサイト内を見てもらうか。を考えなければなりません。

見映えはもちろん大切ですけどね^^;


お小遣いサイトに多いのが、どんなブログを見ても同じような内容、同じようなデザイン。
です。

その中からいかにぬきんでたサイトを作るかといったら、独自のコンテンツ、オリジナルな記事、
ユーザーに対しての親切さ、じゃないかと思います。

SEOというと、メタタグとかstrongとかそういうことだけにとらわれがちですが
オリジナル記事、タイトルの付け方、ブログ名の付け方、記事の書き方、すべてSEOにつながります。

カスタマイズする際には

自分がどういうサイトにしたいのかを箇条書きにして、やっていくと方向性が見えてきます。
あれもしたい、これもしたい、という単発的な発想だと行き詰まってしまうのでご注意を・・・。

RSS twitter livedoorクリップ Buzzurl Google Bookmarks delicious Yahoo!ブックマークに登録 はてなブックマーク はてなブックマーク
タグ /

テンプレート大改造・大カスタマイズしました

ブログを大幅カスタマイズを行いました。

今回のテンプレート変更点は

・ブログ枠を画像に変更
⇒これは、ブログ幅を1024と定め、1024幅の枠画像を入れて作りました。

・2カラム化
⇒UserHeatを見ていると、左側のサイドバーのクリックはあるものの右側はまったくなく、
さらに、カテゴリーが長すぎてしまったので、サイドバーを整理させるために、目玉をTOPページに
持ってきました。

通常、検索エンジンからは、各記事に直接訪問されることが多いのですが、ユーザーの動向を見てみると、
記事を見た後、TOPページに戻ってきてくれる方がほとんどだったので、TOPに内容を盛り込んでみました。

・サイドバーにもカテゴリー
縦メニューを使い、カテゴリーをちろっと作ってみました。
読んでもらいたい記事中心に、メニューは作りました。

・イラスト、スクリーンショットの多用
イラストは、もうかわいくてかわいくて、私が持ってるすべてのサイトに使わせてもらおう!ぐらいに
惚れ込んでしまったイラストサイトさん「わんパグ」からお借りしました。
⇒無料イラスト わんパグ

スクリーンショットは、自分でもできるんですが、いちいち、スクリーンショットを取り込んで
ペイントで切り取るのも面倒なので、バナー工房さんで作り保存しました。
⇒バナー工房

テンプレは、Yahooなどで上位にいる場合、ソースが変わってしまうので本当は変更しないほうがよいのですが、
どうしてもホームページ風(ブログのホームページっちゃホームページなんですけどね^^;)に作ってみたかったので、チャレンジしました。

そのため、TOPページには記事は掲載していません。

ヘッダーに、メニューを入れ、さらに縦メニューを入れることで対処しています。

まぁ、、、ブログを読みながら、迷子にさせちゃったりするのも目的だったり^^;

また、他のお小遣いサイトとの差別化・個別化を図るために、やっておきたかった
というのが正直なところです。

standard

元々は↑のテンプレートになります。

あとは記事の見直しを行い、画像や文章などのリライトなどを行っていきたいと思っています。

上記テンプレートからのカスタマイズ点は

・IEバー及びファイアーフォックスバーでブログタイトル 記事タイトルと表示されるところを
記事タイトル ブログタイトルと表示されるように変更

・ブログ自体も、記事ページはヘッダー部分に記事タイトル ブログタイトルと表示される変更

・メタディスクリプション部分を普通にmeta deiscriptionで説明文を入れると、どのページも同じ説明文になってしまうため、記事文頭100文字程度が説明文になるように設定

・見出しタグの設定 記事内にも見出しタグを利用

・strongタグを何色か使えるようにスタイルシートの設定

・パン屑リストの設置

・ヘッダー下に横メニューを設置

・サイドに縦メニューを設置

・3カラムを2カラム化することでTOPページを見やすく

・ブログ全体のカラーを変更
 プラグイン(サイドバー)の色と記事・TOPページ部分を分けました

・関連記事を表示させるタグを設置

と覚えている点はこれぐらいです^^;

「私もこんな風にやってみたい」などあればコメントに残してください。
できる限り相談に応じますです。
RSS twitter livedoorクリップ Buzzurl Google Bookmarks delicious Yahoo!ブックマークに登録 はてなブックマーク はてなブックマーク
タグ /

テンプレ改造中です。

テンプレを大改造中でございます・・・。

本当は右カラムにしたいのと、TOPページをもう少し見やすくしたいと、現在大改装中につき
いろいろ見苦しく申し訳けありませんです。

年内にはすべてやりきりますです!
RSS twitter livedoorクリップ Buzzurl Google Bookmarks delicious Yahoo!ブックマークに登録 はてなブックマーク はてなブックマーク
タグ /

strongの色をいろんな色に変えてみましょう

以前、strongのカラーを変更するタグについて、掲載しましたが、これだと1色しか指定できません。

だけど、いろんな色を使って、strongタグを使いたい!ということはありませんか?

私はstrongは4色使っています。

だら奥のネットで副収入

だら奥のネットで副収入

だら奥のネットで副収入

だら奥のネットで副収入

このような感じです。

これはとても簡単なタグでできますので、いろんな色でstrongを使いたい!という方は下記のタグを
スタイルシートに入れてください。


.color1 {
color: #FE5F04;
}
.color2 {
color: #ff8080;
}
.color3 {
color: #00cccc;
}



この1はだら奥のネットで副収入この色です。

2はその下の、3も同様です。

スタイルシートに記述する際に#から続く数字はカラーコードになりますので
自分で使いたい色を登録してくださいね。

で、実際に、記事を書く際には

<strong class="color1">だら奥のネットで副収入</strong>



と、このように書いてください。

それだけでstrongの色が変わります。

RSS twitter livedoorクリップ Buzzurl Google Bookmarks delicious Yahoo!ブックマークに登録 はてなブックマーク はてなブックマーク
タグ /

関連記事表示タグについての補足

FC2ブログカスタマイズでの関連記事の表示方法を書きましたが補足です。

先日のタグでは、多分、、、ですが同カテゴリーのみしか表示にならないと思います。

タグの中でカテゴリー内と指定されているので、こうなるわけなんですが、そうすると
カテゴリー分けをちゃんとしていないブログには利用ができない、ということになってしまいます。

カテゴリーを利用していない方は下記のサイトの関連記事表示タグを利用されるとよいと思います。

http://sayhelloworld.blog113.fc2.com/blog-entry-79.html

http://orzrev.blog105.fc2.com/blog-entry-36.html

いろいろやり方はあるとは思うのですが、簡単なのが一番ですよね^^;

RSS twitter livedoorクリップ Buzzurl Google Bookmarks delicious Yahoo!ブックマークに登録 はてなブックマーク はてなブックマーク
タグ /

FC2ブログで関連記事を表示させるためのタグ

FC2ブログでの関連記事の表示方法は、
以前も取り上げましたが、以前書いた記事には引用元のサイトさんを掲載させていただき、
私のブログではタグは掲載せずにおりましたが、タグを掲載します。

というのも、久しぶりに、そちらのサイトを見ようと思ったら、閉鎖されてる!^^;

ということで、だら奥にて、FC2ブログの関連記事の表示方法を掲載したいと思います。

FC2ブログで関連記事を表示させる準備


グーグルを利用して、表示させる方法ですので、まずはグーグルのアカウント取得を行ってください。

持っている方はGoogle AJAX Feed API にログインします。
アカウントを持っている方でもわからない??という方はまずは
Google AJAX Feed APIこちらに行ってください。

このページでキーを生成させます。

テンプレートにコードの挿入を行います


生成させたコードを入れて<head>~</head>の間に入れてください。


<script type="text/javascript" src="http://www.google.com/jsapi?key=生成されたキーを入れる"></script>




次に関連記事を表示させたい箇所に下記のタグを入れます。
<h4>関連記事</h4>と書いてありますが、私の場合、ブログ記事内の見出しは
h3で指定していますので、h3にしています。この辺は自由にしてください^^



<h4>関連記事</h4>
<script language="Javascript" type="text/javascript">
google.load("feeds", "1");
<!-- カテゴリロード -->
function category1() {
google.feeds.lookupFeed("<%url>?xml&category=<%topentry_category_no>", getFeedUrl3);
}

function getFeedUrl3(result){
if (!result.error){
if (result.url != null) {
var feed = new google.feeds.Feed(result.url);
feed.setNumEntries(15);
feed.load(dispfeed3);
}
}else{
var container = document.getElementById("feedcategory");
container.innerHTML = "フィードがありません";
}
}

function dispfeed3(result){
if (!result.error){
var container = document.getElementById("feedcategory");
var htmlstr = "<ul>";

for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];

htmlstr += '<li><a href="' + entry.link + '">' + entry.title + '</a></li>';


}
htmlstr += "</ul>";
container.innerHTML = htmlstr;
}else{
alert(result.error.code + ":" + result.error.message);
}
}
google.setOnLoadCallback(category1);
</script>
<div id="feedcategory">関連エントリ抽出中...</div>




関連記事の表示方法がわからなくて、手動でいちいち記事を書くたびに入れてらっしゃる方も多いようなので、この関連記事のタグは非常に役に立つものだと思います。

また、ほかにもいろいろな方法がありますが、私はこの方法が一番簡単だと思います。

このタグを入れれば、グーグルが勝手にカテゴリーの中から関連した記事を探して表示させてくれるだけなので、手軽ですし、アフィリエイトを行っている方であれば
例えば、アクセストレードの記事を掲載したとして、カテゴリーの中に「アクセストレードの収入報告」
みたいなものが掲載されれば、見に行ってくれる人は多数いるはずで。

アクセストレードに登録するか悩んでいる方が、その収益を見たら「これは稼げるのね!」と思い、登録してくれる、という可能性を広げてくれるのも関連記事じゃないかと思います。

簡単ですので、使ってない方はぜひ使ってください。
RSS twitter livedoorクリップ Buzzurl Google Bookmarks delicious Yahoo!ブックマークに登録 はてなブックマーク はてなブックマーク
タグ /

ブログタイトルの下にクリック型報酬広告を入れる

ブログタイトルの下に、広告を入れたいのですが、どうすればよいのでしょうか?

というご質問をいただきましたので、お答えしたいと思います。

このブログはFC2ブログのテンプレート工房さんのものですが、大体、どのテンプレも
この方法でブログタイトル下に広告を入れることは可能ではないかと思います。

*できない場合には相談記事にコメントを残してくださいね^^

FC2ブログテンプレートの場合、ブログタイトルは<h1>で指定
ブログ説明文は<h2>でタグ指定されているものが多いと思います。

HTMLを見て

<h2><%introduction></h2>

と書いてあれば、ブログの説明文は<h2>で指定されていることになります。

でブログ名があって直下にブログの説明文がありその下に
クリック保証型広告を入れたい、といった場合には、この<h2>の下に
広告のタグを入れればよいわけです。

私のブログのはマイクロアドにしています。

一番良いのはグーグルアドセンスですが、私はこちらのサイトには
アドセンスのプライベートポリシー記載を行っていないので、入れません^^;

で、CMクリックを入れたかったのですが、CMクリックでは配色設定は
配色設定画面にあるカラーコードのみ、と記載されていたため、いけないか、、、となり
マイクロアドであれば、配色設定もできるので、マイクロアドを入れてみました。


<h2><%introduction></h2>
<center>あなたのクリック保証型広告のコード</center>



これで表示されるようになります。

試してみてくださいね^^


RSS twitter livedoorクリップ Buzzurl Google Bookmarks delicious Yahoo!ブックマークに登録 はてなブックマーク はてなブックマーク
タグ /

FC2ブログカスタマイズ 共有テンプレート「super_seo」のカスタマイズ

私はHTML、CSSともに独学で、一人でアフィリエイトをやってきた中から
習得しつつあるものです。
ですので、すべての質問にお答えすることはできないかもしれませんが
できる限り、相談にはお答えしています。

そんな中、テンプレートにパン屑リストを掲載したい、サイトマップを掲載したい
といった質問もよくいただきます。

今回は共有テンプレート「super_seo」を利用している方から質問がありましたので
私が作成したテンプレートではありませんが、情報をば・・・。

プラグイン3をTOPページのみ表示、カテゴリー・記事ページはプラグイン3を掲載しない設定



super_seoというテンプレートではプラグイン3がすべてのページに表示される設定になっています。

プラグイン3というのは、私のこのブログでいうと、だら奥のネットで副収入について
説明した部分や、更新情報、各カテゴリーの説明部分などです。

この部分を長くすればするほど、super_seoでは、各記事、各カテゴリーともに
読みたい記事にたどり着くまでに時間がかかってしまいます。

ですので、TOPページのみの表示に変更するにはどうすればよいでしょうか?という
質問をいただきました。


super_seoのHTMLを見ると↓この部分


<!--▼▼ プラグイン カテゴリー3 ▼▼-->
<!--plugin-->
<!--plugin_third-->
<div class="menu_title3" style="text-align:<%plugin_third_talign>"><%plugin_third_title></div>
<div class="menu_cont3">
<div style="margin: 10px 0; text-align:<%plugin_third_ialign>">
<%plugin_third_description></div>
<div style="margin: 10px 0; text-align:<%plugin_third_align>">
<%plugin_third_content>
</div>
<div style="margin: 10px 0; text-align:<%plugin_third_ialign>">
<%plugin_third_description2></div>
</div><!--/menu_cont3-->
<br />
<!--/plugin_third-->
<!--/plugin-->
<!--▲▲ プラグイン カテゴリー3 ▲▲-->



があります。

これは常にプラグイン3を表示しますよ、というタグなのです。

この部分に
「TOPページだけの表示にしたいという」タグを加えてあげるだけで、カテゴリー・記事ページには
プラグイン3が表示されなくなります。

↓この赤い文字部分がその「トップページのみに表示する」という命令タグです。
これはFC2変数によるものなので、FC2ブログカテゴリーのみと思ってもよいと思います。
(同じようなタグを利用したブログであれば、利用できます)


<!--▼▼ プラグイン カテゴリー3 ▼▼-->
<!--index_area--> <!--plugin--> <!--plugin_third--> <div class="menu_title3"
style="text-align:<%plugin_third_talign>"><%plugin_third_title></div>
<div class="menu_cont3"> <div style="margin: 10px
0; text-align:<%plugin_third_ialign>"> <%plugin_third_description></div>
<div style="margin: 10px 0; text-align:<%plugin_third_align>">
<%plugin_third_content> </div> <div style="margin:
10px 0; text-align:<%plugin_third_ialign>"> <%plugin_third_description2></div>
</div><!--/menu_cont3--> <br /> <!--/plugin_third-->
<!--/plugin--> <!--/index_area-->
<!--▲▲ プラグイン カテゴリー3 ▲▲-->




super_seoを利用している方は、これを参考にしてくださいね^^

*他のテンプレートの相談も受け付けております。遠慮せずコメントくださいませ^^

RSS twitter livedoorクリップ Buzzurl Google Bookmarks delicious Yahoo!ブックマークに登録 はてなブックマーク はてなブックマーク
タグ /
 | BLOG TOP |  NEXT»»

私も利用中!

ブックマーク

Yahoo!ブックマークに登録

検索フォーム

執筆しました!

GoogleAdSense グーグルアドセンスで<本気で稼ぐ>コレだけ!技 (得するコレだけ!技)

新品価格
¥1,974から
(2011/2/10 22:55時点)

私が執筆させていただきました!

ブログ情報


最新コメント

リンク

特集記事

最新記事

必見記事

アフィリエイト初心者講座

お小遣いサイトの作り方

お役立ちツール

つぃぃと

ケアプロスト
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。