ブログのトップページにフリースペースを作成

	[ ビジネス - 一般 ]		livedoor ホーム

まず、【どんきぃ】のような文系タイプは、ＣＳＳやＨＴＭＬを
見ただけで敬遠しがちだと思います＾＾；

何故なら、

●１から１０まで細かく指示をしてくれないと、
　途中でわからなくなるのが怖い。
●理屈は理解出来ても、どのスペースにそのＨＴＭＬを張り付けるのか、
　その場所がわからない。
●見ただけでイヤになり、見たくもないし、触りたくもない。

こんな考え方なんですね＾＾；
（【どんきぃ】がそうなので、よくわかります）

でも、記事を書き続けて、コンテンツも充実してくると、
サイドバーだけでなく、トップページにも工夫が必要となり、
ＣＳＳやＨＴＭＬは嫌いだ・イヤだなんて言ってられない状況になります。

ちょっとブログを見ていただくと分かると思いますが、
トップページの無料レポート請求画面の下に、
フリースペースを昨日設置し、情報商材のレビュー一覧を
掲載しました。

実は、昨夜の１時から５時までの４時間掛かりました＾＾；

「何やってんだ！超簡単なのに！」という声もあるでしょうが、
知らない方も多いと思いますので、【どんきぃ】が実践した設置方法の
１から１０までの手順を公開します！

＜トップページにフリースペースを作成する方法＞
（ちなみに、ライブドアで【どんきぃ】が行った方法です）
↓
まず、カスタマイズ/管理画面から、デザインのカスタマイズをクリック。
そこにはスタイルシート（ＣＳＳ）が表示されているはずですね＾＾

このスタイルシート（ＣＳＳ）は、ブログ全体の構成を命令する、
いわば作戦司令室とか、管制塔・中枢神経っていうイメージです＾＾

で、このシートの中に、ブログの構成として、
囲い込みの線の色・太さ・幅・高さ・背景等を、
命令通りに実行しなさいっていう指令を与える訳です。

どこに設置するという命令ではなく、このような様式を
ブログ内に設置しなさい！という命令です。
（ブログ内にフリースペースを設けなさいという指示です）

.●●●●●●{　←この●の部分はあなたの覚えやすい名前（半角英数）を入力
font-size:x-small;
line-height:135%;
text-align:left;
background:#0000FF;　←背景色を選択
border-top:1px solid #399;　←#399;は、色のコードで、好きな色に変更可能。
border-right:1px solid #399;
border-left:1px solid #399;
border-bottom:1px solid #399;
margin:0px 0px 10px 0px;
}

ここで、注意です点ですが、今のスタイルシートは、
後で修正出来るように、コピーして、別の場所に保管しておきましょう。
それから、●の部分や、←以下の部分は、消してくださいね＾＾

次に、重要なのが、これを、スタイルシートのどの部分に
挿入するのかが、分かりませんよね？
これが初心者には分からない部分です。

ほんと、不親切なんですよね～＾＾どこでもいいって良く言われますが、
じゃあ、本当に何処でもいいのか？って思いません？？
（極端な話ですが、適当な場所をクリックして、貼り付けてもいいの？
　なんて思ったりしました＾＾；）
文系の人って、ちゃんと指示してくれないと、動けないんですよｗ

という訳で･･･ちゃんと設置場所も指示します！
（設置場所はまだ決めてないから、空白の自分で覚えれる場所なら
　どこでも構わないんですよ。本当は！）

スタイルシートの一番下までスクロールし、余白部分に、
先程のタグを貼り付けましょう。

はい、お疲れ様でした。ここまでは、無事終了です！
一旦再構築しておきましょう。

これで、ブログの中に、フリースペースを入れなさいという
命令が届いた訳です。

でもね＾＾まだ終わっていません。
これは、本部・作戦司令室が出した命令ですよね？
実際に働いてくれるのは、現場なのです。

「事件は会議室で起きてるんじゃない！現場で起きているんだ！」

そう、現場が大事＾＾ここで言う現場とは、
トップページのＨＴＭＬのことを指します。

フリースペースをどの部分に挿入するのかの、
細かい指示をこれから与えていきます。

もう一度最初からですが、カスタマイズ/管理画面から、
デザインのカスタマイズをクリック。
そこにはスタイルシート（ＣＳＳ）が表示されていますが、
その隣にある「トップページ」をクリック。

すると、トップページ（現場）のＨＴＭＬがありますよね。
これもちゃんと保存していてください。
間違えると元に戻すのが困難になりますので･･･

