日給8万円ブログテンプレートのトップページに
フリースペースを追加するためのcssとhtmlの改造方法です。



ライブドアブログ以外の他のブログサービス、
例えばFC2ブログやseesaaブログでは
比較的簡単にトップページへフリースペースを挿入できます。


特にseesaaブログではコンテンツの編集時に
フリースペースをパーツとして好きな位置へ挿入できますので
非常に便利なブログサービスです。


さて、ではライブドアブログではどうやって
トップページにフリースペースを挿入すれば良いのでしょうか。


ここでは日8テンプレ限定で説明を進めますが
ライブドアブログ標準のテンプレートでも
考え方は同じですので参考にして下さい。




トップページにフリースペースを
作るには自分でcssやhtmlを改造しなくては
いけませんから大変ですよね。

私も適当にイジりながら覚えたもので
この方法が文法的に正しいのかどうかは
全く保証できません。

ただ、こうすればとりあえず間違いなく
トップページにフリースペースが作れる
という方法ならお伝えできます。


■まず、これから作るフリースーペースに
 対応させるcssを作ります。


cssに以下を追加して下さい。


ここから↓


.blogbody2{
font-size:x-small;
line-height:135%;
text-align:left;
background:FFFFFF;
border-top:1px solid #DDDDDD;
border-right:1px solid #DDDDDD;
border-left:1px solid #DDDDDD;
border-bottom:1px solid #DDDDDD;
margin:0px 0px 10px 0px;
}


ここまで↑


追加する場所はどこでも構いませんが
自分が後で忘れないようにしましょう。

ちなみにこの「blogbody2」という部分は
自分が覚えやすい名前で構いません。


フリースペース用でしたら「freespace」などの方が
後で見てわかりやすいかもしれませんね。


※この「blogbody2」や「freespace」など任意で付けた
名前は後ほど説明するhtmlの改造時に必要になります。

忘れないように覚えておいて下さい。



これでcssの改造は終わりです。





■次はhtmlです。

トップページのhtmlにタグを追加します。

まず追加場所です。

日8テンプレの場合、htmlが始まってまもなく
以下のタグが出てきます↓


<div id="content">

<div class="blog">



↑これよりも下側なおかつ

↓これよりも上側




<!--記事一覧表示-->



の間に、以下のタグを貼り付けてみて下さい。



<!-- ここから -->
<div class="blogbody2">
<div class="blog">
<center>


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

</center>
</div>
</div>
<!-- ここまで -->



※ここで注意

上記<div class="blogbody2">の部分

「blogbody2」

これが上記cssの改造時に任意で付けた名前です。

先程cssで設定したデザインを
ここで使用しますよ、という意味です。

ですから、最初にcssで設定した名前を忘れないように、
また、間違えて違う名前を指定しないように気をつけなければいけません。



逆を言えば、あらかじめいくつか違うデザインで
cssを作っておけば、この指定を変えるだけで
簡単にデザインの変更ができるようになりますね。



これでhtmlの改造も終了です。

忘れないように、保存→再構築をしましょう。

これでフリースペースが完成します。


とりあえず上記の2カ所に同じ物を挿入して
出来たのが現在のこのブログのトップページです。


レポート紹介スペースの上下に
グレーで囲まれた「テストです」という
フリースペースが出来ていますね。


あとは最初に作ったcssのこの部分↓

border-top:1px solid #DDDDDD;
border-right:1px solid #DDDDDD;
border-left:1px solid #DDDDDD;
border-bottom:1px solid #DDDDDD;

1px ←は囲み線の幅です数字が大きくなると太くなります
#DDDDDD; ←これが色指定です好きな色に変えられます


また、各「top」「right」「left」「bottom」は
囲み線の上下左右どれを指定するかということで
個別に設定して行く事ができます。

つまり上だけ赤で太い線

などという囲み枠も作れるわけです。



これで好きなデザインに変更が可能になります。


慣れたらhtmlの挿入場所を変えて
ページ下部に表示しても面白いですね。

あとは何回もhtmlとcssを壊して慣れて下さい。笑

いくら壊れても元のテンプレがあれば
いつでも直せます。

あと、お勧めはテスト用に一個ブログを作って
そこで表示テストをしてからメインブログに
使用する事ですね。

これなら日々の更新に影響がでません。


皆さん、日8はメルマガメインのノウハウですが
ブログもノウハウの大事な一部です。

せっかくのSEOに強い専用テンプレです。
ぜひ楽しんで活用して下さい♪



■参考

・FC2ブログ
http://blog.fc2.com/
・seesaaブログ
http://blog.seesaa.jp/
・livedoor BlogのデザインをカスタマイズするWiki
http://wiki.livedoor.jp/everydaydesign/



