BLOGを再構築したのはいいけどいろいろと設定が面倒だなぁ～orz
携帯用ページを移行するの忘れてたのでインストール＆設定。
これで記事以外は前と同じように使えるようになったかな(´・ω・｀)
BLOGシステムの最近のブログ記事
HPのデザインをいろいろといじってみたくてCSSのお勉強をしてて始めて知った驚愕の事実！！
div を使ってブロック要素でレイアウトをいじってたんだけど、
このときのwidthがdiv枠の幅じゃなくてdiv枠からpaddingの値を引いた値（内容物の幅）になるんだね！！
今までdiv枠全体の幅だと思ってたよorz
しかもIEだとdiv枠全体の幅と解釈されるらしいのでHTMLソースの先頭できちんとDOCTYPEを指定してやら無いといけないらしい。
う～～～ん・・・・奥が深い；；
ブログのデザインをいじったりしてたらCSSが結構面白い！
というか・・・複雑すぎてよくわからないorz
そこで↓この本を買ってみました。
http://www.sbcr.jp/books/products/detail.asp?sku=4797324104
分厚いのに安かったので買ったというのが本音・・・ｗ
いろいろと紹介できるようにお勉強します(>_<)
デザインを変更したときにテンプレート内部をかなり？お勉強したのでφ(. .)メモメモ
今回はデフォルトのデザインについてお勉強第１回目。
Movable Type 3.2-ja-2 をインストールしてブログを新規作成した直後の画面は↓こんなかんじ。
これはtwo-column-rightというスタイルで右側にメニューがあるタイプです。
まずはこのtwo-column-rightのテンプレートを解析してみよ～っと。
管理ページのテンプレートページを見ると↓のような画面になります。
ここの赤で囲った部分が今回重要な部分になります。
ブログを開いたときのデザインは「メインページ」の部分です。
（デフォルトのindex.htmlテンプレート→→これ）
このテンプレートの中を見ていくと、まずヘッダの部分に
<link rel="stylesheet"
href="<$MTBlogURL$>styles-site.css" type="text/css"
/>
と書いてあります。このstyles-site.cssっていうのがさきほどの管理画面にあるスタイルシートのことです。
（デフォルトのスタイルシート→これ）
このファイル内に細かな色指定やデザインの設定などが書いてあります。
次にボディ部分の指定で
<body
class="layout-two-column-right">
と書いてあります。
ここで基本的なデザインであるtwo-column-rightとの指定がされています。
ここをtwo-column-leftやthree-columnなどに変更することでデザインの変更が可能になります。
ただし、ここを書き換えただけでは壊れたデザインになってしまいます。
この body 内でデザインが決められますが内部は div というブロック要素がいくつも書いてあります。
では、デフォルトでは基本的に div は２重になっていて
<div
id="container">
<div id="container-inner"
class="pkg">
という感じで container
というブロックの内部に container-inner というブロックが定義されていて、実際の本文はこの inner
の中に書くということになっているようです。
デフォルトのブロック要素を↓の絵でわかりやすくしてみました。
（innerは省いてあります。変な色使いで余計に見難いかも；；）
このブロック要素の alpha と beta
の内部にエントリーを表示させるタグや「最近のエントリー」・「カテゴリー」などのMTタグが埋め込まれています。
項目を増やす場合は必要なMTタグを alpha や beta ブロックの中に書くことになります。
これらのコラム欄（メーラー風にいうと３ペイン？）
のデザインを変更するにはスタイルファイルの内部を修正してやります。
スタイルファイルを見るとこの alpha と beta のボックス要素のサイズは以下のように定義されています。
#alpha { margin: 15px
15px 0 15px; width: 480px; }
#beta { width: 200px; background: #e6ecf2; }
これ以外にも
alpha と beta の設定が定義されていますが修正すべきはこの部分だけです。
最後にデザインを修正してメニューを左側に持ってくる例を。
MTのテンプレートではブロック要素である alpha と beta （３カラムの場合は gammaも）
の順番は必ずこの順番に書いている場合が多いので少し面倒です。
デフォルトでは alpha の横幅が 480px でここにメインのエントリーが
beta の横幅が 200px でここにメニューが表示されるようになっています。
メニューを左に持ってくるには alpha にメニューが表示されるようにして幅を 200px に変更して
beta の横幅を 480px にしてメインのエントリーが表示されるように変更してやります。
この修正の簡単な方法は
<body>タグの two-column-right という部分を two-column-left に書き換えます。
これだけだと↑のようになってしまいます。これはメニュー類のコードが beta ブロックに記述されたままになっているからです。
なので、今記述されている alpha ブロックと beta ブロックの位置をいれかえて要素名を書き換えます。
<div id="beta">
<div id="beta-inner" class="pkg">
<div class="module-search module">
<h2 class="module-header">検索</h2>
・・・・メニュー関係・・・・
</div>
</div>
の部分を切り取って
<div id="alpha">
<div id="alpha-inner" class="pkg">
この前に貼り付けます。
このままでは
<div id="beta">
<div id="beta-inner" class="pkg">
・・・・メニュー関係・・・・
</div>
</div>
<div id="alpha">
<div id="alpha-inner" class="pkg">
・・・・エントリー関係・・・・
</div>
</div>
という感じになっているので
この beta、beta-inner を alpha、alpha-inner に書き換え、同様に alpha、
alpha-inner を beta、beta-inner に書き換えれば終了です。（書き換えた後のメインページテンプレート→これ）
これでメニューが左に移動しました。
わかりにくい記述ばっかりだけど、
もし参考にしたい人がいれば遠慮なくコメントくださいm(。_。)m ペコッ
以前のBLOGが凹みすぎでグダグダになってるので、BLOGシステムのバージョンアップついでに新規に立ち上げなおしました。
以前の内容はいずれアーカイブとして再公開する予定です・・・。
MT3.2になってタグが少し変更になったためしばらくはデフォルトのデザインを使用します。
これからは・・・私の個人的なことやFFXIでの日記を頑張って書いていく予定ですので、末永くお付き合いを・・・m(。_。)m ペコッ
