アーカイブ


Big☆Bang!!!

カテゴリーリスト  アーカイブリスト  無料ホームページ はメンテ中
« 2006年04月 | Weblog トップ | Home へジャンプ | 2006年06月 »

2006年05月31日

Movable Type カスタマイズ記 (2006-05)

movable type : (初期の活版印刷の)活字
          -- プログレッシブ英和中辞典


日付をクリックしますと エントリー投稿 が ポップアップ・ウインドー(別窓) で開きます

2006-05-18
Movable Type 3.2-ja-2 をインストール
StyleCatcherプラグイン をインストール
無料で提供されている StyleCatcher用テンプレート をインストール
 テンプレートのカスタマイズ 3カラム, 配置など
 css をカスタマイズ 配色, 幅など
 デフォルト画像 をカスタマイズ 色彩, 輝度, 反転など


2006-05-27
休日表示付リアルタイムカレンダー for Movable Type を設置


2006-05-30
休日表示付リアルタイムカレンダー for Movable Type に 月送り を追加



2006年05月30日

リアルタイムカレンダーに月送りを付加

休日表示付リアルタイムカレンダー for Movable Type小粋空間
の "発展系"? と言えるのかどうかわかりませんが"月送り" を付け加えてみました
名付けて(勝手に銘々)

「月送り&休日表示付リアルタイムカレンダー for Movable Type」小粋空間
まんまです


修正はややっこしかったものの意外とすんなり出来ました
これからカレンダーを設置する方は "月送りカレンダー" の設定を済ませてから
休日表示付リアルタイムカレンダー for Movable Type小粋空間
への対応を追加した方が簡単かと思います


修正そのものは上手くできましたが今回も一筋縄とはいきませんでした
ブラウザーにより表示が異う不具合が生じてしまいました
Firefox では問題なし

  

Internet Explorer ではこのように背景が白に・・
カレンダー表示用テンプレートを修正しましたが上手く反映されませんでしたので
バックグランドと同じ"背景画像" を作って貼り付けました


あと少しの修正を加え整えました
 位置合わせ
 曜日の文字を全て太字に
 文字を全て大きく 年月の文字を大きく
 好みの色に(全体的に淡く)
 矢印は画像に
 投稿記事のある日は 色を付け太字
 日祝祭日 は投稿記事があっても色は変えない(暦優先)

※2006-06-04追記 以下の修正を施しましたので画像は現在と異なります
 1.画像のように文字を全て大きくしましたが曜日の文字間隔(特にWed)の影響
   により全体的に等間隔にはならず週末に向かうほど狭くなっていた現象

     文字サイズを下げることと位置合わせにより回避
 2.カレンダーヘッダーに設置していた リンクバーナー を新たな場所に設け

     24時間時計を設置 これに伴い "クルクル時計?" は廃止
 3.投稿記事がある日にマウスを重ねたときの 反転背景色 を変更

     平日 土曜日 日祝祭日 のように "それぞれの同色" へ
    数字は "白抜き" に変更

 4.カレンダーのリンクにツールチップを
増設
     エントリー

以上で
「月送り&休日表示付リアルタイムカレンダー for Movable Type」小粋空間
は完成 となりました に一歩近づきました

小粋空間 さん 感謝です


P.S.1. 小粋空間 さんのところで次のエントリーを見つけました
 「月送りカレンダーにリアルタイムカレンダーを適用する場合の補足
 小粋空間 2005-07-31

こちらではこの修正は行っておりません
そもそも月送りカレンダーにリアルタイムカレンダーを適用する場合の
修正手順として紹介されてますので関係ないのかもしれません・・?


P.S.2. 小粋空間 さんのところで次のエントリーを見つけました
 「月送りカレンダー・1日に表示されなくなる不具合を改善
 小粋空間
2005-06-05

これは
 「月送りカレンダーには、毎月1日にエントリーが投稿されてない状態で
 コメントまたはトラックバックを受信すると、カレンダーが表示されない
 (「404 Not Found」が表示)という既知の不具合があります」
とのこと
Movable Type を設置して まだ新しい月を迎えてませんので
このようになりましたら対応をとろうと思います
から初めての
新しい月を迎えましたが試しにトラックバックを受信してみると

   

既知通り "404エラー" が出ました

新しい月のカレンダーは
 「エントリー投稿によって生成されます」
とのことですので回避策は
 1.新しい月を迎えたと同時にエントリーをする
 2.事前に次月の日付でテストエントリーを投稿しすぐ削除
   (生成されたカレンダーは削除されない)
少し手間ですし忘れてしまいますのでこれは要修正ですね

