SSブログ
毎日が狩り日和へようこそ

当ブログの管理人ROCKといいます♪
このブログでは主にMHP2Gのプレイ日記やその他のゲーム、サッカーの話題など趣味のことを中心に気まぐれに綴っています
文章などまだまだ拙い部分もありますが、そのあたりも含めて温かい目で見ていただけたらと思います
それではゆっくりしていってくださいね♪

xlink kai関連のことで来られた方はこちらにリンクまとめを用意してますので
よかったらご利用ください、クリックしたらリンク集に飛びます

当ブログでのxlink kai関連記事&外部サイトまとめ


mixiもやってますのでよかったら覗いてやってください
http://mixi.jp/show_friend.pl?id=25492304

ブログの衣替えとりあえず完了 [雑記]

ふぅ~ようやくレイアウト完成
CSSをいじってたらこんな時間になってました[あせあせ(飛び散る汗)]
最初はどこをどうすりゃいいのかさっぱりでしたが
CSSについて書いてあるサイトと、so-netのCSSの説明を頼りに
少しいじってはプレビューで確認の繰り返し
で、ようやく終わりました

前がこんな感じでしたので、見た目が180度変わった感じですね
無題.jpg

トップ絵をモンハンの画像にしようと思って色々なタイプのスキンに合わせてみるも
どうしても背景が暗めの色じゃないと合わないんですよねぇ
ついでにこの機会にサイドバーなども手を入れてみました
あとは、過去記事で見づらくなってるとこがないかチェックしたら完了かな
とりあえず3月分まではチェックしたので、続きはまたボチボチやっていきます

おっ、そういえば日付変わって今日から11月ですねぇ
制服の学校じゃあ今日から冬服に完全移行ですね(記憶が正しければ

最後に、今後CSSをいじるときのためのメモを残しときます
参考にしたい方はどうぞ、質問はご遠慮ください
※CSSの編集を行う際は自己責任で

・各項目について
/*-----Common-----*/  全体のリンクの色(未読・既読など)・横サイズの定義?などの決定
リンクについては、記事などで色を変えたい場合は個別に書き込む必要あり

/*-----Header-----*/  ヘッダー部分の決定 トップ絵を変えたい場合は#bannerのところでファイルからアップした画像を選択しheightを画像のサイズに合わせる、weightは横いっぱいに使う場合は概ね画像の横サイズをあらかじめ780pxにしとけば無難

text-align:文字の位置(ブログのタイトル名→#banner 紹介文→#lead)

/*-----Content-----*/ メインカラム・サイドカラムの一括調整(余白など)

/* Links */
記事の上下部分のリンクの決定(前のページへ・次のページへなど)
.archive-title   記事の上部分
.archive-bottom 記事の下部分
.archive-name  記事の上下一括?
.previousLink  「前へ」のリンク
.nextLink     「次へ」のリンク
.archive-links  「ブログトップへ」のリンク

(記述例)上部分のリンクの表示をつねに白にしたい場合
.archive-title{
margin-bottom: 12px;
color: #cccccc;
}
【ここから下に、以下の内容を追加】
.archive-title a:link{
color: #FFFFFF;
text-decoration: none;
}

.archive-title a:visited{
color: #FFFFFF;
text-decoration: none;
}

.archive-title a:active{
color: #FFFFFF;
text-decoration: none;
}

a:hover{
color: #FFFFFF;
text-decoration: underline;
}
【追加項目、上記まで】

/* Articles */ 記事の部分(理解すれば結構いじれることが多いのかもしれない)
#main 記事全体の一括編集?
posted  投稿日時や共通テーマの部分の決定
あとは/* Links */と大体一緒なので割愛

/*-----Entry-----*/ nice コメント トラックバックなどの決定
entryh4 文字の大きさなどの一括編集らしい
entry 全体の余白などの調整、一括でリンクの文字色変えたい場合もここで

/*-----Side-----*/ サイドバーの決定
一括でやりたい場合はside bar sidebar-titleなどで編集
個別にやる場合は該当するところで編集

/*--RSS Regist--*/ RSSのところの編集・・・だと思うけどなぜかいじっても反映なし

/*--So-net--*/ Powered by So-netのところの決定、ただそれだけ

/*--Tag--*/ タグの決定、ただこれもよくわからず

/*-----Footer-----*/ 一番下の部分をいじりたいときはここで


画像などを差し替えたいとき
あらかじめ、そこのあわせた画像を用意してアップロード
あとはCSSの画像をかえたいところのbackground: url~と置き換える(ファイルで画像をクリック)
なお、複数の画像を使って切り替えたいときはno-repeatの記述を消す



とりあえず、現状で把握できたのはここまで
もう少し色々わかれば一からレイアウトを作ることができなくもない気がする
タグ:編集 CSS
nice!(1)  コメント(2)  トラックバック(0) 
共通テーマ:日記・雑感

nice! 1

コメント 2

ロング

レイアウト変更お疲れ様です。
私もブログのTOP画面に
ドーンと写真でも載せたいなー、なんて思っていたので
今回の記事はためになりました。
ただメンドクサガリーなので実行するかどうかは???ですけどw
時間があればチャレンジしてみたいと思います。
ではでは!(・ω・)ノシ
by ロング (2009-11-02 21:34) 

ROCK

>ロングさん
ナイスありがとうございます
トップ画面に写真を載せるとかなら結構簡単なんで、
少しCSSの仕組みを理解すればすぐできると思いますよ
細かいレイアウトなどについては自分はまださっぱりですが(汗)

あと、もし行われる場合はアドバイスと言ってはなんですが
・プレビューで少しずつ確認しながらやる
・最初にCSSの初期状態の記述一式コピーしておく
(レイアウトがおかしくなってどこをいじったらいいかわからない時は編集してた項目のCSSの記述を初期の文で上書きすればたいてい直ります)
・記述を追加したり変更してこまめに保存を
では、機会があればやってみてくださいな^^
by ROCK (2009-11-03 02:42) 

コメントを書く

お名前:
URL:
コメント:
画像認証:
下の画像に表示されている文字を入力してください。

トラックバック 0

この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。