■　Sort Categories And FoldersはMovableType4.2で作動確認！

このプラグインはMTをCMSとして使いサイトを制作する為には、欠かせないプラグインです。

カテゴリーやフォルダの順番を管理画面から操作できる為非常に便利ですが、MT4.1対応のプラグインをそのまま導入しても何の問題もなく使うことができました。

プラグインダウンロードや設定に詳しい情報はThe blog of H.Fujimotoを参考にして下さい。

■　A-FormはMovableType4.2で作動するが、問題あり！

お問い合わせフォームを簡単に設置できるプラグインとして、多くの人が使用しているプラグインの１つですが、MovableType4.2では設置できたとしても実際に動作確認すると、確認画面になるとサイトデザインが崩れる問題があります。

これはA-Fromの設定に確認画面に進む時はテンプレートモジュールのヘッダーやフッターを読みに行くようになっており、MT4.1ではヘッダー、フッタ－がありますが、MT4.2ではHTMLヘッダー、バナーヘッダーと言った形にテンプレートモジュールの形態が変わった為に起こると思われる現象です。

テンプレートモジュールに新たにヘーダー、フーターを作ったとしても、MT4.2では再認識できずに現在ではまだ対策が見つかりません・・・

今後MT4.2の対応のなると思われるので、待ちましょう。

詳しい情報はMovable Typeにフォームを追加できるプラグイン「A-Form」をご紹介を参照して下さい。

IEには視覚効果用の独自のフィルタ（DirectX関数）が存在し、そのうちの『AlphaImageLoader()』を使って透過PNGを表示させるテクニックです。

しかしこのやり方には少し問題があり、img要素に直接指定が出来ずdiv要素などので囲ってimgを非表示にして、div要素の中に画像を別に表示させるやり方になる。

<div id="png">
   <img src="touka.png" />
</div>

透過PNGを指定したimgをブロック要素で囲みHTMLを作成します。

#pmg img{
     filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
}

img要素とそれを囲む要素にたいしてフィルタを指定し「opacity=0」が効いて画像が透明になります。

#png{
     filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
     (src='touka.png',sizingMethod='scale');
}

AlphaImageLoaderで新たに透過PNGの画像を読み込んできます。

<!--[if gte IE 5.5]>
<![if lt IE 7]>
<link type="text/css" href="ie.css" />
<![endif]>
<![endif]--!>

最後にIEだけに読み込みように条件コメントを用意します。

これで透過PNGがIEでも表示できるようになりますが、background-repeatが使えない為、使い方が限られてきます。

しかしこのやり方を覚えておけば、他にも便利に使えるところがあるといいのだが・・・

WordPressを使ってサイトを運営する時に、どうも気になるのがタイトルの順番です。何も特にしてない場合は、サイト名>>ページタイトル（カテゴリー名など）の順番になってしまいます。

実はこれが問題で、SEO対策（検索エンジン最適化）を考えると、対策したいキーワード>>サイト名にするほうが効果的だと言われているのです。

Point map Director’sを例に見てみると解ると思いますが、投稿画面でMTタグを使うプラグイン>>Point map Director’sとエントリータイトル>>サイト名にしています。これをすることによって、Point map Director’sより投稿画面でMTタグを使うプラグインの方が検索結果に影響しやすいことになります。

そもそも検索する人が直接サイト名（Point map Director’s）を入力するケースが少ないので、Point map Director’sはあまり目立たせなくて、ページタイトルなど（検索されたいキーワード）を目立たせる方がSEO対策になるのです。

話しが少しそれましたが、WordPressでタイトルの順番を変えるプラグインをご紹介します。

まずはhttp://www.netconcepts.com/seo-title-tag-plugin/でSEO Title Tag 2.1.3をダウンロードし、pluginsフォルダにアップロードします。

ダッシュボードのプラグインで使用にしたら、設定画面に開き、設定をすれば、あっと言う間にタイトルが逆転します。

SEO対策の効果はまちまちですので、あとは自力で頑張って下さい。

Movable Typeをカスタマイズなどする時に、エントリー画面からMTタグを使えたら・・・と思う事が多々あると思います。

そこで簡単にエントリー画面でMTタグを使える方法を紹介します。

