外観を変更するために、インストールしたmt.Vicunaのスキンを編集していく。
style-ninjaを元に変更を加えるが、デフォルトのテンプレートと混同しないためstyle-ninja-xという名前のスキンを新たに作成する。
スキンを適用するために、まずインデックステンプレートのスタイルシートの一行目を
@import url(<$MTStaticWebPath$>themes/style-ninja-x/0-import.css);
に変更する。
スキンそのものではないが、最初にすべてのページのテンプレートを2カラムレイアウトにする。
[デザイン]-[テンプレート]で、[インデックステンプレート]の[アーカイブインデックス]、[アーカイブテンプレート]の[ウェブページ]、[ブログ記事]、[ブログ記事リスト]の最初の行を以下のように"single"から"double"に変更する。
<MTSetVar name="page_layout" value="double">
次に、デフォルトでインストールするNinjaスキンを元にカスタマイズしていく。
スキンをカスタマイズするときに便利なのが、サンプルHTMLファイル。
これを使うとローカルでスキンのカスタマイズを確認することができる。
もちろん、作者にとっても必須のものだろうが、痒いところに手が届くサポートがやはりとても嬉しい。
- サイドバーを左に配置する。
- サイドバーの固定長と、メインコンテンツの可変長の設定
- 背景色の変更
$ diff --strip-trailing-cr -x "*.css~" -r style-ninja 0218011
diff --strip-trailing-cr -x '*.css~' -r style-ninja/4-layout.css 0218011/4-layout.css
39a40,43
> width:100%;
> position:relative;
> margin-left:auto;
> margin-right:auto;
136,138c140
< float: left; /* [←★→] */
< width: 70%;
<
---
> margin-left: 200px; /* [←★→] */
148c150
< border-right: 1px solid #eee; /* [←★→] */
---
> border-left: 1px solid #eee; /* [←★→] */
150d151
< margin-right: -1px; /* [←★→] */
158,160c159,160
< float: left; /* [←★→] */
< clear: right; /* [←★→] */
< width: 30%;
---
> position : absolute ; left : 0px ; top : 5px;
> width: 199px;
diff --strip-trailing-cr -x '*.css~' -r style-ninja/5-module.css 0218011/5-module.css
51c51
< /*
---
>
53c53
< */
---
>
Only in 0218011/styleTest: agl-tmp-3.html
diff --strip-trailing-cr -x '*.css~' -r style-ninja/subSkin/1-subSkin.css 0218011/subSkin/1-subSkin.css
41c41
< width: 90%; /* (example: 50%~100%, 400px~1000px, 60em, etc. )*/
---
> width: 100%; /* (example: 50%~100%, 400px~1000px, 60em, etc. )
54c54
< background-color: #444;
---
> background-color: #0033ff;
59c59
< border-top: 8px solid #000;
---
> /* border-top: 8px solid #000; */
61c61
< background-color: #272727;
---
> background-color: #0033ff;
これで、とりあえず、一番したいことは完了。
さらに、テンプレートをいじって、ヘッダーにCutting Edgeのロゴを、フッターにメールアドレスの画像を挿入。
最後に、compにstyle-future.zipを適用。