追って修正した結果をエントリー することにします しました
(動作の確認は新しい月を迎えないとできない?)
暫定処理となりましたが
月送りカレンダの不具合保留に」 をご覧下さい



2006年05月28日

リアルタイムカレンダーの不具合解決

昨日エントリーしたリアルタイムカレンダーの不具合ですが本日見直したところ
不具合箇所を直ぐに発見し無事解決することができました

ご覧のように "日付" が
 "日祝祭日" は ""

 "土曜日" には ""
に Firefox でも表示されるようになりました
めでたしメデダシ!


カレンダー表示タグの中で
<caption class="calendarhead"><$MTDate format="%B %Y"$></caption>
色字にした箇所の指定が間違ってました


別件ですが今回偶然気づいたのがエントリー(書き込み)内での
<table>(タグ) の使用ですが Firefox では今回のテーマである
"日付" に "色" が付かなくなる現象を発見しました
Internet Explorer では何の問題もなく正常に動作します
そろそろ 仕様 を統一して欲しいです

以前各OSでよく使っていた Opera ですが制限がありすぎて
使い易いのか使いにくいのか・・?でした
近年 Firefox の登場ですっかりハマってしまいました
現在ではメインブラウザーとして で使ってます
ブラウザーがまだ有料のころは Netscape を使ってましたので
いつのまにか古巣の mozilla系 に戻ってました
若干ですが未だに各OSにおいて仕様が異なる点が "今ひとつ" ・・

デジカメ画像整理ソフトの Picasa も "無料" なのに
とても使い易くて大のお気に入りです
一度お試しあれ
宜しければ右コラムにある バーナー よりどうぞ



2006年05月27日

リアルタイムカレンダーの設置

リアルタイムカレンダーは
休日表示付リアルタイムカレンダー for Movable Type小粋空間
というものです

設置したものの残念ながら意図したように表示させることが出来ませんでした
本来なら "日付" が
 "日祝祭日" は "" に

 "土曜日" には "" に
ならなければなりませんが・・
現在不具合は解決してます こちら をご覧下さい
ご覧のように "" のままなのです
さんざん設定を弄くったのが功を奏したのか現在はかろうじて
「リアルタイムカレンダー」としては動作するようになりました
"今日" の日付に "枠" が付くだけのことなのですが
どうも従来のカレンダーでは 記事を投稿 エントリー投稿するまで
"日付" が変わらないそうですので "進歩" したと言ってよいようです


確認したブラウザーは Internet Explorer と Firefox です
Internet Explorer だけでしたら
休日表示付リアルタイムカレンダー for Movable Type小粋空間
として完璧に動作しますがこの設定にすると Firefox では "ただのカレンダー" に
戻ってしまい "旨味" がありません

小粋空間 さんの "公開テンプレート" では両ブラウザーで問題なく表示できます

      
 Fedora/1.5.0.3-1.1.fc5 Firefox/1.5.0.3

のでやはりこちらの設定に誤りがあるようです
Movable Type 3.2 の構造全体を理解する前の段階でデザインテーマの
切り替えプラグイン StyleCatcher を入れてしまったのが敗因のようです
= 理解できていない

混がらがってます
さてどうしよう・・


※スタイルシートの記述ミス?・・
※<table>(タグ) を使うとカレンダが Firefox で NG



2006年05月22日

3カラム構成にはモジュールを

モジュール = module ってなんだ?

《コンピュ》モジュール
 (1) プログラムやハードウェア機能の単位
 (2) 交換可能な構成部分
測定基準[単位];流水測定単位
(工業製品などの規格化された)ユニット,モジュール,構成単位;《建》モジュール,基準寸法
《数》加群
《宇宙》モジュール:宇宙船の一部を成すが母船から独立して行動できるユニット
((主に英))《教》学習時間の単位
                          by プログレッシブ英和中辞典第4版
らしいです
テンプレート内に繰り返し使う構文などをひとかたまりにして置き換えることができるようです
3カラムにしましたが 左カラム(alpha) と 右カラム(gamma) の内容はすべて同じにしました
と言うことは最初に作った メインページ(index.html) の 左カラム(alpha) と
右カラム(gamma) の内容はそっくり同じですのでそれぞれ 左カラム(alpha) = left
右カラム(gamma) = right と置き換えればよいはずです


では実際に置き換えてみましょう
(説明を簡略化するため内容をそれぞれ
左カラム(alpha) は カテゴリーとアーカイブ
右カラム(gamma) には 最近のエントリーと検索 のみ
とします)

[ 元の メインページ(index.html) ]



