Movable Type 備忘録

 テンプレート MT.4 for Movable Type 4

こんばんわ^^

Movable Type 4 テンプレート 今日は台風が近づいてたため、ずっと引き篭もってました (;￣∇￣A
掃除や衣類の整理したり、お昼寝や友達と電話、ねこタンと遊んだりなど、久しぶりにまったりとした 1 日を過ごした bzbell です。
今ではすっかり台風一過、ところどころ雲の合間から空が見え隠れしてます。

明日はすっかりいい天気だといいな (●´∀｀●)

さて、テンプレート作ったので公開します。 1 ヶ月ぶりくらいになるかな、テンプレートを公開するのは。

今回は無機質な金属の色で作ってみました。

わたしの目は色素が薄いみたいで、目が疲れやすいんだそうです。
目の色に限らず髪の色から肌の色、全体的に色素が薄いかんじで、もう少しがんばったら透明人間になれるかも!! なんて言われたこともありました (●＞∀＜●) てへ

そのせいか、あまり際立つ色を使いません。なるべく全体と馴染むような色を調整しながら作ってます。なので、出来上がったときにはだいたいが地味ぃ～なテンプレートになってます (;￣∇￣A はは
フリー素材の写真とかイラスト使えばもっとラブリーなのが作れそうだけどね。

良かったら使ってください♪

- 2007.11.03 -
以下の不具合を対応しました。

  • Firefox において、リンク URL にアンカー指定(たとえば、http://●●●.com/page.html#more)した場合、ページ全体がアンカーの位置分上位にズレてしまう。
  • Opera 9.2 において、サイドバー右端に余白ができてしまう。

こちらのページを参考に実験的にやってみたらできちゃったので、『へぇ～こんな方法もあるんだ』と、一通り確認もせず楽観的にリリースしてしまったのが間違いでした。
上記ページの方法は使用しないで、オーソドックスなスタイルに戻しましたので、Opera 9.2 の方もいっしょに直りました。

- 2007.10.29 -
ウェブページ用のコンテナ・テンプレート(ウェブコンテナ)内に、わたしのサイトのナビバーがそのまま残ってしまっていました。すいません。

こちらのテンプレート一時配布をやめます。
Firefox で【 READ MORE】のリンクでページ移動すると、なぜか、全体的に位置が上の方にズレる現象がありました。また、Opera 9.2 ではサイドバーの位置が左にズレる現象も見つかりましたので。
後日改めて配布いたします (m;_ _)mペコ

テンプレートのダウンロード

テンプレート MT.4 for Movable Type 4

テンプレートの設置

Movable Type 4 テンプレート設置のためのファイルを用意しました。
以下のマニュアルをお読みください。ファイル形式は PDF です。
Movable Type4テンプレート設置マニュアル

サイドバーの幅変更

Movable Type 4 サイドバー

左図で示すように、デフォルトのサイドバーの幅は 332px です。
332px とは、センターサイドバー幅(=312px) + サイドバーの左右パディング(=10px × 2)を計算した値です。

また、センターサイドバー(=312px) は、左サイドバー幅(=156px) + 右サイドバー幅(=156px) + 左右サイドバーのマージン(=10px) を計算した値となっています。

スタイルシートでいうと base_theme.css 内の以下の場所を変更することになります。

  1. スタイルシート(ベーステーマ)を変更

    base_theme.css / 2 カラム用

    1. body.layout-wt #alpha-inner {
    2.     margin: 0 322px 0 0;
    3.     padding: 10px;
    4.     height: 100%;
    5. }
    6. body.layout-wt #sidebar {
    7.     margin-left: -312px;
    8.     padding-top: 10px;
    9.     float: left;
    10. }
    11. body.layout-wt #sidebar div.omega,
    12. body.layout-wt #beta,
    13. body.layout-wt #gamma {
    14.     width: 312px;
    15.     text-align: left;
    16. }

    上記は 2 カラム用のスタイルを抜粋したものです。
    青い字の部分には、サイドバー幅を指定します。
    そして、緑の字の部分には青い字の幅と同サイズを指定します。

    さらに赤い字の部分には緑の字の幅 + 10px のサイズを指定します。

    base_theme.css / 3 カラム用

    1. body.layout-wtt #alpha-inner {
    2.     margin: 0 322px 0 0;
    3.     padding: 10px;
    4.     height: 100%;
    5. }
    6. body.layout-wtt #sidebar {
    7.     margin-left: -312px;
    8.     padding-top: 10px;
    9.     float: left;
    10. }
    11. body.layout-wtt #sidebar div.omega {
    12.     width: 312px;
    13.     text-align: left;
    14.     clear: both;
    15. }
    16. body.layout-wtt #beta,
    17. body.layout-wtt #gamma {
    18.     width: 156px;
    19.     float: left;
    20.     text-align: left;
    21. }

    上記は 3 カラム用のスタイルを抜粋したものです。
    青い字の部分には、左右サイドバー幅を指定します。
    そして、緑の字の部分には青い字の幅 × 2 のサイズを指定します。

    さらに赤い字の部分には緑の字の幅 + 10px のサイズを指定します。

  2. スタイルシート(テーマ別)を変更

    stingray.css

    1. body.layout-wt #alpha-inner,
    2. body.layout-wtt #alpha-inner {
    3.     margin-right: 332px;
    4.     border-right: 1px solid #aaa;
    5.     background-color: #eae8e1;
    6. }
    7. body.layout-wt #sidebar,
    8. body.layout-wtt #sidebar {
    9.     margin-left: -332px;
    10.     background: #0b0b0b url(site-sidebar.gif) repeat-x top left;
    11. }

    上記はテーマ固有のレイアウトに関するスタイルを抜粋したものです。
    青い字の部分には base_theme.css の #sidebar の幅(=312px)＋パディング(=10px)×2 を指定します。
    そして、赤い字の部分には青い字の幅と同サイズを指定してください。