■日8フォーラム対象投稿記事

タイトル : ライブドアブログカスタマイズがわからない
記事No : 1596
投稿日 : 2007/07/19(Thu) 20:20
投稿者 : ●●● <xxxxxxxx@yahoo.co.jp>

http://www.blogaffili8.com/material/bbs2/wforum.cgi?mode=allread&no=1596&page=0



RSS twitter livedoorクリップ Buzzurl Google Bookmarks delicious Yahoo!ブックマークに登録 はてなブックマーク はてなブックマーク
コメント一覧

1. Posted by 新一   2008年07月24日 12:30

tomさま

お世話になります。(本当にお世話になってます!)


ブログ、メイン以外に、サブを開設しました。いじって壊します。


 新一

2. Posted by seo vancouver   2012年03月22日 14:48

私はあなたについてのこの記事を書くに入れてすべての努力に感謝 日給8万円ブログテンプレのトップページにフリースペースを挿入する方法 . 私は私のクライアントのいくつかはそれは面白いかもしれないと思うように私は私のウェブサイトにあなたのブログにバックリンクバックを投稿します。

3. Posted by website design vancouver   2012年03月24日 05:07

日給8万円ブログテンプレのトップページにフリースペースを挿入する方法 私が探していたものです。情報をありがとうございました。

4. Posted by pelaymnh   2012年04月14日 09:30

1 蒟籥鱚譛驫蓍 粮� �蓁琿髮 � 褓繖蓿 驍珞縺逶� 琲�蓙
茸闢驫珱� 鞳籥褞鉋: 暦蓖鈞 �. �辮繧鈔 � 虫鞐舮� 謫��� 粳� 矗�, 闔 瘤譛�鉤� 髣纈�, 碼蜥� 蒟 �鴈竡 碆諤鱶譛逶�, 癪髓顋� 顋迥鉤. <a href=http://lukezeh.ql4h.net/pismo-gu-tsb-31.html> 闊髴跪 笂 �� 頌瘠� </a>
<a href=http://uxoheru.hostzi.com/> 驗繼褂 鞳蜥蓁� 琺�閠韆 </a><a href=http://uxoheru.hostzi.com/kursy-valyut-v-belarusi-38.html> 齔鉅 褥韵� 矗譫� � 痳諤頌驤 </a><a href=http://uxoheru.hostzi.com/kurs-valyut-po-gorodam-ukraina-38.html> 褥韵 矗譫� 闔 竡韲籥� 鼕鞐蓁� </a>
<a href=http://yeqecub.zh.md/> 鴈鞦鈞 驤竝琺� 驫瑾瑩� 痳髀諤鴉� </a><a href=http://yeqecub.zh.md/bank-ukrainy-kursy-valyut-77.html> 痼迥 鼕鞐蓁� 褥韵� 矗譫� 矜繖纃蒹 </a>
<a href=http://yajuher.jhgg.net/kurs-valyuty-na-may-66.html> 頏� 褥韵 矗譫鴿 轢 赭� </a><a href=http://yajuher.jhgg.net/deyatelnost-po-doveritelnomu-upravleniyu-94.html> 粤�鱚譛邇髓� 闔 粮矼韆鱚譛邇踈 齒鞐硅纃蕈 </a>
呀褂� 釶鞐芬�, 齟矼鞴粤辷� � 鴈�, �鴈 關銓繿驤鉈琺�, 袱� 關珥蓚�, 艢瘠黽籥�鴆�, 髓鞐籥纈 �硴 齒韲纃蒹. � 黽, 褌辣�邇, 跂鴈� "銜 釶鞐鴉釿�" 袱� 蓁髓頌跂迺 顋邇�-邇竡 琿琺蒟� 驍繿鱶 鴈譛褌 � 辣踈 辣譛��. �鉐鴈�迯� 艢瘠黽籥�髴, 關銓繿驤鉈琺� � 鴈踈 聽 鋏纃� 癪髓韲 閻鞳�髓琺� 癪 髣蓿瑩� 鰰褌碼跏 - 鉐釶纃邇 轢 顋迥� ��辮�骼�, 鋏纃� 鴃縺鈞瑩繼邇 � 關銓繿驤鉈琺蒟踈 齬瑜鴉茗褌�. 9 38.97 俥髟鈕粤辷� 跂聹� 褓萵鉗 蓁粤襃� RSI � 褓萵鉗 籵蒿絳辷� �纃 關� 芻瑾纃��� 蓁粤襃� 碼�� 70 蓚� 辷聽 30 -驟顫繚逶� 驤竝琺, 關纃縺鞳窶鴾 褌鴈顋� 鈿瑜邇. 凰� 噫蜍-粤� 轢茆矗纈 鞐髟鈕粤辷� "轢葹鉉繞 芻瑾蓐 闔袱艢鱚諷� 粳� 蓁粤襃� 銜邇驤鱚譛邇� 驤譖".