それぞれ必要な箇所だけ抽出すればよいわけです
メインメニュ -- 環境設定 -- テンプレート -- モジュール -- モジュールを新規作成
テンプレート名は何でもよさそうですがわかりやすい名前にしましょう
ここでは left , right として作業を進めることにします

[ left 用モジュールを新規作成 ]
テンプレート名:left
このテンプレートにリンクするファイル:空白のまま
モジュールの内容:このファイル


-- ここから --

-- ここまで --


[ right 用モジュールを新規作成 ]
テンプレート名:right
このテンプレートにリンクするファイル:空白のまま
モジュールの内容:このファイル


-- ここから --

-- ここまで --


[ メインページ(index.html) ]


まず # −− ※
<body class="layout-three-column">
と書き換えます

上記
メインページ(index.html)
のように
left 用に作ったモジュールを
<$MTInclude module="left"$>
として指定

right 用に作ったモジュールを
<$MTInclude module="right"$>
として指定します

中カラム中央カラム(beta) は元の alpha の(メインページ)内容でしたよね
ここの箇所はページにより内容が変わりますので モジュール化 しても
あまり意味がありません
こちらでは タイトルバーナー , フッタ だけを モジュール化 しました

文章にするとわかりにくいですね
リンクしたファイルを眺めていれば次第につかめると思います




2006年05月21日

3カラム構成にするには

3カラム化するには テンプレートの修正 が必要になります
メインページ(index.html) : main_index.tmpl を例に挙げます

インストールした直後の main_index.tmpl は

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" id="sixapart-standard">
<head>
※:(省略)
  <body class="layout-two-column-right">  # −− ※
   :(省略)
      <div id="alpha">  # −− 1
       <div id="alpha-inner" class="pkg">
        :(省略)
       </div>
      </div>

      <div id="beta">  # −− 2
       <div id="beta-inner" class="pkg">
        :(省略)
       </div>
      </div>
    :(省略)
 </div>
</body>
</html>

この様になってます

  

右サイドバーの2カラム構成
  <body class="layout-two-column-right">  # −− ※

左側カラム:メインページ
      <div id="alpha">  # −− 1

右側カラム:右サイドバー
      <div id="beta">  # −− 2




3カラム化するには

  

  <body class="layout-three-column">  # −− ※
とします

alpha, beta は一つずらし beta, gamma としますが
beta とずらした中身は元の alpha の(メインページ)内容を
      <div id="beta">  # −− 2
       <div id="beta-inner" class="pkg">
        中身は元の alpha の内容
       </div>
      </div>

gamma とずらした中身は元の beta の内容(右サイドバー)を
      <div id="gamma">  # −− 3
       <div id="gamma-inner" class="pkg">
        中身は元の beta の内容
       </div>
      </div>
となります
ここでまとめておきましょう

      <div id="alpha"># −− 1(新規作成)
       <div id="alpha-inner" class="pkg">
        中身は新たに左サイドバーに置く内容を記述
       </div>
      </div>

      <div id="beta">  # −− 2
       <div id="beta-inner" class="pkg">
        中身は元の alpha の内容=メインページ
       </div>
      </div>

      <div id="gamma">  # −− 3
       <div id="gamma-inner" class="pkg">
        中身は元の beta の内容=右サイドバー
       </div>
      </div>
    :(省略)
  </div>
 </div>
</body>
</html>

※必ず <div> 〜 </div> の間に内容を記述します


メインページ(index.html) : main_index.tmpl だけではなく
テンプレートの修正 で挙げた全てのファイルを同じにすれば
当サイトのように 同一の3カラム構成 になります

残すは何をどこへどのように配置させるかを工夫するだけ
ですがこれが大変な作業になってます
まだ思うように配置できてませんがクリアしたら次回は
このあたりの苦労話などを紹介できればと・・
思います


"全角スペース" は2個までしか認識しない 3個以上は全て無視される?
"改行" は2行までしかダメ 3行空けた箇所は3行目に <br> を入れた
<blockquote> もこんな風になっちゃった これって引用?



2006年05月20日

カスタマイズにはテンプレートを修正

