メルマガ登録
インフォトップランキング
ブログ生中継

ブログを確認しながらいじってみる:アフィリエイト入門

magchecker.jpg 【最配布可】 『まぐちぇっかあ』

〜 まぐまぐの代理登録を使わないで
メルマガの読者を増やす方法 〜


もし、あなたが、

「リスト取りのためのプレゼントはあるのに、
まぐまぐの代理登録費用は高すぎて・・・。」

と一度でも考えたことがあるなら、

まぐまぐの代理登録を使わずに、
まぐまぐ以外のメール配信システムも使わずに、
ほったらかしで、
メルマガの読者を増やす方法があるのですが・・・。


つづきを読む

ブログを確認しながらいじってみる

これからお伝えする内容は、
ブログのデザインやレイアウトを
ブログを確認しながら変更する方法です。



変更したそばから反映されますので、
いろいろ試すのが楽しくなり、とても勉強になります。



「こうしたら、どうなるんだろう?」
といろいろやってみたくなると思います。



この方法を使うととても細かな変更をすることができますので、
懲りすぎると、時間がたつのを忘れてしまうかもしれません。



はじめのうちは、
Seesaa ブログが用意してくれているデザインテンプレートで
満足かもしれませんが、いづれ、人と同じものは嫌になってくるのが、
人の心理だと思います。



もちろん、有料で提供されているテンプレートもたくさんあるのですが、
どんなに豊富に用意されていても、
結局いづれは誰かと一緒かよく似たものになってしまうんですね。



ですので、この方法は、ぜひともマスターしていただきたいと思います。



とはいえ、今すぐに必須のノウハウというわけではありませんので、
軽く読み飛ばしておいて、必要になったらまた戻ってきて、
そのときにじっくりと取り組むというやり方でも、もちろんOKです。



『アフィリエイト入門』では、
すでに完成された SEO 対策済みのテンプレートをご用意していますので、
それを適用さえすれば、これから解説する作業は特に必要ありません。



すべて、そのテンプレートに盛り込まれていますので、
無駄になってしまう作業もあります。



ただ、これから解説するノウハウをマスターしておくと、
あとあと、とてもつぶしが利いたりしますので、
選択肢のひとつとしてご紹介しておきたいと思います。



必要になったらまた戻ってくるという方はこちらへお進みください。

 → SEO対策済みテンプレート(同窓)






それでは、いろいろいじってみたいという方、
まいります。



まず、ファイヤーフォックスというソフトと、
さらにその上で動くEditCSS(エディットCSS)というソフトを、
パソコンにインストールします。



ファイヤーフォックスとは、
インターネットエクスプローラーと同じインターネットのブラウザです。



インターネットエクスプローラーと同等かそれ以上の機能を持っています。



まず、こちらをクリックして
ファイヤーフォックスのダウンロードページを開きます。

 → http://mozilla.jp/






[Firefox 無料ダウンロード]をクリックします。

seesaa203.jpg






[実行]をクリックします。

seesaa204.jpg






このような表示が出て、

seesaa205.jpg






しばらくすると、「セキュリティの警告」というメッセージが表示されますので、
[実行する]をクリックします。

seesaa206.jpg






「Mozilla Firefox のセットアップ」が起動しますので、
[次へ]をクリックします。

seesaa207.jpg






Windowsユーザーのほとんどの方が、Webサイトを閲覧するときは、
インターネットエクスプローラーを使っていらっしゃると思いますが、
今後も引き続きインターネットエクスプローラーを使っていきたいときは、
「Firefox を規定のブラウザとして使用する」のチェックをはずします。

ちなみに私は、
ブログのデザインを変更するときだけ
ファイヤーフォックスを使っていますので、
はずしてインストールしました。
(後から変更できます。)

ご参考までに。

seesaa208.jpg






[次へ]をクリックします。

seesaa209.jpg






[インストール]をクリックします。

seesaa210.jpg






[完了]をクリックします。

seesaa211.JPG






このような表示が現れたら[次へ]をクリックします。

seesaa211b.jpg






どちらを選んでもかまいません。

[次へ]をクリックします。

seesaa211c.jpg






このように表示され、しばらくすると、

seesaa211d.jpg






「規定のブラウザの設定」というメッセージが表示されますので、
[いいえ]をクリックします。
(今後、ファイヤーフォックスでWebサイトを表示させたいときは、
[はい]をクリックします。)

