アフィリエイトは儲かんないってば

は〜。
ライブドアブログで、テンプレートを変更し、いじってみました。

しかし、ぶっつけ本番で、500個くらい記事のある当サイトのデザインをいじると、
１回ごとの再構築に時間がかかって、それだけでダウンしそうです。

そう言えば、以前作っていたお試しのライブドアブログがあったので、そちらでテンプレートをある程度いじってしまってから、CSSやHTMLをコピーすることにしました。

（注）ＣＳＳ、ＨＴＭＬは単なる文章なので、ワードパットなどで簡単に保存できます。保存していじりましょう。


今回下記の変更を行いました。

・ブログを３カラムに。
・サイドバー、ブログ本文、右サイドバーの大きさの調節。
・文字や背景色の変更。
・サイドバーのタイトル部分の変更。
・文字の大きさの変更。


・ブログを３カラムに。

ベースにしたテンプレートは、「シンプル」カテゴリーにあるデフォルト２００５グリーンです。
まずは、デザインをこのテンプレートに変更いたしました。


プラグインの設定で、
左側のサイドバーに表示させるものを位置「Ａ」
右側のサイドバーに表示させるものを位置「Ｂ」に指定します。


・サイドバー、ブログ本文、右サイドバーの大きさの調節。

続いて、 「ブログの設定/管理」をクリックし、「デザインの設定」をクリックします。
「custom（カスタマイズ）」というテンプレートがありますので、これをクリックします。
まずは「CSS（スタイルシート）をいじくります。




デフォルト２００５グリーンのテンプレートのCSSを見てみると、これまでになかった、
#wrapper
#left
#right
などが増えています。
これは、３カラムにするために、増えたパーツのようです。

#left と #right　は、右と左のサイドバーなんだな、ということがわかりますが、#wrapperってなんだ？
よくわからんので、#wrapperのCSSに、background:#FFCC99;を追加して再構築してみました。
#wrapperの部分の色が変わります。
すると、どうも「左サイドバーと、真ん中部分を包むもの」ということがわかりました。


まとめると下図のような構造のようです。


つまり、#leftと#contentの横幅（width）の合計が#wrapperより小さく、#wrapperと#rightの横幅（width）の合計が#containerより小さくないといけないようです。

左サイドバーは小さくても良くて、真ん中は６００pxくらいは欲しい、右サイドバーはそこそこ大きく、という感じで、各部品の横幅（width）をいじりました。


横幅をいじって大きくすると、はみ出したようになるのですが、#containerの背景画像が原因のようです。

↓この部分を/* */でくくって、反映しないようにします（コメントアウト）。
background:url(http://parts.blog.livedoor.jp/img/usr/new_default_green/base.gif) repeat-y 50% 0;

/*background:url(http://parts.blog.livedoor.jp/img/usr/new_default_green/base.gif) repeat-y 50% 0;*/


・文字や背景色の変更。

各パーツなどに適当に背景色を指定します。
一応、暖色系で統一する感じで、色を指定しました。色はウェブカラー形式で指定しました。

#left{
　　　float:right;
　　　width:120px;
　　　border:#666666 1px solid;
　　　background:#FFFFFF;
　　　}

上のような感じで「background」で指定します。borderは枠線です。


また、文字の色は、基本的に本文は黒、リンクは青色、訪問済みリンクは紫、リンクの上にカーソルを載せた時のみアンダーラインがでる、という設定にしました。

