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

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

2006年12月13日

ブログ構造を理解する

松吉との関係もだいぶ修復されてきました。
ココ最近ずっと続いていたブログも一日お休みをいただきましたm(__)m

コメント返信は早めにしますのでしばらくお待ちを…m(__)m

でも今日は、なるべく1週間に一度はやっていきたいと考えている「マダムふ〜のこそっと教えちゃお♪」をお伝えいたします〜(*^_^*)

質問もどんどん受け付けますのでコメに書いてくださいね♪
(私もわからなくって出来ない事は、すみませんが「わかりませんのぉ〜出来ない(>_<)でございますわぁ〜」とお断りする事もありますが…。ご了承くださいm(__)m)

さて、まずブログを改造する基本から入っていったほうが改造するのもしやすくなるのかも!!と思い、基本から始める事にします。

まずHTML・XHTMLとCSSを理解していかないとブログ改築はとっても難しくなってしまいます。まずは、皆さんのブログがどんなタグを使って、どんなソースであらわされているのかを理解する事が重要です。

IEならば、メニューバーの「表示」−「ソース」で表示されます。
Firefoxならば、メニューバー「表示」−「ページのソース」で表示できます。

このソースを見るとブログがどんな風に書かれているかわかります。
さてココからブログの構造を把握していくわけですが、この松吉日和の場合は…

061213_1.jpg


大まかに見るとこんな感じ。この大まかな部分が一・重要。
たとえば、バナー部分をどのサイズにしようか?という場合は、CSSで#bannerを探せばいいし、記事全体の部分を変更しようと思えば、#contentを探して変更すればいいということになります。

あとは、CSSがどんな風に書かれているのかというのもこのソースから割り出す事ができます。

たとえば…次のようなソースを探してみましょう。
<link rel="stylesheet" href="http://****/***.css" type="text/css" />


このhttp://****/***.cssの部分をアドレスバーに入れてリンクしてみてください。
そうすると…CSSのソースが現れます。

こうやってブログのCSSの変更をするために構造を理解していきます。
これは多分どのブログであれ構造を理解していく事でCSS変更がしやすくなると思いますので是非、ご自身のブログ構造を検証してみてくださいね♪

一緒に勉強♪愛の手を…
人気blogランキングへにほんブログ村 猫ブログへ

ニックネーム マダムふ〜 at 21:40| Comment(10) | TrackBack(0) | マダムふ〜のこそっと教えちゃお♪ | このブログの読者になる | 更新情報をチェックする

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

2006年11月23日

マダムふ〜のこそっと教えちゃお♪ CSS編

さて、昨夜は爆睡させていただいたマダムふ〜です。
おいおい…ブログの書き方教えたら早速、カキコしているし…顔(え〜ん)

夫よ…ついでに私は地底人でも宇宙人でもありませんからたらーっ(汗)残念!

(私は、とある友人と確かに地底人と宇宙人の交信をしていますけどね(^^ゞW笑)

ま、普段から私は…あんな感じなんです。
周りから見ていると、夫が物静か?(・・・細かいだけでしょ)で、私はハイテンションタイプ(楽しい事好き♪なのよ)らしいんで…顔(イヒヒ)

閑話休題。

このコーナーは松吉のことだけではなく、様々な事を書いていこうかと思っています。

そうこれは…マダムふ〜の趣味のコーナーですわーい(嬉しい顔)ハートたち(複数ハート)

マダムふ〜が昔…とある雑誌の応募でPCパソコンモニターとして、その利用記録のブログを書くということをしておりました。

その記録は…こちら『我有電脳

未だにそのいただいたPCを使ってブログ更新しております♪
この程度の知識でお役に立てることがあれば幸いですので…

今日は、ポレポレブログのぬーなーさんのご質問にお答えします!!

昨日のぬーなーさんのご質問は

このアセラの真っ白い両サイドバーのテンプレート、うちも同じの使ってるんですが、私も真ん中の記事の列の幅を広くしたいのですー。
テンプレートのところをイジるんだろうなっていうのは分かるんですが、どこ!?みたいな。
ちょろっと教えてくださいマセm(__)m


さて、アセラだけではなく、ブログを両サイドバー(3段組のレイアウト)にしていらっしゃる方は何人もいると思います☆
ブログの場合の形成はCSS(スタイルシート)というものを使い、Webの見た目を整えております。

(ココでつまずいてはいけません…よ。)

まずは、CSS(スタイルシート)とは、Web(HTMLで書かれたもの)のデザイン・レイアウトを指定する為のものと理解してください。

で、ブログの場合、ほとんどがこのCSSをいじって見た目を変えていくわけです。

という訳で…スタイルシートをいじって変更する場合、デザインが崩れる場合もありますので、全て自己責任でお願いいたしますm(__)m
(アセラの場合は…もしも、失敗して崩れてしまった時や元に戻したい時は、テンプレートから再度デザインを選んで『追加したテンプレートを今すぐ使用する』を選択して、追加保存してあげれば”全て!”元に戻ります。)


今回の場合、『3段組の真ん中の幅だけを広くしたい』という事なので…
(基本は、アセラご利用の場合でご説明します。他のブログサービスのご利用の方は…ご了承ください。でも、基本は一緒です♪)

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

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

#container{ 〜 }


3.この#container{〜}中にあるwidthの数値を変更します。

例:
#container{

width:905px;



(ウチのブログと同じぐらいの幅にしたい場合は…このままで大丈夫ですよ〜)

この部分が、3段分の幅を決めています。

4.次に真ん中部分だけ幅を広くする為に、CSSが書かれた編集フォームの中から次のような項目を見つけてください。

#content {〜}

5.この#content{〜}中にあるwidthの数値を変更します。

例:
#content{

width:495px;



6.これでおしまい。
あとは、プレビュー機能で確認してから【保存】すればOK♪


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


さて、これだけで終わらせると…松吉を楽しみに来て頂いた方に失礼なので…

20061123_1.gif


マダムふ〜にも愛の手を…?!
人気blogランキングへにほんブログ村 猫ブログへ


CSS(スタイルシート)編集を覚えたい方にオススメ!

CSSコンパクトリファレンスCSSコンパクトリファレンス
磯野 康孝 蔵守 伸一


Amazonで詳しく見る
by G-Tools


ニックネーム マダムふ〜 at 13:23| Comment(10) | TrackBack(0) | マダムふ〜のこそっと教えちゃお♪ | このブログの読者になる | 更新情報をチェックする