メイン・メニュー --- テンプレート から修正が行えますが
/mt/default_templates/*.tmpl
を直接修正することでも出来ました
ファイル修正後には都度 "サイトを再構築" が必要のようです

関連するファイルを挙げますと

 メイン・メニュー --- テンプレート --- インデックス
  ・アーカイブページ(archives.html)  : master_archive_index.tmpl
  ・メインページ(index.html)       : main_index.tmpl

 メイン・メニュー --- テンプレート --- アーカイブ
  ・エントリー・アーカイブ  : datebased_archive.tmpl
  ・カテゴリー・アーカイブ  : category_archive.tmpl
  ・日付アーカイブ      : individual_entry_archive.tmpl

 メイン・メニュー --- テンプレート --- システム
  ・コメント・プレビュー       : comment_preview_template.tmpl
  ・コメント・保留          : comment_pending_template.tmpl
  ・コメント・エラー         : comment_error_template.tmpl
  ・コメントの一覧          : comment_listing_template.tmpl
  ・ダイナミックページ・エラー  : dynamic_pages_error_template.tmpl
  ・トラックバックの一覧      : trackback_listing_template.tmpl

検索結果ページ は メイン・メニュー --- テンプレート から修正が
出来ないようですので 直接ファイルを修正 しました
  ・検索結果ページ        : /mt/search_templates/default.tmpl

このようになると思います
適当に当てはめた項目もありますので追々検証後に訂正することにします


[ エントリー ] には "タブ" が使えない



2006年05月18日

Movable Type 3.2-ja-2 を設置

以前(おそらくMovable Type 3.17)設置だけしてそのまま放っておいた
Movable Type ですが知人が設置したとの知らせを受け対抗意識から?
こちらでも試すことにしました

 インストール直後の Movable Type 3.2-ja-2
     

シンプルなのですが少し寂しいですのでカスタマイズしたくなりました

今回のテンプレートは 無料テンプレート を頂いて(ありがとうございます)
きて多少カスタマイズしました
  入手先 = MovableType幼稚園

このサイトは MovableType3.2用無料テンプレート for StyleCatcher
の無料提供だけではなく StyleCatcherプラグイン の導入方法や
カラム数の変更手順などわかりやすく解説しているサイトです
導入仕立てで右も左もわからない当方には大いに役立ちました

デザインテーマの切り替えは StyleCatcher というプラグインが
ありますので簡単に切り替えることができました


今回の設置では左右のコラム幅を修正しましたのでそれに合わせて
背景画像の一部ですが修正を行いました 
頂いてきた 無料テンプレート を二個一にしてますので多少色味の
バランスが崩れていると思います
追々修正を加えていこうかと・・多めに見てくださいネ
色味修正を施しましたがモニタによっては?いかも・・しれません
多めに見てくださいネ

頂いてきたデザインテーマはデフォルトではトップページが2カラムで
他は1コラムになっていましたので全てのページで3カラム化しました
これは Movable Type 3.2 の仕様なのかもしれませんが・・
まだ理解してません

テンプレートの仕組みがややっこしく追っていくのが面倒でしたので
全部修正を加えたのが本音です
まぁまぁ意図したように仕上がったと思います
次は スタイル・シート ですがこれを弄りだしたら切りがありませんので
調整は必要最小限としあとはありがたくデフォルトのまま使わせて頂く
ことにしました


StyleCatcherプラグイン の導入で少しハマった箇所を書いておきます
MovableType幼稚園 では
「アップロードしたStyleCatcherフォルダの
 中にあるstylecatcher.cgiの属性を 755 にします」
とありますがファイルだけではなく フォルダ にも書込権限を
与えてやる必要がありました(604ではダメ!)
書換えを行うようです

今回の Movable Type 3.2-ja-2 を設置したサーバは
Fedora Core 5 + MySQL-5.0.21-2 です
所有者:グループ = apache:apache で動作するのは
セキュリティの観点からやメンテナンスの面からも面倒なような気がしました
そもそも Movable Type の初期設定時にも"書き込み権限"がない
ようなことを言われルートディレクトリを "707" にしましたが
設定保存後のルートには 所有者:apache のファイルがいくつか
出来上がってました
(上記 StyleCatcherプラグイン の導入で少しハマったのも同事象)
どうして user権限 ではダメなのかなぁ !?


サーバーと言えば・・
「ロリポップ」と言う言葉を何度か耳にした頃がありましたが
どうもレンタルサーバのようですね
価格が魅力的ですので乗り換えを検討したくなりました
データベースの移行はできるの?
よく調べてからでないといけませんね


もう少しカスタマイズしたい箇所もありますので弄りながら
理解も深まっていくのではと期待しているところです
当面 "エントリー" することが最大の課題かもしれませんが・・ 





パソコン・周辺機器を購入するなら 秋葉原の老舗 TSUKUMO が安心!

NHK時計


※この時計の時刻は、閲覧しているパソコンのものであり、必ずしも正確な時間とは限りません
Tama-Studio's Weblog

Powered by  

Big☆Bang!!!