今日はトイレとご飯以外でPC前から離れていない@YOUです。
ヾ(* ̄ ̄ ̄ ̄▽ ̄ ̄ ̄ ̄*)ノこんばんわ♪
龍聖さんからのリクエスト「背景バッチリ見せたい」を書いてみますw
一応タイトルにも書いていますが、背景画像や文字色なんかを考えないともの凄く見難くなってしまいます(このページのようにw)ので、非推奨&自己責任でお願いします。
あと、
アクセシビリティを考慮したページ作りをお願いします(←お前が言うな・・・ですねw
まぁブログって日記ですから多少自己満足でもいいんじゃないかなぁとも思うわけですよ(A;´・ω・)アセアセ
そんな考えだからコメント極少なんでしょうがwww
では早速やってみましょう!
まずはプロフィールのページです。
スタイルシート→詳細編集→ページの基本から
下の画像のユーザー領域の場所を探してください。
その中で
background-color:#○○○○○○
の部分を削除又は画像のように#以降を
transparentに変更してください。
これでプロフィールの部分は背景が見えるようになったと思います。
続きましてブログのページです。
変更箇所はコンテンツ共通の下の画像の部分です。
変更するのは「コンテンツ表示上部」「コンテンツ表示」「コンテンツ表示下部」の3箇所です。
さっきと少し違いますが、今度は
background部分を削除又は#以降を
transparentに変更します。
画像のコンテンツ表示で#transparentと記入してありますが#はいりません(A;´・ω・)アセアセ
コンテンツ表示上部・下部にはurl(http://~)の表記があると思いますが、それも削除してください。
僕のページではブログごとで区切るためにコンテンツ表示上部に画像を入れて区切り線の代わりにしてあります。
もし区切り線を入れたければ、コンテンツ表示上部か下部のどちらかに
border-top:#○○○ △px solid;
など入れるといいと思います。
○○○部分はカラーコード、△部分は太さです。
solidの部分は線種ですが、
9月14日の日記を見てもらえば、どんな線種があるかわかります。
だいぶ長くなってますが、ここまで大丈夫でしょうか?
まぁここまででほとんどの場所は背景が見えるようになっていますが、
昨日まで僕もやっていなかったコメント部分もやっちゃいます。
変更箇所はコメント/何シテル?です。
弄るのはコメントテーブル・コメントタイトル・コメント日付・コメント表示の4箇所です。
今までと同じように
backgroundの部分を削除または#以降を
transparentに変更します。
この画像でも何を血迷ったか、transparentの前に#がついてますが、#はいりません(A;´・ω・)アセアセ
コメント部分は背景色を消したら少し寂しかったのでコメントテーブルの部分に
border:#66ffff 1px solid;
を入れて境界線を作ってみました。
コメントテーブルではなく、コメント表示の部分に入力すると少し違ったスタイルになるので両方試してみるといいかもしれません。
なんかすごい長いブログになりましたが、
個人的にはbackgroundのカラーコード部分は、あとからまた入れるかもしれないと言う事を想定してtransparentを入れていたほうが良いかなぁと思います。
あと、たぶん書き忘れはないと思いますが、どこか書き忘れがあるようならコメントしてください。
何せ、どこを変更したかなんてすでに忘れてたりしましたのでw
と言う事で、ご覧になった方がより素敵なページを作成できる事を願っております <(_ _)>
ブログ一覧 |
スタイルシート弄る | 日記
Posted at
2010/09/18 20:44:33