オープン前夜

ほとんど初期状態のままですが、一応ブログが動くようになりました。
コンテンツも無いのにデザインに凝るのはどうかとは思うのですが、自分のブログなんだから、ちょっとは好みのデザインにしたいのも人情というものです。(^^)
そういえば、これまでMovableTypeを操作した範囲では、デザインの調整をするための機能というのを見た記憶がありません。デザインが変更できないというのはありえないと思うので、例によって、ちょっと Googleで検索してみます。

・・・どうやら、GUIで簡単にデザインを調整するような機能はなく、CSSや HTMLテンプレートを直接編集する必要があるみたいです。
私も一応 Webアプリケーション開発で給料もらっている身ではあるので、それくらいの作業で怖気づくつもりはないですが、MovableTypeが作成する HTMLの DOM構造を調べて CSSを修正しながらデザインを調整するとなると、まじめにやっても数日はかかりそうです。
正攻法についても、いずれは取り組んでみたいと思うものの、今はオープンすることを優先させたいので、短時間でやっつけられる方法を検討します。
結論としては、今回はレイアウトなどには手をつけず、単純に色と背景画像を調整するのみで妥協することにしました。それでも、CSSを直接編集して、思った色味にするのは、神業以外のなにものでもありません。私は当然そんなスキルはないので、今回は Linuxでは定番ツールである GIMPの Windows版を作業で使用しているノートPCにインストールしてやることにしました。

まず、Windows版 GIMPをダウンロードするのですが、Vectorにあるものは、バージョンが古そうなので、http://gimp-win.sourceforge.net/から、最新の安定版(2.2.10)と、実行に必要な GTK+2.8.9を落とします。(ダウンロードサイトは英語ですが、国際化されているのでセットアップで日本語を選択すると日本語になります)
インストールして GIMPが起動できたら、ファイルメニューの新規作成を選択して空の編集画面を開きます。その画面にブログの画面を PrintScreenキーでコピーしたものを貼り付けることで、GIMPで画面イメージを編集できるようにします。
貼り付けが出来たら、色味を調整するために、レイヤーメニューから「色 → 色相-彩度」を選択して調整ウィンドウを表示します。ウィンドウが開いたらプレビューを ONにして、適当にグリグリいじりながら画面が気に入った色になるように調整していきます。
色味が決まったら、次は背景画像を置いてみます。メインウィンドウの「色による領域選択」のアイコンを押した後、画像を貼りたい部分をクリックして領域を選択します。思った場所が選択できたら、今度は「色やパターンで塗りつぶす」アイコンを押した後、パターン塗りをチェックして、選択した領域を使用したい画像イメージで塗りつぶします。うまく塗れたと思ったら、「選択」メニューから「なし」を選択して領域選択を解除して確認します。(うまくいってなかった場合は、Ctrl-Zでアンドゥしてやり直せます)
デザインがまとまったら、「画像から色を選び出す」アイコンを押して色を調べていき、元のデザインと新しいデザインの色の変換表を作成します。
最後にスタイルテンプレートをエディタにコピーし、変換表にあわせて色を置換します。
さらに画像を貼るべき色を検索して、色の指定の後に「url("画像ファイル名")」を追加することで背景画像を指定します。(画像が読み込めなかったことを考えて色の指定も残します)
以上の作業でスタイルの編集が出来たら、MovableTypeに登録して再構築した後、ブラウザで確認します。

デザインが FIXしたので、いよいよオープンです。
最初にテストもかねてオープンのお知らせを投稿してみます。
OK。問題なさそうです。といっても、このままでは誰も見に来てくれないので、とりあえず最初に某先輩のサイトの掲示板に挨拶を兼ねて宣伝させてもらいに行くことにします...