untitled

(1)

ブログカスタマイズ

スタイルシート完全攻略

無料レポート【ブログカスタマイズ∼スタイルシート完全攻略】をご購読いただきありがとうございます。著者のアフィリエリア３２８光塾の mitsuya と申します。宜しくお願い致します。このレポートでは、ブログをカスタマイズするために必要なスタイルシートにスポットを当て自分でカスタマイズするために必要な知識を詰め込みました。 Seesaa ブログ入門のメルマガバックナンバーから抜粋していますので、 Seeaa ブログでの操作方法と合わせて記載していますが、スタイルシートの知識は他のブログでも活用できますので、

(2)

● このレポートは著作権法で保護されている著作物です。下記の点にご注意戴きご利用下さい。このレポートの著作権は作者である mitsuya に属します。 ● 著作権者の許可なく、このレポートの全部又は一部をいかなる手段においても、複製、転載、流用、転売等することを禁じます。 ● 著作権等違反の行為を行った時、その他不法行為に該当する行為を行った時は、関係法規に基づき損害賠償請求を行う等、民事・刑事を問わず法的手段による解決を行う場合があります。このレポートに書かれた情報は、作成時点での著者の見解等です。著者は事前許可を得ずに誤りの訂正、情報の最新化、見解の変更等を行う権利を有します。 ● このレポートを利用することにより生じたいかなる結果につきましても、一切の責任を負わないことをご了承願います。

(3)

ブログカスタマイズ

スタイルシート完全攻略編∼スタイルシートとは

はい！スタイルシート完全攻略編っす！スタイルシートを極めれば、ブログのカスタマイズも楽になりますよね。スタイルシートは、ブログだけでなく、ＨＰなどでも使われますのでいろんな所で応用してくださいね。では、まずスタイルシートって何？という方の為に簡単に解説しますと、ブログやサイトを作成する時に、

(4)

サイドバーの幅をどのくらいにしようかな？記事の幅をどのくらいにしようかな？フォントは何にしようかな？文字の大きさはどのくらいにしようかな？文字の色は何色にしようかな？トップのバナーをつけたいな？トップのバナーの大きさはどうしようかな？などなど。。。サイトのレイアウトについていろいろ考えますよね。このレイアウトをどうするか決めてページの見栄えをよくする為に使うのがスタイルシートですね。

(5)

スタイルシートを大きく２つに分けると【１】サイトのＨＴＭＬに直接記述するもの【２】外部ファイルから読み込むものがあり、【１】をさらに分けると、【１−１】インラインスタイルシート【１−２】埋め込みスタイルシートの２つがあります。【２】は、外部スタイルシートと呼ばれるものですね。 seesaa ブログなどのブログで使われているのは、外部スタイルシートです。外部スタイルシートを使う利点として、複数のＨＴＭＬでスタイルシートを共有することができます。

(6)

また、ＨＴＭＬに直接書き込む【１】に比べＨＴＭＬがすっきりします。特に【１−２】はＨＴＭＬの＜head＞の部分に書き込む為に、ＳＥＯ的にもよくありません。ですので、外部スタイルシートを使用する方が多いですね。では、seesaa ブログでは、どの部分で外部スタイルシートを読み込んでいるのでしょう？【デザイン】→【ＨＴＭＬ】を開いて ②のHTML の追加をクリックします。

(7)

<head>∼</head>の部分をみてくださいね。そこに、

というのがありますね。

(8)

ＨＰを運営している方の為に、通常の記述方法を記載しますと、

<head>

(9)

わかりやすくスタイルシートを分析する

はい！本日は、【わかりやすくスタイルシートを分析する】ですね。では、まずスタイルシートを開いてみましょう！デザイン→デザイン一覧を開いてくださいね。デザイン一覧ページの下にあなたが選択したテンプレート名が表示されています。

(10)

クリックしたら、スタイルシートが出てきましたね。下図のページがスタイルシートの編集ページです。

(11)

スタイルシートって簡単そうで難しいと感じるのは、その構造を知らないからですね。まずは、スタイルシートの構造を見てみましょう！難しく考えるから難しくなりますので簡単に書いてみます（笑）スタイルシートを単純に考えると定義が羅列されているだけのものです。わかりやすい言葉で書き直すと、ブログの見栄えを良くするための「決まりごと」が並んでいるだけものです。例えば、サイドバーの定義（決まりごと）の１つで下記のようなものがあります。

(12)

font-size:12px; font-weight:normal; line-height:18px; margin-bottom:10px; padding:5px 15px 10px 30px; text-align:left; } こんなのがいっぱい並んでますよね。基本的な構造は、 .side { ここに決まりごとを入れる } になります。シンプルになりましたね（笑）

(13)

要するに、まず【決まりごとの名前】があり、その後の【{}】（カッコ）に決まりごとが入っているだけなんですね。そして、それがたくさん並んでいるだけなんです。もう一度見てみると。。。 .side {} はい、とってもシンプルですね。では、わかりやすくする為にスタイルシートに印をつけてみましょう！スタイルシートにコメントをつける時は、下記のように【/* ∼ */】で挟むといいですよ。 /* ここにコメントを入れる */

(14)

では、サイドの定義にコメントを入れる場合 /* ##### サイドの定義 ##### */ .side { font-size:12px; font-weight:normal; line-height:18px; margin-bottom:10px; padding:5px 15px 10px 30px; text-align:left; } と入れるとわかりやすいですよね。このコメント付けからまずやってみてくださいね。難しく見えたスタイルシートもわかりやすくなると思います。

(15)

続けてコメントを入れたら下記のようになりますね。 /* ##### サイドの定義 ##### */ .side { font-size:12px; font-weight:normal; line-height:18px; margin-bottom:10px; padding:5px 15px 10px 30px; text-align:left; } /* ##### powered の定義 ##### */ .powered { padding:0px; text-align:center; } このように区切って見ると今まで漠然と見ていてわからなかったものがわかるようになってきます。自分のブログのスタイルシートを使って頑張ってみてくださいね。

(16)

スタイルシートの定義と HTML のつなぎ方

はい！本日は、【スタイルシートの定義と HTML のつなぎ方】ですね。スタイルシートは、定義の集まりだとお話しました。シンプルに書くと下記のようになりますね。 .side { ここに決まりごとを入れる } では、この定義をＨＴＭＬに反映させるにはどのようにしたら良いでしょう？ということで。。。【スタイルシートの定義と HTML のつなぎ方】ですね。

(17)

まず、【デザイン】→【ＨＴＭＬ】をクリックしてみてくださいね。 HTML を追加されている方は、HTML 名をクリック。 HTML を追加されていない方は、HTML の追加をクリックしてくださいね。では、ＨＴＭＬを開いたなら、タグを見てみましょう！どこでもいいのですが、とりあえずわかりやすい所で。。。印の部分は右サイドバーについてのＨＴＭＬですね。

