月や火星に土地を買ってみませんか?

我が家は飼い主が持っています♪昔のブログ我有電脳のコチラでも報告しています。

2006年11月29日

マダムふ〜のこそっと教えちゃお♪ CSS編 タイトル画像

約1週間に一度の連載になればと思っているこの企画!
マダムふ〜の何でもありページ!今日もCSSの編集についてやっていきますよ☆

さて、今回は...『ねこびいき プラス わん − にゃんとわんダフルな暮らし』のうちこ母さんからのご質問。


タイトルのところに写真を載せるのは簡単ですか?



はい、簡単ですよ☆なんていってしまっていいのでしょうか(^_^;)

実は前回のポレポレブログのぬーなーさんの所でもタイトルに写真を載せていらっしゃいます♪
今回はポレポレブログと同じように、そのタイトル画像を表示させ、リンクをさせる事を目標にご説明していきたいと思います。

まず、アセラでご利用のテンプレートによっては、形が崩れてしまうこともあるので、よくよくご了承の上、自己責任でお願いいたしますm(__)m
スタイルシートが崩れてしまった場合は初期値に戻すで全てもとの状態に戻ります。



☆書き換える前のポイント☆
テンプレートを新しく追加して、追加したテンプレートを編集していくといいかも☆
この方法だと元のCSSを変更せずに、編集していける事に気づきました♪
最後にその編集したテンプレートを【適応】して保存すればOKでした。




(基本は、アセラご利用の場合でご説明します。他のブログサービスのご利用の方は…ご了承ください。でも、基本は一緒です♪)

タイトル画像をリンクとかさせず、タイトルに写真を設定したい場合には、2.に進んでしまってください。

1.タイトル画像をコンテンツで設定します。
【デザイン】の中にある【コンテンツ】を選び、【ブログロゴ画像】コンテンツを作成します。その中には、タイトル画像を表示させるタグを...


<div align="center">
<a href ="あなたのブログURL">
<img src="画像のURL" alt="あなたのブログタイトル" border="0">
</a>
</div>


とします。これで第一段階の準備OK!


2.次に、【スタイルシート】を開きます。
アセラの場合は【デザイン】−【スタイルシート】−現在適用しているデザインの【タイトル】をクリック

CSSが書かれた編集フォームが表示されます。

3.CSSが書かれた編集フォームの中から次のような項目を見つけてください。


#container{〜}


4.この中に次の項目がある場合は、はじめからヘッダー部分に画像が指定してあると言う事なので削除してしまいます。

ひらめき注意:タイトル画像をリンクさせない場合、1.の設定はせず、下記に書かれた部分は残してurlの部分だけを自分の使いたい画像URLに書き換えます。

#container{



