- date
- 050317
タイトルロゴを画像にする
そんなお嬢さま方にお贈りするタイトルを消すことなく隠し、画像のロゴを入れるカスタマイズ。（※画像はセルフサービスでご用意下さい）
▼参考記事
"いろは"の先のCSS 第3回
ロゴ画像はあらかじめアップロードしておいて下さい。
▼ベースHTML
<h1>のタグをこのようにします。<h1>を入れる場所はお使いのテンプレートによって多少異なると思いますので、テンプレに合わせて下さいね。
<h1><a href="URL" title="タイトル"><span>タイトル</span></a></h1>
小梅系のテンプレの場合は、<div class="description">～</div>と<div class="head">～</div>を消せばタイトル部分が一枚の画像風になります。
▼CSS
下記を追記します。
h1 a { display:block;
margin:0 auto; /* センタリングする場合 */
height:●●px; /* タイトルの高さ */
width:●●px; /* タイトル部の横幅 */
background:url(タイトル画像のURL);
background-repeat:no-repeat; /* リピートさせない場合 */
}
h1 span { display:none; }
テンプレートでh1やタイトル部分に他のスタイルが設定されている場合、スタイルが複数指定されて表示が思うようにならない場合があります。その場合は最初に指定されていたh1やtitle,headあたりのCSSを外してみて下さい。
どういう指定をされているかはテンプレートによって異なりますので、一気に削除するのではなくメモ帳にでもバックアップしながらやると、削除しすぎて困った時に元に戻すのも簡単です。
プレビューでちゃんと表示されているのが確認できたら再構築して終了です。
▼すっ飛ばす方法もあるようだ
hail2u.net - Weblog - Fahrner Image Replacement hacks
▼kyoさんはこんなこともやってた。さすが(´ω｀)
hail2u.net - Weblog - タイトル改造
Blog Feed