CSS中に出てくる位置を示す単語の説明。
まずは「header」
これはわかりやすいよね。文字通り頭の部分。ブログのタイトルや概要がある部分。画像がある部分ね。
次に「wrap」
これはheaderを除いた下全部。
「main」と「sub_a」と「sub_b」
wrapを3つに分けたものって感じかな。日付やタイトルを含めた記事が書かれている部分がmain（このスキンで言うと真ん中の列）。その両脇にあるのがsub_aとsub_b。大抵aの方が左かな。スキンにもよるだろうけど。
そしてこれら全てを含むのが「frame」と「subFrame」
これらの違いはまだよくわかんない。どう違うんだろ。
で、↓の記事の、header画像の透過重複のやり方だけど、これ、今までうまく出来なかった原因は単純にsub_aとsub_bの背景色を指定してたから。設定なしだと透明になるらしい。ただそれだけだった(´・ω・｀)。
んで画像はheaderじゃなくて、subFrameの方に置くみたい。header側でも普通に出来るのかもだけど、そういうスキンのCSSを参考にしたらsubFrameの方に指定してた。
それと各menuのtitleの消し方。これもそういうスキンのCSS参考にしたんだけど、思わず笑ってしまった(笑) やり方は簡単。位置をおもっきり遠くにするだけ(*´Д`*)ただそれだけ。僕が見たスキンのはtext-indentを-10000pxに設定してた。そりゃ表示されないわなぁと(笑)
こんな感じで知識がどんどん増えてってる。でもまだまだぁー。
まずは「header」
これはわかりやすいよね。文字通り頭の部分。ブログのタイトルや概要がある部分。画像がある部分ね。
次に「wrap」
これはheaderを除いた下全部。
「main」と「sub_a」と「sub_b」
wrapを3つに分けたものって感じかな。日付やタイトルを含めた記事が書かれている部分がmain（このスキンで言うと真ん中の列）。その両脇にあるのがsub_aとsub_b。大抵aの方が左かな。スキンにもよるだろうけど。
そしてこれら全てを含むのが「frame」と「subFrame」
これらの違いはまだよくわかんない。どう違うんだろ。
で、↓の記事の、header画像の透過重複のやり方だけど、これ、今までうまく出来なかった原因は単純にsub_aとsub_bの背景色を指定してたから。設定なしだと透明になるらしい。ただそれだけだった(´・ω・｀)。
んで画像はheaderじゃなくて、subFrameの方に置くみたい。header側でも普通に出来るのかもだけど、そういうスキンのCSSを参考にしたらsubFrameの方に指定してた。
それと各menuのtitleの消し方。これもそういうスキンのCSS参考にしたんだけど、思わず笑ってしまった(笑) やり方は簡単。位置をおもっきり遠くにするだけ(*´Д`*)ただそれだけ。僕が見たスキンのはtext-indentを-10000pxに設定してた。そりゃ表示されないわなぁと(笑)
こんな感じで知識がどんどん増えてってる。でもまだまだぁー。
実際のお話。
-----------------------------------------------------
ameblo CSS Skin Settings
FileName: common.css
Version: 2005.08/08
Skin for: all_skin
-----------------------------------------------------
ここに「.entry.contents」ってのがあると思う。僕は↓こんな風に設定してる。
.entry .contents{
line-height:1.5;
padding-top:10px;
padding-left:10px;
padding-right:5px;
padding-bottom:10px;
border: 5px groove #029696;
background-color: #fafffa;
color: #666666;
}
line-heightとpaddingとborderは過去記事参照。問題はgroove。
これはこのスキンの記事部分を囲ってる線のスタイル。少し立体感があるよね。これがこのgroove。実線はsolid。点線はdashed。他にもいくつかある。
この「.entry .contents」は、記事中の「date」や「title」を除く部分のスタイル指定だ。スキンによっては下の方で設定してるのもあるだろうけど、それらを全部消して一番上のここに全部まとめておくのが便利だと思う。後々から変更しやすい。
あと、もうちょっと下の方にある「font-infomation」の「body」っていう部分で文字の大きさを設定する。ただしこれはコメントの字の大きさにも影響する。基本的に記事の字の大きさに比べて、コメントのはいくらか小さめに設定されてるみたい。僕は11pxに設定してある。おなじ設定なのに、コメントの字はちっこいよね。
-----------------------------------------------------
ameblo CSS Skin Settings
FileName: common.css
Version: 2005.08/08
Skin for: all_skin
-----------------------------------------------------
ここに「.entry.contents」ってのがあると思う。僕は↓こんな風に設定してる。
.entry .contents{
line-height:1.5;
padding-top:10px;
padding-left:10px;
padding-right:5px;
padding-bottom:10px;
border: 5px groove #029696;
background-color: #fafffa;
color: #666666;
}
line-heightとpaddingとborderは過去記事参照。問題はgroove。
これはこのスキンの記事部分を囲ってる線のスタイル。少し立体感があるよね。これがこのgroove。実線はsolid。点線はdashed。他にもいくつかある。
この「.entry .contents」は、記事中の「date」や「title」を除く部分のスタイル指定だ。スキンによっては下の方で設定してるのもあるだろうけど、それらを全部消して一番上のここに全部まとめておくのが便利だと思う。後々から変更しやすい。
あと、もうちょっと下の方にある「font-infomation」の「body」っていう部分で文字の大きさを設定する。ただしこれはコメントの字の大きさにも影響する。基本的に記事の字の大きさに比べて、コメントのはいくらか小さめに設定されてるみたい。僕は11pxに設定してある。おなじ設定なのに、コメントの字はちっこいよね。
今日、また新しくわかったことがある。
それはheader画像と、subフレームとの透過重複。
今まではどうしてもフレームが画像を上書きしちゃって重なる部分が消えてたんだけど、ちょっとしたことでそれが解消できた。すごく単純なことだった。でもまたひとつ知識が増えた。なるほどねーって感じ。それと各menuのタイトル。これの消し方もわかった。なるほどねーって感じ。これもすごく単純な方法。
これでようやく次のスキンの目処が立ちそう。なんとなく構想は頭の中で固まりつつある。ムフフー。
それはheader画像と、subフレームとの透過重複。
今まではどうしてもフレームが画像を上書きしちゃって重なる部分が消えてたんだけど、ちょっとしたことでそれが解消できた。すごく単純なことだった。でもまたひとつ知識が増えた。なるほどねーって感じ。それと各menuのタイトル。これの消し方もわかった。なるほどねーって感じ。これもすごく単純な方法。
これでようやく次のスキンの目処が立ちそう。なんとなく構想は頭の中で固まりつつある。ムフフー。
ちょっと恥ずかしい話。
ごく最近まで、CSSによる文字色、大きさの変更の仕方を知らなかった。というか気づかなかった。なんでかと言うと、記事を書く時に毎回タグで設定してたから。
CSSよりも、記事のタグの方が優先されるらしい。CSSの勉強方法が「ひたすらいじりまくって、その変化を見る」という方法だったせいで、本来変わるはずの部分をいじっても見た目が変化することはなかった。なので今まで気づかなかった。
原因がわかったので、今は過去記事の編集作業に追われてる。タグをひたすら消去しまくるのだ。タグを消しても、今はCSSでちゃんと文字のスタイル を設定してるので見た目に変化はない。
だいたい半分くらいは済んだかな。次のスキンは記事部分の背景色を初めて白系以外にしようと思ってるのでそれまでには作業を終わらせておきたい。
ごく最近まで、CSSによる文字色、大きさの変更の仕方を知らなかった。というか気づかなかった。なんでかと言うと、記事を書く時に毎回タグで設定してたから。
CSSよりも、記事のタグの方が優先されるらしい。CSSの勉強方法が「ひたすらいじりまくって、その変化を見る」という方法だったせいで、本来変わるはずの部分をいじっても見た目が変化することはなかった。なので今まで気づかなかった。
原因がわかったので、今は過去記事の編集作業に追われてる。タグをひたすら消去しまくるのだ。タグを消しても、今はCSSでちゃんと文字のスタイル を設定してるので見た目に変化はない。
だいたい半分くらいは済んだかな。次のスキンは記事部分の背景色を初めて白系以外にしようと思ってるのでそれまでには作業を終わらせておきたい。
凧さんへ。
『記事を横いっぱいに伸ばす方法』を以下に記します。
まず、CSSの下の方にある
-------------------------------------
ameblo CSS Skin Layout Settings
FileName: type_c.css
Version: 2005.04.04
-------------------------------------
という場所の中に、
#main{
width: 530px;
float: left;
padding-left: 10px;
}
#frame {
width: 900px;
margin-left: auto;
margin-right: auto;
}
こんな部分があると思います。
『#main』は記事部分のこと。
『#frame』はheaderとsub_a、sub_bを含めた部分、つまり記事部分以外のことを指しています。
まずは #frame の width を変更してみて下さい。
そしてその後、#main の width を変更してみて下さい。
全体が横に伸び、さらに真ん中の記事部分も横に伸びてるはずです。
経験上、上のCSS文章はどのスキンにもあると思うので大丈夫だとは思いますが、もしなければこのまんま追加しちゃって結構です。問題なく認識してくれるはずです。
ではでは、ご感想聞かせて下さいね☆
『記事を横いっぱいに伸ばす方法』を以下に記します。
まず、CSSの下の方にある
-------------------------------------
ameblo CSS Skin Layout Settings
FileName: type_c.css
Version: 2005.04.04
-------------------------------------
という場所の中に、
#main{
width: 530px;
float: left;
padding-left: 10px;
}
#frame {
width: 900px;
margin-left: auto;
margin-right: auto;
}
こんな部分があると思います。
『#main』は記事部分のこと。
『#frame』はheaderとsub_a、sub_bを含めた部分、つまり記事部分以外のことを指しています。
まずは #frame の width を変更してみて下さい。
そしてその後、#main の width を変更してみて下さい。
全体が横に伸び、さらに真ん中の記事部分も横に伸びてるはずです。
経験上、上のCSS文章はどのスキンにもあると思うので大丈夫だとは思いますが、もしなければこのまんま追加しちゃって結構です。問題なく認識してくれるはずです。
ではでは、ご感想聞かせて下さいね☆
４月用のスキン、ひと段落つきました。
とりあえず完成です。まだ微調整入るかもですが。
なのでスキンを元に戻しておきます。
スキン、完成してしまうと、表へ出すのが待ち遠しくてダメですね(笑)
少しの間我慢です☆
とりあえず完成です。まだ微調整入るかもですが。
なのでスキンを元に戻しておきます。
スキン、完成してしまうと、表へ出すのが待ち遠しくてダメですね(笑)
少しの間我慢です☆
早くもheaderが完成してしまいました(笑)
今回も既存スキンの画像を加工したものです。元画像↑
まず色調反転し、空部分を赤く塗り、木と空の境界は手書きです。エッヂ抽出などいろいろ手法はあるんでしょうが、手書きの方がいろいろと変えられるのでこっちにしました。
ちなみに右斜面部分も、画像自体を５度回転させ、元に貼り付けて傾斜を緩くしています。案外キレイに出来たのでよかったです♪
木のシャドー部分はレイヤーのクローンを作って透過率を５０％にし、上にズラすことで実現しています。これも思ったよりキレイキレイ♪
まだ次のスキン変更まで日があるので、さらにいろいろと手を加えていこうと思っています。