また、サイドバー幅変更(デフォルトより小さくした場合)に伴って以下のウィジェットが影響されます。

  • カレンダー幅
  • 最近のコメント／トラックバックツリー

カレンダーの幅はギリギリの幅になってますので、156px 以下の幅にした場合、

  • フォントサイズを小さくする
  • 各日付の幅を可能な限り小さくする
  • カレンダー表示をやめる

の、いずれかで対応することになるかと思います。
カレンダーのスタイルは stingray.css 内の 1036 行目あたりで定義してます。

次に、最近のコメント／トラックバックツリーです。
最近のコメント／トラックバックツリーでは横幅指定はありません。 その代わり、各エントリのタイトルの表示文字数を指定することでキレイに表示させることができます。

具体的には dtree.posts.js にて、エントリタイトルの表示文字数を変更します。
'trimj_to' というキーワードで検索すると、3 箇所で表示文字数を指定しています。

デフォルトでは最大 34( or 24) 文字(半角文字)となってます。
それ以降は '･･･' という文字に変換されます。

JavaScript に関しては、各自のお好みで調整してちょうどいい文字数を指定してあげてください。

ちなみに、わたしのサイトのサイドバー幅は、ブログパーツの関係上以下のようなサイズになってます。

base_theme.css

  1. body.layout-wt #alpha-inner {
  2.     margin: 0 346px 0 0;
  3. }
  4. body.layout-wt #sidebar {
  5.     margin-left: -312px;
  6. }
  7. body.layout-wt #sidebar div.omega,
  8. body.layout-wt #beta,
  9. body.layout-wt #gamma {
  10.     width: 312px;
  11. }
  12.  
  13. body.layout-wtt #alpha-inner {
  14.     margin: 0 346px 0 0;
  15. }
  16. body.layout-wtt #sidebar {
  17.     margin-left: -336px;
  18. }
  19. body.layout-wtt #sidebar div.omega {
  20.     width: 336px;
  21. }
  22. body.layout-wtt #beta,
  23. body.layout-wtt #gamma {
  24.     width: 168px;
  25. }

