手順その6 - 仕上げ
提供: GeeklogJpWiki
手順その6 - 仕上げ
（以下の記事は，Eric WarrenさんがglLabsに投稿されたものをmystral-kkが翻訳したものです。原文はこちら）
この手順は比較的簡単に思えるかもしれませんが，実際には最も時間がかかることもあります。テーマの移植作業中に気づいた問題を修正します。このこと自体は大した問題ではありません。Webサイトのページを全部閲覧して，すべてのものが期待通りの外観になり，期待通りに動作することを確認するのに時間がかかるのです。
先ほど議論した問題を取り上げましょう。次に，他に考慮すべきことを議論しましょう。
1. トップページでは，記事のタイトルが表示されていないのがわかっています。タイトルの文字色が背景色と同じなので，タイトル上にマウスを移動させてテキストを選択しない限り，背景に溶け込んでしまっています。記事のタイトルのスタイルを定義するセレクタがヘッダ中のサイト名のスタイルを定義するセレクタと同じだからです。
これを修正するには，記事用に別のセレクタを定義しなければなりません。しかしながら，記事のタイトルリンクPHP経由で{start_storylink_anchortag}によって生成されるので，Geeklogのコードを変更するのでなければ，テーマファイルでスタイルを変更するしか方法がありません。 
この方法を採る代わりに，オリジナルのRefreshテーマの流儀に合わせて記事のタイトルからリンクを取り除き，普通のテキストとして生成することにします。それには，{start_storylink_anchortag}と{end_storylink_anchortag}をfeaturedstorytext.thtmlとstorytext.thtmlから取り除きます。. これらのファイルの1行目は次のようになるでしょう。
<h1>{story_title}</h1>
こうすることで，緑色の四角の画像が2つ表示されるというFirefoxのバグも修正されることになるので，結局，この方法で良かったのです。 
2. 次に記事のフッタですが，う～ん，私は続きを読む(read more)とコメント投稿(Post a comment)リンクの側にある画像が好きなのですが，問題点が2つあります。
- 画像がダブるという先ほどのFirefox 2のバグがある。
- 記事の本文が書かれているかどうかや投稿者がコメントを許可するかどうかによって，Geeklogはこれらのリンクを動的に生成したりしなかったりします。つまり，リンクが生成されない場合，アイコンはテキストなしでそこに取り残されることになり，何の役にも立ちません。
さて，Geeklogの言語ファイルや本体のファイルをいじることで，この問題は解決できますが，テーマ移植の一般的な指針としては，そんなことはしたくありません。できる限り，変更はテーマフォルダ内にとどめたいのです。こういうわけで，少しレイアウトを変更して，これらの画像を取り除き，代わりにテキストだけのリンクを残すことにしましょう。また，{story_date}を記事のタイトルの真下へと移動させ，{edit_link}と{page_selector}を追加します。.
archivestorytext.thtml（このファイルは他の2つのファイルに合わせて常に変更すべきです）とfeaturedstorytext.thtml，及びstorytext.thtmlを変更しましょう。次のようになっているはずです。
<h1>{story_title}</h1>
{story_date}
<p>{story_anchortag_and_image}{story_introtext}</p>
<p class="post-footer align-right">
<span class="readmore">{edit_link} {page_selector}</span>
<span class="readmore">{readmore_link}</span>
<span class="comments">{post_comment_link} {start_comments_anchortag}{comments_with_count}{end_comments_anchortag}</span>
</p>
次に，style.cssの”.post-footer .comments”セレクタと”.post-footer .readmore”セレクタから，”background-image”属性を削除します。さらに，”.post-footer”セレクタのbottom-margin属性を変更して，記事の間隔を開けましょう。このコードのセクションは次のようになっているはずです。
.post-footer {
background-color: #FAFAFA;
padding: 5px; margin: 20px 10px 30px 10px;
border: 1px solid #f2f2f2;
font-size: 95%;
}
.post-footer .date {
background: url(images/clock.gif) no-repeat left center;
padding-left: 20px; margin: 0 10px 0 5px;
}
.post-footer .comments {
padding-left: 20px; margin: 0 10px 0 5px;
}
.post-footer .readmore {
padding-left: 20px; margin: 0 10px 0 5px;
}
3. サイトのフッタを修正する最も簡単な方法は，Geeklogの言語ファイルを編集し，著作権のテキストを削ることです。でもテーマの変更はそのテーマのディレクトリ内にとどめたいものです。私は何カ所糧を加え，最終的なfooter.thtml内のコードは次のようになっています。
<p>
© 2007 <a href="{site_url}">{site_name}</a> |
Design by <a href="http://www.styleshout.com/">styleshout</a> |
{powered_by} <a href="{geeklog_url}">Geeklog</a>
<a href="{site_url}">Home</a> |
<a href="{site_url}/profiles.php?uid=2">Contact</a> |
<a href="{site_url}/stats.php">Stats</a> |
<a href="{site_url}/backend/geeklog.rss">RSS Feed</a>
</p>
結局，フッタは次のようになっています。
- ここに「ページのトップへ戻る」のリンクを設置してもよいでしょう。戻り先となるアンカーをヘッダ内に追加する必要があります。アンカーリンクについてもっと知りたければ，http://www.w3schools.com/html/html_links.asp をのぞいてみてください。
4. Webサイト内を見渡すと，すべての画像に灰色の枠がついていることに気づくでしょう。オリジナルの制作者は意図的にそうしているのですが，このスタイルがすべての画像に適用されたため，（とりわけ）Geeklogの管理者画面までも野暮ったいものになっています。そういうわけで，style.cssを開いて修正しましょう。次のコードを見つけて削除してください。
img {
border: 2px solid #CCC;
}
変更を保存して，Webサーバにアップロードします。少し時間をかけてあちこちブラウズし，注意を払うべき箇所がないか確認してください。
5. (サイトの公開領域)/directory.phpへ行くと，（少なくともFirefoxでは）このセクションのタイトルが上によってしまい，部分的にメニューと重なっていることに気づくでしょう。残念なことに，このページにはレイアウトを制御する個別の.thtmlファイルがありません。(公開領域)/directory.phpを直接編集する必要があります。
directory.phpをNotepad ++で開き，次の行（439-440行目あたり）を見つけます。
$retval .= '<div><h1 style="display:inline">' . $LANG_DIR['title']
. '</h1> ' . DIR_topicList ($topic) . '</div>' . LB;
そして，次のように<p>タグを挿入します。
$retval .= '<p><div><h1 style="display:inline">' . $LANG_DIR['title']
. '</h1> ' . DIR_topicList ($topic) . '</div>' . LB;
これで不適切だったタイトル要素が押し下げられ，正常な外観になりました。変更を保存し，Webサーバにアップロードします。
6. テーマをあちこち調べてブラウザでの表示具合に満足したら，他のWebブラウザでも見てみましょう。Firefoxをお使いなら，Internet ExplorerやSafari（今ではWindows上で動作するバージョンがあります。Macを持っていなくてもよいのです。http://www.apple.com/safari/download/ からダウンロードしてください）, Operaや他のお気に入りのブラウザでも同じように表示されるか確認しましょう。こうすることで，他の人が見つけて指摘する前に，紛れもないWebブラウザのレンダリングに関する(次のような)バグを排除することができます。 
7. 
IE 外側ボーダーの不具合
手順その5 - フッタを変更するへ戻る
テーマの移植へ戻る
