手順その5 - フッタを変更する

提供: GeeklogJpWiki

手順その5 - フッタを変更する

(以下の記事は,Eric WarrenさんがglLabsに投稿されたものをmystral-kkが翻訳したものです。原文はこちら

1. 休憩しましたか? :-D
refresh/Refresh_Original/index.htmlrefresh/footer.thtmlをNotepad++で開きましょう。

.thtmlファイルをNotepad++で開いた場合,コードに自動的に色分けが行われないことに気づくでしょう。「言語」メニューをクリックしてリストの中からHTMLを選択し,Notepad++にこのファイルをHTMLコードとして扱うよう指示する必要があります。

2. Notepad++でfooter.thtmlと表示されているタブを右クリックし,「別のビュー(Go to another View)」を選択します。2つのファイルが横に並んで開かれました。

3. index.htmlの最後尾までスクロールダウンし,次のコメントを探します。

   <!-- content-wrap ends here -->

このコメントの後にあるものはフッタです。共通の要素を探し,静的なテキストをGeeklogの{動的要素}に置き換えましょう。

4.

   {copyright_notice}

footer.thtmlからコピーし,上書きしながらindex.htmlに貼り付けます。

   © 2006 <strong>Your Company</strong>

5.

   {powered_by} <a href="{geeklog_url}">Geeklog</a>

をコピーし,上書きしながら貼り付けます。

   Valid <a href="http://validator.w3.org/check?uri=referer">XHTML</a>

6.

   {execution_textandtime}

をコピーし,上書きしながら貼り付けます。

   <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a>

7. index.htmlで,ホーム,サイトマップ,RSS フィードへのリンクを対応するGeeklogの部品に置き換えます。サイトマップ(Sitemap)を統計情報(Stats)に置き換えましょう。というわけで,

   		<a href="index.html">Home</a> | 
      	<a href="index.html">Sitemap</a> | 
   	   	<a href="index.html">RSS Feed</a>

        <a href="{site_url}">Home</a> | 
        <a href="{site_url}/stats.php">Stats</a> | 
   	   	<a href="{site_url}/backend/geeklog.rss">RSS Feed</a>

へ変更します。

8. 最後に,フッタのコード全部をindex.html から

   		<!--footer starts here-->
 
   		<div id="footer">
 
   			<p>
   			{copyright_notice} | 
   			Design by: <a href="http://www.styleshout.com/">styleshout</a> | 
   			{powered_by} <a href="{geeklog_url}">Geeklog</a> | 
   			{execution_textandtime}
 
      		      
 
   			<a href="index.html">Home</a> | 
      		<a href="index.html">Sitemap</a> | 
   	   	<a href="index.html">RSS Feed</a>
 
      		</p>
 
   		</div>	
 
   <!-- wrap ends here -->
   </div>
 
   </body>
   </html>

コピーし,上書きしながら,footer.thtmlに貼り付けます。

       {centerblockfooter-span}
   	<table border="0" cellpadding="0" cellspacing="0" width="100%" class="footer-divider-top">
 
         <tr>
           <td width="70%" class="footerblock">{copyright_notice}</td>
           <td width="30%" class="footerblock" style="text-align:right">{powered_by} <a href="{geeklog_url}">Geeklog</a> <br>{execution_textandtime} </td>
 
         </tr>
       </table>
   </body>
   </html>

9. footer.thtmlに加えた変更を保存し,Webサーバにアップロードして上書きします。Webブラウザで読み込み直してながめてください。

Footer only modified.png

少しごちゃごちゃして見えるでしょう。デフォルトでは,Geeklogが左ブロックと右ブロックに分割して情報を表示するのにこのテーマではそうではないからです。また,著作権情報を2行に分けて表示するために改行コードとして<br>タグを言語ファイル(私の場合は,(path_to_geeklog)/language/english.php)中で使用しています(.thtmlファイルの中でレイアウト用のコードが統一されていないのはおかしいですね)。 ;-) しかしながら,このテーマに関しては,絶対に変えたいところです。ご心配なく。この問題と先ほど気づいた問題も次の手順で対処します。

手順その4 - ボディを変更するへ戻る
手順その6 - 仕上げへ進む

個人用ツール