上記は base_theme.css です。
そして、stingray.css は以下のようになります。

stingray.css

  1. body.layout-wt #alpha-inner,
  2. body.layout-wtt #alpha-inner {
  3.     margin-right: 356px;
  4. }
  5.  
  6. body.layout-wt #sidebar,
  7. body.layout-wtt #sidebar {
  8.     margin-left: -356px;
  9. }

本文の高さがサイドバーの高さより短い場合

Movable Type 4 テンプレート

右図のように本文(コンテンツ)の高さがサイドバーの高さより長い場合、本文(コンテンツ)とサイドバーの背景はキレイに表示されます。
実は本文(コンテンツ)の高さ － サイドバーの高さの差分はコンテナの背景が見えています。

コンテナの背景とサイドバーの背景を同じにすることで、視覚的に本文(コンテンツ)の背景とサイドバーの背景をくっきり分かれて表示されてるように見えています。

ですが、本文(コンテンツ)の高さがサイドバーの高さより短くなった場合、右図のようにサイドバーの高さ － 本文(コンテンツ)の高さの差分にコンテナの背景が見えてしまうことになります。
CSS では異なるブロックの高さを揃えることはできません。その対策の 1 つとしてCSS Happy Life さんのとこで紹介されてた ブロックレベル要素の高さを揃える を実験的にやってみたわけです (￣∇￣)b

Movable Type 4 テンプレート

でも、ブロックレベル要素の高さを揃える方法だと不都合が生じてしまって、抜本的な対策が見つからなかったので今使用していません。
なので、上記で説明したような現象が発生してしまいます。

ここでは、そのような現象が気に入らない!! って人のためにスタイルシートの修正および、サイドバー用のイメージを作成することで対応する方法を記します。

  1. サイドバーの長さに合わせて以下のイメージの長さを加工します。

    上記イメージファイルをダウンロードして、イメージの長さをお好みのサイドバーの長さにカットしてください。
    たとえば、デフォルトのサイドバーの長さは 332px なので、イメージの長さも 332px にカットします。

    カットしたら保存して、他のイメージファイルのアップロード先と同じ場所にアップロードしてください。

  2. 次に以下のように stingray.css を変更します。

    stingray.css

    1. body.layout-wt #container-inner,
    2. body.layout-wtt #container-inner {
    3.     position: relative;
    4. background: #eae8e1 url(content-body.gif) repeat-y top right;
    5.     border-left: 1px solid #aaa;
    6.     border-right: 1px solid #aaa;
    7. }

    青い字の部分を変更しています。
    もう 1 箇所、以下のように修正します。

    stingray.css

    1. #header {
    2.     width: 100%;
    3.     float: left;
    4.     text-align: left;
    5. background: #3b3b3b url(site-container.gif) repeat-x top left;
    6. }

    赤い字の部分を追加します。

以上で本文(コンテンツ)の高さがサイドバーの高さより短くっても長くってもキレイに表示されるようになります。

だったら最初っからこのようにすればいいじゃん!! って思うのですが、イメージの加工が伴うので、あえてこのような対策はしないようにしています。
でも、使う人がこの程度なら苦じゃないよ!! っといってくれるようだったら、ここで紹介してる対策をデフォルトとしちゃおうかと思います。

 Trackback Pings(1)

from CreativeStyle

@Styleで配布されている「MovableType 4 無料テンプレート 2C...

Tracked on November 20, 2007

 Comments(28)

#1: Posted by Author Profile Page 小林　明 @ January 7, 2008 [REPLY]
user-pic

テンプレートが大変気に入りましたので、MT４に使ってみましたが、タグクラウドがクラウドにならず、関連するエントリも表示されません。はて？

