上記の広告は１ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

さて、デザイン！に手を付けるところまで来ました。
（ばんざ〜い）
とりあえず、一番目につくところの「バナー」を
自前の写真でつくりました。

トガキューで「青系」写真を集めて表示させることは、
無理だそうであります。でも、お師匠さんが、別の案を
ご紹介してくださるということなので（ありがたいです　拝）
びおにできるんだったら、そちらをやってみようかと。。
それまで、このblogのイメージの助けということで、これを。
また、ちょくちょく変わるかもしれません。

バナー画像のをどうやってつくったか。。って
みなさまのほうが詳しいので、びおのはいいですね。
（もっと、いい手順があれば、教えていただきたい〜）
タイトルの影は、同じものを２つ作って、一つをグレーにして
レイヤーで順番を入れ替え、ずらして作ったのであります。
サイズは800x100。

[CSS]
#bannerのところの[background-color:〜;]をはずして
[background-image:url(〜);]を入れました。
[〜]にはファイルアップロードにいれて、出したタグから
http〜ingのところを抜き出して、貼ったです。

FC２のファイルアップロード。画像を貼るためのタグが
長いです〜。最初、[http〜jpg]を抜き出して貼った時
表示されず、ええ？と思って、全部貼っても表示されず。
この繰返しをしていて、うむむ。jpgの後に入れていた
[borber="0"]をはずしてみて、表示できました。
入れれないのかなあ。Mac+Firefoxでは枠なしだけど。
大丈夫なのかな。後で、確認しておこう。

このままだと、前のタイトルとサブタイトルが出てしまうので
[HTML]
＜div id="banner"＞内の
＜h1＞＜a href="./"＞＜%blog_name＞＜/a＞＜/h1＞
↑タイトル
＜h2＞＜%introduction＞＜/h2＞
↑サブタイトル
を全部消しました。

あ、「設定した情報の変更」に行って、タイトル部分と説明を
空欄にするだけでもいいみたいです。
（↑あ、ダメです。FC2の新着記事一覧で、記事はでるけど
　　名無しになってしまいます。）

と、こんな感じで。

このごろ、つれあいが「信長の野望」（PS）にはまっていて
テレビを占領されるので、夜がたいくつであります。
夜は、みなさまのblogめぐりをさせていただくのですが
それでも時間があまるので、昨夜はここのデザインのことを
考えてみました。
紙なりに書いて、考えると良いのでしょうけど
あんまり、ピンと来ないので、ちょこちょこっと
いじってみたりして、アイデアをふくらませてます。

カラーは「青」で！
どこかですてきなblogデザインを見つけたのですよ。
それが、ブックマークしたつもりが、探してもなくて
記憶をたどると、

●とてもシンプル。クール。
●バナー部分が、海か空のきれいな画像だった。
●背景は白だった。
　　　　　　　　　　　　　ということくらいしか。。（笑）

びおのは、てんこもり状態になるのがオチなので、
そのへんに注意しながら、ブルー＆シンプル＆クールを
めざしたい。

それで、当面やってみたいことは
●バナー部分に「きれいな青」の画像
　できれば、トガキューで青系を集められるとすてきかな。
　できるのかなあ。できたとしても、びおが設置できるのかと。

●左右サイドのタイトル部分の背景に
　「青」の画像をいれてみたい。
　（バランス悪かったら、はずす）

●タイトル文字を作ってみる
　
こんなところかなあ。。思い浮かばないやあ。


写真の整理をしていて、たまたま、とてもきれいな青の空と
水族館のイルカ水槽を撮ったきれいな青の写真がでてきて
ふと、この２枚をつかって、びおもblogのデザインを
はじめからつくれないかなと、無謀な試みをしました。
CSSのみ触れるSeesaaでは、なんとか「見れる」ものが
できてたんですけど、それをFC2に持ってきたら
もう、調整する気力がなくなりました。（笑）
それで、じゃあ「一からつくってみよう！」というわけに。

できれば、その２枚を、つかいたいなあ。。
さて、どんなにしよう。。

おはようございます。
「朝なわとび」でちょっと、筋肉痛です。
運動。運動。元気にいきましょう。2005年。です。

paddingを入れると、幅がそのぶん広がってしまうので
左右10pxづつへらして、整えました。

それで、横カレンダー

[HTML]
●bannerとcenterの間に、横カレンダーを入れたいので、
　＜ul class="yokocal"＞
　＜li＞＜a href="<%prev_month_link>"＞＜%prev_year＞.
　＜%prev_month＞＜/a＞＜/li＞
　＜li＞<<＜/li>＞
　＜!--calender2--＞
　＜li＞＜%days＞＜/li＞
　＜!--/calender2--＞
　＜li＞>>＜/li＞　
　＜li＞＜a href="＜%next_month_link>"＞＜%next_year＞.
　＜%next_month＞＜/a＞＜/li＞
　＜/ul＞
　　　　　　　　　　　　　　　　　　を入れました。

[CSS]
●centerにわかりやすいように、色を入れて、center部分を
　下げました。
　　#center {
　　　position:relative;
　　　background-color: #FF88FF;　←紫色に
　　　margin-top: 20px;
　　　}

●center部分を下げると、その中にはいってるcontentと
　左右のサイドバーも一緒に下がるのかなと思ってたら
　左右サイドバーはご一緒じゃなかった。。
　ので、それぞれ、様子を見ながら、下げる。
　　#left {
　　　position:absolute;　　　
　　　top:127px;　　　　　　←ここをちょこっと。
　　　：　　　　　　　　　　　　右サイドも同じく。
　
●＃banner＃centerの間に
　　.yokocal{
　　　position:absolute;
　　　top:105px;
　　　left:20px;
　　　text-align:center;
　　　font-size:65%;
　　　}

　　.yokocal li {
　　　display: inline;
　　　margin: 3px;
　　　}　　　　　　　　　　を入れました。

　縦だったカレンダーが横になりました！（CSSすごい！）
　左寄りなので、中央揃えにしたいのですが
　fc2のお手本どおりpaddingが入ったままだと、
　text-align:centerが効かないみたいなので、はずして
　それでも若干左寄りにみえるので、positionでleftを20px
　いれました。
　それとも、paddingを優先して、text-align:centerをはずし
　left:60pxにしたほうがよかったか。。
　どっちでも、思ったところに来たけど。

ここまでして、centerの色を白に戻しました。

見栄えは、後にして、きれいに並べてみてるところです。