さて、説明に入りますよ。といっても、あんまり説明する事は
無いんだけどね。ここ読むより、お手本サイトの
FC2ブログstyleさんのところの、ゼロから創るテンプレートを
しっかり読むほうが分かるですよ。ほんとに。
まぁ丸投げするわけにもいかないんで（ノ∀｀*）
前回何を抜かしてたかというと（自己完結してた部分）、領域
ごと移動させれば大丈夫やんなっ！ってことでスタイルシート
部分の変更をしてなかったのね。
興味のある人は是非やってみて頂戴ね。HTML部分だけ移動
すると、妙にごつく見えてしまう。というのは「カテゴリ」の部分
を左に移動するだけでは不十分。スタイルシートの部分にその
書式や在り様を記述しているので、それが無いと文字の大きさ
や位置が自動的に設置されてしまう。
HTMLの方でカット＆ペーストしたのは表示している部分。これ
は普段意識して書いてる人はあんまりいないと思う。この記事
の本体も、HTMLで記述している所と同じような物。それを意識
して書いてる人はいるかなぁ？
話がそれそうやね（´・ω・）
「カテゴリ」をブログ上に表示するのがHTML側の仕事で、その
書き方や表示のルールを決めてるのがスタイルシート。
一つのかたまり → 二つのかたまりに訂正したのは、最初の
一つ目ので事足りると思ってたんだけど、HTML側をよく見ると
<ul>というのに囲まれている。これのルールが適用されている
事に気付いたので訂正。まぁ実際試さず記事にしたんで無責任
極まりないんですが（ノ∀｀*） すみません（´・ω・）
切り出し → コピーして編集にしたのは、当然切り取っちゃうと
切り取っちゃった方の記事がルール無しになるから。いい加減
な人で御免なさい（´・ω・）
スタイルシートの方の rmenu → lmenu への変更はここまで
読んでくれてたらなんとなく分かると思うけど、rmenu中の記述
h3・ulのルールという別の扱いだから。
変な記述したら適用されるのかどうかは・・・あんまり意味が無い
からやりません。興味ある人はしてみてね。
「どんな変な記述なの？」って人は深く考えないように＾＾；
「振り逃げか！」うん！ごめん！（ノ∀｀*）
・・・思ったより長くなったなぁ・・・。さてそろそろ3カラム化事態に
これ以上説明する事は無くなってきたので（実際に3カラムには
出来たし）、今度はプラグインの対応のさせ方を・・・。
っつーか、実はこれが一番悩んだのさっ！（ノдT）
ブログ作りの話は2日ほどお休みしま〜っす（ノ∀｀*）
たまには本来のネタもやりたいがな（´・ω・）
以下駄文が少々・・・今日はここまで＝ｗ＝
無いんだけどね。ここ読むより、お手本サイトの
FC2ブログstyleさんのところの、ゼロから創るテンプレートを
しっかり読むほうが分かるですよ。ほんとに。
まぁ丸投げするわけにもいかないんで（ノ∀｀*）
前回何を抜かしてたかというと（自己完結してた部分）、領域
ごと移動させれば大丈夫やんなっ！ってことでスタイルシート
部分の変更をしてなかったのね。
興味のある人は是非やってみて頂戴ね。HTML部分だけ移動
すると、妙にごつく見えてしまう。というのは「カテゴリ」の部分
を左に移動するだけでは不十分。スタイルシートの部分にその
書式や在り様を記述しているので、それが無いと文字の大きさ
や位置が自動的に設置されてしまう。
HTMLの方でカット＆ペーストしたのは表示している部分。これ
は普段意識して書いてる人はあんまりいないと思う。この記事
の本体も、HTMLで記述している所と同じような物。それを意識
して書いてる人はいるかなぁ？
話がそれそうやね（´・ω・）
「カテゴリ」をブログ上に表示するのがHTML側の仕事で、その
書き方や表示のルールを決めてるのがスタイルシート。
一つ目ので事足りると思ってたんだけど、HTML側をよく見ると
<ul>というのに囲まれている。これのルールが適用されている
事に気付いたので訂正。まぁ実際試さず記事にしたんで無責任
極まりないんですが（ノ∀｀*） すみません（´・ω・）
切り取っちゃった方の記事がルール無しになるから。いい加減
な人で御免なさい（´・ω・）
スタイルシートの方の rmenu → lmenu への変更はここまで
読んでくれてたらなんとなく分かると思うけど、rmenu中の記述
h3・ulのルールという別の扱いだから。
変な記述したら適用されるのかどうかは・・・あんまり意味が無い
からやりません。興味ある人はしてみてね。
「どんな変な記述なの？」って人は深く考えないように＾＾；
「振り逃げか！」うん！ごめん！（ノ∀｀*）
・・・思ったより長くなったなぁ・・・。さてそろそろ3カラム化事態に
これ以上説明する事は無くなってきたので（実際に3カラムには
出来たし）、今度はプラグインの対応のさせ方を・・・。
っつーか、実はこれが一番悩んだのさっ！（ノдT）
ブログ作りの話は2日ほどお休みしま〜っす（ノ∀｀*）
たまには本来のネタもやりたいがな（´・ω・）
以下駄文が少々・・・今日はここまで＝ｗ＝
昨日ってか、ついさっき上げた記事は、急いで書いたから
かなり訂正する所があった。今の今なので、そんなにそれ
を参考にして、速攻作っちゃった人はいないと思うけど、
一応。すいませんでした（´・ω・）
細かい記述をしっかり把握してるわけじゃないので、失敗
を見つけたら理解する、言わば百聞より失敗で理解する人
なんですよ（´・ω・）
まぁ間違ったら正せば良い所じゃないと不適切素材になる
訳でorz
今日（もう日付変わったし）は・・・どうしよか。元気が
あれば記述の説明などしてみますよ。なければ明日で。
かこわるー（´・ω・）
かなり訂正する所があった。今の今なので、そんなにそれ
を参考にして、速攻作っちゃった人はいないと思うけど、
一応。すいませんでした（´・ω・）
細かい記述をしっかり把握してるわけじゃないので、失敗
を見つけたら理解する、言わば百聞より失敗で理解する人
なんですよ（´・ω・）
まぁ間違ったら正せば良い所じゃないと不適切素材になる
訳でorz
今日（もう日付変わったし）は・・・どうしよか。元気が
あれば記述の説明などしてみますよ。なければ明日で。
かこわるー（´・ω・）
テーマ:プログはじめました☆ - ジャンル:ブログ
今うちのブログを見てるような人はFC2繋がりか、たまたま
今やってるテンプレート作ってみるかの〜って特集か、その
どっちかだと思うのね。んで、テンプレ作ってみよーかな？
と思ってる人は、ここでやってる事を、一応素直にまねして
打ち込んでると思うから、そういう前提で話進めるね。
・・・まねもせずただ読んでるだけの人は分かるんやろか？
まぁえっか（ノ∀｀*）
さて、前回までで領域を確保する事は出来た！って感じなの
はいいかな。何も書いて無いスペースが出てきたって所ね。
何も無いのは記述して無いから。とはいえ、右の領域には、
大まかな必要事項は全てそろえられている。テンプレートを
直接いじった事のある人で、そこそこ記述も理解して作れる
人はともかく、まるでわかんないから見てると思うのね。
参考にさせて頂いた人のブログには色々詳しい説明も載って
るんだけど、やっぱ一から〜だとちょっとね＾＾；
んで、新しく記述を増やすよりは、今ある資源を再利用して
見ればどうかなって事で、右に記述してある項目を左に移動
してみようって話ね。
話が決まったら移動するものを選びましょ。選ぶったって、
実験なのでえり好みする必要は無い。一番上にあるものを、
左に移してみよう。
（ここから一部訂正を含んでいます。訂正前の記事を
読んだ人には申し訳ないが、訂正した方で進めてね）
HTMLの記述から rmenu を探し出し、すぐしたの
<h3>カテゴリ</h3>
<ul>
<!--category-->
<li><a href="<%category_link>" title="<%category_name>"><%category_name></a>
(<%category_count>)</li>
<!--/category-->
</ul>
と言う部分を切り取り、前に作った lmenu div /div の間にセット
してみよう。
<div id = "lmenu">
<h3>カテゴリ</h3>
<ul>
<!--category-->
<li><a href="<%category_link>" title="<%category_name>"><%category_name></a>
(<%category_count>)</li>
<!--/category-->
</ul>
</div>
こんな感じで。そしてスタイルシートからも rmenu すぐ下の
ひとかたまりかたまりを二つ
#rmenu h3 {
font-size: 100%;
font-weight: bold;
color: #000;
border:1px solid #999999;
text-align : left;
padding: 6px 0px 6px 0px;
background: #ffffff;
}
#rmenu ul {
font-size: 80%;
line-height: 160%;
padding: 3px 0px 0px 0px;
margin: 0px;
}
を切り出し、切り出すんじゃなくコピーして少し変えて lmenu
の下に
#lmenu h3 {
font-size: 100%;
font-weight: bold;
color: #000;
border:1px solid #999999;
text-align : left;
padding: 6px 0px 6px 0px;
background: #ffffff;
}
#lmenu ul {
font-size: 80%;
line-height: 160%;
padding: 3px 0px 0px 0px;
margin: 0px;
}
を追加してあげよう。それぞれ最初の #rmenu の記述を
#lmenu にするだけ。
さぁためしてみてね。今日はここまで（ノ∀｀*）
今やってるテンプレート作ってみるかの〜って特集か、その
どっちかだと思うのね。んで、テンプレ作ってみよーかな？
と思ってる人は、ここでやってる事を、一応素直にまねして
打ち込んでると思うから、そういう前提で話進めるね。
・・・まねもせずただ読んでるだけの人は分かるんやろか？
まぁえっか（ノ∀｀*）
さて、前回までで領域を確保する事は出来た！って感じなの
はいいかな。何も書いて無いスペースが出てきたって所ね。
何も無いのは記述して無いから。とはいえ、右の領域には、
大まかな必要事項は全てそろえられている。テンプレートを
直接いじった事のある人で、そこそこ記述も理解して作れる
人はともかく、まるでわかんないから見てると思うのね。
参考にさせて頂いた人のブログには色々詳しい説明も載って
るんだけど、やっぱ一から〜だとちょっとね＾＾；
んで、新しく記述を増やすよりは、今ある資源を再利用して
見ればどうかなって事で、右に記述してある項目を左に移動
してみようって話ね。
話が決まったら移動するものを選びましょ。選ぶったって、
実験なのでえり好みする必要は無い。一番上にあるものを、
左に移してみよう。
（ここから一部訂正を含んでいます。訂正前の記事を
読んだ人には申し訳ないが、訂正した方で進めてね）
HTMLの記述から rmenu を探し出し、すぐしたの
<h3>カテゴリ</h3>
<ul>
<!--category-->
<li><a href="<%category_link>" title="<%category_name>"><%category_name></a>
(<%category_count>)</li>
<!--/category-->
</ul>
と言う部分を切り取り、前に作った lmenu div /div の間にセット
してみよう。
<div id = "lmenu">
<h3>カテゴリ</h3>
<ul>
<!--category-->
<li><a href="<%category_link>" title="<%category_name>"><%category_name></a>
(<%category_count>)</li>
<!--/category-->
</ul>
</div>
こんな感じで。そしてスタイルシートからも rmenu すぐ下の
#rmenu h3 {
font-size: 100%;
font-weight: bold;
color: #000;
border:1px solid #999999;
text-align : left;
padding: 6px 0px 6px 0px;
background: #ffffff;
}
#rmenu ul {
font-size: 80%;
line-height: 160%;
padding: 3px 0px 0px 0px;
margin: 0px;
}
の下に
#lmenu h3 {
font-size: 100%;
font-weight: bold;
color: #000;
border:1px solid #999999;
text-align : left;
padding: 6px 0px 6px 0px;
background: #ffffff;
}
#lmenu ul {
font-size: 80%;
line-height: 160%;
padding: 3px 0px 0px 0px;
margin: 0px;
}
を追加してあげよう。それぞれ最初の #rmenu の記述を
#lmenu にするだけ。
さぁためしてみてね。今日はここまで（ノ∀｀*）
テーマ:プログはじめました☆ - ジャンル:ブログ
Σ（´□｀；） ﾅﾝﾃｺｯﾀｲ
orz ･･･ｴﾗｲｺｯﾁｬ
2日前の記事、プレビュー見ずに作ったから大問題を放置して
上げちゃったやんか（´・ω・）
・・・まぁそれだけ誰にも突っ込まれない程度に注目されて
無いって事だけどね（ノ∀｀*）
まぁ別にいいさ（´・ω・） 趣味やから。
それでもね。一応直しときましたよ、と。誰に褒められる訳
でなし（ノ∀｀*）
昨日できなかったことだけど、これ
#lmenu {
width: 18%;
float: left;
overflow: hidden;
margin: 0px 0px 0px 5px;
background: #ffffff;
}
中身ね。width （ウィドスとかウィドゥスとか好きなように
読んでくれい）は幅を意味してる。なので割合を多くすれば
幅が広がる。まぁ３カラムにする人は、横のスペースに広告
なんかを入れる事が多いと思うので、広告のスペースにあう
ようにするといいかもねっ。その場合、ブラウザの表示域が
小さいと、表示できなくて潰れちゃったりするかもしれない
ので（記事の下に広告欄が潜って、見て欲しい広告がまるで
見てもらえないなんて事も）、その場合は％でなくて、pxで
大きさを絶対していっちゅーのかな？するといい。広告の幅
に合わせると幸せになれるかも(広告より２程大きくすると
両端のスペースを1ずつ取れてぴちぴちにならないかも)。
float left はまぁ見てのまんまで左側へって事。ALL領域内
の左側に配置しましょって事やね。
overflow: hidden; は、もし大きさがあふれたらどないすん
ねんって動作を示しててって、これ説明してくれてるお手本
サイトの詳しい説明を見てもらう方が良いな。潜りこませる
っていうか、はみ出た部分を隠してる仕様。つまり記事の下
の方に潜り込んでる状態ね。領域ごとはるか下にいってしま
わないようにね。
margin: 0px 0px 0px 5px; これは上・下・左・右に幅取り
ましょって記述。左に取ってるのは、ぴっちぴちにならない
ようにだね。
background: #ffffff; は背景色。別の色を作っても良い。
色なんてわっかんねえよっつー人は、ブログ書く時に、上に
「文字に色をつける」っつーツールを利用して、好みの色に
マウスカーソルあわせたときに出る変数を覚えて、#ffffff
の所に代入してやれば良い。
・・・え？この中のどれをどういじくっても空白又は背景色
付いた空白だけしか出てこないって？いやだってそれはまだ
次のお話であって（ノ∀｀*）
って事で今日はここまで＝ｗ＝
・・・後は今日見たテレビ（ノ∀｀*）
orz ･･･ｴﾗｲｺｯﾁｬ
2日前の記事、プレビュー見ずに作ったから大問題を放置して
上げちゃったやんか（´・ω・）
・・・まぁそれだけ誰にも突っ込まれない程度に注目されて
無いって事だけどね（ノ∀｀*）
まぁ別にいいさ（´・ω・） 趣味やから。
それでもね。一応直しときましたよ、と。誰に褒められる訳
でなし（ノ∀｀*）
昨日できなかったことだけど、これ
#lmenu {
width: 18%;
float: left;
overflow: hidden;
margin: 0px 0px 0px 5px;
background: #ffffff;
}
中身ね。width （ウィドスとかウィドゥスとか好きなように
読んでくれい）は幅を意味してる。なので割合を多くすれば
幅が広がる。まぁ３カラムにする人は、横のスペースに広告
なんかを入れる事が多いと思うので、広告のスペースにあう
ようにするといいかもねっ。その場合、ブラウザの表示域が
小さいと、表示できなくて潰れちゃったりするかもしれない
ので（記事の下に広告欄が潜って、見て欲しい広告がまるで
見てもらえないなんて事も）、その場合は％でなくて、pxで
大きさを絶対していっちゅーのかな？するといい。広告の幅
に合わせると幸せになれるかも(広告より２程大きくすると
両端のスペースを1ずつ取れてぴちぴちにならないかも)。
float left はまぁ見てのまんまで左側へって事。ALL領域内
の左側に配置しましょって事やね。
overflow: hidden; は、もし大きさがあふれたらどないすん
ねんって動作を示しててって、これ説明してくれてるお手本
サイトの詳しい説明を見てもらう方が良いな。潜りこませる
っていうか、はみ出た部分を隠してる仕様。つまり記事の下
の方に潜り込んでる状態ね。領域ごとはるか下にいってしま
わないようにね。
margin: 0px 0px 0px 5px; これは上・下・左・右に幅取り
ましょって記述。左に取ってるのは、ぴっちぴちにならない
ようにだね。
background: #ffffff; は背景色。別の色を作っても良い。
色なんてわっかんねえよっつー人は、ブログ書く時に、上に
「文字に色をつける」っつーツールを利用して、好みの色に
マウスカーソルあわせたときに出る変数を覚えて、#ffffff
の所に代入してやれば良い。
・・・え？この中のどれをどういじくっても空白又は背景色
付いた空白だけしか出てこないって？いやだってそれはまだ
次のお話であって（ノ∀｀*）
って事で今日はここまで＝ｗ＝
・・・後は今日見たテレビ（ノ∀｀*）