では、ＣＳＳで命令を受けた内容を、
実際に実行する場所から作成していきましょう。

まず追加場所です。
htmlが始まってまもなく以下のタグが
出てきます↓

＜div id="content"＞

＜div class="blog"＞

↑この部分よりも下側なおかつ

↓この部分よも上側

＜!--記事一覧表示--＞

↑この部分よりも下側という意味は、
「コンテンツがここから始まりますよ！」という指令の下側という意味で、

↓この部分よりも上側という意味は、
「記事一覧よりも上の部分までですよ！」という意味です。

その、コンテンツが始まって、記事一覧までのスペース間に、
以下のタグを貼り付けてみて下さい。
（＜＞は半角に変換してくださいね）

＜!-- ここから --＞
＜div class="●●●●●"＞　←先程ＣＳＳで命令したあなたの覚えやすい名前
＜div class="blog"＞
＜left＞

※ここがフリースペースになります※

＜/left＞
＜/div＞
＜/div＞
＜!-- ここまで --＞

これで保存→再構築でフリースペースが
完成します。

要は、現場でどのような作業をしたのかと説明しますと、
ブログのコンテンツが表示される部分に、
●●●●●というあなたが付けた名前のフリースペースを、
記事一覧が始まる前の部分に場所を確保するのが第一の命令。

第二の命令として、＜ここから＞＜ここまで＞の間に、
ＣＳＳで命令・作成したフリースペース名●●●●●を
設置しなさいと命令した訳です。

これで、フリースペースが、トップページに出来上がりました。
文字の色・線の太さ・高さ等はＣＳＳで加工し、
中央に揃えたり、フリースペース内の文字の色を変えたりするのは
トップページのＨＴＭＬで微調整が必要ですので、
繰り返して実践してみてください＾＾

この仕組みが理解出来ると、ブログのカスタマイズも
楽しく作業出来ると思います。

最後に･･･この作業に【どんきぃ】は４時間掛かったと申しました。

４時間あれば、記事も書けるし、ブログも量産出来ます。

あなたは稼ぐのが目的ですよね？

カスタマイズに注力するあまり、他の作業の手が疎かになることは
絶対に止めましょうね＾＾

今日も最後までお付き合い頂きまして、
本当にありがとうございました。

【どんきぃ】の記事、ブログやメルマガに関する事で、
分からないことがあったり、その他質問があれば、
何でも結構です。思い切って【どんきぃ】にメールしてみませんか？？
２２時間以内に必ず返信させて頂いております＾＾
メールはコチラから⇒【どんきぃ】への質問箱

人気ブログランキングに参加しています！
是非、応援ポチッ↓とお願いします。

　

【どんきぃ】のブログ記事更新をメールでお知らせします。
↓もし良かったら登録してくださいね！

どんきぃさんこんにちは！ノラです。

フリースペースを挿入するカスタマイズ方法は
私も過去に記事で書きましたが、
してみたかった人も多かったようで
とっても喜ばれました♪

ここまで丁寧に書いてもらえてると
迷わなくっていいですよね～～

応援☆ずみです

【どんきぃ】さん、こんにちは

ご多忙の中、優先的にお越しいただき、恐縮します
コメントをいただいて、とても嬉しく思います
まずは応援ポチっ☆と、させてください

苦手と言いながら、ここまで習得される前向きさは
見習いたいものです
私は、いつも困っております

ご近所の家事は大変ですね
明暦の大火をはじめ、江戸三大火事と言われるものは
江戸の大半を焼いた、といわれます

火事は怖いですが、バスタオルで表に出ないでくださいね^^
お互い、想像したくないでしょ？
被害がなくて何よりでした

次回の記事も気になるので
また、寄せていただきますね

どんきぃさん、こんにちは

リ・ファリーヌです。
いつも応援コメントありがとうございます。

ブログのカスタマイズは慣れてくればたのしいのかも
しれませんね。
私はニガテなのですが・・・。

応援！！

こんにちは、sasakiです
いつもありがとうございます！

いつもながらホントに
丁寧、親切な記事、
見習いたいです。

＞カスタマイズに注力するあまり、
＞他の作業の手が疎かになることは
＞絶対に止めましょうね＾＾

胸が痛いです＾＾

応援！！

こんばんは、ホリです。
いつもありがとうございます。

初心者にとっては、CSSって
ちんぷんかんぷんですよね。

習うより慣れろっていう部分も
あるんですが、こういう記事が
あると喜ばれますね。

