2008年12月30日

Movable Typeのアップグレード

Movable Typeのヴァージョンを4.0から最新版の4.2にアップグレードしたのですが、新規インストールのような形になっているような気がします。
アップグレードガイドなどを参照しながら、自分なりに慎重に進めたつもりですが、どこかで間違っていたのかもしれません。
もちろん、バックアップはとってありますので、元に戻す方法はあるのでしょうが、今のところは慌てずに、少し調べてみようと思っています。

Movable Type 4 へようこそ!

このブログ記事は、Movable Type 4のインストール完了時に、システムによって自動的に作成されたブログ記事です。 新しくなったMT4の管理画面で、早速ブログを更新してみましょう。

2008年12月16日

アフィリエイト追加

アフィリエイトを3つ追加しました。
合計4つのバナーがトップページの下の方に貼付けられたわけですが、バナー同士がくっつかないように画像の周りにマージンを設定しました。
昨日記述したスタイルシート(オリジナル)のすぐ後に以下の指定を追加しました。
#affiliate img{
     margin-bottom: 10px;
}

アフィリエイトもやりすぎると品がなくなるので、これくらいにしておいた方がいいかもしれません。

2008年12月15日

アフィリエイトを始める

アフィリエイトを始めました。
急にお金儲けがしたくなったわけではありません(もちろんお金はあるに越したことはないですが)。
そもそもこんなアクセス数の少ないブログで報酬がじゃんじゃん入ってくるとはとても考えられません。
とにかく色々試してみたい、というのが最初の動機です。で、いくらかでも収入が入れば一石二鳥かと。
心配したのは個人の無償ライセンスで可能かどうかということでしたが、シックスアパートのサイトで、大丈夫であることが確認できたので、A8.netに会員登録してさっそくトップページの一番下にバナーを貼付けてみました。
広告のタグを<div>タグで挟み、"affiliate"と名前を付け、スタイルシート(オリジナル)に次の指定を追加しました。

/*トップページ(アフィリエイト)*/
#affiliate{
text-align: center;
margin-top: 20px;
}

とりあえずバナーは1つだけですが、これからいくつか追加していこうと思っています。
軽い気持ちで始めましたが、何だかはまりそうな予感が、、、

2008年12月 6日

スタイルシートの分割(テンプレート化)

このブログをカスタマイズし始めた1年くらい前から比較的最近まで、適用されていたスタイルシートはテンプレートにある2つ(メインとベーステーマ)と、テンプレート以外の1ファイル(screen.css)でした。
しかし、スタイルシートに手を加えることが多くなると、テンプレートを修正した方が何かと便利なことが分かり、今年の10月、「テンプレート修正に伴う余白」に書いたとおり、テンプレートでないscreen.cssの内容をコピーしてテンプレートのスタイルシート(ベーステーマ)にペースト、両者を合体させました。
それで修正はやりやすくなったのですが、2つのファイルをくっつけたため、とても長いファイルになり、目的の場所を探すのが大変になってしまいました。
そこで、スタイルシートを分割し、以前のscreen.cssの部分をテンプレート化することにしました。何でもないことですが、当時はテンプレートを新たに作るという発想がなく(というか、そういう知識がなく)、合体という「暴挙」に出たのでした。
新しいインデックステンプレートに「スタイルシート(オリジナル)」と名前をつけ(完全なオリジナルではないのですが)、ファイル名を"kim.css"としました。
そして、スタイルシート(メイン)にこのスタイルシートを読み込む指定を以下のように追加しました。

@import url(kim.css);

これだけです。もっと早くやるべきでした。

2008年12月 5日

ヘッダとメニューの余白解消

以前「テンプレート修正に伴う余白」「ヘッダ部分の拡大(副産物)」で書いたように、ヘッダ部分のバナー画像とその下の画像化したメニュー(ナビゲーション)の間に若干の余白が生じていました。
気にしないようにしてはいましたが、見るたびにそこに目がいくので、やはり修正することにしました。
かつて色々試してだめだったので、最後の手段として、マイナスのマージンを設定するしかないと思い、テンプレートのスタイルシート(ベーステーマ)を修正しました。
ところが、Safari、Firefox、Opraなどのブラウザではきちんと修正されて余白がなくなったものの、IEだけは余白がなくならず、メニューの上部が切れるという状態になってしまいました。
そこでやむを得ず、IEだけに適用させるハックを使いました。 修正されたスタイルシートは以下のとおりです。3行目のアンダーバーを付けたプロパティ"_margin"がIEだけに適用させる指定で、結局従来どおりです。
#navigation ul{
      margin: -14px 0 10px 0;
      _margin: 0 0 10px 0;
      list-style:none;
      text-indent: -9999px;
}

で、ここで終わるはずだったのですが、「念のため」とIE7で確認したところ(上述のIEはv.6なのでした)、メニューが上に移動しすぎてバナーと重なってしまっているのです。
普段あまりIE7でブラウズすることがないので気がつかなかったのですが、どうやらIE7では余白が他のブラウザにくらべて少なかったようです。
仕方がないのでマイナスの値を"-5px"にしてみたところ、まさにぴったり、でも当然他のブラウザでは、少なくなったとはいえ、依然として余白が残ったまま。
結局、最も多くの日本人が使っている(と思われる)ブラウザに合わせてレイアウトを調整した形になりました。
ページの先頭に戻る