まず始めにMT::Plugin::EvalTemplateをeval-template.txt保存し、ファイル名をeval-template.pl に変更します。これによりプラグインとして使用できます。

ファイル名を変更したら、pluginsフォルダにアップロードするとプラグインは有効かされます。（特にフォルダを作る必要もなく、そのままアップすればOKです）

しかしこれでMTタグが使える分けではありません！特定のコードをテンプレートの中に記入しなくてはなりません、もし<$MTEntryBody$>に使いたい場合は<$MTEntryBody eval=”1″$>と書き換える必要があります。（※eval=”1″の記入する場所間違えると大変なことになりますので要注意です）

そこでわかり易いようにする為に、カクタムフィールドを設定し、MTタグが使えるフィールドを用意すると便利です。

手順1

カスタムフィールドで<$entrydata$>とテンプレートタグを設定します。

手順2

次にテンプレートタグをMTタグを使いたいテンプレートに

<MTIfNonEmpty tag="entrydata">
<MTentrydata eval="1">
</MTIfNonEmpty>

と追加します。

手順3

これでエントリー画面のカスタムフィールドからMTタグを入力することが、できます。

このプラグインを使用するさいは、CommentsやTrackbackでの使用は危険ですので、設定には気を付けましょう。

従来、パソコンでYahoo!モバイルのページで検索すると、カテゴリー登録サイトのみの表示になっていましたが、現在はカテゴリー登録サイトではないサイトでも検索結果に影響するようになってきました。

これがどうゆうことかと言うと、実際の携帯での検索結果にも影響されると言うことです。つまりカテゴリー登録サイトでなくてもＳＥＯ対策を施せば、上位に表示できると言うことです。その対策と言うのはまた今度と言うことで・・・

変更点2　シュミレーターの変更

従来のシミュレーターではサイトのキャプチャしか機能がなかったのですが、今回の新バージョンシミュレーターではリンクが可能になりページＵＲＬが表示されるようになりました。これによりYahoo!モバイルやGoogleモバイルがパソコンでも見れるようになり、検索結果などの確認作業が便利になりました。

設置の仕方は以外に簡単なんですが、少しWordPressの知識があれば、よりクールな使い方が出来るはずです。

まずはWP-Cumulus Flash based tag cloudでダウンロードします。

解凍後wp-cumulusをpluginsにアップロードし、プラグインを使用にします。すると設定画面でwp-cumulusがでてくるのでクリックし、詳細データを必要に応じて変更します。