　　　a{color:#333333;text-decoration:none;}
　　　a:link{color:#0000CC;text-decoration:none;}
　　　a:visited{color:#660099;text-decoration:none;}
　　　a:hover{color:#660099;text-decoration:underline;}

こういうのが文字色とリンク色の指定なので、片っ端から変更します。
linkがリンク。visitedが訪問済みリンク。hoverがカーソルを載せた時です。
text-decoration:none;←テキストの飾りなし
text-decoration:underline;←下線の文字飾り


・サイドバーのタイトル部分の変更。

.sidetitleに、下のようなものを入れ込んで、サイドバーのタイトル部分を囲います。

　　　background-color:#CC0066;
　　　border-left:2px groove #FFF;
　　　border-right:2px outset #CC0066;
　　　border-top:2px groove #FFF;
　　　border-bottom:2px outset #CC0066;

grooveは盛り上がった感じ。outsetは凹んだ感じの枠線になります。
border（枠線）は一括に指定できますが、別々に指定すると、ちょっと変わった感じになります。

タイトルバナー部分も同様な感じに変更しました。


・文字の大きさの変更。

ライブドアブログは、基本的に文字はx-smallとかnormalとかlargeとかで指定してあります。
これをFireFoxで見ると、悲惨なくらい文字が小さいことがあります。
そういうわけで、

font-size:x-small;　となっているのを

font-size:80%;とかに変更します。

再構築して大きさをインターネットエクスプローラーとFireFoxで確認して、良い感じのパーセンテージを決めます。大きさはpxなどで指定もできますが、ブラウザで文字の大きさを変えた時に大きさが変化しなくなるので、パーセンテージで指定したほうが良いようです。



という感じで、CSSを変更して出来上がってから「アフィリエイトは儲かんないってば」のテンプレートを変更し、ＣＳＳをコピペしたのですが、ＦｉｒｅFoxで見ると両方のサイドバーが落ちています。

慌てて、
#wrapper
#left
#right

などの大きさを少しちっちゃくしたら、サイドバーが落ちなくなりました。
インターネットエクスプローラーでは横幅をぎちぎちにしてても良いみたいですが、FireFoxの方は、少し横幅に余裕が必要なようでした。


とりあえず、こんな感じで今のデザインになりました。

ぼちぼちマイナーチェンジを重ねて行きたいと思います。



デザインをいじるのは、サイドバーが落ちたりして、精神的に疲れます・・・。



この記事へのコメント

赤いpost 2005年10月25日 21:56

デザイン変更お疲れ様です。 サイドバーが落ちたときは本当に○|￣|＿ですネ。 お節介ですが、、、 macでのIE, firefox ,safari＆operaもOKです。

資格浪人日記 2005年10月26日 01:44

無料アフィリエイト用テンプレートを 探していたので勉強になりました。 ＣＳＳやＨＴＭＬの知識がお有りの ようなのでアフィリエイト用の テンプレートを提供するサイトを 作っていただけないでしょうか？ （ずうずうしくてスイマセン） 需要はあると思うのですが・・・

afiliate 2005年10月26日 10:43

どおも〜赤いpostさま。 サイドバーが落ちた時はさーっと血の気の引く音が聞こえます（笑）。 まさにサイドバー落下地獄（笑）。 ＞お節介ですが、、、 ＞macでのIE, firefox ,safari＆operaもOKです。 これってめちゃくちゃありがたいんですよ。 おせっかいなんてとんでもない。 これからもちょこちょこデザインいじりますので、表示が変だったらコメントでこっそり教えていただけるとありがたいです。 どおもでした〜(●＾∇＾●)／

afiliate 2005年10月26日 10:49

どおもです、資格浪人日記さま。はじめまして。 ＣＳＳ、ＨＴＭＬ知識はないわけではないですが、素人のなまはんかな知識なのです。わからないところがまだまだいっぱいあります。 お申し出はとっても光栄でうれしいんですが、テンプレートを自作しようとしても、まだまだとても無理なんです。 これからも勉強していきたいと思ってます。 それ以外で、わかることであればお答えいたしますので、ご相談していただいても良いですよ〜。

Max 2005年10月26日 11:19

今日は、落ち着いたデザインで決まりましたね。デザインいじるの時間かかりかなり疲れますが、僕は、楽しいです。 これもマイナーチェンジさせていくのでしょうか？どのように変化していくのか楽しみで見守って行きたいと思います。 これから、寒くなりますがお身体には気を付けて下さいね。

ａｆｉｌｉａｔｅ 2005年10月27日 10:04

どおも〜Maxさま。ご無沙汰しております。 お褒めいただきうれしいでっす！ マイナーチェンジは本当にマイナーなチェンジの予定です（笑）。 サイドバーいじったりが中心になると思いますが、記事をもうちょっと見やすくできたら良いな、とかです。 ほんとにマイナーで申し訳ないくらいですが（笑）。 またこれからも、よろしくお願いいたしますね。

Max 2005年10月28日 19:42

またまた、こちらの記事にご挨拶です。 ３カラムにすると標準では記事部分が細くなり記事にバーナーが貼れなくなっていますよね ａｆｉｌｉａｔｅサンはうまいことサイドバーの左右の幅を変えて記事部分を広げておられますね 私も今度、挑戦してみたいな! やっぱりデザイン変更する時に、今までカスタマイズしていた変更点が新しくなってからは、引き継がれなくなっていて、見出しやタイトルをseoに効く様にしていたんですが、どこをいじっていたかほとんど覚えておらず、あちこち回って調べまくったんですが当時の記事が残っているＢlogが少なくて...ダウン すごい時間かかったんですがとうとう中途半端のままで落ち付かせています。 ホンデ電脳卸の便利なツールをいくつか見つけて試しに使ってみました。 >まとめると下図のような構造のようです の図があったんで助かりました。他にも助かった方多いようですね。 ではまた

afiliate 2005年10月29日 14:21

どおも〜Maxさま。 私の場合、３カラムで真ん中がちっちゃいと、サイドバーがうっとおしくなり、読みにくい感じがしてしまいます。特に真ん中の文字が小さいと、したにどんどん延びていっちゃうし。もともと記事の文章が長いのでそういうのがイヤで、真ん中を大きめに、字を大きく、と思ってデザインをいじってます。 私もｈタグをいじったり、メタタグをいじったりしていましたが、ＳＥＯ的にあんまり変わらないような気もしています。どちらかと言えば、やはり被リンクの多さや、定期的な更新が大事なのではないかと今は思っています。いじりすぎると、めんどくさい、というがいちばん大きいかもしれませんが（笑）。 図、参考になりましたら、うれしいです。 テンプレによっては構造が違うものもありえますので、注意が必要ですが。 カスタマイズもまた何かわかりましたら、記事にしてみます〜。

オムオム 2005年11月21日 20:06

はじめまして。 BlogのデザインをカスタマイズするWikiに こちらのアドレスがありましたので、記事を拝見させていただきました。 とてもわかりやすく説明されていて、凄く勉強になりました！ お陰で、今まで本文の幅を広げるとデザインが崩れていた理由がわかりました。 どうもありがとうございましたm(＿ ＿)m これからは広い記事で頑張りたいと思います(*´ｘ｀*)

afiliate 2005年11月22日 11:16

どおも〜オムオムさま。はじめまして。コメントありがとうございます。 あ、お役に立てましたか。うれしいです〜。 なかなか参考になったのかどうかってわかりませんので、こういうコメントいただけるとありがたいです。 またお暇なときにでもどおぞお立ち寄りください〜(●＾∇＾●)／

この記事へのトラックバック

1. カテゴリを一覧表示にカスタマイズ！  [ 華彩よりみちweb ]   2006年01月13日 00:00

最近ブログの記事もたくさん貯まってきました。前に書いた記事をすぐに見れるように、今まで記事リストを左に表示させてたんですが、数が増えすぎてきたので、カテゴリ分けを使うことにしました。ただ、カテゴリ分けって使いにくい！カテゴリの記事が本文ごと並ぶからすごく....