【其の二】 『banner』部分はブログの顔ですぞ!

やっと其の二に参りました(汗)

今回は『banner』ですぞ!『banner』はブログの一番頭の部分!

この部分に写真やイラストなどをはめ込むと ソレはもうあなたの

オリジナルブログになること請け合いですぞ!

まずはテンプレート管理からcssの編集画面を開きませう。

body {
font-family: Arial, Helvetica, sans-serif;
background-color:#B5B5B5;
margin:0px;
padding:0px;
text-align:center;
}
#container{
margin:0px auto 0px auto;
padding-bottom:20px;
width:788px;
background-image:url(https://blog.seesaa.jp/img/bg/friend/bg.gif);
background-repeat:repeat-y;
}
h1 {
margin:0px;
padding-top:0px;
font-weight:bolder;
font-size:24px;
}
h1 a{
color:#433636;
font-family:arial, Helvetica;
text-decoration: none;
font-family:sans-serif;
font-weight:bolder;
}

h2 {
padding:0px;
font-weight:bold;
font-size:14px;
text-align:left;
font-family:arial, Helvetica;
}

h3 {
padding: 5px 0px 10px 0px;
font-size:14px;
font-weight:bolder;
font-family:arial, Helvetica;
}

H3 a{
text-decoration: none;
}

#banner{
font-family:arial, Helvetica;
margin:0px;
text-align:left;
background-image:url(https://blog.seesaa.jp/img/bg/friend/header.gif);
background-repeat:no-repeat;
padding:100px 20px 160px 20px;
}

まずcssの編集を開くと↑の様な感じで

なにやらモンゴル語より難しそうなのが並んでおりまする。

例えば↑は(フレンズ)のテンプレートのcssですが

この中から#bannerを探してください。

その中に#background-image:url(https://blog.seesaa.jp/img/bg/friend/header.gif);が有りますでしょ?

その(http://ホニャララ)をあなたの

はめ込みたい画像のurlに変えればOKです(笑)

はめ込みたい画像はファイルマネージャーからUP!!

どうでしょう?ぶっちゃけ ヤヤコシイわ!!(怒)

とお思いの方・・。テンプレート管理のコンテンツの中に

タイトルロゴ画像というのがございますでしょ?

ソコに大きな画像をぶち込んでしまいましょう(汗)

実は私もこのやり方で御座います。

でもh1タグなど、SEOを気になさる方ははじめのやり方が

オススメですぞ!!

ハーハーハー・・。今回は結構ハードでした。

次回は・・まだ決めてません(汗)

お役に立てたらランキングにお願い!


【其の壱】 レイアウトが総崩れ!!

seesaablogで用意されているテンプレートの中には

表示画面の幅を狭くしていくと、サイドもメインも全て

画面下に落ちてしまう現象が起こる物が有ります。

例えば(スタンダード)とてもシンプルで3カラム!

カスタマイズしていくには最適であると思えるのですが、

コレが曲者・・・。理由はハッキリとはしていませんが

コレはココログなどにも良く見られる現象です。

テンプレートを選ぶ時は、まず表示画面を縮尺させて

レイアウトが崩れるテンプレートかどうか確認して

崩れるテンプレートは使わないようにした方が無難です。

ちなみに私がこのblogを作る時に元にしたテンプレートは

フレンズ)理由は3カラムでレイアウトが崩れなかったから(笑)

まずはseesaablogの大まかなレイアウト分けを見てみましょう!

banner
links-leftcontentlinks
footer


テンプレート管理からcssのカスタマイズを眺めてみましょう!

はじめは、記号の羅列のようにしかみえませんが、この中から

上の表の中の単語を見つけてみてください。

まずは『banner』

次回は、バナー部分の画像を差し替えてみます。

ランキングにお願い!