検索結果: Atelier

MTテンプレートでのCSSによるタブメニューの作成

　いろいろと遠回りをしたが、ブログのヘッダー部分に、以前から設置したかったタブメニューを作った。このようなリンクボタンは、Flashで作るものとばかり思いこんでいた。そのために、ボタンを作るFireworksやFlash８などの学習をボチボチとしてきた。Fireworksには、Javascriptをつかうタブメニューの作り方のステップガイドがある。新しくページを作るときには有用と思えるが、MovableType（MT）に持ち込むにはいささか難しそうだ。Flash での例示は、もう少し高度なプルダウンメニューのようなものが多い。Google でサーチをしてみると、JavaScript や　Flash は使わずにスタイルシートを上手く使ってHTMLで作成できることが分かった。ちなみにいつも参考にさせてもらっている「小粋空間」さんのタブメニューもページのソースコードを見るとHTMLで作られているようだ。（一部、ＪａｖａＳｃｒｉｐｔｓが使われているようだ。）
　いろいろ探してみると CSS Tab Designer というフリーの Software(?) に行き当たった。同様の日本語サイトもあるが、どうも海外のサイトの方があか抜けている。早速、css_tab.zip ファイルをダウンロードして展開してみるとお誂え向きのサンプル (Tab Menu10)があった。これには、そのサンプルのHTMLコードがついており、これをページ作成ソフト（私の場合、Dreamweaver MX ）にコピー＆ペーストして、いろいろと弄って応用した。主な変更点は、文字コードを utf-8 にして日本語が扱えるようにすることとボタンのテキストやリンク先の指示やボタンの色を変えることなどである。
　MTへの持ち込みは、StyleText 部分を本来のスタイルシート（styles-site.css) に付け加え、<body><div> 部分のコードをテンプレートに挿入した。なお、私はテンプレートのヘッダー部分などは、モジュール化しているので以前に自分で作成しているテンプレートへの追加となる。このように多くのテンプレートを修正する場合には、モジュール化は重宝する。
　できあがりは画面でご覧いただけると思うが、このようなタブ区分と右サイドのカテゴリー区分とが完全に一致していないので、カテゴリーを再度見直す必要がある。また、サブカテゴリーも設けているので、プルダウンできるような改良も必要である。
　なお、ＩＥではボタンテキストの日本語だけのものと英語まじりのものとでは、表示が微妙に異なるようである。Ｆｉｒｅｆｏｘでは揃って表示されている。

隠居のMT：3.3-jaへアップグレードする