エントリーを二件テスト投稿した結果が以下の通りです。
http://skisoku.com

色々と試みてみましたが、プログラミングの知識不足のためか、うまくいきません。ご教示いただけたら、と思います。

 
#2: Posted by Author Profile Page bzbell @ January 7, 2008 [REPLY]
user-pic

>>1 小林　明 さん

こんにちわ^^

> テンプレートが大変気に入りましたので、MT４に使ってみました･･･

ありがとうございますぅキャハハ
タグクラウドが表示されない件について、明記していただいた URL が Forbidden で確認できなかったのですが、上記内容から察するに、

タグ自体は表示されるけど、普通にリスト表示されてしまう

ということでしょうか!?
それだとしたら、恐らく CSS に問題がありますねキャハハ

今は会社なので何もできないのですが、帰宅したらテンプレートの方確認してみます。

 
#3: Posted by Author Profile Page 小林　明 @ January 7, 2008 [REPLY]
user-pic

す、すいません、urlを間違えていましたあせあせ

http://skisoku.net

でした。

 
#4: Posted by Author Profile Page bzbell @ January 7, 2008 [REPLY]
user-pic

>>3 小林　明 さん

拝見しました。
小林　明 さんとこのタグクラウドはレベルをLv.1 ～ Lv.7 に設定してますね。
CSS 上は Lv.1 ～ Lv.6 までカバーしてます。

ですので、以下の点を確認してみてください。

  1. テンプレートモジュール「サイドバー(２カラム)」、「サイドバー(３カラム)」内のタグクラウド表示のところで、max=7 になっている。

この場合は、max=7 を max=6 に変更すれば期待通りの表示がされるはずですやあ！
そうすると、テンプレートのミスになりますけど･･･ガーン

または、CSS 内を rank-6 というキーワードで検索して、同様の記述で rank-7 を追加すれば OK ですチュ！

 
#5: Posted by Author Profile Page 小林　明 @ January 7, 2008 [REPLY]
user-pic

ご回答ありがとうございますチュ！

テンプレートモジュール「サイドバー(２カラム)」、「サイドバー(３カラム)」内のタグクラウド表示のところでmax="6"にしたり、CSS 内を rank-6 というキーワードで検索して、同様の記述で rank-7 を追加したり、とやってみましたが、ダメでしたグウグウ

現在はmax="6"にして rank-7の記述は外しています。

 
#6: Posted by Author Profile Page bzbell @ January 7, 2008 [REPLY]
user-pic

>>5 小林　明 さん

> ･･･とやってみましたが、ダメでした

えっ!? 今確認したところ、ちゃんと表示されてるようですよあせあせ

 
#7: Posted by Author Profile Page 小林　明 @ January 7, 2008 [REPLY]
user-pic

>>6 bzbellさん

何度もすいませんあせあせ

>タグ自体は表示されるけど、普通にリスト表示されてしまう

まさに上記の状態が続いていて、関連するエントリも表示されないのですしくしく

すいません、本当にすいません・・・

 
#8: Posted by Author Profile Page bzbell @ January 7, 2008 [REPLY]
user-pic

>>7 小林　明 さん

遅くなりましたぁあせあせ

> まさに上記の状態が続いていて、関連するエントリも表示されないのです

えとぉ･･･やっぱりわたしのブラウザからは本来の姿に見えてるんですけどグウグウ

小林　明 さんは何のブラウザをお使いですか !?
または、どんな表示のされ方を期待してますか !?

 
#9: Posted by Author Profile Page 小林　明 @ January 8, 2008 [REPLY]
user-pic

>> bzbellさん

小林です。たびたびすいませんもじもじ

>小林　明 さんは何のブラウザをお使いですか !?

IE７です。FirefoxとOperaも使っています。

>または、どんな表示のされ方を期待してますか !?

現在、同じタグが「テスト」「テスト」と2つ並んで表示されています。ひとつのタグ「テスト」のみ表示させるわけにはいかないのでしょうか？

