レイアウトいじり

• フッターのLinkをサイドバーに戻しました！


• フッターにジャケットを表示するようにしました！


• それにあわせてMusiqinfoが移動しました！

ジャケットの所はやっつけというか適当なので
また細かく弄るです。

だいたい完成。

問題点

• 記事の内容が少ないとメニュー部分にフッターがくいこむ！


• Mac版IEで表示が崩れる？かも

改善点

• メニューからフッター部分に色々引っ越し
  →くいこむのも減る？


• @import(*1)でMac版IE用にCSS(*2)を書く…？

ぜぇぜぇ…
もう大変ですホント…
・bodyと全体をくくったDIVに背景画像Yリピートを表示させ
・ヘッダーはマージンを消し表示
・メニューと本文をくくったDIVに幅を設定しposition:relative;(*3)
・本文はヘッダー分を考え上に200pxパディング…なはずがrelativeが効いてるのか
パディング0で左に大きくマージン(*4)
・メニューはrelativeを効かせてpositon:absolute;で↑←0
デザイン的に余白が左にあるのでパディング(*5)レフトでずらす
さらに枠をはみでちゃかっこわるいので幅を指定。
・フッターは背景画像を表示。コピーライトをtext-indent:-9999px(*6)で飛ばす。
ほら完成！！




…てこれPSOブログですよね？

わかんないってば！な人用に
ちょっと解説☆
*1 個別にCSSを読み込ませることが出来る
*2 CascadingStyleSheetの略。Webデザインでは必須。
*3 基点となるポジション。以下のAbsolute等は基点から見た位置を指定。
*4 ボックスの位置をずらす margin-top:20px;で上から20pxずらして表示開始。
*5 ボックス内の位置をずらす padding-right:5px;で右から5pxは表示されない。
*6 テキストの位置をずらす ここでの使い方はテキストを消すという使い方。

CSSれしぴ

せっかくだからこのブログデザインの作り方ざっくり解説ー！

まずは左右上下ともにマージン空きすぎなデザインを直すために
全てにLeftなんちゃらとかTOPなんちゃら
そしてマージン設定を0にします
これで上下ともにきっちり表示されちゃいます。

で、次にBODYの背景画像に

これをY軸リピート
するとこの画像が縦にわしゃーと表示されます

そして次にBlogtitleですが

ようやくこれを使います。
imgで貼り付けてもいいのですがーHTML的に美しくないので
<h1>blogtitle</h1>の背景に画像を指定。
こうするとCSSをきってもちゃんと表示されますｂ
ただこれだと今度は文字が表示されて変なことに；；
そゆときはdispalay:none;かtext indent:-9999px;を指定して
文字には消えて貰いますｗ

後はfloatで左右に…というのが普通なのですがびしっと位置を決めたいので
position:absolute;で表示位置をびしっと決めます。
後は表示されてるCSSのフォントデザインだったりするので
そこはてけとーにｂ

今日は残りのフッターを仕上げようと思います。
そこに音楽もってくるのでまた聞いてあげてくださいなｂ


***
重大な欠陥が見つかったのでまた書き直しですひゃっほぅ！
誰かレスタをっｗ

CSS+HTML=お腹いっぱい！

一日かけて…一からCSSを書いてやりました
どんなもんだい！

Postの所以外は完全自力です。
もう二度とこんなことはしません
サポートしてくれたレモン&JUNOさんありがとう。
これから新生ゆりぶろがはじまるよ?（多分

NewLogo試行錯誤

確定版…？

LogoTest1


LogoTest2(微修正版！)




今回の音楽はWestsideHIPHOPでばりばりメロウ系を持ってきました
TwinzのConversationからEastside LBです。
あまりヒップホップてなぁ…？みたいな人にもお勧めですよｂ

次はUselessID…かもかも！



以下作業場ｗ




Icon by djnjpendragon @ VanniLa Cream Icon

Blog設定ちょっと弄り

Blogtitleのバックグラウンドに少し画像を足しました
うんキューティーキューティー。（多分
ただデスクリプションの所でズレが出来てしまってます；；

後コメント時に画像を見て文字入力というのも
まためんどくさいので止めました。
コメント管理方式を中止しました。

使いにくい点などがあればコメントで?