手順その3 - ヘッダを変更する

提供: GeeklogJpWiki

手順その3 - ヘッダを変更する

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

Geeklogのデザインの利点の1つは，全体のレイアウトを別々の小さなテンプレートHTMLファイル，つまり，.thtmlファイルに分割していることです。Geeklogのテンプレートエンジンは，ページをレンダリングする際に必要なテンプレートファイルを組み合わせます。このため，変更を加えるのがとても簡単になっています。これから行うことは，本質的には先ほどの手順を繰り返しで，2つのファイルをNotepad++で開きます。次に選択したコードをrefresh/Refresh_Original/index.htmlからrefresh/header.thtmlへとコピーします。

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

HTMLとXHTMLコードは標準化されているので，変更する必要のあるタグと要素はすぐに識別できます。たとえば，

  <li>
      <a href="http://www.styleshout.com/">More Free Templates</a>
  </li>

などの < > 内のコードはすべてWebブラウザにページレイアウトとリンク要素を生成するよう指示する命令です。一方，

     {menu_elements}

のような{ }内のコードは，そのページが呼び出されたときに（PHP経由で）Geeklogが動的に生成する項目です。

さあ，index.htmlとheader.thtmlをNotepad++で開きましょう。個人的には，{動的要素}を.thtmlからindex.html内の対応する静的要素にコピーして上書きするのが一番楽でした。1セクション作業したら，変更箇所を全て.thtmlへ書き戻すわけです。

1. 最初に，動的に生成される{site_name}要素をヘッダ内のサイト名のある箇所にはめ込みます。

  {site_name}

をheader.thtmlからコピーして，index.html内の該当箇所に上書きします。

  refresh

{site_name}をトップページへのリンクにしたいでしょうから，次のように追加します。

 
   <h1 id="logo-text"><a href="{site_url}" class="non_ul">{site_name}</a></h1>

2. 次に

  {site_slogan}

をコピーして，

  put your site slogan here...

に上書きしながら貼り付けます。

3. 次にこのレイアウトのヘッダとは対照的に，Geeklogの検索用フォームは左側の列にあるので，別の.thtmlファイルを開きます。refresh/leftblocks.thtmlを開き，methodとactionタグ要素をコピーして，既存のものを上書きしながら，index.htmlに貼り付けます。

class要素を上書きしないのは，この要素が先ほど作成したスタイルシートのセレクタを参照しているからです。このセレクタがフォームの外観を決めることになります。これ以外のmethod, action, type, name, valueなどのフォーム要素は，すべてGeeklogがフォームの背後で行っている処理と関連しています。このため，Geeklogがフォームを処理する際に必要な情報を見つけられるよう，これらのフォーム要素を同じままにしておく必要があるのです。

作業が終わったら，次のようになっているはずです。

   			<form class="search" method="GET" action="{site_url}/search.php">
   				<p>
 
   	  			<input class="textbox" type="text" name="query" maxlength="255" value="" />
 
   	 			<input type="hidden" name="mode" value="search">
                                   <input class="button" type="submit" name="Submit" value="{button_search}" />
 
   				</p>
   			</form>

4. 次に，動的にメニューリンクを作成しているコードをコピーし，

   {menu_elements}

上書きしながら，静的なメニューリンクのリストに貼り付けます。

   <li id="current"><a href="index.html">Home</a></li>
 
   				<li><a href="index.html">Archives</a></li>
   				<li><a href="index.html">Downloads</a></li>
   				<li><a href="index.html">Services</a></li>
 
   				<li><a href="index.html">Support</a></li>
   				<li><a href="index.html">About</a></li>

また，{menu_elements}は，menuitem.thtmlとmenuitem_last.thtmlを参照しながら生成されるので，この2つのファイルも編集する必要があります。menuitem.thtmlを

   <a href="{menuitem_url}" class="header-navigation">{menuitem_text}</a>  : 

から，

   <li>
       <a href="{menuitem_url}">{menuitem_text}</a>
   </li>

に変えます。

こうすることで，Geeklogのスタイルフォーマットが取り除かれ，上述のindex.htmlで編集した静的リンクのようなリスト項目になります。

menuitem_last.thtmlに関しては，

   <a href="{menuitem_url}" class="header-navigation">{menuitem_text}</a>  

を，

   <li>
       <a href="{menuitem_url}">{menuitem_text}</a>
   </li>

に変えます。

menuitemを保存し，Webサーバにアップロードして，既存のファイルを上書きします。

5. 最後に，index.html中のヘッダとメニューを生成するコードを全てコピーしてから，

   <!-- wrap starts here -->
   <div id="wrap">
 
   		<!--header -->
   		<div id="header">			
 
   			<h1 id="logo-text">{site_name}</h1>		
   			<h2 id="slogan">{site_slogan}</h2>
 
   			<form class="search" method="GET" action="{site_url}/search.php">
   				<p>
   	  			<input class="textbox" type="text" name="query" maxlength="255" value="" />
 
   	 			<input type="hidden" name="mode" value="search">
                                   <input class="button" type="submit" name="Submit" value="{button_search}" />
 
   				</p>
   			</form>			
 
   		</div>
 
   		<!-- menu -->	
   		<div  id="menu">
   			<ul>
 
   				{menu_elements}		
   			</ul>
   		</div>

header.thtmlに貼り付け，上書きします。

   <div class="header-navigation-container">
           <div class="header-navigation-line">
               {menu_elements}
           </div>
       </div>
       <div class="header-logobg-container-outer">
 
           <table width="100%" border="0" cellpadding="0" cellspacing="0" class="header-logobg-container-inner">
               <tr>
 
                   <td class="header-logobg-left">
                       <a href="{site_url}/"><img src="{site_logo}" width="151" height="56" alt="{site_name}" border="0"></a>
 
                   </td>
                   <td class="header-logobg-right">
                       <span class="site-slogan">{site_slogan}</span>
                   </td>
               </tr>
 
           </table>
       </div>

手順その2 - CSSを変更するへ戻る
手順その4 - ボディを変更するへ進む