livedoor2007年12月14日
ライブドアブログの構造☆その２
さあ皆様が大変待ちかねておった（...orz）、オヤジのブログカズタマイズ第４弾。。ブログの構造の基本☆その２でござる。
大まかなライブドアブログの構造は前回記事にしたので、今回は、カスタマイズに使える（？）チョッとだけ細かい部分の構造の話を（＾＾；
前回。。左側の画像で、青線で囲っている所が、#content （Liquid シリーズでは、#blog も含む） と説明したが・・
チョッと待て、、青線が２重になっておるではないかぁ！？書き間違いかぁ！？
いやいや・・今回の説明用にワザと書いた線であって、ミスでは御座らん！！・・と言うことにしませぅ（￣＾￣；
って、、また脱線してしまった・・orz
外側の青線で囲まれた範囲全てが、#content です。。内側の青線の意味はと言うと、、
「ブログのカスタマイズ」で修正できる、「トップページ」「カテゴリ別アーカイブ」「月別アーカイブ」「個別記事」のHTML （まぁ、命令文だな） にある、、
<!-- Loop Start -->
の境界線です。。結局は、「スタイルシート（CSS）」で言う #content の中の一部ですね。。
（注意 HTMLの範囲的には・・ですが ＾＾；）
記事は記事。。広告は広告。。で表示を分けたかったオヤジは、各HTML内の #content と <!-- Loop Start --> の間に、amazon からコピペしてきたスクリプトを埋め込んでいるのである。
（これはトップページだけにある、記事ナビゲーター （ライブドアブログにも最近出来た） も同様だな）
（以下、オヤジのブログでの改造部分です。。参考までに）
元々は、、
..... id="blogcontainer">
<div id="wrapper">
<div id="content">
<div id="blog">
<!-- Loop Start -->
<IndexArticlesLoop>
<$TrackBackAutoDiscov.....
こんな感じで繋がっていたHTMLを、、
..... id="wrapper">
<div id="content">
<script type="text/java.....アマゾンのスクリプト......js"></script>
<div id="blog">
<!-- Loop Start -->
<IndexArticlesLoop>
<$TrackBac.....
こんな風に、修正している。。
これで何となく、自分がやりたいイメ〜ジのブログにするには、、何処に命令文を挿入すれば、どんな表示になるのか見えてきた？
それでは、もう一つオマケに（＾＾；
記事の下に貼り付けてある、、ランキングと、ドリコムRSS（最新記事を表示させている）、ページの一番上へ。。と言う箇所は、、
<div class="posted"><a h...ポストの命令文.../div>
<IfFirstArticle>
<div id="ad"><$Advertise$></div>
</IfFirstArticle>
</div>
<div class="blogbodybottom">
</div>
</div>
<IfDateFooter><div class="dateend"></div></IfDateFooter>
</IndexArticlesLoop>
<!-- Loop End -->
</div>
こんな感じだった、「トップページ」のHTMLを、、
<div class="posted"><a h...ポストの命令文.../div>
<IfFirstArticle>
<br><br><div id=ranking><center>
<a target="_blank" href=...にほんブログ村..." /></a>
<a target="_blank" href=...人気blogランキング..." /></a>
<a href=ht target="_blan...くつろぐ..." /></a>
<a " height="15" border=...にほんブログ村 競馬ブログ.../></a>
<br>ブログランキング参加中↑をポチっと一票お願いするでござる〜 m(_ _)m
</center></div><br>
<div id="ad"><$Advertise$></div>
<br><br><div id=okinii...ドリコムのスクリプト...pt> </noscript></div><br>
</IfFirstArticle>
</div>
<div class="blogbodybottom">
<br><div id=to_top><a href="#top">▲ページの一番上へ</a></div><br>
</div>
</div>
<IfDateFooter><div class="dateend"></div></IfDateFooter>
</IndexArticlesLoop>
<!-- Loop End -->
</div>
こんな感じで修正しておる訳だねぇ。。参考になりました（？_？；
この改造を施したことにより表示エラー・不利益等が発生しても、一切の責任は取れません！！全て自己責任でお願いします。。