それから同じタグを使用しているのに「関連するエントリ」にエントリがリスト表示されないんですが・・・これはエントリを多数投稿することにより解決されるのでしょうか？


 
#10: Posted by Author Profile Page bzbell @ January 8, 2008 [REPLY]
user-pic

>>9 小林　明 さん

こんにちわ^^

> 現在、同じタグが「テスト」「テスト」と2つ並んで表示されています。ひとつのタグ「テスト」のみ表示させるわけにはいかないのでしょうか？

あっそちらのことですかあせあせ
すいません、リストの並び方の問題と勘違いしてました。

後ほどお話しようと思ってたのですが、以前にも同じ現象の人がいまして、その時は文字コードの不一致による現象でした。

テンプレート上は UTF-8 を使用されてますが、データベース上では UTF-8 以外を使用されてませんか!?

おそらく、半角英数字だと問題ないと思います。
日本語だと文字コードによる影響により別タグとして扱われているようです。

データベースの文字コードを確認してみてくださいうぅ～ん

 
#11: Posted by Author Profile Page 小林　明 @ January 8, 2008 [REPLY]
user-pic

>>10 bzbell さん

ありがとうございましたチュ！

データベースの文字コードを替えたらうまくいきくました。

うれしいのなんのってキャハハ

 
#12: Posted by Author Profile Page bzbell @ January 8, 2008 [REPLY]
user-pic

>>11 小林　明 さん

> データベースの文字コードを替えたらうまくいきくました。

よかったですねやあ！
また何かありましたらご連絡くださいチュ！

 
#13: Posted by Author Profile Page capcake @ January 13, 2008 [REPLY]
user-pic

こんにちわ。
テンプレートが気に入ったので使わせていただいております。ありがとうございます。
幅720pxの写真を掲載するため、sidebarを細めに変更させていただいています。
http://capcake.com/capblog/

Firefox および IE7では問題ないのですが、IE6に限りindexページでsidebarが表示されません。
permalinkやarchiveページでは問題ないので、Ajax部分の幅が原因ではないかと考えtrim_toの文字数を変更してみましたが、うまくいきません。
ご教示いただけたら、と思います。

 
#14: Posted by Author Profile Page bzbell @ January 13, 2008 [REPLY]
user-pic

>>13 capcake さん

こんばんわ^^

使っていただいてありがとうございますテレテレ

ご質問の件ですが、サイドバー幅を変更(小さく)した場合に段落ちするほとんどは、コメント／トラックバックツリーの幅が原因( 主にトラックバック )です。

そこら辺の説明をしてないので申し訳ないのですが、JavaScript が出力するトラックバック先の文字列の長さがサイドバー幅を超えた場合に起こる現象だと思われます。

ですので、以下の手順で都合のいい文字列長さに変更してみてください。

  1. dtree.posts.js 内から 'trimj_to' というキーワードを検索します。21、33、36 行目の計 3 箇所あります。
  2. 上から順番に、コメント投稿されたエントリ名、トラックバックされたエントリ名、そしてトラックバック先タイトルの長さとなってます。
  3. デフォルトでは半角英数 34 文字です。
    適当な長さ(たとえば、24 文字 )に変更して、再構築してください。

ポイントは、チマチマ減らすのではなく、最初は大胆に減らして、値を増やしながら調整していきますワクワク

以上です。

 
#15: Posted by Author Profile Page capcake @ January 13, 2008 [REPLY]
user-pic

さっそくのご教示ありがとうございます。

そうですよね。設置手順書にも書かれていましたので、trimj_toの値を３ヶ所とも"5"や"10"に変えてみたのですが、うまくいきません。。。というより、trimj_to自体が機能してないように見えます（文字数が変化しません）。
プラグインも設置手順書に示されている通りです。。。

 
#16: Posted by Author Profile Page capcake @ January 13, 2008 [REPLY]
user-pic

ありがとうございました。解決しました。