　６月２９日にリリースされた（７月３日に修正版リリース）MovableType3.3-jaへアップグレードした。今後のいろいろなカスタマイズは３．３を基本に行われると思われるからである。レンタル・サーバー先のlolipopのMovableTypeのアップグレードやIT's　MEMOを参考に、慎重に作業を進めた。安易な作業で今まで痛い目にあっている。それに今動いているWeblogの基本ソフトを触る作業なので、初心者にとっては恐る恐るである。それに、何やかやとカスタマイズもしている。
　まず、バックアップをとっていつでも元に戻せる体制にした。幸い、ローカルPCには、十分なディスク容量がある。ローカルPCには、サーバーのサイトと同じ構成のサイトが２組あることになる。次に、SixApart社から修正版をDLし、解凍ソフトLHUT３２を使って新たにMT3.3というフォルダーをつくり、そこに解凍した。このようにディレクトリーごとダウンロードしたりアップロードする時のFTPソフトは、HP作成ソフトのDreamweaverMX2004を使っている。lolipopのFTPサービスは、ファイル一つずつしかアップロードできない。いきなりサーバー上のcgiディレクトリーを弄ることはさけて、ローカルPC上で上記のガイド通りに、ｍｔ配下のｄｂと plugin ディレクトリーおよび mt-config.cgi ファイル以外は、削除・追加を行った。このようにローカルPC上でサーバー上に実現する構成をつくり、これを cgi ディレクトリーごと put （DreamweaverMX2004でのアップロードの表現）した。そのうえで、いつもの Movable Type Publishing Platform へログインするとアップデート用スクリプトが表示されたので、その指示通り実行するとアップデートは完了した。苦労した初期のインストールに比べるとずいぶんあっけない。
　ただし、カスタマイズしていた「エントリーを投稿する前にプレビューする」プラグインが動いていない。関連するファイルを削除してしまったためらしい。今、不具合で気がついているのはこれだけだが、また何か出てくるかもしれない。(追記：2006/7/9）どうやら、BigPAPIを使うプラグインは３．３にtransformという同機能のソフトを組み込んだだめに３．３とは相性が悪いらしい。素人の手が出せる解決策もまだ提供されていないようだ。しばらく不便を覚悟しなければならないようだ。まだ、３．３の新機能はエントリーフォームを拡大することができる程度しか確認していないが、もう少しいろいろと試してみたいと思っている。
（追記：2006/7/8）　コメントのSCodeが上手く動作していないようだったが、Scodeをインストールしたときにお世話になった「小粋空間」の”SCode プラグインでコメントスパムを制限する（その1：基本設定）”を再訪問して再度インストールし直すことにした。数字の画像が出ないのでそれに該当するようなコメントあたりも読んでいると、どうやら plugin ソフトのバグらしい。再度、SCodeのソースをDLし、インストールし直すと従前通り表示されるようになった。

続きを読む "隠居のMT：3.3-jaへアップグレードする"

MTテンプレートでのCSSによるタブメニューの作成

　いろいろと遠回りをしたが、ブログのヘッダー部分に、以前から設置したかったタブメニューを作った。このようなリンクボタンは、Flashで作るものとばかり思いこんでいた。そのために、ボタンを作るFireworksやFlash８などの学習をボチボチとしてきた。Fireworksには、Javascriptをつかうタブメニューの作り方のステップガイドがある。新しくページを作るときには有用と思えるが、MovableType（MT）に持ち込むにはいささか難しそうだ。Flash での例示は、もう少し高度なプルダウンメニューのようなものが多い。Google でサーチをしてみると、JavaScript や　Flash は使わずにスタイルシートを上手く使ってHTMLで作成できることが分かった。ちなみにいつも参考にさせてもらっている「小粋空間」さんのタブメニューもページのソースコードを見るとHTMLで作られているようだ。（一部、ＪａｖａＳｃｒｉｐｔｓが使われているようだ。）
　いろいろ探してみると CSS Tab Designer というフリーの Software(?) に行き当たった。同様の日本語サイトもあるが、どうも海外のサイトの方があか抜けている。早速、css_tab.zip ファイルをダウンロードして展開してみるとお誂え向きのサンプル (Tab Menu10)があった。これには、そのサンプルのHTMLコードがついており、これをページ作成ソフト（私の場合、Dreamweaver MX ）にコピー＆ペーストして、いろいろと弄って応用した。主な変更点は、文字コードを utf-8 にして日本語が扱えるようにすることとボタンのテキストやリンク先の指示やボタンの色を変えることなどである。
　MTへの持ち込みは、StyleText 部分を本来のスタイルシート（styles-site.css) に付け加え、<body><div> 部分のコードをテンプレートに挿入した。なお、私はテンプレートのヘッダー部分などは、モジュール化しているので以前に自分で作成しているテンプレートへの追加となる。このように多くのテンプレートを修正する場合には、モジュール化は重宝する。
　できあがりは画面でご覧いただけると思うが、このようなタブ区分と右サイドのカテゴリー区分とが完全に一致していないので、カテゴリーを再度見直す必要がある。また、サブカテゴリーも設けているので、プルダウンできるような改良も必要である。
　なお、ＩＥではボタンテキストの日本語だけのものと英語まじりのものとでは、表示が微妙に異なるようである。Ｆｉｒｅｆｏｘでは揃って表示されている。

隠居、MTにセル数の多いテーブル設置にてこづる