では、また遊びに来ます。
応援ぽちっ！！

【どんきぃ】さん、こんばんは～。

シュガーヒルです。

いつも訪問及びコメントを頂いて、
ありがとうございます♪

カスタマイズ系の作業って
時間掛かりますよね～。

そして、時間が過ぎるのが
早いですよね～。

結構好きですけどね♪

今回の記事も
とても、勉強になります！

応援ポチリ～♪

こんばんは、インフォリーダーです。
昨日は、訪問頂きましてありがとうございました。

私も最初、HTMLやCSSは見てもさっぱり分かりません
でした。時間のある時に少しずつ作業しているうちに
何となく分かるようになってきました。

では、応援しています。

【どんきぃ】さん、
こんばんは！
あきです。
ご訪問ありがとうございました。

CSSよく勉強されましたね!
感涙です。

私タグはそこそこ組めますが、
ＣＳＳは全然駄目です。

ではでは
応援ぽち☆

こんばんはてっです

いつもブログへのご訪問とありがたい
コメントをいただきありがとうございます。

火事も大変だったようですが
カスタマイズもご苦労様です。

そして詳しい説明付でとても参考になりますね。

てっも最近いろいろやってますが
特に時間を取られてしまって困ってます。

出来る誰時間の余裕があるときと思うのですが・・・

訪問者様に優しいブログは
少しずつでも構築していくべきですね。

またお伺いさせていただきます。

貴公子から心をこめて応援です♪

こんばんは、桜吹雪です。

桜の花がヒ～ラヒラ～。

私のブログへの訪問＆コメント、

いつもありがとうございます☆⌒d(,,>∀<,,)

私も、そういう文系です……＞＜

耳が痛いです。

最初のころは、

ペラッペラの薄いアドセンス用ブログ

１つ作るのに、

４時間かかってました……(;´Д`)ノ

それでは、応援ポチッと♪

どんきぃさん、こんばんは＾＾
かかろっとです。

ブログへのコメント＆応援
いつもありがとうございます。

この記事を見る前に
「おっ、変わってる！」と思いました。

そういえば、ライブドアは記事上にフリースペースを
簡単に入れれるようになってなかったですね。

ｓｅｅｓａａは簡単なんですが。

今度挑戦してみます。
この記事を参考にさせてもらえば１時間くらいでできるかな？

ではまた(^_^)/~~~
★かかろっとより応援ポチ済みです☆

こんにちは
アフィリエイトハンター小室です。
いつも訪問、暖かい応援ありがとうございます！

僕はその気持ちがわかります。
ブログの構成をいじろうと思ったら
一晩かかりますよね。
経験済みなのでめちゃくちゃ
共感してしまいました！

また遊びにきます。
応援！

やすです＾＾

コメントありがとうございます。

＞出会い系･･･やっぱり存在するんですねｗ
＞【どんきぃ】は嫌いなので･･･

はは笑
そうですか笑

僕もセフレだーとか、
援交だーとか、
そういうのは全然嫌いですが、
まっとうなやつは、
別に悪くもないかなーと思います。

稼ぐ系だって、
詐欺師は確実に多いですし、
けど
まっとうにやっている人も
たっくさんいますしね笑

だから、
アフィリエイトも
大好きです＾＾

応援していきます。

靖

こんにちは、スネイプです。

ブログのサイドバーに、フリーエリア
を作成する方法。

わかりやすい説明です。

簡単に作れますよね、フリーエリア。

教え方のうまいどんきぃさんに乾杯！

応援ポチッ

こんにちは、大黒です。
いつもブログ訪問温かいコメントありがとうございます。

カスタマイズ楽しいですね。
自分のブログが見栄えがよくなるのは楽しいですね。
でも、どんきぃさんが言うように、カスタマイズばっかりしていたら

肝心のアフィリエイトがおろそかになりますね。
あまりカスタマイズばっかりに専念しないようにしないといけませんねｗ

ではまた遊びに来ます。
応援ぽちっとな♪

初めましてともしんと申しますm(__)m
ブログランキングから来ました♪

大変解りやすいブログないようですので参考になります(^^)/

是非是非仲良くしてください(^^)/

応援ポチポチ！！！

名前:
メール:
URL:
情報を記憶:
コメント:

ブログのトップページにフリースペースを作成

アフィリエイトは時給３０００円以上のおいしい仕事：ブログのトップページにフリースペースを作成

ブログのトップページにフリースペースを作成