(18)

書き出してみると下記になります。 <% if:have_content_left -%> <div id="links-left"> <% content_left %> </div> <% /if -%> 解りやすいと言っても、ＨＰを製作されたことのある方でも seesaa ブログのＨＴＭＬを見ると。。。？？？と困惑してしまいますよね。私も、はじめて見た時は、なんじゃこりゃ∼！！と思ったものです。ＨＰのＨＴＭＬにはないブログ特有のものがたくさんありますからね。

(19)

が、基本的には、ＨＰのＨＴＭＬと構造は変わりません。ＨＴＭＬでは、直接書いているタグを、ブログの場合、間接的に参照させている場合が多いです。または、分岐させたりですね。例えば、【タイトル】タグを書く場合、ＨＰのＨＴＭＬなら、 <title>【ＨＰのタイトルを書く】</title> となりますよね。これが、seesaa ブログになると。。

(20)

簡単に説明しますと、トップページでは、【ブログタイトル】を表示し、カテゴリページでは、【ブログタイトル：カテゴリ名】を表示し、記事ページでは、【ブログタイトル：記事タイトル】を表示する、などなど。。ブログの場合、ページによってタイトルを自動で判別してくれるように出来ています。ＨＰのＨＴＭＬでページ毎にタイトルを変更するには、１ページずつ変更していけないので、ブログはとっても便利ですよね。このように、自動で判別してくれるようにするため特殊なタグが使用されていますので、わかりにくいのですが、通常のＨＴＭＬと同じ部分も多々ありますよね。通常のＨＴＭＬの部分にスタイルシートの定義を埋め込んでありますので、頑張って発見してみてくださね。

(21)

それでは、先述のＨＴＭＬの中に、 <div>∼</div> で囲まれている所がありますよね。もう 1 度、見てみましょう！ <% if:have_content_left -%> <div id="links-left"> <% content_left %> </div> <% /if -%> ありましたね♪ この div タグは、ブログの 1 部分を１つのまとまり（ブロック）として指定できます。

(22)

その中で、スタイルシートのＩＤが表示されていますよね。 <div id="links-left"> とあります。これの意味は、【<div>∼</div>】の間で挟まれたブロックにスタイルシートの【links-left】の定義を適用してください。という意味になります。もう少し簡単に言うと、【<div>∼</div>】の間で挟まれたひとつのまとまり部分にスタイルシートの【links-left】で指定した決まりごとを使ってブログに表示してください。という意味になります。

(23)

書き方は、２つあります。【１】<div id="定義名">∼</div> 【２】<div class="定義名">∼</div> id ? class ??? と初めての単語が出てきましたよね。解説は次の項目でしますので、今回はブログのＨＴＭＬから【１】<div id="定義名">∼</div> 【２】<div class="定義名">∼</div> を探してみてくださいね。

(24)

見つけたら、スタイルシートを見て、ここが、この部分か∼ と、確認しながら、スタイルシートに印をつけていってくださいね。コメントは下記のように付けるんでしたね。 /* ##### ○○○の定義 ##### */ この作業をすることによって、今まで漠然と眺めていたＨＴＭＬとスタイルシートが繋がります。試してみてくださいね♪ 初めてスタイルシートに触れた方は、これだけの情報では、印が付けられないかと思います。

(25)

まだまだスタイルシートシリーズは続きますので、少しでも分かった気がすればＯＫです♪ 出来た！という事の積み重ねが、全てを前進させます。１つ１つスタイルシートを理解していきましょうね。では、本日はここまで！

(26)

【id="定義名"】と【class="定義名"】の違い

はい！前回は、ブログのＨＴＭＬの中でスタイルシートの定義が使われている部分を探してくださいね。という所まででしたね。よく使われているもので、下記のような感じです。【１】<div id="定義名">∼</div> 【２】<div class="定義名">∼</div> その中で、【id="定義名"】と【class="定義名"】というのがあります。今日は、その違いの解説ですね。

(27)

まず、その前に【id】と【class】について、いろいろな呼び方がありますが、ここでは【ＩＤ属性】と【class 属性】と呼ぶことにします。その違いをあげますと、【１】１つの文書内で、使える回数の制限「ID 属性の場合」 1 度だけ値を使うことができる。「class 属性の場合」何度でも同じ値を使う事ができる。【２】スタイルシートの書き方が違う。「ＩＤ属性の場合」定義名の前はシャープ【＃】（例）#side {} 「class 属性の場合」定義名の前はピリオド【・】（例）

(28)

よく一般的に使われ、よく見かけるのが【class="定義名"】ですよね。ブログのＨＴＭＬを見ていただいてもわかるかと思いますが、ほとんどが、class 属性です。これは、何度でも使用できるので便利だからというのもありますね。どちらで指定しよう。。。と悩まれたらとりあえず、class で指定してみましょうね。定義名を決めるのにアルファベットなら何でもいいのですが、少しだけ決まりがあります。禁止されていることで、数字や記号からはじまる定義名というのがあります。

(29)

例えば、・123teigimei{} とかですね。これはアウトです。何でもいいですので、わかりやすいアルファベットからはじまる文字列で書いてくださいね。例えば、・nantoka{} ・rei{} ・rei2{} などならＯＫです。はい！本日はここまで。

(30)

スタイルシートの各部位の呼び方

はい！本日は、スタイルシートの各部位の呼び方ですね。まず、大元からです。スタイルシートの構成は下記でしたよね。・side { 【決まりごとを入れる】 } この中に少し決まりごとを入れてみます。例えば。。。そうですね。。。文字の大きさを 12px（ピクセル）にしてみましょうかね。ピクセルというのは、ＰＣの画面を構成するドット（小さな点）の最小単位です。 1 ピクセルは見えないぐらいの小さな点ということですね。

(31)

文字の大きさを 12 ピクセルに指定すると下記のようになります。・side { font-size : 12px; } 【決まりごとを入れる】の部分に下記が追加されましたね。 font-size : 12px; 一列で表示すると下記になります。・side {font-size : 12px; } これの各部位の名称は、・セレクタ {プロパティ : 値 ; } 【定義名】の部分を【セレクタ】と言います。

(32)