dtree.posts.js　で使われていたのは「trimj_to」だったのですね。（trim_toだと思いこんでいたので、MT4ではプラグイン不要と思って、何も入れていませんでした）

dtree.posts.js　の「trimj_to」の部分を「trim_to」に書き換えたところ機能するようになりました。

参考になるコードが満載で、いつも勉強させていただいております。今後ともよろしくお願いします。
m(__)m

 
#17: Posted by Author Profile Page bzbell @ January 13, 2008 [REPLY]
user-pic

>>15 capcake さん
>>16 capcake さん

> ありがとうございました。解決しました。

よかったでぅあせあせ
もしかして環境依存があるのかなぁと思いまして、わたしのとこでも試してみてとこでした。

trim_to でもいいですよ。
お好み次第ですが、trimj_to はトリミング後 '…' を付加してくれるだけなのでキャハハ

 
#18: Posted by Author Profile Page capcake @ January 14, 2008 [REPLY]
user-pic

追加情報です。

＞trimj_to はトリミング後 '…' を付加してくれる

trim_toでも「...」を追加できましたので、参考までにご報告させていただきます。

MT4.01に含まれる、lib/MT/Template/ContextHandlers.pm
の570～575行目
－－－－－－
sub _fltr_trim_to {
my ($str, $val, $ctx) = @_;
$str = substr_text($str, 0, $val) if $val $str;
}
－－－－－－
の573行目を、
$str = substr_text($str, 0, $val)."..." if $val と書き換えるだけでした。

 
#19: Posted by Author Profile Page bzbell @ January 14, 2008 [REPLY]
user-pic

>>18 capcake さん

> trim_toでも「...」を追加できましたので、参考までにご報告させていただきます。

ご連絡ありがとうございます。
この程度ならデフォルト or モディファイアで対応して欲しいですよね。
てか、日本語版のみ対応になっちゃうからダメなのかなぁ。

capcake さんは MT のコード読めるんですねうぅ～ん
わたしも多少は読めるのですが、どぅも Perl って苦手でしてあせあせ

Perl について分からないことあったら聞いてもいいですかワクワク

 
#20: Posted by Author Profile Page capcake @ January 14, 2008 [REPLY]
user-pic

>>19 bzbell さん

私もPerlは苦手なんです。
お役に立てることがあればよいのですが、bzbellさんより分かることは何ひとつ無いと思いますよ・・・
エーン

知りたがり＆新しモノ好きなだけの日曜プログラマーなのですが、これからも色々と勉強させていただけたら、とてもありがたいことですね。

 
#21: Posted by Author Profile Page bzbell @ January 14, 2008 [REPLY]
user-pic

>>20 capcake さん

こんにちわ^^

わたしもサンデープログラマなんですあせあせ
プログラマなんて呼べる程スキルが伴ってませんが、すべて( CSS やいろんなプログラミング言語 )において独学なので基礎が不十分なんですよねグウグウ

いろいろ相談に乗ってくださいキャハハ
お互いで足らないところ補ったり、スキルアップしていけたらな･･･と思いますチュ！

 
#22: Posted by ken @ February 6, 2008 [REPLY]
user-pic

はじめまして。
テンプレート大変気に入っていまして、使わせて頂いています♪ありがとうございます。

すごく初歩的なことで恐縮ですが、教えてください。
サイドバーの配置を変えたいのですが、テンプレートモジュール「サイドバー(２カラム)」、「サイドバー(３カラム)」をいじっても配置が変わらず困っています｡･ﾟ･(ﾉД｀)･ﾟ･｡

そもそも「サイドバー(２カラム)」で変更するのが正しいのかもわからず、どこをどう編集すればよいのか、お手数ですが教えて頂ければと思います。
マニュアルの最後らへんにそれらしきもの（サイドバーの変更）がのっていましたが、プログラム知識がなく、ちんぷんかんぷんでした。。。orz


 
#23: Posted by Author Profile Page bzbell @ February 6, 2008 [REPLY]
user-pic

