2008年9月 7日

Kim's Blog-2が再構築でエラーに

Movable Typeによるもう一つのブログ"Kim's Blog-2"のレイアウトを大幅に変えるため、有名な「小粋空間」さんのテンプレートを使わせていただくことにしました。
テンプレートをダウンロードし、注意深く既存のテンプレートと置き換え、最後に再構築をすると...。
しばらくして無情にもエラーのダイアログボックスが。そこには「日付アーカイブ「Monthly20080901000000」の再構築中にエラーが発生しました: テンプレート「ブログ記事リスト」の再構築中にエラーが発生しました: テンプレートタグMTIncludeでエラーが発生しました: error in module ヘッダー: テンプレートタグMTEntryTrackbackDataでエラーが発生しました: MTEntryTrackbackDataをコンテキスト外で利用しようとしています。MTEntriesコンテナタグの外部で使っていませんか?」と。
残念ながら今の私の知識では理解不能、対応不能です。
というわけで、Kim's Blog-2が当面使えなくなったので、こちらに書いているわけですが、ともかく少し勉強してみます。

2008年9月 6日

ページのトップに戻ること

Movable Typeによるもうひとつのブログ=Kim's Blog2にかまけていたので、先行するこちらのブログがしばらくお休みになっていました。
何かしなければと考え、今回はブログの一番下から一番上に戻るリンクを設定することにしました。
テンプレートモジュールの「フッター」に以下の1行を追加します。
<div id="to_top"><a href="#header">ページのトップに戻る</a>
次に、上の文字列を右寄せし、右と下に余白を入れるため、スタイルシート(screen.css)に以下の指定を追加します。
#to_top{
       text-align: right;
       padding: 0 20px 10px 0;
}
すると、この部分の両サイドのグレーの線が消えてしまったので、以前の投稿「デザインの微調整」で行ったスタイルシートの変更を以下のように元に戻してみます(ご苦労なことです)。
#container{
     width:780px;
     margin:0 auto;
     border-left:1px solid #ccc;
     border-right:1px solid #ccc;
}
#content { 
     margin-top: 30px;  
     margin-bottom: 25px;  
}
これで終わりです。

2008年8月19日

ヘッダとフッタの画像変更

ヘッダとフッタの背景画像を変更してみました。
スタイルシート(screen.css)は以下のとおりです(下線が変更部分)。

#header{
   width: auto;
   height: auto;
   background: url(banner2.jpg) no-repeat top left;
}
#footer { 
    background: url(footer2.jpg) no-repeat top left; 
}
上の記述で、ヘッダ画像の幅と高さの値をautoとしているのには理由があります。
実は当初、画像のサイズをそのままピクセルで指定したところ、何故かタイトル(Kim's Blog)とサブタイトルが表示されなくなってしまったので、やむなくこの形にしたのです。
しかし、画像の下の部分が切れてしまい、見栄えがあまり良くないので、ちゃんと表示できるよう、少し研究したいと思います。

2008年1月27日

久々の微調整

また前回の投稿から1月以上が経ってしまいました。
今回はサイドバーの微調整です。本文を見出しよりも若干右へインデントし、文字サイズを小さく、マウスオーバー時に文字色を変える、という地味な変更です。
ソースは以下のとおりで、アンダーラインが変更部分です。

  1. デフォルトテンプレート"base_theme.css"の変更
    
    .widget-list {
        margin-left: 5px;
    }
    .widget-list-item {
        margin-top: 5px;
        margin-bottom: 5px;
        font-size:11px;
    }
    .widget-cloud .widget-list {
        margin-right: 0;
        margin-left: 5px;
        font-size:11px;
    }
    
  2. "screen.css"の変更
    
    .widget-content a:hover {
        text-decoration: none;
        color: #c00; 
    }
    

2007年12月16日

カレンダー設置

ブログといえばカレンダー、というわけで、カレンダーを設置してみました。
まず、デフォルトのテンプレート中、カレンダーのウィジェットをコピーし、モジュールテンプレート「サイドバー(2コラム)」にペースト。位置はサイドバーの一番上。
これだけだとカレンダーの幅がサイドバーの幅の半分くらいしかなく、見にくいので、screen.cssで幅を指定。
曜日、日付とも文字が左寄せになっているために縦の列が揃わないので、文字をセンタリング。縦に間延びしているので、行間を指定。
結果的にscreen.cssは以下のとおりとなりました。(下線が変更部分)

/* Calendar Widget */
.widget-calendar .widget-content table {
    width:150px;
    margin-left: 5px;
    font-size: 10px;
}
.widget-calendar .widget-content table tr th {
    text-align: center;
}
.widget-calendar .widget-content table tr td {
    text-align: center;
    line-height:1.4em;
}

カレンダーの設置については違う方法があるのかもしれませんが、今の私の知識では、これ以外の方法は分かりません。

サイドバー見出しスタイル変更

ブログ制作をすっかりさぼってしまい、ほぼ1か月振りの投稿になります。
少し前にパソコンの調子がおかしくなり、MacOSをクリーンインストールしたため、ブックマークもきれいになくなって、管理画面への入り方もわからなくなったという情けなさ。
それはともかく、今回は、画面右側、サイドバーの見出しのスタイルを変更してみました。
見出しが目立たないのが最初から気になっていたので、例によってscreen.cssを書き換えました。
簡単に言えば、文字を太くし、左にボーダーを入れ、ボーダーの色を変えただけです。(下線が変更部分)
.widget-header { 
    border-width: 0 0 1px 4px;
    border-style: solid;
    border-color: #33789C; 
    padding: 0;
    font-size: 14px; 
    font-weight: bold;
    font-family: trebuchet ms; 
    margin-bottom: 8px;
    padding-bottom: .1em;
    padding-left: .3em; 
}

2007年11月 7日

デザインのカスタマイズ

すこしずつMovable Typeの勉強をしているところです。
できればデザインを自由にカスタマイズしたいのですが、まだ十分な知識がなくてできません。
ココログでは、何度か試行錯誤の後、CSSを追加してかなり自分好みのデザインにしました。
でも、Movable Typeは、ちょっと勝手が違うようです。ブログ全体の構成がよく分かっていないので、どこをどう書き換えればいいのかが分からないのです。
多分、あと半月くらいで少しは理解できるようになると思うのですが。

2007年10月22日

ブログの内容

書く内容が決まらないままおよそ3週間が過ぎてしまった。
夢や創作活動、HP制作など、先行するブログの中身をそっくりこっちへ移行させようか。
あるいはいっそ「口内炎」のことでも書こうか、なんて半分冗談で考えたりしている(あれは痛い)。
ま、しばらくはあんまり構えずに書いていこう。それがブログの原点かもしれないし。

2007年10月 3日

Movable Typeデビュー

やっと念願のMovable Typeデビューを果たしました。
しかし、中身をどうするか、検討しているところです。新しいテーマで書いていくか、ココログか楽天ブログのどちらかをこっちに移行するか、迷っています。
方向が決まるまで、適当にいろいろ書いていきたいと思っています。
ページの先頭に戻る