background-image:url(http://****/〜.gif);
background-repeat:no-repeat;
background-position:center top;





5.次にヘッダーにつける画像の大きさに合わせ、バナー部分(画像表示部分)の項目を変更していきます。CSSの中から次のような項目を見つけてください。


#banner{〜}


6.この#banner{〜}中にあるheightの数値を画像の高さに合わせて変更します。

例えば...画像の大きさが横(width)750px、高さ(hight)200pxならば...


height:210px;


としてください。
(なぜかしら??若干大きくしてあげたほうが、記事日時のタイトル部分などが画像に引っかからず、キレイに表示されるのですよ...(^_^;))

スタイルシートの変更はココまで。最後にプレビューボタンで確認してOKだったら、保存して終わりです♪

まあ…私も素人なので今日もコレ位で。


松吉もチンプンカンプン猫(泣)でも…やればできる!なせばなると!

20061129_1.gif


できるかなと思ったら愛の手を♪
人気blogランキングへにほんブログ村 猫ブログへ

【マダムふ〜のこそっと教えちゃお♪の最新記事】
ニックネーム マダムふ〜 at 14:37| Comment(13) | TrackBack(0) | マダムふ〜のこそっと教えちゃお♪ | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
ヘッダーに写真持ってくるだけで、一気にニャンブログっぽくなりますよね♪
ウチはリンクなしの写真載せなので
ヘッダー部分にbackground-image:url(〜)を挟むだけ。
それよりヘッダーに使う画像を用意するのが
タイヘンだったりします^^;
Posted by こめ at 2006年11月29日 15:15
ヘッダーを変えるだけで大分ブログの雰囲気変わりますよねーるんるん
私もこめさんと同じく、ヘッダーに使える画像探すのが大変です〜(笑)

リンクありがとうございますーexclamation×2
私もリンクさせていただいちゃいました(事後報告でスイマセン!!)
これからもよろしくお願いしまーす揺れるハート
Posted by とっちー at 2006年11月29日 16:29
マダムふ〜さんはPCにお詳しいんですねぇ。
私はブログを始めたとき、な〜んにも分からなくて
携帯写真を1枚載せる…それしか出来ませんでした^^;
2枚載せることを覚え、
デジカメ写真を載せる事を覚え…
と亀のような歩みでなんとかやって来ました。
カスタマイズにチャレンジした時も
大変だったけれど、楽しかったです〜。

2にゃん揃ってカメラに収まる写真は
もうあれ以外撮れそうにありません^^;

私はマダムふ〜さんのフォントがかわいいなぁといつも思ってます。
とってもキレイでさすがです〜!!
Posted by 葉っぱ。 at 2006年11月29日 17:19
・・・なんかみんな凄いなぁ・・・(-_-;)
まず、すぐに「これでよし。よいではないか。」
と思う性格から直さないといけません(笑)

でも松吉っつあんに頑張ってと言われたら・・・
頑張れそうな気がする!!←単純(笑)
Posted by Tico at 2006年11月29日 18:55
ご紹介していただき、ありがとうございますぅ〜るんるん
ずっと一人で「写真にリンクを貼りたいんじゃーむかっ(怒り)」と悩んでたわけですが、こんなワザ、一人で悩んでちゃ100万年経っても分かりっこありません。
もうホントに感謝してるんすよ、分かっていただけてます?この気持ち。

ってことで、ワタシもそろそろヘッダーの写真に良いの撮ろうっとかわいい
Posted by ぬーなー at 2006年11月29日 22:00
やりますね〜 タメになる講座じゃの〜
松吉つあんはわからんでも よろしい〜

CSSとか関係ないと思うのですが、
よそ様のブログ見るとリンクしたブログが更新したってわかるのは あれ どうやってするんですかね〜 ボソっ・・・

意味わかりましたか?文章へたっぴーなもんで。
Posted by カーズ at 2006年11月29日 22:43
ウチのテンプレ、いつから変わってないんだろうって思ってしまいました^^;
私もネット上で独学しました。
それでも難しい事が分からず、ほったらかし状態です^^;(笑)

陽だまりの松吉君カッコ良いわぁ黒ハート

リンク有難うございました♪
ウチの方でもリンクさせて下さいm(._.*)mペコッ
これからもよろしくお願いします〜
Posted by ヒトミ at 2006年11月30日 00:14
※※いつもコメントありがとうございます※※

こめさん

こめさんすごいですよ☆…私より断然、知っていると思うんですけど(^_^)
是非、私にも教えてくださいませm(__)m
…アセラって解説が少ないんで変更するの意外と大変なんです(ToT)

確かに画像用意するほうが大変かも!

*************************************

とっちーさん

そうそう、画像探すほうが大変ですね(>_<)
私も手習いで、CSS少しいじった事があるだけでやりながら不安ばっかりですよ(ToT)
自分も、勉強になるかな?と思って、今は、やってます☆がんばりますので応援お願いしますm(__)m

*************************************

葉っぱ。さん

…いえいえそんな詳しくないですって(>_<)機械ものが好きなだけなので、好きってだけで突っ走り、ホント未だ素人なので、これをやりながらまだまだ…勉強中です。
是非応援してくださいm(__)m

※フォントはずーっとフリーフォント使ってます♪リンク張らないとまずいですね…(^_^;)近々探して張りますね☆

*************************************

Ticoさん

何をおっしゃいますですか♪
本当は、『ま、これでいいかぁ〜』出終わったほうがいいんですよ☆
…のめり込みすぎると、眠れなくなりますから…(ToT)

*************************************

ぬーなーさん

ぬーなーさんとうちこ母さんのおかげで今回の記事がかけました!m(__)m
お礼を言うのは私のほうですm(__)m
ま、ぬーなーさんならきっとこれを書いた後、『あ、失敗したかも?!』って考えている私の姿が見えるでしょう。ハハハッハ(^_^;)ゞ

まだまだ若輩者ですのでご声援よろしくお願いいたします♪

*************************************

カーズ さん

カーズさんのご質問のブログの更新履歴がわかるやつって、BlogPeopleとかドリコムのブログツールの事ですかね??

ご参考まで…下記のページにBlogPeopleのブログツールについて解説がありましたよ。

http://satokoto.blog10.fc2.com/blog-entry-400.html

特定のブログとかのRSS取得する場合なんかだと、Javascriptなど使ったりするようですね…。(…そういうのはとっても苦手(>_<))

*************************************

ヒトミさん

ヒトミさんの所すごいですよね!!
すごく勉強されたのがわかります(^v^)ぜひ、私にも教えてくださいませ。m(__)m

まだまだ若輩者ですので応援してくださいm(__)m
Posted by マダムふ〜 at 2006年11月30日 01:20
マダムふ〜さん、私の質問を取り上げてくださって
ありがとうございます
本当に感謝です!
昨日私がアセラのテンプレートのページで
ごちゃごちゃといじくっている時
ここでこんな講義がされていたとは!!
あれは無駄だったのか
だけど・・難しそうだなああああ・・
コメント読んでいるとカスタマイズには
詳しい方がたくさんいらっしゃるんですね
すごいなあ。。ただただため息
とりあえずアセラの言うとおりにして
ヘッダーに写真付けました
今度はマダムふ〜さんのご指導に従って
挑戦して見たいと思います
でもどうなることやら・・
とっても参考になるので次回の更新で
この記事をリンクしてもよろしいでしょうか?
Posted by うちこ母 at 2006年11月30日 08:10
※※コメントありがとうございます※※

これでよかったですか??(^^ゞ
わからなかったら、メールください☆
ココで取り上げた方限定でサポートします♪(私のできる範囲で(^^ゞ)

ご紹介してくれるんですか(^_^;)恥ずかしい〜〜(>_<)リンクありがとうございますm(__)m
Posted by マダムふ〜 at 2006年11月30日 09:25
またまた出遅れ。。

マダムふ〜さん、さすが!
私もずっと設定いじくりたいと思っていたのですが、
なんせ初心者&チキンの為、なかなか大きい設定変更はいじれません。
ヘンになるのが怖くて(復元する知能もなし)、
勇気ないんです。(汗)

フリーフォントも使おうと思いつつ、ダウロードだけして終わってます。。。

マダムふ〜さんを見習わなくちゃ!
Posted by アビオンまま at 2006年11月30日 10:21
へぇ…これは私もやってみたいかも…。
旦那さんに見せてみよう、このページ(笑)。
でもうちはFC2だから、やり方違うのかしら?
Posted by みか@猫大好き at 2006年11月30日 13:22
※※いつもコメントありがとうございます※※

アビオンままさん

いろいろいじくってみると面白いですよね。アビオンままさん、まったく初心者じゃないじゃないですか!!(^v^)
写真の画像だって変えてるし!アフィリエイトだって!いつもこっそり見習ってるんですよ☆<m(__)m>

フリーフォントって、ダウンロードするだけダウンロードして使って、あれ?どこのフォントだったっけ?っていうのたくさんないですか?

**************************************

みか@猫大好きさん

FC2だと若干やり方変わっちゃうかもしれないですけど、同じようなことはできると思いますよ。
がんばって☆

Posted by マダムふ〜 at 2006年11月30日 22:44
この記事へのトラックバックURL
http://a-thera.com/tb/597794
※ブログオーナーが承認したトラックバックのみ表示されます。
※言及リンクのないトラックバックは受信されません。

この記事へのトラックバック