ヒヨコ君増殖中テンプレートカスタマイズ

ブログタイトル文字画像化の手引き

ブログタイトル文字画像化とは？簡単に言えばトップ画像をタイトルとして使用すると言う事です。
トップ画像をクリックすることでブログのトップページに飛ぶ事が可能になります。

HTML編集

<!-- ▼ヘッダ -->

<div id="header">

<div id="blogtitle">

<h1><a href="<%url>"><%blog_name></a></h1>

<p id="description"><%introduction></p>

</div>

<p id="adminmenu"><span class="adminmenu">ADMIN MENU ≫</span> | <a rel="nofollow" href="<%server_url>control.php?mode=control&process=upload" title="画像管理" target="_blank">IMAGE</a> | <a rel="nofollow" href="<%server_url>control.php?mode=editor&process=new" title="記事を書く" target="_blank">WRITES</a> | </p>

</div>

<!-- ▲ヘッダ END -->

上記を下記に変更。※赤字の”画像のURL”部分はアップロードした画像のURLに書き替え。

<!-- ▼ヘッダ -->

<div id="header">

<h1><a href="<%url>"><img src="画像のURL" alt="<%blog_name>" border="0" /></a></h1>

<p id="adminmenu"><span class="adminmenu">ADMIN MENU ≫</span> | <a rel="nofollow" href="<%server_url>control.php?mode=control&process=upload" title="画像管理" target="_blank">IMAGE</a> | <a rel="nofollow" href="<%server_url>control.php?mode=editor&process=new" title="記事を書く" target="_blank">WRITES</a> | </p>

</div>

<!-- ▲ヘッダ END -->

CSS編集

/* ----------------･トップ画像用設定 */
  

  

#header {

    height: 200px;

margin: 0px;

padding: 0px;

position: relative;

    background-color: #FFFFFF;

    background-image: url(http://blog-imgs-27.fc2.com/h/i/y/hiyokokun/dogtop.jpg);

    }

上記を下記に変更

/* ----------------･トップ画像用設定 */
  

  

  #header {

    height: 200px;

margin: 0px;

padding: 0px;

position: relative;

    background-color: #FFFFFF;

    }

    

  #header img {

    border: none;

    margin: 0px;

    padding: 0px;

  
  }



#header h1 {

margin: 0px;

padding: 0px;

}

以上で完了です。多少複雑ですががんばってください。