seesaa213.jpg






また、お使いのパソコンの環境によっては、
ここにいたるまでの途中でこのようなメッセージが表示されるかもしれません。

その場合、ここではとりあえず[確認しない]をクリックしておいてください。

seesaa212.jpg






さて、ファイヤーフォックスが起動しました。

seesaa214.jpg






こちら ↓ をコピーしてしてください。

https://addons.mozilla.org/ja/firefox/search?q=EditCSS&cat=all

(URLの上で右クリックして[ショートカットのコピー]をクリックします。)

seesaa214b.jpg






ファイヤーフォックスのアドレスバーの上で右クリックして、
[貼り付け]をクリックすると、

seesaa214c.jpg






このような表示になりますので、エンターキーを押します。

seesaa214d.jpg






エディットCSSのインストール画面が検索されました。

seesaa215.jpg






[Firefox へインストール]をクリックします。

seesaa216.jpg






[今すぐインストール]をクリックします。

seesaa217.jpg






[Firefox を再起動]をクリックします。

seesaa218.jpg






[再起動]をクリックします。

seesaa219.jpg






「規定のブラウザの設定」というメッセージが表示されますので、
[いいえ]をクリックします。
(今後、ファイヤーフォックスでWebサイトを表示させたいときは、
[はい]をクリックします。)

seesaa220.jpg






このように表示されたらOKです。

この窓は閉じてください。

seesaa221.jpg






インターネットエクスプローラーで表示されているご自分のブログのURLをコピーして、
(アドレスバーの中で右クリックして[コピー]をクリック)

seesaa221b.jpg






ファイヤーフォックスのアドレスバーに貼り付けます。
(アドレスバーの中で右クリックして[貼り付け]をクリック)

seesaa221c.jpg






そのままエンターキーを押します。

seesaa221d.jpg






ファイヤーフォックスで、ブログが表示されました。

seesaa221e.jpg






さて、ここからが本番です。

ファイヤーフォックスの[表示]メニューをクリックして、
[サイドバー]→[Edit SCC]の順にクリックします。

seesaa222.jpg






このようなものが左の方に表示されたと思います。

seesaa223.jpg






これがスタイルシートと呼ばれるもので、
ブログ(サイト)のデザインやレイアウトを決定しています。



ごちゃごちゃたくさん書いてあるので、
最初は戸惑うと思いますが、最初だけです。



まあ、なんでもそうですが、
いったん慣れてしまえばどうってことのないものです。



意味不明なものってなんであれ、ビビりますし、敬遠しがちです。



がんがんカスタマイズしている人が、最初からできたかというと、
もちろんのことながら、そんなことはありません。



だれでも最初は初心者。



これ、いたって当たり前のことです。



果敢にチャレンジした人が、
自分だけのチャーミングなブログや、
エレガントなブログを持つことになるんですね。



まあ私の能書きはいいので、
とりあえず触ってみましょう。



習うより慣れろ、
です。






たとえば、これ、ちょっと窮屈なので、
行間を広げてみます。

seesaa202.jpg






.side
という記述を見つけてください。



すみません、ちょっと苦労してください。笑



.sidetitle
とか、

.side-tag
とか、

.side○○

という記述は、かたまっていますので、
.side○○
がでてきたら、よく注意して見てください。



見つかりましたでしょうか?

seesaa224.jpg






これらの記述はすべて、
{ から } までが、ひとくくりです。



{ から } までの中に、色やフォントサイズや行の高さや余白など、
さまざまなプロパティ(属性、特質、特性)を指定しています。



つまり、簡単に言うと、
「 side というタグを使う際、その色や余白はこうですよ」ってことです。



そして、そのタグをどこで使うかは、HTML の方で決めるのです。
(今はよく分からなくてもかまいません。)



記述のルールは、
タグ名{プロパティ:値;}
です。

