title:カスタマイズ:ブログタイトルを画像にする
2006年08月02日
ブログタイトルをオリジナルの画像にし、さらにリンクさせる方法です。
てっとりばやく、「自分らしいブログ」になるのでおすすめです♪
1 まず、画像を用意します。
なれていない方は、テンプレートのデフォルトの幅と同じ横幅の画像を用意すると楽チンです。
2 画像をアップロードします。
画像一覧で、アップロードしたタイトル画像をクリックすると別ウィンドウが開きます。
そのアドレスが「画像アドレス」になります。
3 「デザイン」→「オリジナルデザインの登録」画面にいき、「トップページ」の記述を変更します。
↓=====before=====↓
↓=====after=====↓
4 「トップページ」と同じように「個別記事」「アーカイブ」も変更します。
5 「スタイルシート」の記述を変更します。
↓=====before=====↓
↓=====after=====↓
(注:ブラウザによる「表示くずれ(見え方が違ってくる)」を避けるために、「border」の「top」と「bottom」はあったほうがよいらしいです。
色を目立たない色(白など)にすれば、画面上影響はありません。
てっとりばやく、「自分らしいブログ」になるのでおすすめです♪
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」はあったほうがよいらしいです。
色を目立たない色(白など)にすれば、画面上影響はありません。
Posted by siena at 11:53│Comments(12)
│カスタマイズ
【この記事へのコメント】
おっ メモになってる...
しかも消しゴムがマニアック...
それに何だか悟ってる...
「大人の女」の人って「学習能力」もあるんですね
カスタムする時 とりあえず「背景を白く」と思って
いつも↑5番のbackground:urlを消してしまうのですが
ダメですか?
しかも消しゴムがマニアック...
それに何だか悟ってる...
「大人の女」の人って「学習能力」もあるんですね
カスタムする時 とりあえず「背景を白く」と思って
いつも↑5番のbackground:urlを消してしまうのですが
ダメですか?
Posted by POOL at 2006年08月02日 22:41
せんぱい、お久しぶりです。
「記事を画像で囲む」って難しいようです。
最終的には「メモをぺたっ」に表示されるようにしたいのですが、挫折してしまいました。
ですので、タイトル画像だけ。。。。。
サイトのリニューアル、見てますよ♪♪ 毎晩、ちびりちびり呑みながらやっているのでしょうか?
はやく、スプーンとかバターナイフとか作ってみたいです。
>カスタムする時 とりあえず「背景を白く」と思って
>いつも↑5番のbackground:urlを消してしまうのですが
ああ!
私も urlのカッコの中を削除して、ご丁寧に #fff と白くしてました。
→→ background:#fff url();
だけど、ごっそり、消しても大丈夫みたい。
borderの記述は、とりあえず残してやっています。
「記事を画像で囲む」って難しいようです。
最終的には「メモをぺたっ」に表示されるようにしたいのですが、挫折してしまいました。
ですので、タイトル画像だけ。。。。。
サイトのリニューアル、見てますよ♪♪ 毎晩、ちびりちびり呑みながらやっているのでしょうか?
はやく、スプーンとかバターナイフとか作ってみたいです。
>カスタムする時 とりあえず「背景を白く」と思って
>いつも↑5番のbackground:urlを消してしまうのですが
ああ!
私も urlのカッコの中を削除して、ご丁寧に #fff と白くしてました。
→→ background:#fff url();
だけど、ごっそり、消しても大丈夫みたい。
borderの記述は、とりあえず残してやっています。
Posted by siena at 2006年08月02日 23:46
始めまして・・・
トップページの画像をカスタマイズしようと・・・
こちらの記述を参考に変更してみました・・・。(テスト版にて)
トップページだけですが成功したようです。
ところで
>4 「トップページ」と同じように「個別記事」「アーカイブ」も変更します。
>5 「スタイルシート」の記述を変更します。
とありますが・・・この2点の変更も必要なんでしょうか?
参考になるサイト、書籍がありましたらご紹介願えませんか?
トップページの画像をカスタマイズしようと・・・
こちらの記述を参考に変更してみました・・・。(テスト版にて)
トップページだけですが成功したようです。
ところで
>4 「トップページ」と同じように「個別記事」「アーカイブ」も変更します。
>5 「スタイルシート」の記述を変更します。
とありますが・・・この2点の変更も必要なんでしょうか?
参考になるサイト、書籍がありましたらご紹介願えませんか?
Posted by ケンちゃん at 2007年01月09日 13:02
はじめまして。
なれなれしく「ケンちゃん」とおよびしましてすみません。(「ちゃん」付きのHNに「さん」をつけるかどうか、いつも悩みまして、、、、)
hamazoの場合は、「個別記事」「アーカイブ」ともに変更しなければなりません。
なぜかというと、「トップページ」だけ変更すると、サイドバーの「タイトル」や「アーカイブ」をクリックして、各記事を読むときに、変えたはずの「トップ画像」が生かされないのです。 ですので、コピペでそれぞれを変更しなければならないのです。(カスタマイズしたときから時間がたっているので、少し不安ですが、、、、)
参考になるサイトですか、、、、どうだったかな。。。大量の「お気に入り」より探しますので、しばらくお待ちください。
後ほど、kenちゃんのサイトへお知らせにいきますね。
なれなれしく「ケンちゃん」とおよびしましてすみません。(「ちゃん」付きのHNに「さん」をつけるかどうか、いつも悩みまして、、、、)
hamazoの場合は、「個別記事」「アーカイブ」ともに変更しなければなりません。
なぜかというと、「トップページ」だけ変更すると、サイドバーの「タイトル」や「アーカイブ」をクリックして、各記事を読むときに、変えたはずの「トップ画像」が生かされないのです。 ですので、コピペでそれぞれを変更しなければならないのです。(カスタマイズしたときから時間がたっているので、少し不安ですが、、、、)
参考になるサイトですか、、、、どうだったかな。。。大量の「お気に入り」より探しますので、しばらくお待ちください。
後ほど、kenちゃんのサイトへお知らせにいきますね。
Posted by ケンちゃんへ:siena at 2007年01月09日 15:50
先ほど出先から戻ってきました。
それで・・・
大変丁寧な・・・しかも親切なご解説いただきまして
本当に有難う御座いました。
>
hamazoの場合は、「個別記事」「アーカイブ」ともに変更しなければなりません。
については、納得いたしました。
再度挑戦してみようと思います。
また遊びに来ますね・・・(へコ)
私感ですが・・・
シンプルでとっても好感の持てるサイトだと思います。
品の良いセンスを感じますね・・・
それで・・・
大変丁寧な・・・しかも親切なご解説いただきまして
本当に有難う御座いました。
>
hamazoの場合は、「個別記事」「アーカイブ」ともに変更しなければなりません。
については、納得いたしました。
再度挑戦してみようと思います。
また遊びに来ますね・・・(へコ)
私感ですが・・・
シンプルでとっても好感の持てるサイトだと思います。
品の良いセンスを感じますね・・・
Posted by ケンちゃん at 2007年01月09日 20:43
参考を元に、カスタマイズしてみました。
ご覧いただければ幸いです。
参考の中で、CSSの部分については、
変更しなくても良いようでした。
気が向いたら、ご覧下さい。
ケンちゃんより
ご覧いただければ幸いです。
参考の中で、CSSの部分については、
変更しなくても良いようでした。
気が向いたら、ご覧下さい。
ケンちゃんより
Posted by ケンちゃん at 2007年01月09日 23:53
こんにちは!
おお! ご丁寧に! ありがとうございます。
早速拝見いたしました。ばっちり☆ですね!
我が家は、私専用のバイオと夫専用のマックがあるのですが、
ときどき、マックからブログを見ると、「お~、こんな風に見えるの!?」と新鮮です。
winでは成功していても、マックでは失敗(カスタマイズが)ってことがあるので、毎回毎回、どきどきします。
どうぞこれからもよろしくおつきあいください♪♪
おお! ご丁寧に! ありがとうございます。
早速拝見いたしました。ばっちり☆ですね!
我が家は、私専用のバイオと夫専用のマックがあるのですが、
ときどき、マックからブログを見ると、「お~、こんな風に見えるの!?」と新鮮です。
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/
ボルテさんのカスタマイズ、楽しみにしています!!!
お誕生日おめでとうございます。
私もまもなく、38歳です。あああ、いつの間にか、、、
気持ちは23歳なのですが、、それはそれで恐ろしいことですね。。わはは。
カスタイマイズ、楽しいですよぉ。
この方のカスタマイズ講座はわかりやすいですよ♪♪
http://daxiazzz.ti-da.net/
ボルテさんのカスタマイズ、楽しみにしています!!!
Posted by ボルテさんへ:siena at 2007年04月18日 00:33
ありがとうございます!
sienaさんにそう言われるととても
嬉しいです。
頑張ります。
sienaさんにそう言われるととても
嬉しいです。
頑張ります。
Posted by ボルテ at 2007年04月19日 11:09
ボルテさんたらとても美しくて!
私はここ2年ほどで、いっきに老け込んでしまったので、今年は「の「美容」の年にしたいなぁ。。。。。と思っています。えへへ。
お嬢さん、留学したんですね~。きらきら輝ける日々を過ごしているのでしょうか。
なんだか最近「若い」というだけで「うつくしい!」と感じてしまいます♪♪
カスタマイズで分からないことがあったら、、、私も知識はありませんが、お役にたてることがあれば!いつでもお手伝いします♪
私はここ2年ほどで、いっきに老け込んでしまったので、今年は「の「美容」の年にしたいなぁ。。。。。と思っています。えへへ。
お嬢さん、留学したんですね~。きらきら輝ける日々を過ごしているのでしょうか。
なんだか最近「若い」というだけで「うつくしい!」と感じてしまいます♪♪
カスタマイズで分からないことがあったら、、、私も知識はありませんが、お役にたてることがあれば!いつでもお手伝いします♪
Posted by ボルテさんへ:siena at 2007年04月19日 14:17
後ほど、kenちゃんのサイトへお知らせにいきますね。
Posted by cheap nike shoes from china at 2011年04月18日 12:56