　Litebox-1.0で写真をグループ化して登録できるようになったので、DIY作品の写真をテーブルのセルに納めその列の下行に解説や関連するエントリーなどへのリンク先を記載したエントリーを投稿した。このエントリーを編集したときに、遭遇した問題を備忘録として書いておこうと思う。
　まず、「小粋空間」さんが、エントリーで table タグを記述する場合の注意で書かれているように、書き出しの文書とテーブルの間に大きな余白が生じる問題が起こった。困ったときのヘルプは「小粋空間」さんにしているので、すぐにこのエントリーが見つかった。ただ、「小粋空間」さんがアドバイスされている方法ではうまくいかなかった（多分私が早とちりしていると思うが）ので、そのエントリーに紹介されている藤本壱さんの「改行を変換する」を改良するプラグインを導入した。この問題はこれで解決した。
　次に、セルの列幅を均一にする方法である。これは単純にタグ　ｔｄ　のwidthプロパティを100ｐｘで設定した。サムネイルの写真の幅を100ｐｘと設定しているのでこれに合わせた。行幅はディフォールトで auto になっているようで、それぞれの行の最大値に合わせてくれる。
　セル内の字体はいままでセルが少なかったときは、「小粋空間」のテンプレート用CSSのクラス .entry を使ってきた。これでは字体が大きいし（14ｐｘとしている）、行間（150%）も広すぎる。そこで、新しいクラス .entrytbl を作り大きさ11ｐｘ、行の高さを120%に変更した。
　次にセルの枠線を変えたかったのと、テキストの縦位置を top から始めたかった。また、文字が枠線にくっつくと見栄えがよくないので少し隙間を開けたかった。ディフォールトで右枠との間隔は開いているが、どこで設定しているのかよく分からない。 td の padding をいじれば望む隙間が得られそうだったので、CSSで td の枠線と padding を設定すると上手くいった。また、縦位置は vertical-align を top にすることで解決した。他のテーブルに影響がでるが、セルの少ないテーブルでは大丈夫のようである。
　経験的に言えば、このようにセルの多いテーブルをエントリーするときはHP作成ソフト（私の場合、DreamWeaver MX）でテーブルで作成し、そのHTMLコードソース（body部分）をコピペし、エントリーの中で修正すると少しは時間の節約になると思う。　ただ、CanonとかNikon、Lumixなどのようなデジカメ・メーカーが無償でそれぞれ album 編集を提供しているので、それらを利用する方がはるかに簡便である。私の場合、 Litebox-1.0 の洒落た画像表示を使いたかったのとコメントにリンクを張りたかったので自作してみた。拙くとも、DIYがいいと私は思ってる。　

隠居のMT：3.3-jaへアップグレードする