上記の例で言いますと、【文字の大きさ】を【12px】指定する【プロパティ】を【値】に指定するという風に置き換わります。プロパティと値の間は【：】コロンで区切り終わりに【；】セミコロンを付けて下に複数の決まりを追加することができます。例えば、さらに、色を黒に指定してみましょう。・ side { font-size : 12px; color : #000000; }

(33)

こんな感じですね。つまり下記のように、【決まりごと】を繰り返して指定していき１つの定義名（セレクタ）を完成させます。・セレクタ { プロパティ : 値 ; プロパティ : 値 ; プロパティ : 値 ; etc・・・ } あとは、また定義名（セレクタ）を追加する時は、同じ形式をスタイルシートの下部に追加するだけでいいんですね。これで、スタイルシートの構成は理解できたかと思います。構成が理解できても何をどう指定していいのかわからないと思います。次回からは、スタイルシートで指定できるプロパティと値についてですね。

(34)

スタイルシート徹底解説！

プロパティの【margin】と【padding】って何？

はい！本日は、スタイルシートで指定できるプロパティと値についてですね。前回のおさらいをしますと、スタイルシートの構造が下記のようになります。・セレクタ { プロパティ : 値 ; プロパティ : 値 ; プロパティ : 値 ; etc・・・ } そして、本日は、プロパティと値についてですね。

(35)

実際、いろんなものが指定できますが、 seesaa ブログで使用されているものを少しずつ解説していきますね。まず、よく見かけるのが、【margin】と【padding】というプロパティですね。この２つはどちらも余白を指定しているのですが、どういう違いがあるのでしょう？まず、【margin】は、ワードなどでも出てきますので、余白だと知っている方も多いと思います。ワードの余白とは、文字を書くスペースの周りに上下左右に余白をとりますね。

(36)

【margin】の余白というのは、枠線（ボーダー）の外側の余白になるんですね。例えば、の記事を書くスペースの左右に余白を 2px ほど外側に入れてくださいね。と指定することができます。その場合は、下記のようになります。 margin:0px 2x 0px 2px; 【プロパティ】＝【margin】【値】＝【0px 2x 0px 2px】【margin】と【padding】の値を指定する時は、記述する方法により４通りがあります。

(37)

margin: 1px; /* 上下左右=1px */ margin: 1px 2px; /* 上下=1px、左右=2px */ margin: 1px 2px 3px; /* 上=1px、左右=2px、下=3px */ margin: 1px 2px 3px 4px; /* 上=1px、右=2px、下=3px、左=4px */ ４方向を指定する時は、時計の１２時から時計周りで覚えると良いですね。では【padding】って何でしょうね？【margin】が外側の余白なら【padding】は内側の余白です。これは、記事を書くスペースなど、内側に余白が少しあったら見やすいですよね。また、単純に左に少し空白を入れるだけで、見やすくなったりしますよね。

(38)

【padding】も上下左右を指定することができます。こんな感じ。 padding:0px 0px 2px 0px; この場合は、下内側に 2px の空白を入れてくださいね。という意味ですね。空白をうまく使うと、非常に見やすいブログになりますので、いろいろ研究してみてくださいね。解やすく図で書くと下のようになります。

(39)

Q&A：トップ画像を変えるにはどこを変更するの？

はい！本日は、トップ画像を変更するには、どこを変更すればいいのか見てみましょう！トップの画像を変更するには、スタイルシート内のバナーの定義を変更するといいんですね。場所は、【デザイン】→【デザイン一覧】でしたね。スタイルシート内で【#banner{}という所を探してくださいね。見つけましたら、コメントを入れてわかりやすくしておいてくださいね。

(40)

例えば、下記のようにコメントを入れてみます。バナーの定義の部分を抜き出してみますね。 /* ##### バナーの定義 ##### */ #banner{ font-family:arial, Helvetica; /* 書体の指定 */ height:140px; /* ★高さの指定*/ wide:750px; ; /* ★幅の指定*/ margin:0px; /* 外側の余白上下左右 */ padding:0px 0px 0px 0px; /* 内側の余白上右下左 */ text-align:left; /* 文字の表示位置 */ background-image:url(画像の URL); /* ★背景画像指定 */ background-repeat:no-repeat; /* ★背景画像の繰り返し x＝横 y＝縦 */ background-color:#FFF; /* 背景色 */ はい！各コメントも入れてみました。コメント内に★入っている所を変更するとトップ画像が変わりますので頑張って変更してみてくださいね。

(41)

お使いになっているテンプレートによって項目が違うかと思います。上記の部分で入っていないものなどある場合は、無視して設定することも出来ますし、追加して設定することも出来ますのでいろいろ試してみてくださいね。１つ１つ解説していきますと、【font-family】：書体を指定します。ほとんどのテンプレートは同じじゃないかな？ここは別に変更しなくてもいいです。下記のままですね。 font-family:arial, Helvetica; /* 書体の指定 */

(42)

【height】：画像の高さを指定します。トップ画像にしようと思う画像の高さに変更してくださいね。 height:140px; 【wide】：画像の幅を指定します。トップ画像にしようと思う画像の幅を指定してくださいね。 wide:750px; 【margin】と【padding】：空白を指定します。前回、紹介しましたので、説明は省きますね。 margin:0px; /* 外側の余白上下左右 */ padding:0px 0px 0px 0px; /* 内側の余白上右下左 */

(43)

【text-align】：文字の表示位置を指定します。【left】を指定すると、左寄せになりますね。【center】を指定すると中央寄せです。【lite】を指定すると右寄せです。今回は、左寄せにしてありますね。 text-align:left; /* 文字の表示位置 */ 【background-image】:背景画像を指定します。この部分で背景画像を指定します。ここは、バナーの定義内ですので、タイトル背景画像の指定ですね。画像の URL をいう所にタイトル背景にしたい画像をアップした URL を入れてくださいね。 background-image:url(画像の URL); /* タイトル背景画像指定 */

(44)

【background-repeat】;背景画像の繰り返しを指定します。背景画像は、小さな点や線、画像などを繰り返して表示させるには、ここでリピートを指定しないといけません。繰り返したくない場合は、【no-repeat】を指定します。横だけ繰り返す場合は、【ｘ】を指定し、縦だけ繰り返す場合は、【ｙ】を指定し、縦、横、繰り返す場合は、ｘ、ｙ両方しています。使い方のポイントとして、1 枚のブログ幅ほどある画像をタイトルにする場合は、繰り返さない【no-repeat】を使用します。もしくは、何も書かなくて大丈夫です。点や線、小さな画像をタイトルにして敷き詰める場合は、繰り返して使用すると良いです。

(45)

指定の仕方は、【repeat-x】横【repeat-y】縦【repeat-x,y】両方という感じですね。 background-repeat:no-repeat; /* 背景画像の繰り返し x＝横 y＝縦 */ 【background-color】:背景色ここで背景色の指定をすることができます。背景色はカラーコードで指定します。カラーコードは色を文字列で表示したものでしたね。【#FFF】などがカラーコードにあたります。

(46)

ネット上やフリーソフトなどで調べられますので探してみてくださいね。背景画像と一緒に指定すると背景画像を下に表示されますので同じ大きさの場合、見えない状態になります。見える場合は、ページを開けたときに、背景画像が表示される前にちょっと表示されるくらいですね。背景画像を指定していない場合、ここで指定したカラーがタイトルの背景色になります。いろいろ試してみてくださいね。 background-color:#FFF; /* 背景色 */ ここまで理解しましたら、画像を自分で変更できるかと思います。では、頑張ってくださいね。

(47)

誰でも簡単にできる文字色の変更方法

はい！今回は、誰でも簡単にできる文字色の変更ですね。スタイルシートの場所は、【デザイン】→【デザイン一覧】でしたね。まず、チェックしていただきたいのが、文字色を決定しているものとして【color：文字コード】があります。例えば下記のような感じですね。 color:#FFF; 通常、【＃】の後は 6 桁の文字列が基本ですが、

(48)

#FFFFFF→#FFF と短縮できるものもあります。 seesaa ブログのテンプレートでは、背景色と文字色の組み合わせが悪く見にくいものも多々あります。先日、文字色を変えたいという質問があり、誰でも簡単に文字色を変更する方法を考えて見ました。文字色の変更もスタイルシートで変更するのですが、テンプレートによって文字色を決定している場所が違うんですね。例えば、【container】の定義の所にあったり、【body】の定義の所にあったり、そのまま【text】の定義の所にあったりなどなど。。。

(49)

正攻法でチェックするなら、 HTML からメインの記事を定義しているスタイルシートの箇所を調べてスタイルシートを見て、その定義内に【color】があるかチェックします。あればいいのですが、ない場合もあります。その場合はもっと大きな全体を定義している【container】の定義などにあったりします。これをチェックするには、HTML の知識とスタイルシートの知識の２つをほぼマスターしていないとチェックするのは難しいかと思います。そこで、誰でもわかりやすく簡単にチェックして、文字色を変更する方法を書いてみますね。これを使えば、スタイルシートや HTML の知識無しで文字色を変更することができます。

(50)

文字色のカラーコードを知るには、いろんな方法がありますが、ここでは、【ですカラ∼】というフリーソフトを使います。このソフトは、文字色と背景色の組み合わせを見て見やすいか判断することができるソフトですね。スポイト機能が付いていますので、この機能を使ってカラーコードを判断します。下記のページでダウンロードできます。タッキーズルーム【ですカラ∼】 http://tackysroom.com/ このソフトは、「Visual Basic」で製作したソフトですので、ランタイムが必要です。フリーソフトを使用しようと思って開かない場合は、このランタイムがパソコンにインストールされていないのでインストールしてみてくださいね。

(51)

とりあえず、ランタイムは下記のソフトで大丈夫です。 XTRM Runtime http://www.forest.impress.co.jp/lib/arc/runtime/runtimeapp/xtrmruntime.html ちなみに、解凍ソフトを入れていない方は、解凍ソフトを入れておいてくださいね。【ですカラ∼】を解凍できない場合があります。お勧めは、 Lhaplus http://www.forest.impress.co.jp/lib/arc/archive/archiver/lhaplus.html 右クリックに圧縮・解凍の項目が出てきて非常に便利です。ダブルクリックで解凍できますが、右クリックから解凍を選ぶと、解凍先を指定できますよ。

(52)

パソコンにこれらのソフトを入れていない時の手順として【ランタイム】を入れて、【圧縮解凍ソフト】→【ですカラ∼】 1.XTRM Runtime 2.Lhaplus 3.ですカラ∼ という順番ですね。ランタイムと圧縮解凍ソフトはいろんな場面で使う必須項目ですので、入れておいてくださいね。【ですカラ∼】を起動したら、中央下にスポイトのマークがありますよね。そこをクリックしたまま、指を離さずにカラーコードを調べたい場所に移動させます。

(53)

すると、ソフトの背景色が変わりましたよね。調べたいカラーコードが背景色になったところで指を離します。そしたら、背景色のカラーコードが表示されていますよね。背景色の横並びに【HTML】という項目があります。＃（シャープ）からはじまる 6 桁の文字列ですね。例えば、下記のように表示されています。 #FF0000 ちなみにこれは、赤色ですね。これを使用するんですね。今回、文字色を変更するということで、自分のブログを開いて、先ほどと同じようにスポイトをクリックしたまま、ブログの文字の所にカーソルを移動させてみてくださいね。そしたら、文字のカラーコードが出てきましたね。

(54)

このカラーコードと同じものをスタイルシートでチェックしたらいいんですね。【color】の部分を探すのですが、慣れた方ならスタイルシートを見たらわかりますが、初めての方では、ちょっと大変な作業です。ここで、メモ帳などの検索機能を使ってもいいですね。ブログのスタイルシートを開いたら、全てをコピーして、メモ帳に貼り付けます。そして、メモ帳の左上のメニューから【編集】→【検索】をクリックすると【検索する文字列】というのがありますね。ここに【color】を入れて【次を検索】をクリックします。

(55)

検索する方向を【上へ】【下へ】で調整してくださいね。そうすれば、スタイルシート内の【color】が次々と出てきます。たまに出てくる【background-color】は、背景色です。背景などを変更する場合は、チェックしておいてくださいね。コメントをスタイルシートに入れるときは、下記のように書くんでしたね。 /* コメントを入れる */ 例えば、下記のように書きます。 color: #ffffff; /* 記事内文字色 */ さて同じものを発見しました。そして何色に変えようかな？

(56)

先ほどと同じようにブログの背景色にスポイトを持っていきます。そしたら、【ですカラ∼】の背景色がブログと同じになりましたよね。そして、文字色を変更して、背景色に合った文字色を探します。変更の仕方は、左下に【文字色の変更】というのがありますね。そこをクリックして、希望の色を選んで【OK】をクリックしたら文字色が変化し、カラーコードが出てきます。さらに色の作成をすれば、基本色以外の色も作成できます。見つかったら、そのカラーコードがでていますので、先ほど発見したスタイルシートのカラーコードの所を書き換えます。

(57)

メモ帳に貼り付けたスタイルシートにコメントなどを入れて、チェックしやすいようにして、ブログのスタイルシートに全て貼り付けてもいいですね。変更したら、プレビューで確認してくださいね。目的の場所が変更されていましたら OK です。保存してスタイルシートの再構築をします。全てを再構築してもいいですね。再構築が終わりましたら、ブログを確認してくださいね。たまに以前のデータが残っていて変更を確認できない場合がありますので、その時は、ブログの上で【右クリック】→【最新の状態に更新】

(58)

ちなみに、サイドバーやコメントなどの文字色で同じカラーコードが使用されている場合もあります。複数同じカラーコードがある場合は、 1 つずつカラーコードを変更して、プレビューを見てどこが変更されたのか確認してコメントを入れていってください。コメントを入れておくと後で変更する時など便利ですよ。

(59)

Q：自由形式の文字の大きさを変えたい

はい！「seesaa ブログの自由形式の文字の大きさを変えてみたい！」という質問が何件か来ています。同じように悩んでいる方はいらっしゃいますか？自由形式にはスタイルが適用されていないので、大きな文字になったりして、バランスが悪いですよね。文字の大きさは揃えておいた方が見やすいのでその方法を書いてみますね。

(60)

【自由形式にスタイルシートを適用する場合】もっとも簡単なのは、既存のスタイルシートの定義をそのまま使用します。そしてそれは文字も揃って見やすいですよね。その場合は、自由形式の HTML を変更します。場所は、【デザイン】→【コンテンツ】ブログに自由形式を追加していない場合は、 ②のコンテンツをクリックして自由形式を追加してくださいね。

(61)

コンテンツをクリックしたら下の方に自由形式があります。それを表示させたい所へドラッグ＆ドロップしてくださいね。

右サイドバーに表示させたい場合、下記のように表示されましたね。赤丸内の自由形式をクリックして編集ページを開きます。

(62)

そして、右上の【コンテンツ HTML の編集】をクリックします。自由形式が増えると何の自由形式かわからなくなりますので、タイトルを変更しておくと便利ですね。

(63)

HYML を抜き出すと下記になります。 <% content.header -%> <% content.free.text %> <% content.footer -%> こんな感じで非常に簡単な作りですね。ヘッダー本文フッターって感じです。その自由形式にスタイルを使用する場合、 <div>タグを使用し、そこにスタイルを追加します。

(64)

例えば、自由形式にサイドの定義を設定する場合 <div class="side"> <% content.header -%> <% content.free.text %> <% content.footer -%> </div> というように <div class="side">∼</div> で囲ってやるとスタイルシートの【side の定義】が適用されます。ちなみに、自由形式をサイドバーに入れてみると、タイトルが出てこないですよね。タイトルを出す場合、一番上に、コンテンツタイトルをサイドタイトルの定義で指定すると良いですね。

(65)

繋げると下記のようになります。

<div class="sidetitle"><% content.title %></div> <div class="side"> <% content.header -%> <% content.free.text %> <% content.footer -%> </div> また、メインに自由形式を配置している場合、記事の文字の大きさと合わせるとみやすいですよね。前半で文字色の変化について書いていましたがそれで、記事の文字がスタイルシートのどこの定義で指定されているか分るかと思います。

(66)

その定義を指定してやるといいわけですね。例えば、本文に【text】のスタイルシートが適用されているなら <div class="text"> <% content.header -%> <% content.free.text %> <% content.footer -%> </div> で、できます。いろんなスタイルを定義することができますので、いろいろ試してみてくださいね。スタイルシートに新しい定義を追加して、それを適用させることも出来ます。

(67)

HTML の編集が完了したら、

(68)

あ！行間の指定についての質問もありましたので、追記しておきますね。行間とは、２行分の文字と文字の間のことですね。行の間と書いて「行間」。。。そのままです。文字との比率で高さを指定し、行と行の間を指定することができます。通常は、テンプレートのままで、大丈夫ですが、独自で変更を加えるならば、 line-height: 数字 px;

(69)

を変更・追加するといいです。これは、行の高さを指定するものです。【％指定】の方がわかりやすいので、そちらを例にして解説しますね。例えば、文字の半分の行間を入れたいならば、 line-height: 150％; と指定します。文字の４０％の行間なら line-height: 140％; とするんですね。パーセント指定は、ブログを閲覧している方の環境によって大きくなったり小さくなったりしますが、比率は同じです。

(70)

【text-decoration】と【font-weight】

はい！本日は【text-decoration】と【font-weight】についてですね。たまに出てきますよね。まず、【text-decoration】からいきますね。【text-decoration】とはテキストに下線・上線・打消し線を付けることが出来ます。もう１つ点滅させることもできますが、インターネットエクスプローラーでは、点滅させることができませんので省略しますね。通常、下記のように指定します。 text-decoration: none;

(71)

【none】を指定すると、テキストに線は付かない初期値になります。【none】以外で指定できるのは、【underline】テキストに下線を付けます。【overline】テキストに上線を付けます・【line-through】テキストに打ち消し線を付けます。になります。あまり使わないかも知れませんが、出てきますので書いてみました。

(72)

では、次に【font-weight】ですね。【font-weight】は、フォントの太さを指定する時に使用します。通常下記のように指定します。 font-weight:bolder; 【bolder】というのがよく出てきますよね。これは、相対的に１段階太くするように指定しています。ここで指定できるのは、【数値】での指定と【キーワード】での指定と２種類あります。数値は、100.200.300。。。900 と、100 から 100 単位で 900 まで指定することができます。標準の太さは、400 ですね。一般的な太字の数値は 700 となっています。

(73)

次にキーワードでの指定ですね。こちらの方がよく使われていますね。【normal】標準の太さです。（数値で 400 を指定した場合と同じ）【bold】一般的な太字の太さです。（数値で 700 を指定した場合と同じ）【lighter】相対的に一段階細くします。【bolder】相対的に一段階太くします。の４種類がほとんどです。さらにブログでよく使われるのは、【bolder】ですね。ここもあまり変更することはないです。ですが、こっそりスタイルシートに入っていたりするので、書いてみました。

(74)

ブログの幅を変更する

はい！ブログ内での幅を決める単位として seesaa ブログの場合、【％指定】と【px 指定】の２つがほとんどですね。他のブログでも、一緒かと思います。簡単に説明しますと、【％指定】とは、画面の大きさによって比率を指定します。例えば、あなたの見ている画面の大きさが 1152×864 ピクセルだったとします。そこでブログの幅を 100％指定した場合画面いっぱいにブログが表示されるのですね。

(75)

また、 800×600 ピクセルの画面でブログを見ても同じように画面いっぱいにブログが表示されます。【％指定】とは、訪問者の環境に合わせて表示のされ方が変わる指定の仕方なんですね。【px 指定】とは、訪問者の環境に関係なく大きさを指定します。例えば、ブログの幅は、750 ピクセルだった場合 1152×864 ピクセルの画面でも 800×600 ピクセルの画面でも同じように表示されます。このピクセル指定で、問題点と言えば、 1000 ピクセルでブログの幅を指定した時、

(76)

PC ユーザーは、縦スクロールは得意ですが、横スクロールは苦手です。マウスにもホイール（マウス中央のくるくる回るもの）が付いていて縦スクロールは便利でしょ。横スクロールは、嫌われるサイトの原因でもあります。 seesaa ブログのテンプレートが 750 ピクセル指定が多いのもそれが原因ですね。ブログだけではなく、HP 作成でも 800 ピクセル前後で製作している場合が多いです。これって昔の名残なんですね。今現在、1000 ピクセル以上の大画面で PC を利用されている方が多いのは街中で販売されている PC を見ていただいても解るかと思います。

(77)

ですが、全てのユーザーが大画面を使っているわけではないんです。実際、会社の PC は、800×600 ピクセルです。もう少し小さい画面もあります。 PC 本体はバージョンアップしても画面は変えないという方も、結構多いかと思います。画面は変えなくても全然使えますからね。 800 ピクセル前後が推奨されていますが、あなたが 1600 ピクセルなどの大画面を使用している場合 800 ピクセルって小さく見えてしまうんですよね。なんせ画面の半分ですから（笑）同じくらいの画面を使っている方も同じように感じているかも知れません。

(78)

はい！ちょっと話がそれましたがブログの幅を変更する時、【％指定】の場合は、とても簡単です。基本的に画像を利用していませんし、画像を利用した場合でも、繰り返しの指定をしています。ですので、幅の指定サイズを変更するだけでいいんですね。ちょっと手間がかかるのがピクセル指定です。ピクセル指定の場合、画像を多用している場合が多いですので、幅を変えたら画像の幅も変えないといけない場合が出てきます。

(79)

基本的には、下記の６つの定義を変更します。【container】ブログ全体の幅を変更する時【banner】ブログのトップ画像の幅を変更する時【content】メインの記事の幅を変更する時【links-left】左サイドバーの幅を変更する時【links】右サイドバーの幅を変更する時【sidetitle】サイドバーのタイトル画像を変更する時ちょっと多いですが、１つ１つ解説していきますので、お楽しみに♪ わかった！という方実践してみてくださいね。

(80)

ブログの幅だけ大きくしサイドバーは変更しない方法

はい！ブログの幅だけ変更し、サイドバーは変更しない方法ですね。まず、スタイルシートの所までいってくださいね。【デザイン】→【デザイン一覧】ですね。ブログの幅だけ変更する場合【container】ブログ全体の幅を変更する時【banner】ブログのトップ画像の幅を変更する時【content】メインの記事の幅を変更する時の３つの定義を変更します。

(81)

では、スタイルシートを見てみますね。

#container{ text-align:center;

margin: 0px auto 0px auto; padding:0px; background-image:url(http://blog.seesaa.jp/img/bg/orange/links_bg.gif); background-repeat:repeat-y; background-position:right; width:750px; color:#856F51; } #banner{ font-family:arial, Helvetica; height:140px; margin:0px; padding:0px 0px 0px 0px; text-align:left; background-image:url(http://blog.seesaa.jp/img/bg/orange/header.gif); background-repeat:ｘ-repeat; background-color:#FFF; } #content { float:left; width:467px; text-align:center; }

(82)

これは、オレンジのスタイルシートですが、まず、ブログの幅を指定するには、【container】の定義で指定します。 width:750px; とありますよね。これは、ブログの幅が 750 ピクセルという意味ですが、これを 800 ピクセルにする場合下記のようになります。 width:800px; 全体で見ると下記のようになります。 #container{ text-align:center;

margin: 0px auto 0px auto; padding:0px; background-image:url(http://blog.seesaa.jp/img/bg/orange/links_bg.gif); background-repeat:repeat-y; background-position:right; width:800px; color:#856F51; }

(83)

ここで背景画像（background-image）の指定がありますが、これは、サイドバーの背景画像になっています。 background-image:url(http://blog.seesaa.jp/img/bg/orange/links_bg.gif); 背景画像の指定 background-repeat:repeat-y; 縦に繰り返す横＝x 縦＝y background-position:right; 場所は右端に表示この画像を変更すると、サイドバーの背景画像を変えることができますね。テンプレートによって指定の方法が違う場合もあるかと思いますので、確認する時は、右端に表示されているのを左端に変更してプレビューをしてみたりするといいですね。

(84)

background-position:left; 場所は左端に表示背景画像が移動したら OK です。今回は、サイドバーは関係ないので、飛ばしますね。では、次にbanner の定義ですね。 banner では、トップの背景画像が指定されています。オレンジのテンプレートでは、画像を横に繰り返していますので、問題ないのですが、自分で作った画像などを利用されている場合は、ここで画像 URL を変更してくださいね。 #banner{ font-family:arial, Helvetica; height:140px; margin:0px; padding:0px 0px 0px 0px; text-align:left; background-image:url(http://blog.seesaa.jp/img/bg/orange/header.gif); ←画像 URL background-repeat:ｘ-repeat; background-color:#FFF; }

(85)

画像を製作する時に container の定義で指定したブログ幅に合わせて製作してくださいね。最後に、content の定義ですね。 #content { float:left; width:467px; text-align:center; } content では、記事などのメインの幅を指定しています。サイドバーの幅などを変更しない場合、ブログ幅を広げた分だけ記事の幅を増やしてやればいいわけです。上の例でいくと、ブログ幅を 50 ピクセル増やしましたよね。 width:750px; → width:800px; そしたら、記事の幅も 50 ピクセル増やします。

(86)

すると下記のようになります。 #content { float:left; width:517px; text-align:center; } はい！これで出来上がりですね♪ まとめますと、ブログの幅を変更してサイドバーは変更しない場合は、ブログ幅を増やした分だけ、記事の幅を増やせば良いわけですね。追加補足として、ブログのトップ画像を固定幅で利用している場合、新しいブログ幅に合わせてトップ画像を製作して入れ替えるといいわけです。次回はさらに応用編です。サイドバーの幅まで変更します。

(87)

ブログ全体の幅を変更し、

サイドバーの幅も変更してみよう！

はい！前回では、サイドバーの部分はそのままで本文が書かれている部分の幅を変更して、ブログ幅を変更してみましたね。今回は、さらに、サイドバーの幅も変更してみましょう！まずは、いつものスタイルシートを開いてくださいね。上のメニューの【デザイン】→【デザイン一覧】ですね。

(88)

そこで、今回、利用する定義の部分は、【container】ブログ全体の幅を変更する時【banner】ブログのトップ画像の幅を変更する時【content】メインの記事の幅を変更する時【links-left】左サイドバーの幅を変更する時【links】右サイドバーの幅を変更する時【sidetitle】サイドバーのタイトル画像を変更する時の６つを変更します。トップやサイドバーのタイトルに画像を使っていないテンプレートの場合は、【container】ブログ全体の幅を変更する時【content】メインの記事の幅を変更する時【links-left】左サイドバーの幅を変更する時【links】右サイドバーの幅を変更する時の４つの変更で大丈夫です。

(89)

幅を指定する【width】の数値を足したり引いたりするだけですね。例えば、下記は、右サイドバーだけのテンプレートの状態ですね。 /* ##### container の定義 ##### */ #container{ text-align:center;

margin: 0px auto 0px auto; padding:0px; background-image:url(http://blog.seesaa.jp/img/bg/orange/links_bg.gif); background-repeat:repeat-y; background-position:right; width:750px; /* ☆ブログ全体の幅指定 */ color:#856F51; } /* ##### content の定義 ##### */ #content { float:left; width:470px; /* ☆メインの記事部分の幅指定 */ text-align:center; }

(90)

#links-left { font-weight:normal; width:0px; /* ☆サイドバーの幅指定 */ float:left; } /* ##### 右サイドバーの定義 ##### */ #links { font-weight:normal; width:260px; /* ☆サイドバーの幅指定 */ float:left; } ☆の部分で注釈を入れています。 /* ☆ ○○○の幅指定 */ ここの【width】の数値を変更するんですね。では、試しに、2 カラムを 3 カラムにして、ブログ幅を 900、各サイドバーを 220 にしてみましょう！

(91)

では、まず、ブログ幅と、サイドバーの幅が決まっていますので、その部分を変更します。 container の定義 750 → 900 左サイドバーの定義 0 → 220 左サイドバーの定義 260 →220 と変更しますよね。そして、最後に記事部分【content】の幅を計算します。 900−（220＋220）＝ 480 ということで、 content の定義 470 → 480 となりますよね。多少、余白にとっておく場合は、そのまま 470 ぐらいでもかまわないかと思います。

(92)

変更しましたら、プレビューをクリックして、確認をしてみてくださいね。 OK なら保存をクリックして完成です。再構築も忘れずに。上述の例のように変更した場合は、下記になります。 /* ##### container の定義 ##### */ #container{ text-align:center;

margin: 0px auto 0px auto; padding:0px; background-image:url(http://blog.seesaa.jp/img/bg/orange/links_bg.gif); background-repeat:repeat-y; background-position:right; width:900px; /* ☆ブログ全体の幅指定 */ color:#856F51; } /* ##### content の定義 ##### */ #content { float:left; width:480px; /* ☆メインの記事部分の幅指定 */ text-align:center; }

(93)

#links-left { font-weight:normal; width:220px; /* ☆サイドバーの幅指定 */ float:left; } /* ##### 右サイドバーの定義 ##### */ #links { font-weight:normal; width:220px; /* ☆サイドバーの幅指定 */ float:left; } タイトルの背景画像や、サイドバーのタイトル画像を使っていない場合は、これで大丈夫なのですが、画像を使ったテンプレートを利用している場合、サイドバーの数値を小さくしすぎて、サイドバーのタイトル画像の方が大きくなってしまったら、ブログが崩れたり、画像が表示できなかったりと不具合が出る可能性が高いです。

(94)

こういう場合、画像の幅を確認して、サイドバーの幅と画像の幅を同じになるように設定します。例えば、サイドバーのタイトル画像の幅が、240ｐｘだった場合サイドバーの幅は、240 ということですね。サイドバーの幅は画像より大きくなってもかまいませんのでプレビューで確認しつつ、カスタマイズしてくださいね。画像の幅の確認は、【sidetitle】の定義の部分を見て背景画像の指定の所に URL が表示されていますよね。例えば、下記のような場合だったら、 background-image:url(http://blog.seesaa.jp/img/bg/orange/side_title.gif);

(95)

下記の【http://】からはじまるカッコ内の URL をコピーします。 http://blog.seesaa.jp/img/bg/orange/side_title.gif そして、インターネットエクスプローラーなどのブラウザに貼り付けて見てみてくださいね。サイドバーのタイトル画像が表示されましたよね。その画像にマウスカーソル（矢印）を当て、右クリックをして、プロパティを開いてくださいね。【右クリック】→【プロパティ】上述の URL の例でいくと、開いたプロパティの中段に、【大きさ 253×26 ピクセル】と表示されていると思います。

(96)

【幅×高さ】を表示していますので、この画像の幅は、253 ピクセル（ｐｘ）ということですね。ということは、サイドバーは 253 ピクセル以上で指定しないといけないということですね。はい！今回は、ブログの幅を変更して、サイドバーの幅も変更してみました。ついでにカラム変更までしてみました。全ての流れを見てみるとわかるかと思いますが、基本的にやっていることは同じことですね。足したり引いたりしているだけです（笑）どう応用するかですね。あとは、画像との兼ね合いです。その部分をチェックできるようになるとスタイルシートも自在で操れるようになりますよ。ファイトっす！

(97)

文字色とリンク色、文字の大きさを変更する

はい！まずは、いつものスタイルシートの場所まで行きます。【デザイン】→【デザイン一覧】そして、【a】の定義を探します。これは、a タグの定義になり、リンクに関する指定をすることができます。シンプルオレンジのテンプレートの場合【container】のすぐ下にあります。 a{ text-decoration: underline; color:#78A600; ←ーーーーーココ }

(98)

ここに、color:#78A600;というのがありますね。このカラーを変えるとリンク色が変わります。青がよい場合は、青のカラーコードの【#0000FF】に入れ替えます。すると下記のようになりますね。 a{ text-decoration: underline; color:#0000FF; } これで OK です。大丈夫かどうか、プレビューをして確認してくださいね。また、例えば、リンクの文字の大きさを変える場合は、上記の定義内に文字の大きさの指定を入れます。

(99)

シンプルオレンジの場合通常１２ｐｘですので１４ｐｘにしてみますね。 a{ text-decoration: underline; color:#0000FF; font-size:14px; } 文字が小さくて見にくいという方は変更してみてくださいね。リンクの文字だけ大きくなった場合バランスが悪いと思いますので、記事の文字の大きさも変えてみましょう。また、文字色もかえることもできますよ。

(100)

場所は、シンプルオレンジのテンプレートの場合【container】の定義のところですね。

margin: 0px auto 0px auto; padding:0px; background-image:url(http://blog.seesaa.jp/img/bg/orange/links_bg.gif); background-repeat:repeat-y; background-position:right; width:750px; color:#856F51; ←ーーーーー【1】ココ font-size:12px; ←ーーーーー【2】ココ } アドセンスなどを利用していると文字色を黒にしたいですよね。そんな時は、 color:#856F51; ←ーーーーー【1】ココのカラーを変更します。黒の文字コードは、【#000000】

(101)

ですので、下記のようになります。 color:#000000; さらに文字の大きさを変更する場合 font-size:12px; ←ーーーーー【2】ココを変更します。 12ｐｘ → 14ｐｘとするなら、下記のようになります。 font-size:14px;

(102)

はい！では、変更した後をみてみましょう！

margin: 0px auto 0px auto; padding:0px; background-image:url(http://blog.seesaa.jp/img/bg/orange/links_bg.gif); background-repeat:repeat-y; background-position:right; width:750px; color:#00000; font-size:14px; } こんな感じになります。プレビューで確認してみて OK でしたら、【スタイルシートを変更する】をクリックして再構築してくださいね。もし、別のテンプレートで場所が違う場合は、以前紹介した「ですカラ∼」で対応するカラーコードを探してみてくださいね。

(103)

画像が多いテンプレートの攻略法

はい！本日は、画像が多いテンプレートの攻略法です。まずは、いつものスタイルシートの所まで行きます。【デザイン】→【デザイン一覧】ですね。画像が多いテンプレートでは、 background-image:url(http://all-blog.up.seesaa.net/image/side.gif); の【background-image】が多数ありますね。例えば、オレンジのテンプレートなら９つの画像がスタイルシートに入っていますね。さて、この画像。。。恐れることはありません。 background-image:url(http://blog.seesaa.jp/img/bg/orange/links_bg.gif);

(104)

を探してその画像が何かを見ればいいんですね。上記の場合、画像を見るには、 http://blog.seesaa.jp/img/bg/orange/links_bg.gif を見ればいいんですそしてブログを確認して、その画像がどこの部分で使用されているかを確認します。それで発見できればいいのですが、たまに、細長い線だけの画像などあったりして、それがどこのあるのかわからない時があります。例えば、下記の画像 http://blog.seesaa.jp/img/bg/orange/links_bg.gif 灰色の横線ですが、これだけでは、どこに使用されているかがわかりませんよね。

(105)

そしたら、その下に、繰り返しを指定する【repeat】があります。 background-repeat:repeat-y; /* ☆背景画像の繰り返し x＝横 y＝縦 */ 上記の例で行くと【repeat】の後にｙが指定されていますので、【画像を縦に繰り返す】という意味になっています。ということは、灰色の横線が縦に繰り返されていますので、縦長の長方形のような形になりますよね。そして灰色となると、これはサイドバーの灰色の背景を指定していると判断できます。このように、

(106)

この 2 行で画像を判断できるということですね。ちなみに、リピートがノーリピートになっていたら繰り返さないので、そのままの画像が表示されています。【例】 background-repeat:no-repeat; そして、画像を確認して、その画像を変更する場合、似たような画像を探して、ブログにアップし、アップした画像の URL をスタイルシートの画像 URL と入れ替えるだけで、ブログのどの画像でも変更することができます。テンプレートにより画像の数が変わりますので、面倒くさい方は、画像が少ないテンプレートを選択すると簡単ですね。

(107)

また、カレンダーの画像などの指定があったりしますが、ブログでカレンダーを表示していなければ、ブログで出てくることもないですよね。そういう画像は、無視しておいても問題ないです。はい！これで【図解ブログカスタマイズ∼スタイルシート完全攻略】を終了します。１つ１つ理解していけば、自分でカスタマイズすることができますので、頑張ってみてくださいね。

(108)

ブログカスタマイズ系無料レポート

最後にブログカスタマイズ関連の無料レポートをご紹介します。 Seesaa ブログのカスタマイズで必ずしておきたい部分を記載した無料レポートを抜粋しました。下記の３つのレポートでアカウント取得からカスタマイズまで出来ます。 ★【基礎編】稼げる！シーサーブログ究極のカスタマイズ法 http://www.sugowaza.jp/r/M05BXzF1ag==.html ★【実践編ー１】稼げる！シーサーブログ究極のカスタマイズ法 http://www.sugowaza.jp/r/M05BXzF1aw==.html ★【実践編ー２】稼げる！シーサーブログ究極のカスタマイズ法 http://www.sugowaza.jp/r/M05BXzF1bA==.html 【基礎編】シーサーのアカウント取得ブログ作成ブログの各種設定 HTML の基礎【実践編ー１】デザイン HTML のカスタマイズスタイルシート【実践編ー2】記事 HTML 新着記事 HTML

(109)

基礎編から実践編ー２まで見ると、アフィリエイトに適したブログカスタマイズのほとんどが記載されています。内容を理解しながらカスタマイズするのに良いですね。 ★−Seesaa BLOG カスタマイズ− テンプレート付で簡単カスタマイズ http://www.sugowaza.jp/r/M05BXzNiWQ==.html テンプレート化して簡単にカスタマイズしたいという方は、こちらをどうぞ。コピペするだけで、カスタマイズされたブログが完成します。 ★Seesaa ブログをカスタマイズ！カテゴリーをツリー化する方法 http://www.sugowaza.jp/r/M05BXzFQdA==.html カテゴリをツリー化する方法ですね。大カテゴリ、中カテゴリと細分化することができますので、

(110)

★あなたのブログを自分らしくカスタマイズ♪ ∼ブログパーツ 18 連発！！∼ http://www.sugowaza.jp/r/M05BXzMwUQ==.html おっと！これは！というブログパーツから、ちょっと笑えるブログパーツまでいろいろありますね♪ 私が使っているものから、知らなかったものまであり、ちょっと楽しませていただきました。

(111)

最後まで、ご購読いただきありがとうございました。ブログカスタマイズ頑張ってくださいね。この無料レポートをご購読いただいたあなたには、後日、独自配信裏メルマガ、★アフィリエリア３２８！光塾★（無料）をお送り致しますのでお楽しみに！あなたがネットビジネスで稼ぐことができるよう良質な情報を配信していきます。この無料レポートのご感想やご質問などありましたら、いつでもメールくださいね。【スタイルシート攻略レポートの感想】もしくは、【光塾★質問箱】を件名に下記のメールアドレスまでお願い致します。 [email protected]

(112)

◇ サイトアフィリエリア３２８★光塾 ◇ URL http://www.cn-jp.net/area328.html ◇ ブログ初心者でもわかる図解 seesaa ブログ入門 ◇ URL http://all-blog.seesaa.net/ ◇ ブログ中国直送！プーアル茶専門卸市場 ◇ URL http://puer-cha.cn-jp.net/ ◇ サイト VOICE ∼中国買付け・貿易総合サイト ◇ URL http://voice.cn-jp.net ◇ サイトオンラインカジノランキング必勝法＆攻略法 ◇ URL http://casino.cn-jp.net ◇ サイト無料レポートマスターによる徹底攻略講座 ◇ URL http://all-biog.seesaa.net/ ◇ サイトシルバー925 卸専門レッドアイ ◇ URL http://1hanahaku.cn-jp.net/silver925/ ★アフィリエリア３２８！光塾：mitsuya