CALENDAR
S M T W T F S
   1234
567891011
12131415161718
19202122232425
262728293031 
<< May 2019 >>
SPONSORED LINKS
ARCHIVES
CATEGORIES
Pookmark Airlines
MOBILE
qrcode
<< 塵も積もればゴミの山となる | main | タイトル文字列を画像に置き換えてみる #2 >>
スポンサーサイト

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

| - | | - | - |
タイトル文字列を画像に置き換えてみる

ブログ改造で困ってます(呟戯)

ブログのタイトル部分(「呟戯」)を画像に変えたいのですが、どうすればいいのか本気で困っています。多分CSSの一部を変えればいいというところは分かっているのですが、どう変えればいいのか分からず、撃沈状態。

書籍「スタイルシートスタイルブック」の「4章 応用編 画像が多いサイトのSEO対策:テキストの上に画像(p.186)」に記載されていた手法でやってみました。このBlogでの最終形をいきなり示します。


[テンプレート]
<h1 class="site_title">
<span><a href="http://kyorecoba.jugem.cc/"><img src="http://kyorecoba.jugem.cc/?image=9" alt="titlebanner" width="320" height="60" border="0" /></a></span>{blog_name}</h1>

[CSS]
.site_title{
 width:320px;
 height:60px;
 position:relative;
}

.site_title span{
 width:100%;
 height:100%;
 position:absolute;
}

緑色の文字列は貼りつける画像のURL・サイズに応じて適宜変更します。どこの文字列を書き換えればいいのかがわからければ訊いてください。

と云うわけで、いぢるのはCSSだけで済みません。CSSだけをいぢって済まそうとするとタイトルロゴは背景画像とせざるを得なくなり、そのままではトップページへのリンクを張ることができません。

私はタイトルがトップページへのリンクでないBlogを読むといらいらするので(笑)、これは避けました。もちろん、そうならないために背景として貼り付けたロゴと同じ大きさ・位置の透明画像をHTMLに記述し、それにトップページへのリンクを張ると云う良心的なことをされているBlogもありますが…。

この手のBlogいぢりはJUGEMだとたくさんの先達が手法を公開されていますので、その気になれば多くの情報が得られます。この方法が唯一とは思えませんので、下記のサイトからリンクを辿るなど、いろいろ探してみてください。JUGEMのトップページからもいろいろとBlogいぢりに関する情報にたどり着きます。

じゅげうぃき

トラックバックセンター

| Blog | 17:34 | comments(1) | trackbacks(1) |
スポンサーサイト
| - | 17:34 | - | - |
コメント
トラックバックしていただいた上に、改造の方法を丁寧に教えていただき、ありがとうございます。タグをhtmlならびにCSSに置換させて若干の改良を施したところ、キレイに収まることが出来ました。ありがとうございました。感謝しております。
| ひろい | 2004/05/10 7:40 PM |
コメントする









この記事のトラックバックURL
http://kyorecoba.jugem.cc/trackback/30
トラックバック
ブログ改造で困ってます
ブログのタイトル部分(「呟戯」)を画像に変えたいのですが、どうすればいいのか本気で困っています。多分CSSの一部を変えればいいというところは分かっているのですが、どう変えればいいのか分からず、撃沈状態。 通りすがりの方、教えて下さい。 と、書い
| 呟 戯 | 2004/05/10 8:44 PM |