きまぐれAWA's Life

アクセスカウンタ

zoom RSS CSS(スタイル編)オリジナルデザインのブログを作ろう♪

<<   作成日時 : 2008/02/03 11:45   >>

ブログ気持玉 0 / トラックバック 1 / コメント 4

「ブログをオリジナルデザインにしたいな」という風に、
ブログを始めた時から思っていました。

ウェブリブログはデザインテンプレートのほかに、
CSS編集というものでデザインを変更することができます。
でもうちは、この分野の知識を全然もってません。
こういう事はうちには難しいことばかりでちんぷんかんぷん。
とっつきにくいものですね。

「CSS編集は上級者向け」というイメージを持っていましたが、
やってみるとうちでも比較的簡単に設定が出来る事もあるし、
「CSS編集 → 設定 → ブログのデザインが変わる(拍手)」
…っていう過程もなかなか楽しいものです♪
なかなか思ってるようにうまくいかない事も多くて
「あーでもない、こーでもない」と頭を悩ましながらの作業ですが、
オリジナルデザインに向けてCSS編集に挑戦中です。

CSS編集でのデザインを変更は 「一度に全部」 と言うわけではなく、
一箇所ずつの変更も可能です。
変えたい箇所から少しずつ更新していけば、だんだんブログは変わっていきますね。
「そしていつかはオリジナルデザインに」 を目標にしたいと思います。

CSS編集の記事は解説風な書き方をしていますが、
実は、うちのCSS編集のおさらい的な要素が多いです。
細かいところまで行き届かないこともあるでしょうがご了承ください。
また、『そこ違うよ』などご意見・ご指摘など頂けると嬉しいです。

まずはブログ全体のイメージを変えていくことから初めていきます。
CSS編集は1つずつ段階的に進めていきます。

なお、CSS編集は現在進行形なので、この後も随時アップの予定です。
乞うご期待!(oゝω・)b^☆ (…って、誰に言ってるの?( ・ノェ・)コッチョーリ)





■ ブログをいじっちゃおぅ♪ 〜 ブログのレシピ 〜 ■







※CSSを編集するにあたって
記事に書いたCSS編集の方法については、
当ブログで設定が出来たものだけ書いてあります。
ただし、他の全てのブログでも必ずうまく設定できるとは限りません。

CSS編集で設定を間違うとブログのレイアウトが崩れることや、
設定がきちんとページに変更箇所が反映されないといったこともあります。

CSSの編集につきましては、あくまで自己責任でお願いします。

設定が出来てページに変更箇所が反映されても、
思っていたイメージと違うということも出てくることもあると思います。
いろいろな場面で、設定前に戻したいということも出てくるでしょう。
なので、CSS編集や設定する前には必ずバックアップはとってください。
あと、編集の進み具合で幾つかファイルを作っておくと便利です。


また、変更は一箇所ずつ行うようにしてください。
一度に何箇所か変更を加えてしまうと、
うまくいかなかった時にどこが悪いか探すのに一苦労します。
一箇所ずつ変更してうまくいったか確認してから次に進んでください。


元の状態(以前の設定)に戻そうと思った時に、バックアップしたもので
設定しなおしても元に戻らないことも出てくることもあると思います。
そんな時は「初期値をフォームに入力」で設定しなおして、
その後にバックアップしたものを再び書き込んで(コピペ)ください。


テーマ

関連テーマ 一覧


月別リンク

ブログ気持玉

クリックして気持ちを伝えよう!
ログインしてクリックすれば、自分のブログへのリンクが付きます。
→ログインへ

トラックバック(1件)

タイトル (本文) ブログ名/日時
デザイン変更中
ただいまブログデザイン変更中です。 今回は、特に「こうしたい!」というような考えはないのですが…^^; ...続きを見る
ぎろぴた
2010/03/18 14:20

トラックバック用URL help


自分のブログにトラックバック記事作成(会員用) help

タイトル
本 文

コメント(4件)

内 容 ニックネーム/日時
ウェブリブログ助け合いの部屋から来ました。
コンポーネント領域のことで
教えていただきました。
訂正箇所を今訂正した所です。
私のブログのCSS編集は 
ユキさんという方のブログと(ご存知のこととおもいます)
このブログのCSS編集のシリーズを参考にさせてもらています。
本当にありがとうございました。
丸み
2009/06/11 23:16
丸みさん、いらっしゃいませ。
こちらまでお越し頂き恐縮です(ぺこ)
なにかお役に立てるようでしたらお申し付けください(ん)

えっと、訂正箇所についてなんですけどまだ直っていない所がありました。

/* コンポーネント見出し(共通/左右とも) */
#utilities h2, #utilities2 h2{
font-size:80 %;
color:#666699;
}

この部分の『font-size:80 %;』に半角スペースが入ってます。
『font-size:80%;』に置き換えてください。


それから別件なのですがロールオーバーについて。
IEでは画像が切り替わっているように見えますが、
FireFoxなど他のブラウザではうまく表示されないようですね。

すこし使い方を考えたほうが良いかもしれません。

mairis
2009/06/12 08:17
FireFoxで確認したら
画像が切り替わりませんでした。
考えて見ます。

コンポーネントの件 教えていただきありがとうございます。
直して 80%サイズにしたら
小さすぎたので この行そのものを消しました。
つまり この行が間違っていて反映してなくて
その方が私としては いい感じのデザインに見えたという事です。
とほほ・・・
またよろしくお願いします。
丸み
2009/06/13 12:00
>丸みさん

◆ ロールオーバーの件
個人的な意見になりますが・・・(気まずい)

同じ画像パターンを何度も使っていくつもの記事に使用する。

このような特殊な使い方じゃないのであれば、
あの方法でのロールオーバーはどうかな?って思います。
せっかくCSS編集までおこなってもひとつの記事だけですし、
他の記事に違うパターンを使うたびにCSS編集ではスタイルシートも肥大しますしスマートな方法ではないですね。

◆コンポーネントの件
きちんとデザインが反映されて良かったですね(にこ)
記述ミスとかはよくあることですので、
CSS編集後はエラーチェックをすることをお勧めします。
URL欄にエラーチェックの出来るサイトを載せておきます。
mairis
URL
2009/06/13 17:48

コメントする help

ニックネーム
URL(任意)
本 文
  現在の閲覧者数:

* ぱにゃステ *

『ぱにゃステ』 customized by mairis
 
 
ふぉろーみー

CSS(スタイル編)オリジナルデザインのブログを作ろう♪ きまぐれAWA's Life/BIGLOBEウェブリブログ
文字サイズ:       閉じる