>>22 ken さん

> テンプレート大変気に入っていまして、使わせて頂いています♪ありがとうございます。

ありがとうございますうるうる

ご質問の件ですが、サイドバーの配置とは、たとえば、右にあるサイドバーを左に･･･というような認識でよかったですか !?
もしそうだとした場合、こちらのテンプレートはサイドバーの配置変更できないんですあせあせ
申し訳ないですテレテレ

レイアウト変更も考慮した現行テンプレート（MT 4.1 以降）では、MT 4.0 向けのデザインをフィードバックしていく予定なので、その時は対応するつもりです。

もしよかったらその時にまた使っていただけると嬉しいですチュ！

 
#24: Posted by ken @ February 6, 2008 [REPLY]
user-pic

>>23 bzbell さん

返信遅れました。申し訳ないです。
また、言葉足らずで申し訳ないです。

>>サイドバーの配置とは、たとえば、右にあるサイドバーを左に･･･

サイドバーの配置は今のままで問題ないです。例えばカレンダーの位置を一番上にもっていきたいなどをしたいと思っています。

ご迷惑お掛けしますが、ご教授のほど宜しくお願いします。

 
#25: Posted by Author Profile Page bzbell @ February 7, 2008 [REPLY]
user-pic

>>24 ken さん

こんにちわ^^

> サイドバーの配置は今のままで問題ないです。例えばカレンダーの位置を一番上にもっていきたいなどをしたいと思っています。

あっそぅいぅことでしたか。
それでしたら問題ありません。
今お仕事中なので少しお時間ください。
帰宅したらご連絡しますのでもじもじ

 
#26: Posted by Author Profile Page bzbell @ February 7, 2008 [REPLY]
user-pic

>>24 ken さん

遅くなりましたぁキャハハ

まず変更するテンプレートは、テンプレートモジュール内の「サイドバー (3カラム)」です。
サイドバーの大まかな構成を以下に記します。 

<div id="sidebar">
<div id="omega" class="omega">
<div class="omega-inner">
：
</div><!-- omega-innter -->
</div><!-- omega -->
<div id="beta">
<div id="beta-inner">
：
</div><!-- beta-inner -->
</div><!-- beta -->
<div id="gamma">
<div id="gamma-inner">
：
</div><!-- gamma-inner -->
</div><!-- gamma -->
</div><!-- sidebar -->

omega は横幅の長いウィジェット用です。
beta はサイドバー内の左側に位置するウィジェット用です。
そして、gammga はサイドバー内の右側に位置するウィジェット用になります。
ブログパーツなどはページ下に配置した方がよいようなので gamma に内に含めます。

そして、各ウィジェットは以下のような構成になっています。 

<div class="widget">
<div class="widget-content">
</div>
</div>

必ず上記のような構成を 1 ウィジェットとして扱います。
ですので、ウィジェット単位での位置変更は上記のウィジェット構成単位で移動させれば OK になりますワクワク

で、ken さんがやろうとしてるカレンダーの移動は、267 ～ 277 行目を、たとえば一番上( omega 内 )に持ってきたい場合、<div class="omega-inner"> の直ぐ下辺りに移動させればよいと思います。

 
#27: Posted by ken @ February 8, 2008 [REPLY]
user-pic

>>26 bzbell さん

返信ありがとうございます！
無事、配置変更ができました。

また、ブログパーツもつけようと考えてたので、大変参考になります。
お忙しい中、ご丁寧な解説ありがとうございました♪

 
#28: Posted by Author Profile Page bzbell @ February 8, 2008 [REPLY]
user-pic

>>27 ken さん

> 返信ありがとうございます！
> 無事、配置変更ができました。
どぉいたしましてうぅ～ん
よかったですね。
何か問題などありましたらご連絡いただければと思いますテレテレ

 

 Post a Comment

 

コメント用フィード