title:カスタマイズ:ブログタイトルを画像にする

2006年08月02日

ブログタイトルをオリジナルの画像にし、さらにリンクさせる方法です。
てっとりばやく、「自分らしいブログ」になるのでおすすめです♪

1 まず、画像を用意します。
 なれていない方は、テンプレートのデフォルトの幅と同じ横幅の画像を用意すると楽チンです。

2 画像をアップロードします。
 画像一覧で、アップロードしたタイトル画像をクリックすると別ウィンドウが開きます。
 そのアドレスが「画像アドレス」になります。

3 「デザイン」→「オリジナルデザインの登録」画面にいき、「トップページ」の記述を変更します。

↓=====before=====↓
<div id="banner">

<h1 class="blogtitle"><a href="<%BlogUrl%>" accesskey="1"><%BlogTitle%></a></h1>
<div class="description"><%BlogDescription%></div>

</div>


↓=====after=====↓
<div id="banner">
<a href="<%BlogUrl%>"><img src="画像のアドレス" width="画像の幅" height="画像の高さ" border="0" alt="ブログの名前"></a>
</div>


4 「トップページ」と同じように「個別記事」「アーカイブ」も変更します。

5 「スタイルシート」の記述を変更します。

↓=====before=====↓
#banner,#subbanner{
background:url(/_img/strawberry_water/itigotop01.jpg) top center no-repeat;
padding:0px 0px 0px 0px;
height: 170px;
}


 
↓=====after=====↓
#banner,#subbanner{
width: ○○px; ←画像の幅
height: ○○px; ←画像の高さ           
border-top : 1px solid #fff;  ←表示くずれを防ぐため (注
border-bottom : 1px solid #fff;
padding: 0px ;
margin: auto;


(注:ブラウザによる「表示くずれ(見え方が違ってくる)」を避けるために、「border」の「top」と「bottom」はあったほうがよいらしいです。
色を目立たない色(白など)にすれば、画面上影響はありません。


同じカテゴリー(カスタマイズ)の記事

【この記事へのコメント】
おっ メモになってる...
しかも消しゴムがマニアック...
それに何だか悟ってる...
「大人の女」の人って「学習能力」もあるんですね

カスタムする時 とりあえず「背景を白く」と思って
いつも↑5番のbackground:urlを消してしまうのですが
ダメですか?
Posted by POOL at 2006年08月02日 22:41
せんぱい、お久しぶりです。

「記事を画像で囲む」って難しいようです。
最終的には「メモをぺたっ」に表示されるようにしたいのですが、挫折してしまいました。
ですので、タイトル画像だけ。。。。。

サイトのリニューアル、見てますよ♪♪ 毎晩、ちびりちびり呑みながらやっているのでしょうか?
はやく、スプーンとかバターナイフとか作ってみたいです。

>カスタムする時 とりあえず「背景を白く」と思って
>いつも↑5番のbackground:urlを消してしまうのですが

ああ!
私も urlのカッコの中を削除して、ご丁寧に #fff と白くしてました。
→→ background:#fff url();

だけど、ごっそり、消しても大丈夫みたい。

borderの記述は、とりあえず残してやっています。
Posted by siena at 2006年08月02日 23:46
始めまして・・・

トップページの画像をカスタマイズしようと・・・

こちらの記述を参考に変更してみました・・・。(テスト版にて)

トップページだけですが成功したようです。



ところで

>4 「トップページ」と同じように「個別記事」「アーカイブ」も変更します。

>5 「スタイルシート」の記述を変更します。

とありますが・・・この2点の変更も必要なんでしょうか?






参考になるサイト、書籍がありましたらご紹介願えませんか?
Posted by ケンちゃん at 2007年01月09日 13:02
はじめまして。

なれなれしく「ケンちゃん」とおよびしましてすみません。(「ちゃん」付きのHNに「さん」をつけるかどうか、いつも悩みまして、、、、)

hamazoの場合は、「個別記事」「アーカイブ」ともに変更しなければなりません。

なぜかというと、「トップページ」だけ変更すると、サイドバーの「タイトル」や「アーカイブ」をクリックして、各記事を読むときに、変えたはずの「トップ画像」が生かされないのです。 ですので、コピペでそれぞれを変更しなければならないのです。(カスタマイズしたときから時間がたっているので、少し不安ですが、、、、)

参考になるサイトですか、、、、どうだったかな。。。大量の「お気に入り」より探しますので、しばらくお待ちください。
後ほど、kenちゃんのサイトへお知らせにいきますね。
Posted by ケンちゃんへ:siena at 2007年01月09日 15:50
先ほど出先から戻ってきました。

それで・・・

大変丁寧な・・・しかも親切なご解説いただきまして

本当に有難う御座いました。


hamazoの場合は、「個別記事」「アーカイブ」ともに変更しなければなりません。

については、納得いたしました。

再度挑戦してみようと思います。

また遊びに来ますね・・・(へコ)

私感ですが・・・

シンプルでとっても好感の持てるサイトだと思います。
品の良いセンスを感じますね・・・
Posted by ケンちゃん at 2007年01月09日 20:43
参考を元に、カスタマイズしてみました。

ご覧いただければ幸いです。

参考の中で、CSSの部分については、

変更しなくても良いようでした。

気が向いたら、ご覧下さい。

ケンちゃんより
Posted by ケンちゃん at 2007年01月09日 23:53
こんにちは!
おお! ご丁寧に! ありがとうございます。

早速拝見いたしました。ばっちり☆ですね!

我が家は、私専用のバイオと夫専用のマックがあるのですが、
ときどき、マックからブログを見ると、「お~、こんな風に見えるの!?」と新鮮です。

winでは成功していても、マックでは失敗(カスタマイズが)ってことがあるので、毎回毎回、どきどきします。

どうぞこれからもよろしくおつきあいください♪♪
Posted by ケンちゃんへ:siena at 2007年01月10日 11:44
去年失敗したテンプレートのカスタマイズ
また挑戦してみようとおもっています
Posted by ボルテ at 2007年04月17日 08:25
お久しぶりです!!!!
お誕生日おめでとうございます。
私もまもなく、38歳です。あああ、いつの間にか、、、
気持ちは23歳なのですが、、それはそれで恐ろしいことですね。。わはは。

カスタイマイズ、楽しいですよぉ。

この方のカスタマイズ講座はわかりやすいですよ♪♪
http://daxiazzz.ti-da.net/

ボルテさんのカスタマイズ、楽しみにしています!!!
Posted by ボルテさんへ:siena at 2007年04月18日 00:33
ありがとうございます!
sienaさんにそう言われるととても
嬉しいです。

頑張ります。
Posted by ボルテ at 2007年04月19日 11:09
ボルテさんたらとても美しくて!

私はここ2年ほどで、いっきに老け込んでしまったので、今年は「の「美容」の年にしたいなぁ。。。。。と思っています。えへへ。
 
お嬢さん、留学したんですね~。きらきら輝ける日々を過ごしているのでしょうか。
なんだか最近「若い」というだけで「うつくしい!」と感じてしまいます♪♪

カスタマイズで分からないことがあったら、、、私も知識はありませんが、お役にたてることがあれば!いつでもお手伝いします♪
Posted by ボルテさんへ:siena at 2007年04月19日 14:17
後ほど、kenちゃんのサイトへお知らせにいきますね。
Posted by cheap nike shoes from china at 2011年04月18日 12:56
上の画像に書かれている文字を入力して下さい
 
<ご注意>
書き込まれた内容は公開され、ブログの持ち主だけが削除できます。

削除
カスタマイズ:ブログタイトルを画像にする
    コメント(12)