(スタイルシートに記述するときは、
タグの種類によって、先頭に # や . を付けたりします。)



ですから、

.side {
color:#8B8B8B;
font-size:12px;
font-weight:normal;
line-height:1.2em;
margin-bottom:10px;
padding:10px 15px 10px 15px;
text-align:left;
}

というのは、

sideというタグを使うときは、
色が#8B8B8Bで、
フォントサイズが12pxで
フォントの太さがノーマルで、
行の高さが1.2emで、
下のマージンが10pxで、
パディングは上、右、下、左、それぞれ、10px 15px 10px 15pxで、
文字の位置は左寄せですよ、

ってことです。



あまり細かく解説しだすと、
それだけで、ひとつのWebサイトが出来上がってしまいますので、
ここはざっくりといきますね。



色が #8B8B8B です、と言われても、何色なのか分かりません。
そんなときはこちらで確認ができます。

 → http://w-d-l.net/css/1677color/index.php



あと、逆に、色の値が知りたい場合はこちら。

 → http://www.htmq.com/color/websafe216.shtml



行の高さが 1.2em ?
1em が、1文字ですから、
1.2 文字分の高さということです。

そのほかの単位についてはこちら。

 → http://masaboo.cside.com/new_css1/cs_07.htm




パディングとは聞きなれない言葉ですね。

マージンもパディングも余白なのですが、
マージンは枠自体の余白で、
パディングは枠の中の余白、
と言えます。

こんな感じです。

 → http://hac-design.com/css/margin.html



では、ちょっと、いじってみましょう。






line-height:1.2em; とありますが、
この 1.2 を 1 にしてみてください。

seesaa226.jpg






すると、行の間の隙間がなくなってしまいました。

seesaa227.jpg






行の高さを1文字分に指定したからですね。






では、行の高さを2文字分に指定してみましょう。

seesaa228.jpg






ゆったりした感じになりました。

seesaa229.jpg






ところが、プロフィールも間延びしてしまいました。

seesaa300.jpg






これが嫌な場合は、プロフィール用にタグを作って、
これをプロフィールのコンテンツのHTMLで使うようにしてやります。



.profile {
color:#8B8B8B;
font-size:12px;
font-weight:normal;
line-height:1.2em;
margin-bottom:10px;
padding:10px 15px 10px 15px;
text-align:left;
}



これは、先ほどの side というタグの内容をそっくりそのままコピーして、
タグの名前と、 line-height の値を最初の 1.2 に戻したものです。



これをコピーして、.side の前(が分かりやすいと思いますので)に貼り付けます。






まず、選択して(反転させて)その上で右クリックして、
[コピー]をクリックします。

seesaa301.jpg






見やすくするために } の後ろでクリックしてカーソルを点滅させ、

seesaa302.jpg






エンターキーを押して1行あいだを空けておきます。

seesaa303.jpg






右クリックして、[貼り付け]をクリックします。

seesaa304.jpg






.profile というタグを、
.sidetitle というタグと .side というタグの間に
貼り付けることができました。

seesaa305.jpg






次に、Seesaa ブログのメンテナンスページのコンテンツ画面で、
プロフィールをクリックします。

seesaa118b.jpg






右上の方にある[コンテンツHTML編集]をクリックします。

seesaa306.jpg






3行目に div class="side" とありますが、

seesaa307.jpg






この side を profile に書き換えます。

seesaa308.jpg






[保存]をクリックし、

seesaa309.jpg






「編集を完了しました。」と表示されたら、
[プロフィールの設定に戻る]をクリックし、

seesaa310.jpg






なぜかここでも[保存する]をクリックしなければなりません。
(おそらくバグだと思うのですが・・・)

seesaa311.jpg






「設定を完了しました」と表示されたら、
[閉じる]をクリックして、

seesaa312.jpg






[設定を反映する]をクリックします。

seesaa313.jpg






ファイヤーフォックスの更新ボタンをクリックします。

seesaa314.jpg






プロフィールだけが元の行の高さに戻りました。

seesaa315.jpg






これからは、プロフィールだけ、
個別にデザインを設定できるようになったということですね。



たとえば、

.profile の、

color:#8B8B8B;

を、

color:#006600;

に変更してみてください。






文字の色が変わりました。

seesaa316.jpg






では、同様に「カテゴリ」や「最近の記事」の文字の色を変えるためには、

.side の、

color:#8B8B8B;

を変更すればいいかというと、
やってみると分かりますが、
ここを変更しても、かっこと中の数字の色が変わるだけです。

seesaa317.jpg






なぜかというと、この文字はリンクだからです。



お分かりでしょうか?



別のところで、リンクの色を指定しているのですね。






a というタグがあります。
( a というタグはたいていはじめの方にあります。)

body があって #container があって、その次にありました。

seesaa318.jpg






この a の、

color:#513E19;



