JUGEM ユーザ互助会

「ユーザー助け合い掲示板」に投稿された質問を中心に、JUGEM ユーザの皆さんが JUGEM を使っていて困ったこと、疑問点などの解決策をまとめていきます。


Entry : main   << >>
スポンサーサイト

一定期間更新がないため広告を表示しています

| スポンサードリンク | | - | - | pookmark |
サイトタイトルを画像にする

質問

 JUGEM のタイトルを文字ではなく画像に差し替えたいのですが、自分で HTML テンプレートを編集したところ、表示がおかしくなったり、タイトル画像が表示されなかったりします。何かコツがあるのでしょうか。

回答

 タイトルを画像に変更する場合は、以下のように行って下さい。

  1. まず HTML テンプレートから JUGEM のタイトルとサイトの説明文を表示する部分を探します。具体的には以下のようになっている部分です。

    <!-- BEGIN title -->
    <h1 class="site_title">{blog_name}</h1>
    <div class="description">{blog_description}</div>
    <!-- END title -->

     <h1 class="site_title"></h1> がサイトタイトル、<div class="description"></div> がサイトの説明文です。

  2.  <h1 class="site_title"></h1> の部分を削除します。コメントアウト(<!-- --> で囲んで表示を無効にする)でも構いません。説明文も削除したい場合は、<div class="description"></div> を同じように変更します。

     このとき、<!-- BEGIN title --><!-- END title --> は残したままにしておきます。このコメントは JUGEM テンプレートに必ず必要なもので、削除すると表示崩れの原因になります。

  3. 準備したタイトル画像を HTML テンプレートに設定します。タイトル画像のタグは以下のようにすると、検索エンジンを使ってサイトを探している人に正しいキーワードで見つけてもらいやすくなります。なお、以下の XX「サイトのタイトル」の部分は適宜変更して下さい。

    <h1 class="site_title"><img src="./?image=XX" width="XX" height="XX" alt="サイトのタイトル" /></h1>

     画像にリンクを張りたい場合は以下のようにします。

    <h1 class="site_title"><a href="./"><img src="./?image=XX" width="XX" height="XX" alt="サイトのタイトル" /></a></h1>
  4. 上のタグを、<!-- BEGIN title --> の上<!-- END title --> の下に記述します。<!-- BEGIN title --><!-- END title --> の間に記述すると画像が表示されません。

 タイトル画像の最適な位置はテンプレートによって異なりますので、いろいろ変えて試してみて下さい。また、ウインドウの角からの位置は CSS テンプレートの .site_title { } の部分を変更することで調整できます。CSS の修正方法は書籍や説明サイトをご参照下さい。

| co-op | 19:54 | - | trackbacks(1) | pookmark |
スポンサーサイト
| スポンサードリンク | 19:54 | - | - | pookmark |
Trackback
JUGEMユーザ互助会さん(現在更新停止中)の記事を参考に、タイトルをロゴに変更しました。 こういうお役立ちサイトは助かります。 知識が無くてもそれなりに、カスタマイズの楽しみを味わうことができますね。
||| おひるねと おさんぽ ||| | at: 2005/02/12 10:43 PM

New entries
Recent comment
  • トラックバック修正受付/記述誤り・訂正報告
    オレンジ (09/05)
  • トラックバック修正受付/記述誤り・訂正報告
    農民 (10/31)
  • トラックバック修正受付/記述誤り・訂正報告
    co-po (01/21)
  • トラックバック修正受付/記述誤り・訂正報告
    サキ (01/19)
  • トラックバック修正受付/記述誤り・訂正報告
    co-op (09/11)
  • トラックバック修正受付/記述誤り・訂正報告
    はるか (09/11)
  • トラックバック修正受付/記述誤り・訂正報告
    co-op (09/04)
  • トラックバック修正受付/記述誤り・訂正報告
    はるか (08/27)
  • トラックバック修正受付/記述誤り・訂正報告
    くみ (08/26)
  • トラックバック修正受付/記述誤り・訂正報告
    co-op (08/17)
Recent trackback
Recommend
Recommend
君が選んだ人
君が選んだ人 (JUGEMレビュー »)
さだまさし,倉田信雄,渡辺俊幸
Profile
Categories
Archives
FREE SPACE
フリースペース
Links
Admin
Genius Party