Width(幅）、Height（高さ）、Color（文字の色）、Background（背景色）、基本的にはこの４項目ぐらいを設定し、 UpdateOptionsをクリックすると反映さるだけでいいんではないかと・・・（※注意色指定する時は＃をはぶく６桁のカラーコードを入れます）

次にコードを表示させたい場所にタグをいれるのですが、投稿欄では[ WP-CUMULUS ]を記入し、サイドバーなど直接ページに表示させたい場合は<?php wp_cumulus_insert(); ?>と記入します。

ここで注意なんですが、Flash Player 9にか対応してないのでFlash Player 8に対応したい場合はwp-cumulus.phpの97行目あたりに

$flashtag .= ‘var ‘.$soname.’ = new SWFObject(”‘.$movie.’?r=”+rnumber,
“tagcloudflash”, “‘.$options['width'].’”, “‘.$options['height'].’
”, “9“, “#’.$options['bgcolor'].’”);’;

ありますのでここの9の数字を8に変えればFlash Player 8以降のバージョンにも表示させる事はできます。まっあまり必要ないと思うんですが・・・

あとタグを日本語で入れると文字化けしてしますので要注意です。WP-Cumulus Flash based tag cloudのサイトの下の方にJapaneseがあるですが、どうもダメみたいです。

WP-Cumulusが日本語で表示できるよう情報を集めたいので、解り次第情報を公開したいと思っています。

Step1　WordPress 2.6をダウンロードする前にWordPress 2.5のデータを抜き出しとく必要があります

サイト名

サイトディスクリプション

プラグイン

使用テーマ

投稿データなどのエキスポート（管理→エキスポート）

その他必要の応じてサイトデータをエキスポートします

Step2　WordPress 2.6のダウンロードし解凍後サーバーにアップします。

WordPress 2.5をサーバーよりダウンロードしとくと何かと役立ちます

Step3　データベースを新しく用意します

WordPress 2.5と違う名前のデータベース名を作成

Step4　WordPress 2.6のwp-config.phpを設定

define(’DB_NAME’,データベース名 ”);    //
define(’DB_USER’, ‘ユーザー名’);     //
define(’DB_PASSWORD’, ‘パスワード’); //
define(’DB_HOST’, ‘localhost’);    // データベースサーバ (ほとんどの場合変更する必要はありません)
define(’DB_CHARSET’, ‘utf8′);
define(’DB_COLLATE’, ”);

上記データベース名、ユーザー名、パスワード、をそれぞれ記入

Step5　WordPress 2.6のインストール開始

サイト名を記入

サイトディスクリプションを記入

Step6　インストール完了後WordPress 2.5のデータをインポート

ダッシュボードの管理画面からインポートを選択

インポート画面の下から２番目のWordPressを選択

WordPress 2.5からエキスポートしたデータをインポート

カテゴリーが少しおかしくなるので修正します

Step7　WordPress 2.5か抜き出したテーマとプラグインをサーバーにアップ

テーマを選択（新機能があります）

プラグインを設定します（新機能があります）

Step8　サイト表示をし確認します

この他にももっと便利な方法があるかもしれませんが、このサイトをバージョンアップする時にこのような手順でしました。

ダウンロード

MTプラグインPageButeをダウンロード

インストール

ダウンロードしたファイルを解凍後「PageBute.pl」ファイルをMovable Typeの「plugins」にアップロードします。 (特に設定とかはありません）

タグの設定

1 <MTPageContents　count=”10″>のタグを<MTEntries>の上に貼り付けます

count=”10″の10のところを縛りたい数字にします

2 </MTPageContents>のタグを</MTEntries>の下に貼り付けます

3 <$MTPageSeparator$>を</MTEntries>までの区切りたい場所に貼り付けます

4 </MTPageContents>の下に

<MTIfPageBefore>
 <span><$MTPageBefore delim="前の10件"$></span>
 </MTIfPageBefore>
 <$MTPageLists$>
 <MTIfPageNext>
 <span><$MTPageNext delim="次の10件"$></span>
 </MTIfPageNext>

と記載します。

あとはCSSでバランスよく調整してください

クールにページ分割 for Movable Type - 基本コーディング -SCREAMO様を参考にさせて頂きました。

今回のCSS Nite in Osaka, Vol.10の内容はFireworks　CS4とDreamweaverCS4の新機能についてでした。
走り書きでメモした内容と記憶にのこっていることメモにしておきます。

■　DreamweaverCS4

関連ファイルの表示機能がついか

ファイルを開くだけでDWの機能が勝手に関連ファイルを探しだして上部ナビに一括表示

コードナビゲーター機能の充実

ソースの関連CSSなどが表示できワンクリックで関連CSSの編集画面が開く

ライブビュー機能の追加

従来のプレビューとは違いJsなどの作動の確認ができる

スマートオブジェクト機能

Photoshopと連携してDW上でファイル管理でき、Photoshopデータが更新され最新のデータでない場合もお知らせ機能がわかるようになる

■　FireworksCS4

9スライスとガイド機能の充実

角丸などの画像を9スライス化しることにより角丸の形を変えずに画像の編集ができる

座標とスマートガイドが表示される

PDFの書き出し機能の充実

PDFデータに書き出す時にパスワード設定や印刷OKかNGの選択ができる

Fwデータと関連してPDFでもロールオーバーなどページビューで動きのある見せ方ができる

テキスト機能の進化

Illustratorからの縦中横などの文字データをそのまま再現でき編集できる（Fireworksでは縦中横は作れない）

ライブスタイル

角丸＆グラデーション機能

角丸のピクセル指定やグラデーションの自由度の向上

ワイヤーフレームとメジャーツール

レイヤー分けでメジャーツールが使用でき、レイヤー別にパーツ指定できる

PSD&AIファイルの読み込み

PSDデータやAIデータなどを忠実に再現できる

Adobe AIR

Adobe　AIRが作れる

XHTML+CSSの書き出し

FwデータをそのままXHTML+CSSに書き出しができる（CSSを外部にも指定可能）

以前にWordPressでiepngfix.jsを使うを紹介しまいたが、wordpressを勉強していく上でもっと便利な方法を発見しました。

前回ではiepngfix.jsはthemesとは別の階層にアップしheader.phpの<head></head>の間に

<script type=”text/javascript” src=”<?php bloginfo(’url’); ?>/iepngfix.js”></script>

と記述しましたが、今回は使用するthemesの中にiepngfix.jsをアップし<head></head>の間に

<script type=”text/javascript” src=”<?php bloginfo(’template_directory’); ?>/iepngfix.js”></script>

を記入すれば、使用するthemesごとにiepngfix.jsを導入するか、しないか決めれます。

1.cgiのperlの設定を#!C:/xampp/perl/bin/perlにする

2.mt-config.cgiのCGIPath（15行目）を    http://localhost/mt/に変更

（※mtとはMovableTypeをインストールしている階層名）

3.さらにStaticWebPath（21行目）を　#StaticWebPath    http://www.example.com/mt-staticに変更

4.データベースの情報を入力

（下記の※印のところにXAMPPで設定した情報を入力する）

##### MYSQL #####
ObjectDriver DBI::mysql
Database *********
DBUser *****
DBPassword ********
DBHost localhost

5.MYSQL以外のデータ項目を削除する

これでhttp://localhost/mt/にアクセスするとログイン画面が現われログインするとインストール情報入力画面になりインストールが開始されます。

1.現在使用しているサーバーからphpMYadminに入り、エクスポートをクリック

2.XAMPPにインポートしたいデータベース名を選択し、ＳＱＬにチェックを入れる

3.下の方に行きファイル保存にもチェックを入れ、nonになっている事を確認する

4.右方にある実行を押すと保存先を指定してエクスポートは完了

■　データベースをインポート

1.XAMPPのphpMYadminを入り、インポートをクリック

2.参照でファイルを保存した場所を選択する

3.右下の実行を押しインポートの完了

■　使用する環境に合わせる

例）Movable TypeやWordPressをXAMPPで使用している場合は【MT】mt-config.cgi【WP】wp-config.phpに設定しているデータベース名とパスワードを変更する

手順としてはWordPressを自分でセットアップできる人は簡単だと思います。

まず、Google (XML) Sitemaps Generator for WordPressにアクセスし、「Download for WordPress 2.1 and better (recommended)」をダウンロードしてください。

ＺＩＰ形式のファイルがダウンロードされるのでパソコン上で解凍の上、利用します。アーカイブの中から

sitemap.php
sitemap-ui.php
sitemap-core.php
sitemap.xsl
sitemap.pot
sitemap-ja_JP.UTF-8.mo
sitemap-ja_JP.UTF-8.po
sitemap-ja_JP.EUC.mo
sitemap-ja_JP.EUC.po
sitemap-ja_JP.SJIS.mo
sitemap-ja_JP.SJIS.po

をWordPressのディレクトリ内にアップロードします。アップロード先のディレクトリは、/wp-content/plugins/　内に sitemap という名前で自分でフォルダを作成して、その中に上記ファイルをアップロードします。

次にテキストエディタで空のファイルを作成します。ファイル名をsitemap.xmlとして作成してください。それをWordPressを設置したトップディレクトリ（wp-config.phpと同じ階層）にアップロードします。アップロードしたsitemap.xmlはパーミッションを606・777にし書き込みの権限を与えてください。（サーバーの設定により異なります）

WordPressのダッシュボードにアクセスし、[プラグイン]メニューよりGoogle XML Sitemapsを使用するにしてください。

ダッシュボードのメニュー[各種設定]のサブメニューとして、「XML-Sitemap」が追加されるので、そこをクリックしStatusという見出しの下、Click here to build it the first time.のClick hereをクリックするとsitemap.xmlが作成されます。

なぜだ・・・と必死で調べたところ、これが怪しいと思うところを発見し試しに実験してみました。

思い通りにLightBoxが作動してくれました（＾＾）

◆原因

当サイトのテンプレートはオリジナルで用意してはじめから自分で気合を入れて作成しました。
しかしWordPress初心者なものでプラグインを使う為のWPタグが必要だと言うのをしりませんでした・・・

header.phpの<head></head>のは間に

<!–プラグイン開始 –>
<?php wp_head(); ?>
<!–プラグイン終了 –>

を追加してやると普通にLightBoxが作動してグワーンとなりました。

↑クリックして下さい（サンプル）

1.iepngfix.jsスクリプトをダウンロードしてサーバにアップロードすれば問題ないのですが、WordPress使用の場合はthemesのテンプレートにアップするのではなくドメイン直下にアップします。

2.themesの中の使用テンプレートのheader.phpの<head></head>の間に
<script type=”text/javascript” src=”<?php bloginfo(’url’); ?>/iepngfix.js”></script>
と記述します。

3.themesの中の使用テンプレートのｃｓｓに
* html .iepngfix {
behavior: expression(IEPNGFIX.fix(this));
}
を記述します。（赤文字のところはPNG画像を指定したクラス名、もしくはID名を記述）

4.使用テンプレートｔhemesの中にアップロードし完了です。

管理画面に入り右上にあるadminをクリックし下の方に行くと普通に変更が可能です。

■　WordPressパスワード変更(phpMYadmin編）

WordPressのインストールのが完了するとパスワードの発行画面がでますが、このパスワードを忘れると管理画面に入れず設定ができなくなってしまいます。でも次の方法を頭の片隅に置いとけば一安心です。

• 1.phpMYadminに入りデータベースを開きます
• 
• 2.WordPressで使用しているデータベース名をクリックし開きます
• 
• 3.テーブル一覧からwp_usersを選択し表示ボタンをクリックします
• 
• 4.出てきたテーブル（admin)にチェックを入れ、鉛筆マークをクリックします
• 
• 5.テーブル一覧からuser_passの関数覧をMD5に設定し値覧に希望のパスワードを入力します。
• 

これでWordPressのadminを開き先ほど入力したパスワードを入れたら管理画面に入れるはずです。

この他にもやり方があるかもしれませんが参考までに・・・

ちななみにXAMPPにWordPressをインストールする際にパスワード発行画面に行けず断念して、色々調べた結果この方法を知りました（＾＾）ｖ

実にディレクターとして頑張りはじめた僕には、共感させられる内容がビッシリでした。
色んな方とお話しができて、デザイナーの悩み、プログラマーの悩み等など、色んな意見を参考に新たにディレクターとして頑張る決意し直した今日この頃です。

関西のWEBを盛り上げる為にもCSS Nite in Osaka vol.8みたいなセミナーにもどんどん参加して行きたいです！！

Apache Friends - XAMPP for Windowsのページからダウンロードできる、最新版のXAMPP　1.6.4は、同ページからインストールできるがPerl 5.8.8-2.2.4がそのままでは動かないから、SourceForge.net: XAMPPよりXAMPP 1.6.3a（旧バージョン）をダウンロードする

ダウンロードが済めば、XAMPP1.6.3aをインストールし次にPerl 5.8.8-2.2.4もインストールする（インストールする時はjapaneseを選択する）

◆MT4をローカルで動かすにはセキュリティの設定が必要

http://localhost/xampp/を開くと上記の画面になるので、「English」を選択する
※日本語でセキュリティの設定ができないため

「Security」をクリック し開いた画面をスクロールするhttp://localhost/security/xamppsecurity.phpをクリック するとパスワード設定画面になりのいでパスワードを設定する

設定が完了したらTOP画面に戻り日本語を選択し、『XAMPP Windows版へようこそ Version 1.6.3a !』とでればOK！

◆phpMyAdminによるDBの設定

phpMyAdminを使って見て（ブラウザで、http://localhost/xampp/を開き、 「phpMyAdmin」をクリック）

言語の設定（MTを使う場合なら、通常は「日本語 - Japanese (utf-8)」）をし

• ユーザー名：root
• パスワード：先ほど作ったパスワード

を入力して「実行する」をクリックし、DB名をつけて「作成」をクリックすれば完了

これでXAMPPの設定はおわりでMovable Typeをhtdocsの中にセットすればローカルでMT4ワールドが実現するでしょう。

勉強がてら情報を書き残していきます。

いつかフルカスタマイズでハイレベルなサイトを作ってやる