手順その4 - ボディを変更する
提供: GeeklogJpWiki
手順その4 - ボディを変更する
（以下の記事は，Eric WarrenさんがglLabsに投稿されたものをmystral-kkが翻訳したものです。原文はこちら）
テーマのボディ部分を変更するのは，ヘッダの場合と大して変わりません。唯一の違いは，コードが複数の.thtmlファイルに分散していることです。HTMLの表を使いながら，Geeklogがどのようにしてページのボディ部分を生成するのかちょっと調べてみましょう。
ボディ部分を最初に参照している部分はheader.thtmlの中にあります。以下のコードは左ブロックと記事を表示する部分を生成しています。
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
{left_blocks}
<td class="story-container" width="100%" style="vertical-align:top;">
<div class="header-welcomeanddate-box">
<div class="header-welcomeanddate-text">
<a href="{site_url}">{welcome_msg}</a><br>{datetime}
</div>
</div>
<!-- START OF CONTENT AREA -->
<table>を生成するコードがこのファイル内で完結していないことに気づきましたか? その部分は次に示すように，footer.thtmlの中にあるのです。
<!-- End Content Area -->
</td>
{right_blocks} </tr>
</table>
この2つのコードが本棚のブックエンド（本立て）のようなものと思えば，トップページを表示したときに，その間に挟まれる”本”（つまり，他の.thtmlファイル）は次のように並ぶことになります。
- leftblocks.thtml（左ブロック）
- blockheader-left.thtml（左ブロックヘッダ）
- blockfooter-left.thtml（左ブロックフッタ）
-
- featuredstorytext.thtml（注目記事）
- storytext.thtml（ふつうの記事）
- rightblocks.thtml（右ブロック）
- blockheader-right.thtml（右ブロックヘッダ）
- blockfooter-right.thtml（右ブロックフッタ）
-
このことに留意して，テーマを移植する際に私がよくするのは，Notepad++で（header.thtmlとfooter.thtmlを両端にして）これらのファイルを全て順番に開くことです。その後で，元のテーマのindex.htmlを開き，そのタブを右クリックして「別のビューで表示(Go to another View)」を選択します。これでコードの流れを追い，必要な変更を.thtmlに追加しやすくなりました。
- .thtmlファイルをNotepad++で開いた場合，コードに自動的に色分けが行われないことに気づくでしょう。「言語」メニューをクリックしてリストの中からHTMLを選択し，Notepad++にこのファイルをHTMLコードとして扱うよう指示する必要があります。
左ブロック
1.Refreshテーマはレイアウトに<table>を使わず，かわりに固定幅の<!-- content-wrap starts here --> <div id="content-wrap"> <div id="sidebar">
コピーして，上書きしながら，header.thtmlに貼り付けます。
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
これで最初の部分は出来上がりですが，少し手を休めて重要なことを考えてみましょう。
このファイルの中の<タグ>要素を揃えている（インデントしている）ように見えるNotepad++の縦の点線に気づきましたか? 整理されたコードを書くのにこの点線は役に立ちます。目立つのは，開始<タグ>と終了<タグ>がこのように揃えられていることで（両タグに挟まれたコードも同様に揃えられています），以下，コードの細部に至るまで同様に揃えられています。少し時間を取ってこれらの要素を揃えることで，（たとえ複数の.thtmlに分散していても）どこでコードのセクションが始まり，終わるかを理解しやすくなります。
Notepad++では，ファイルの左側に表示されている行番号の隣の”-“と”+“ボタンをクリックすることで，コードブロック全体を折り畳み・展開できます。
上記のように編集した結果，次のようになっていることを確認してください。
{menu_elements}
</ul>
</div>
<!-- content-wrap starts here -->
<div id="content-wrap">
<div id="sidebar">
{left_blocks}
2. さて，content-wrapを閉じる<!-- content-wrap ends here --> </div>
をコピーし，上書きしながら，footer.thtmlに貼り付けます。
</td>
{right_blocks} </tr>
</table>
- 新しいテーマでは，右ブロックを使用しないので，{right_blocks}を完全に削除してしまいました。管理者としてログインし，重要なブロックを全て左ブロックへ移動させてください。
3. さて，元へ戻り，上記の手順その1で"サイドバー(sidebar)"と呼ばれていたセクションの</div>タグをコピーします。index.htmlで，
</div>
をコピーし，上書きしながら，header.thtmlに貼り付けます。
<td class="story-container" width="100%" style="vertical-align:top;">
<div class="header-welcomeanddate-box">
<div class="header-welcomeanddate-text">
<a href="{site_url}">{welcome_msg}</a><br>{datetime}
</div>
</div>
参考までに記すと，header.thtmlの最後の部分は次のようになっているはずです。
<!-- content-wrap starts here -->
<div id="content-wrap">
<div id="sidebar">
{left_blocks}
</div>
<!-- START OF CONTENT AREA -->
4. 次に，header.thtml内の{left_blocks}を探し，どのように変える必要があるのか考えます。Remember that {left_blocks}はGeeklogが動的に生成するコードで置き換えられることを思い出してください。このコードは，leftblocks.thtmlとその中で呼ばれるblockheader-left.thtml及びblockfooter-left.thtmlで構成されています。leftblocks.thtmlでは，（サイトヘッダで既に実装しているので）検索フォームとGeeklogのデフォルトの
<td class="block-featured-left" style="vertical-align:top;">
<div class="searchform-box">
<form class="searchform-elements" action="{site_url}/search.php" method="GET">
<input type="text" name="query" size="28" maxlength="255"><br>
<input type="hidden" name="type" value="all">
<a href="{site_url}/search.php" class="advancedsearch">{button_advsearch}</a>
<input type="hidden" name="mode" value="search">
<input type="submit" value="{button_search}">
</form>
</div>
<div class="block-bg-left">
を削除します。また，
</div>
</td>
<td class="block-outerborder-left">
<div style="background:transparent; width:10px; height:1px;"></div>
</td>
も必要ないでしょう。結果として，次のようになるはずです。
<!-- Start of Left blocks -->
{geeklog_blocks}
<div class="block-bg-spreader"></div>
5. 次に，{geeklog_blocks}をもう少し調べ，blockheader-left.thtmlとblockfooter-left.thtmlを観察します。blockheader-left.thtmlでは，
<div class="block-box-left">
<span class="block-helpicon">
{block_help}
</span>
<h2>{block_title}</h2>
を，
<h1>{block_title}</h1>
<div class="left-box">
<p>
に変えます。blockfooter-left.thtmlでは，
</div>
<div class="aligncenter">
<div class="block-divider-left"></div>
</div>
を，
</p>
</div>
へ変えます。先ほど修正した変更を保存し，Webサーバにアップロードして，上書きします。Webブラウザでページを読み込み直すと，次のような外観になっているはずです。
記事表示エリア
6. オリジナルのRefreshテーマでは，記事表示エリアは
<div id="main">
<!-- START OF CONTENT AREA -->
次のようにfooter.thtmlの先頭に閉じタグ
<!-- End Content Area -->
</div>
7. 次に記事を実際にフォーマットしているところを見ます。まず，featuredstorytext.thtmlを変更しましょう。 Refreshテーマに関しては，注目記事と他の記事の外観が異なるのは避けたいでしょう。唯一の違いは，注目記事が公開日とは無関係にページの最上部に表示されるという点です。
- 上記のスクリーンショットでは，a:link.non-ulセレクタによってスタイル設定がなされているため，記事のタイトルが現時点では表示されていないこともわかるでしょう。このセレクタを使用するとヘッダ中のサイト名同様，白くなってしまっています。これを避けるには，style.css別のセレクタを定義する必要があるのですが，後片付けの手順で行いますので，ご心配なく。脇道に入らないのが一番です。
Geeklogでは，記事に関する様々な情報を表示するための多くの変数が提供されています。Geeklogが提供するすべての変数を使用しなくても構いません。このテーマは個人ブログ用なので，基本的には，タイトルを<h1>タグで囲み，{story_introtext}を<p>タグで囲み，いくつかの要素を記事のフッタに移動させれば十分です。一番簡単な方法は，必要な{ }要素をfeaturedstorytext.thtmlからコピーして，index.htmlに貼り付けることです。必要なものが揃ったら，コードブロック全体をfeaturedstorytext.thtmlに貼り付けて戻します。
というわけで，まずfeaturedstorytext.thtmlから
{start_storylink_anchortag}{story_title}{end_storylink_anchortag}
をコピーし，次のように，<h1>タグ内のテキストを上書きしながら，index.htmlに貼り付けます。
<h1>{start_storylink_anchortag}{story_title}{end_storylink_anchortag}</h1>
次に，featuredstorytext.thtmlから
{story_anchortag_and_image}{story_introtext}
をコピーし，<p>タグ内のすべてのテキストを上書きしながら，index.htmlに貼り付けます。その結果，次のようになるはずです。
<h1>{start_storylink_anchortag}{story_title}{end_storylink_anchortag}</h1>
<p>{story_anchortag_and_image}{story_introtext}
</p>
<p class="post-footer align-right">
<a href="index.html" class="readmore">Read more</a>
<a href="index.html" class="comments">Comments (7)</a>
<span class="date">Oct 01, 2006</span>
</p>
次にフッタ中の表示したい{ }タグをindex.htmlにコピーし，次のように必ず<a href>タグをに変更します。
<p class="post-footer align-right">
<span class="readmore">{readmore_link}</span>
<span class="comments">{post_comment_link} {start_comments_anchortag}{comments_with_count}{end_comments_anchortag}</span>
<span class="date">{story_date}</span>
</p>
最後に記事のフォーマット全体をfeaturedstorytext.thtmlにコピーして戻します。ファイル全体は次のようになっているはずです。
<h1>{start_storylink_anchortag}{story_title}{end_storylink_anchortag}</h1>
<p>{story_anchortag_and_image}{story_introtext}</p>
<p class="post-footer align-right">
<span class="readmore">{readmore_link}</span>
<span class="comments">{post_comment_link} {start_comments_anchortag}{comments_with_count}{end_comments_anchortag}</span>
<span class="date">{story_date}</span>
</p>
8. 注目記事はふつうの記事と同じような外観なので，上記のコードをそっくりstorytext.thtmlにもコピーします。2つのファイルを保存してから，Webサーバにアップロードし，上書きします。Webブラウザで読み込み直してください。次のような外観になっているはずです。
この時点で，サイトのフッタへ移ります。ここまで休憩していないなら，少し休憩しましょう。立ち上がって，身体を伸ばし，友人や好きな人とひとときを過ごすのもよいでしょう。効きますよ! 