5. Posted by Tamnuatob   2012年12月14日 11:59

4 <a href="http://google.ru">Google</a>
Он наконец останавливается на засыпанном гравием круглом пятачке куда выходят.
Каркас а потом и стенки или вернее сказать решетки это небыла клетка в полном смысле слова потому.
Однако кристоф оставался неизменным в своих привязанностях .
Безлесный участок склона как ему показалось не такой крутой туда он и.
Темноглазая брюнетка в короткой до икр юбке пальто и шляпе с широченными полями победительницы говорила.
ecigas
Буду помнить это чертово название изза которого вся моя жизнь пошла.
Неверном свету выглядело старым и утомленным взглянув на него никто не сказал.
И до обеда он подстерегал мики у виллымики молчала он тоже замолчал.

6. Posted by Aliekhizen   2013年03月12日 18:24

3 Очаровательны мадмуазель одну минуту он с галлантным поклоном вышел когда ред вышел я окончательно. сотрудничество с интим - диспетчерами

Не опасайся дорогая со временем его наклонности уже не делятся.
<a href=http://forex.thend.ru/kak-torguyut-na-rynke-foreks.html>См сайт Как торгуют на рынке форекс</a>
Выровняласьона перевела взгляд на своего любовника и попробовала сосредоточиться. В пустоту ее глаз и увидел что душа ее старше тела это было узнавание она вернулась к нему.
продам сайт о forex
форекс начальный депозит 1 доллар
самые лучшие на форекс
мультивалютные форекс советники
рейтмнг форекс брокеров

<a href=http://forex.thend.ru/kak-torguyut-na-rynke-foreks.html>Как торгуют на рынке форекс популярные анкеты </a>
forex надежные брокеры

Визе боже мойзастенчивым во всем что выходило за рамки его профессии я протянула.

7. Posted by slot69   2013年12月31日 17:43

4 казино портал, азартные игры в тысячу дней <a href= http://badbad.ru/images/660.html >интернет казино на реальные деньги с пополнением через yandex</a> реально выиграть интернет казино <a href= http://badbad.ru/images/1325.html >игровые автоматы пополнить счет paypal</a> интернет казино wmr to wmz <a href= http://badbad.ru/images/25.html >игра в рулетку на деньги в интернете онлайн</a> казино бездепозитный бонус личный кабинет <a href= http://badbad.ru/images/335.html >как зарабатывать деньги в казино фараон</a>

8. Posted by kazino41   2014年02月11日 10:13

4 казино играть в aztec gold <a href= http://hoalafusniawanme.land.ru/casino2535.html >игры на деньги онлайн с выводом денег</a> казино плутон, бесплатно игровые автоматы эльдорадо <a href= http://hoalafusniawanme.land.ru >Казино Пополнение Смс</a> игровые автоматы три семерки.

9. Posted by poker28   2014年03月13日 16:39

2 интернет казино он лайн <a href= http://topvip10.ruletka-na-rubli.ru >Стрип покер онлайн</a> интернет казино black jack <a href= http://topvip10.ruletka-na-rubli.ru/vip1808.html >слоты пополнить вебмани</a> онлайн казино гранд neo <a href= http://topvip10.ruletka-na-rubli.ru/vip108.html >покер на реальные деньги для андроид</a> игровые автоматы играть демо версии <a href= http://topvip10.ruletka-na-rubli.ru/vip140.html >игры на деньги с мобильного телефона</a>

10. Posted by jackpot91   2014年03月26日 21:26

3 игровые автоматы 3д играть бесплатно онлайн <a href=http://superslot10.sleepattackporn.com/page781.html>игровые аппараты оплата paypal</a> игровые автоматы играть на деньги отзывы, бездепозитный бонус казино для украины <a href=http://superslot10.sleepattackporn.com/page1771.html>игры с выводом денег на вебмани</a> казино кристалл видео!

11. Posted by blackjack61   2014年04月23日 09:44

4 игровые автоматы онлайн бананы еще казино челябинск блэк джек.

コメントを投稿する

名前:
URL:
  情報を記憶: 評価:  顔   星
 
 
 

リンク集
365日の花言葉と誕生花メルマガアフィリエイトで稼ぐ無料セミナー無料レポート図書館携帯メルマガ