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

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

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) | マダムふ〜のこそっと教えちゃお♪ | このブログの読者になる | 更新情報をチェックする