不二建設気になっていてもやらないでいた、ブログタイトルを画像に置き換える作業をする。

理由は不二建設さんのサイトをそうしたかったからで、自分のところはついでである。（FUJI KENSETSU CO..LTD.と書かれたものがその画像。下のフジレンジャーの部分はコンテンツ部にあるアイキャッチ画像）。

以下はモモログでの記述。（momo's blog と書かれた画像）

CSS

#title h1 a {
                display: block;
                width: 425px; /* 画像の幅 */
                text-indent: -9999px; /* textを飛ばす */
                outline: none; /* クリック時の枠線を消す */
                background-image: url(momoti.bmp);
                background-repeat: no-repeat;
                background-position: 50% 20%; /* point 位置調整 */
                border-bottom: none;
                padding-bottom: 15px; /* 画像の高さに合わせて調整 */
                }

  • display:blockでブロック要素とする
  • text-indent:-9999pxで textを飛ばす
  • 画像の幅の指定（width: ）は必ず必要

テンプレート

<div id="title">
<h1><a href="<$MTBlogURL$>" ><$MTBlogName encode_html="1"$></a></h1>
</div>