color:#0000FF;

に変えてみてください。






リンクの文字がすべて青に変わりました。

seesaa319.jpg






さて、このような要領で、文字の色や大きさ、
背景の色、タイトルやそのバックの色、
あるいはそれらを表示する位置など、
さまざまな要素を変更することができます。



まずは、いろいろ試してみることをお勧めします。



「 #container ってブログのどこの部分のことだろう?」

そう思ったら、その中の、

color:#8B8B8B;

の値を変更してみたら分かります。



「 #banner って何だろう?」

はい、

height:251px;

の値を変更してみてください。



「・・・ということは、
 もっと大きな写真を貼り付けたい場合にいいかも・・・」



写真の変更ですか?



同じ #banner の中に、

image:url(http://blog.seesaa.jp/img/bg/wakaba/header.gif);

というのがありますね。

これがバナー部分(ブログの一番上)に表示されている写真です。

これをクリックしてみれば、分かります。

 → http://blog.seesaa.jp/img/bg/wakaba/header.gif

ですから、ここの写真を変えたい場合は、ファイルマネージャーで、
用意した写真をアップロードして、そのURLでここを書き換えればいいのです。



え?



よく分からん?



じゃあ、次回は、それ、やってみましょうか。






その前に、忘れないうちに、
今までの変更をSeesaa ブログに適用しておきましょう。



現時点では、あくまで変更点の確認をしてきただけですので、
Seesaa ブログの方で保存されているわけではありません。



このへんは今後ともご注意ください。



では、スタイルシート(今、変更してきたテキスト)を
適用する方法です。






スタイルシートの上で右クリックして、[すべてを選択]をクリックします。

seesaa320.jpg






文字が反転してすべてが選択されますので、
また右クリックして[コピー]をクリックします。

seesaa321.jpg






Seesaa ブログのメンテナンスページの[デザイン一覧]をクリックします。

seesaa322.jpg






現在適用されているデザインのタイトルをクリックします。

seesaa323.jpg






スタイルシートの枠の中で右クリックし[すべて選択]をクリックします。

seesaa324.jpg






すべて選択されたらまた右クリックして[貼り付け]をクリックします。

seesaa325.jpg






「スタイルシートタイトル」を変更して
[スタイルシートを変更する]をクリックします。

seesaa326.jpg






「設定を変更し、CSSをビルドしました。」と表示されたらOKです。

seesaa327.jpg






一応確認しておきましょう。

seesaa91.jpg

もしくは、

seesaa11.jpg






さて、ファイヤーフォックスを終了させる前に、
次回起動時はあなたのブログが表示されるようにしておきましょう。






ファイヤーフォックスの[ツール]→[オプション]の順にクリックします。

seesaa327a1.jpg






[一般]が選ばれていることを確認し、
「 Firefox を起動するとき」の設定を、
「前回終了時のウインドウとタブを表示する」に設定し、
[OK]をクリックします。

seesaa327a2.jpg






ファイヤーフォックスを終了する前は、
必ずエディットCSSを閉じておきます。

(次回起動時に表示がおかしくなるので。)

seesaa327a3.jpg






これでOKです。

ファイヤーフォックスを終了してください。

seesaa327a4.jpg






===



メルマガ

 → http://archive.mag2.com/0000224526/index.html



===



お役に立てましたらクリックお願いします。

 → 人気ブログランキングへ



===

この記事へのコメント



コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

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

アフィリエイトの基礎知識:知ってるつもりだったけど(14)


○○とは?シリーズ:知ってるつもりだったけど(1)


ソフト&用途別メールアドレス:ツール(3)


ブログの開設:ネットでお店(ブログ)を出そう(6)


ブログのカスタマイズ:ネットでお店(ブログ)を出そう(7)


ブログのSEO対策:ネットでお店(ブログ)を出そう(3)


ブログの記事が書けないときは:ネットでお店(ブログ)を出そう(1)


ブログのカスタマイズパック:ネットでお店(ブログ)を出そう(1)


資金調達(工事中):資金調達(0)


メルマガ読者限定:特典(1)


amaのアフィリエイト特典:特典(1)


ネットビジネス・ワールドマップ:アフィリエイト入門推奨教材(1)


PPCアフィリエイト:私はこうやって稼いでいます(2)


和佐大輔さんの無料オファー:無料なのに凄いもの(1)



×

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