　６月２９日にリリースされた（７月３日に修正版リリース）MovableType3.3-jaへアップグレードした。今後のいろいろなカスタマイズは３．３を基本に行われると思われるからである。レンタル・サーバー先のlolipopのMovableTypeのアップグレードやIT's　MEMOを参考に、慎重に作業を進めた。安易な作業で今まで痛い目にあっている。それに今動いているWeblogの基本ソフトを触る作業なので、初心者にとっては恐る恐るである。それに、何やかやとカスタマイズもしている。
　まず、バックアップをとっていつでも元に戻せる体制にした。幸い、ローカルPCには、十分なディスク容量がある。ローカルPCには、サーバーのサイトと同じ構成のサイトが２組あることになる。次に、SixApart社から修正版をDLし、解凍ソフトLHUT３２を使って新たにMT3.3というフォルダーをつくり、そこに解凍した。このようにディレクトリーごとダウンロードしたりアップロードする時のFTPソフトは、HP作成ソフトのDreamweaverMX2004を使っている。lolipopのFTPサービスは、ファイル一つずつしかアップロードできない。いきなりサーバー上のcgiディレクトリーを弄ることはさけて、ローカルPC上で上記のガイド通りに、ｍｔ配下のｄｂと plugin ディレクトリーおよび mt-config.cgi ファイル以外は、削除・追加を行った。このようにローカルPC上でサーバー上に実現する構成をつくり、これを cgi ディレクトリーごと put （DreamweaverMX2004でのアップロードの表現）した。そのうえで、いつもの Movable Type Publishing Platform へログインするとアップデート用スクリプトが表示されたので、その指示通り実行するとアップデートは完了した。苦労した初期のインストールに比べるとずいぶんあっけない。
　ただし、カスタマイズしていた「エントリーを投稿する前にプレビューする」プラグインが動いていない。関連するファイルを削除してしまったためらしい。今、不具合で気がついているのはこれだけだが、また何か出てくるかもしれない。(追記：2006/7/9）どうやら、BigPAPIを使うプラグインは３．３にtransformという同機能のソフトを組み込んだだめに３．３とは相性が悪いらしい。素人の手が出せる解決策もまだ提供されていないようだ。しばらく不便を覚悟しなければならないようだ。まだ、３．３の新機能はエントリーフォームを拡大することができる程度しか確認していないが、もう少しいろいろと試してみたいと思っている。
（追記：2006/7/8）　コメントのSCodeが上手く動作していないようだったが、Scodeをインストールしたときにお世話になった「小粋空間」の”SCode プラグインでコメントスパムを制限する（その1：基本設定）”を再訪問して再度インストールし直すことにした。数字の画像が出ないのでそれに該当するようなコメントあたりも読んでいると、どうやら plugin ソフトのバグらしい。再度、SCodeのソースをDLし、インストールし直すと従前通り表示されるようになった。

続きを読む "隠居のMT：3.3-jaへアップグレードする"

MTサイトパスの変更

　２００６年１月の終わり頃にレンタルサーバーlolipopを借りてMovable Typeのサイトを初めて設定した。Blogのわずかの知識だけ頼りに、何も分からず闇雲に「小粋空間」のテンプレートを導入したり、ちょこちょこしたカスタマイズをしたので、サイトがクチャクチャになってしまった。そこで、非公開のテストサイトを設けて、そこで様々な試みをすることにした。ここのサイトでのｐｈｐ化などの試みがかなり上手くいったので、これを公開サイトにすることにし、blog名を変えてサイトURLやサイトパスやホームページとのリンクなどの設定を行った。このあたりは、４年前に導入した古典的ホームページ作成ソフトDreamWeaverMXのFTP管理などの助けを借りて、それほどの障害はなく移行できた。
　いざ公開して本番で、気になるリンクなどをクリックしてみると、テキスト部分では問題は無かったが、掲載している写真およびそのポップアップ写真が表示されない。エントリーの写真投稿HTML＜a href=.....＞＜/a＞の部分の記述が間違っていると思い、一つのエントリで、はじめからやり直したら、ｐｈｐ化以前の表記では、.html となっていた部分がｐｈｐ化後は、.php となっていることが判明した。今までの投稿は、写真日記的にほとんど写真を掲載していたから、これを直す作業は大量にある。一括で変更できる方法が見つからなかったので、はじめからやり直した結果をもとにHTML記述やファイル名の変更を行ったがポップアップ写真の部分がうまく動かなかった。どうやらMTの内部で関連する部分を書き換えているようであるが、私の知識では分からない。しかたなく、すべての掲載写真部分のHTML記述を、MTのファイルのアップロード機能を使って書き換えることになってしまった。まだエントリーが少ないが、この作業に半日もかかってしまった。(^_^;)　ポップアップ写真機能を使うのはやめた方がいいのかもしれない。その方がサーバーのディスク容量に負荷をかけないこともある。

ｐｈｐモジュール化

　yujiroさんが「小粋空間」で表示されているパンくずリストを真似したくていろいろと勉強しました。

「パンくずリスト」とは、表示しているページ位置を、上位（通常トップページ）からの階層構造で表わすもので、童話「ヘンゼルとグレーテル」で、森の中で迷わないよう目印としてパンくずを落としながら歩いたということから命名されたようだ　

「小粋空間」で紹介されている方法をとるには、事前にｐｈｐ化が必要ということで、ｐｈｐ化に取り組むことになった。今から考えるとこんなちっぽけなブログサイトでは必要のないことに時間を費やしたようだ。その原因は、HPをLivedoorのBlogから始めて、それに飽きたらず古典的なHP作成をし、そして今回Movable Typeのブログサイトを作ってきたので、旧のサイトからのリダイレクトリンクを考えて、.htaccessを導入しようとしたことだ。藤本　壱さんの「MTスーパーカスタマイズテクニック」のｐｈｐ化手順に従って、ｐｈｐ化を試みたが、これがあまりうまく働かなかった。それで、.htmlから　.phpへのリダイレクトは、手作業で行うことにして、　「小粋空間」でのｐｈｐモジュールの仕組みの解説にあるように、ｐｈｐ化の目的を再構築の利便性に絞って、各主要テンプレートの共通部分のモジュール化から始めた。何回かの試行中には、parse　errorとか、ｐｈｐでのreadFileするfileのパスの書き方など、いろいろと学習することがあった。parse　errorのほとんどは、文字コードに起因するものだった。また、fileへのパスは、フルパスを使うことが良いと分かった。これらの初心者がひっかかる部分の解説は、両者ともに、あまり詳しくないように思う。その理由は、サーバーなど環境が個々でいろいろと変わるからだと思う。それと、Movable Type3.2-jaは、リリースされてからまだ日が浅く、いろいろな蓄積が少ないこともあるようだ。
　これらの試行作業中のサーバー(lolipop)側のディレクトリーやファイルの確認には、古典的なHP作成のためのDreamWeaverMXが非常に有用だった。
　なんとかｐｈｐモジュール化の手法が理解できたので、各テンプレートの共通部分については、今後モジュール化を進める予定である。また、パンくずリスト導入への取り組みについては、次回に投稿する予定である。

最近学んだことなど

　DreamWeaver2004 MXの基本機能だけを使っての古典的手法でHomePageらしきものを昨年（２００５年）の秋から立ち上げてきた。その前には、Livedoorのblogで写真日記的なものを公開していた。ごく親しい仲間に、DIYで創った作品や旅行記などを知らせるためであった。メールでは重すぎるからである。
　この冬の寒さで、ＤＩＹなどの屋外活動がやりにくくなったことも起因して、ＨＰ作成にどっぷり浸かるようになった。
　今年（２００６年）に入って、lolipopとレンタルサーバー契約をした。このlolipopのドメイン取得サービスを利用して、n-shuhei.netというドメイン名を取得することができた。これだけでも、年寄りにとっては大事業なのに、ここにMovable Type（MT)をDownLoadしてweblogサイトを開設することにした。Livedoorのblogがいつまで続くか危うさを感じたことも拍車をかけた。Movable Typeというソフトは、それまで全く知らなかったが、ML仲間の一人が使っていることもあって、思い切ってトライしてみることにした。
　 HTML, CSS, JavaScriptなど基本的な学習ができていないなかでのMTへのトライはかなり無謀と思っているが、インターネットの関連サイトや参考書を頼りに、少しづつ体裁を整えている。「小粋空間」という洒落たサイトで提供されているMT3.2用のテンプレート　body class="layout-two-column-liquid-right"　を使わさせてもらって、カスタマイズを始めた。
　本日(2006/2/1)は、CSSとメインページ、　エントリー・アーカイブを少しいじって、掲載した写真へ間隔を開けてのテキストの回り込みやサイドカラムLink部分のカスタマイズを試みた。時間を忘れてはまっている。

Atelier

Atelierで“DreamWeaverMX”タグの付いているブログ記事

MTテンプレートでのCSSによるタブメニューの作成

タグ:

隠居のMT：3.3-jaへアップグレードする

タグ:

Atelier Shuhei Weblogで“DreamWeaverMX”タグの付いているブログ記事

MTテンプレートでのCSSによるタブメニューの作成

タグ:

隠居、MTにセル数の多いテーブル設置にてこづる

タグ:

隠居のMT：3.3-jaへアップグレードする

タグ:

MTサイトパスの変更

タグ:

ｐｈｐモジュール化

タグ:

最近学んだことなど

タグ: