Home> Simple > mt.Vicuna Simple レイアウト変更

mt.Vicuna Simple レイアウト変更

Posted by: oscar
2010年9月20日 14:33
Simple

レイアウト変更画面

mt.Vicuna 2.3.xでは、スタイルキャッチャーまたはプラグイン設定画面でのレイアウト変更に対応していましたが、現在公開されているVicuna CMS用スキンには、レイアウト調整用のファイルが同梱されており、この調整機能をMovable Typeの管理画面に統合してみました。

画面の構造的には、上部にレイアウト指定要素が並び、下部にiframeでプレビュー用HTMLが表示されています。
初期状態では、MT5本来の左メニューは非表示になっています。これはプレビューを表示するiframeエリアを出来るだけ広く取りたかったからで、左メニューの操作が必要な場合には、左上にある「Show / Hide SideMenu」をクリックする事で、左メニューの表示・非表示がトグルで切り替わります。

レイアウトの変更

項目をクリックしていくことで、レイアウトの変更が可能になります。
「Layout Debug mode」では「Layout（カラムレイアウト）」「Eye Catch（ヘッダー部分）」「Width（固定幅指定）」「Others（その他）」「TagCloud Style（タグクラウドスタイル）」のそれぞれが指定可能です。
「Page Pattern」で表示するアーカイブの種類を選択・切り替えする事が可能です。「Layout」と「Eye Catch」は、各アーカイブ毎に設定を持ちます。

現状ではIEで表示中のアーカイブの切り替えで、異なるスタイルシートが表示される問題が発生します。その他ブラウザーでは問題無いようです。

「Global Settings」と同色の、バックに色付けされている部分は、全アーカイブ共通の設定になります。
右の「保存」ボタンを押す事で、設定が保存されます。ただし変更がページに反映される為には、再構築が必要です。

カラムレイアウトの変更

カラムレイアウトを選択します。カラムレイアウトはスキンと密接に関係します。「style-vega」などは豊富なカラムレイアウトを持ちますが、「style-future」では「single（1カラム）」「double（2カラム小・大）」の2種類しか存在しません。
レイアウト詳細については、以下のmt.Vicunaでの説明をご覧ください。
「mt.Vicuna - レイアウトの変更方法」

ヘッダー部分の指定

ヘッダー部分の表示スタイルを選択します。カラムレイアウトと同様にスキンと密接に関係します。
ヘッダー表示の詳細については、以下のmt.Vicunaでの説明をご覧ください。
「mt.Vicuna - レイアウトの変更方法」

固定幅指定

800px〜1000pxまでの50px刻みで設定が可能です。ただしスキンによっては望む結果にならない場合があります。

ナビゲーション・他の指定

「グローバルナビゲーションをページ最上部に表示」「グローバルナビゲーションを表示しない」「中央寄せを解除して全体を左寄せにする」事が可能です。ただし、スキンによっては対応していません。

タグクラウドスタイルの追加指定

「Tag Cloudのスタイル」にある各スタイルを、別個CSSとして保存し、読み込まれるようにした物です。既存のスキン内のタグクラウド指定に対して上書き処理を行っている為、オリジナルとは若干異なる結果になる部分も有ります。

カスタムセットによるレイアウト指定

mt.Vicunaでのスタイル指定は、複合的に組み合わせる事で、新しい状態を生み出せます。組み合わせ例をそれぞれ「セット」として作成しました。もちろん「セット」は「スキン」により変化します。
セットの詳細については、以下のmt.Vicunaでの説明をご覧ください。
「mt.Vicuna - レイアウトの変更方法」