小粋空間で CKEditor for Movable Type 5.0 のブログテンプレートが紹介されていました。

世界中の１％の人々へ　によると

Movable Type 5.0用WYSIWYGエディタの決定版打！堂々の公開！

CKEditor for MTには、以下の特徴がある。

   1. 出力コードが正確
   2. 動作が軽快
   3. 機能が豊富
   4. 使いやすい
   5. カスタマイズが簡単

 

という事で、早速インストールしてみた。

GitHub のDownloads からダウンロードします。

画面の目に付く所に有る「↓download」ボタンからダウンロードするよりも、その下に有る
CKEditor-1.02.zip からダウンロードした方が良いみたい。

ダウンローしたファイルを展開して、サーバーにアップするが、アップする [ckeditor] フォルダが
二つ有り、ディレクトリが紛らわしいので注意。思っていた以上にファイルが大きく、その大きさ成りに機能も豊富、使いきれない (^^ゞ

このプラグインの特徴・インストール・使用方などは「世界中の１％の人々へ」がお勧め。

小粋空間で、「Movable Type 4.261 から Movable Type 5.0 へのアップグレード検証」を参考にして MT5 にバージョンアップした。
サイドバーをカスタマイズしていた為上手く行かない。
原始的な手法では有るが、新規インストールに沿った確実な線でやってみた。

まずは、最悪の場合でも MT4 で復元できる様に、徹底的にバックアップを取っておく。
当方の様に、サイドバーをカスタマイズしている場合では、カスタマイズしたウィジェットテンプレートの内容をバックアップ。
その他、関連するテンプレートモジュールとかファイルなども忘れずにバックアップしておく。

ツール→エクスポート　ブログをエクスポート　　****_site.txt　でバックアップすると、テキストだけの保存で、
画像は内部的に images フォルダにリンクするので、サーバーに取っておく。

MT のアプリケーション部分だけを変更する考えなので、他のフォルダも手を加えずにそのままにしておく。
サーバーでルートにブログサイトを置いている場合では、ルートに有るファイルは全て削除する。

サーバーのブログ用データベースを一旦削除して、新規に作成する。

参考にしたページでは以下の様に成っている。

アップグレードの前準備は、以下の通りです。

•  MT4.261 のディレクトリ（mt）をリネーム（mt-- 等）
  
•  MT5.0 のディレクトリ（mt）を作成プログラムを配置
•  MT4.261 の mt-config.cgi を MT5.0 のアプリケーションディレクトリにコピー
•  mt ディレクトリにアクセス

新規インストールの手法でする場合では、MT4.261 の mt-config.cgi を MT5.0 のアプリケーションディレクトリにコピー、をしない。

mt ディレクトリにアクセスすると、新規にインストールする手順に成る。
Movable Type 5 ドキュメント
ロリポップ！サーバーへのインストール

自分が使っているスタイルを、カラムに注意して指定、再構築。

ツール→記事のインポート　インポートファイルをアップロード(オプション) で「ブログをエクスポート」した ****_site.txt を「参照」ボタンから指定する。
再構築して確認する。

カスタマイズした部分を再生、設定して再構築。


後日、小粋空間で、「Movable Type 5.0 にアップグレードする場合の注意事項」がアップされた。
自分の場合、上記の手法でアップグレードしたが、今の所取りあえず問題無い。

 

以前から IE6 問題で色々対処していたが、テスト用の PC でたまたま WinXP を再インストールする事に成った。

imagenavi ブログパーツが表示されない、Adobe FlashPlayer をインストールしたら、
「Flash Player 10」がインストールされる。

これが、また表示されない。バグ問題が有るようだが、セキュリティ上ではニューバージョンを使った方が望ましいが、テスト用なので表示されないと困る。

ググって、何とか「Flash Player 9」にダウングレードした。

Flash Playerをアンインストールして旧バージョンに戻す方法 を参照して、手順を把握しておき、【エラーメッセージダイアログ】が出て先に進めなく成る場合では、「flash player」のダウングレード を参照してレジストリの処理を行う。

例によって、At your own risk で・・・

IE6 のバグ問題で、ブログパーツのレイアウトが崩れてしまって、色々検討してみた。

前回 div タグの入れ子 で、何故入れ子にすると IE6 でレイアウトが狂うのか、と思い、IE6 では float 問題が有り、レイアウトが崩れるという現象から、どうもこの辺が怪しいと思った。

ググってみると、
floatプロパティ・positionプロパティで問題が有る。
float プロパティを left にした場合、指定した要素を左に寄せます、後に続く内容はその右側に回り込みます。
とか書いて有る。


Movable Type の管理画面から
デザイン → テンプレート → スタイルシート

/* This is the StyleCatcher theme addition. Do not remove this block. */
@import url(/mt/mt-static/themes-base/blog.css);
@import url(/mt/mt-static/themes/cityscape-portland/screen.css);
/* end StyleCatcher imports */

この場合 cityscape-portland を使っています、デザイン → スタイル で他のスタイルを選択した場合は、また違う名前のディレクトリ・ファイル名に成ります。

blog.css と screen.css から　

#alpha, #beta, #gamma {
    display: inline;
    float: left;
}

.layout-twt #gamma {
    width: 190px;
}

.widget-content {
    padding: 0 15px;
}

なので、右サイドバー（#gamma）でブログパーツを表示させたい場合、widget-content の padding の値が左右でそれぞれで 15px なので、その二倍の 30px に成る。

右サイドバーでのブログパーツの幅は、190px-30px → 160px と成り、実質 160px 以内で無いとレイアウトに障害が発生する
、と考えた。

検証してみると、

.widget-content {
    padding: 0 0px;
}

として

<mt:If name="main_index">
        <div class="widget-content">
           <div>
    　　<img src="<MTBlogURL$>daycount/daycount.cgi?gif">
           </div>

<div class="imagenavi">    
<script language="javascript" src="http://imagenavi.jp/lab/blogparts/bp.js"></script>
<script language="javascript">inBlogparts("1","1","7");</script>    
</div>

         </div>
</mt:If>


imagenavi を <div class="widget-content"> タグの入れ子にしても、レイアウトは崩れない。

.widget-content {
    padding: 0 15px;
}

では、レイアウトが崩れてしまう。
imagenavi では、たまたまコンテンツの幅が 160px を超えている様で、今回の現象に成ってしまったと思う。

前回  IE6 ハック でブログパーツのインストールで、色々試した。

ie6fixer を使って CSS を修正した、と思っていたが、さらに原因を解明しようと思って検証作業をした。
直ったと思っていたが、また同じように IE6 でレイアウトが狂ってしまう。

どうも原因は別の所に有りそうだ。

様々な原因を検討して、検証していたら、div タグの入れ子の状態を変えてみたらOKと成った。

imagenavi ブログパーツをサイドバーに入れたが、前回の状態では、確かにそのままでは正常に表示されなかった。
今回入れ子にしない方法を試してみたが、これも確か前回試したはず？

JavaScript を使ったブログパーツでは、IE6 に問題が出る事は確かなようだ。
＊後日 widget-content の padding に問題が有る事に気が付いた。


以下の方法ではNG、ウィジェットテンプレートにカウンター（daycount）と一緒に入れている。

<mt:If name="main_index">
        <div class="widget-content">
           <div class="daycount">
    　　<img src="<MTBlogURL$>daycount/daycount.cgi?gif">
           </div>

<div class="imagenavi">    
<script language="javascript" src="http://imagenavi.jp/lab/blogparts/bp.js"></script>
<script language="javascript">inBlogparts("1","1","7");</script>    
</div>

    </div>
</mt:If>


div class="daycount" div class="imagenavi" は、それぞれ CSS で設定済み。
<div class="imagenavi"> は、<div class="widget-content"> タグの入れ子に成っています。


以下の方法でOKと成った。

<mt:If name="main_index">
        <div class="widget-content">
    　　<img src="<MTBlogURL$>daycount/daycount.cgi?gif">
    　　</div>

<div style="text-align:center;">
    <div style="margin-top: -10px; margin-bottom: 10px; margin-left:auto;margin-right:auto;">
<script src="http://imagenavi.jp/lab/blogparts/bp.js" language="javascript"></script>
<script language="javascript">inBlogparts("1","1","7");</script>
    </div>
</div>

</mt:If>

ちょっと分かりづらいと思いますが、div タグのネストを良く見て下さい。
imagenavi の部分は <div class="widget-content"> に入っていません。


今回のブログパーツでは、javascript を使っているが、何故入れ子にすると IE6 でレイアウトが狂うのか、不思議だ。
色々ググったが、その事に触れているサイトは無い。

サイドバーのブログパーツを新しくしたいと思い、インストールしたら表示されない。

<script language="javascript"> を使っていたので、<script type="text/javascript">
としてみたらOK

エントリーの画像に外部リンク でも触れたが、IE6 の問題で引っ掛かってしまった。
手持ちのブラウザで確認すると、IE7　Firefox　Safari　Chrome の全部OKで、IE6ではレイアウトが狂ってしまう。

coliss で [CSS]スタイルシートを自動でIE6対応にするオンラインサービス -ie6fixer を参考にして、
ie6fixer を使って CSS を修正した。

取りあえず全部のブラウザで確認したらOK、少し上下のマージンが変化している。
適性化して、ソースを良く見てみたら、<script language="javascript"> を使っていた。

結局、MT では IE6 の対応には少し気を付けないと、問題が出る事が有る。

Melody のページ画像を貼り付けて、そこに外部リンクしようとしたら、様々な問題に気が付いた。

知人からホームページの製作に付いて相談を受け、試作という事で検討したが、一応会社のHPなのでソースが文法的に出来るだけ間違いの無い様にしたい。

昔は単純なHTMLで、DOCTYPEはHTML 3.2 くらいで、それから先はブログの世界に入って行ったので普通のHPの勉強はストップしていた。


先進性とかを考慮していざ、まともなHPを書こうとしたら、XHTML＋CSS が主流で、従来のHTMLとは細かな部分で違いが有る。
まず、XHTML 1.0　でも　XHTML 1.0 Strict DTD　XHTML 1.0 Transitional DTD　XHTML 1.0 Frameset DTD
が有る。

色々調べたら、従来のHTMLとか各種ブラウザの互換性・整合性からすると、取りあえず、XHTML 1.0 Tranditional
が一番無難、という事に成った。将来的には　XHTML 1.0 Strict　→　XHTML 1.1　の流れに成るらしい。

CSS の解釈が各ブラウザにより異なっていて、特に問題に成るのは IE6 らしい。
実際に自分の作ったサイトで検証してみると、微妙に違いが生じている。このサイトも部分的にカスタマイズしていて、ブラザの違いが分かる。


前置きが長く成ってしまったが、検証する為に各ブラウザのシェアを調べて、IE(6・7)　Firefox　Safari　Chrome と各種取り揃えていた。

Melody の画像を貼り付けて、リンクしようとしたら出来ない。仕方が無いので、入力のフォーマットをリッチテキストのHTMLモードにして、

<a href="http://openmelody.org/"><img src="http://midforce.net/images/melody.jpg" /></a>
と書いて、さらに

<div align="center">
<a href="http://openmelody.org/"><img src="http://midforce.net/images/melody.jpg" /></a>
</div>

としてみた、一応見る事は出来るがどうもテクニック的にすっきりしない。「画像の挿入」アイコンで出来るHTMLソースを使って
<a href～>*****</a>を入れる事にした。

最初は位置を指定しないで画像を入れて
<form mt:asset-id="49" class="mt-enclosure mt-enclosure-image" style="display: inline;" contenteditable="false"><img alt="melody.jpg" src="http://midforce.net/images/melody.jpg"" class="mt-image-none" style="" width="458" height="200" /></form>

から
<div align="center">
<form mt:asset-id="49" class="mt-enclosure mt-enclosure-image" style="display: inline;" contenteditable="false"><a href="http://openmelody.org/"><img alt="melody.jpg" src="http://midforce.net/images/melody.jpg"" class="mt-image-none" style="" width="458" height="200" /></a></form>
</div>

としてみた、<text align="center">もしくは<p style="text-align:center">だったかもしれない。これでOKかと思って各ブラウザで確認したら、一部おかしい。
色々なやり方を試したので、細かい部分では違う手法だったかも。

とにかく、Safari　で画像の一番下に１ピクセル位の白い線が入ってしまう。よく見ないと気に成らないが、納得いかない。

ググってみたら、#fc0 で「テキストにリンクを貼っていると、画像にリンクを貼れない」
が有った。
さらに、リンクする画像を、IEの場合はリンクする画像をドラッグして、リンクアイコンからURLを貼るが、たまたま使っていたのが Lunascape で、IE以外の場合では、リンクする画像をクリックして、リンクアイコンからURLを貼る。

最初からリンクのやり方が間違っていた。

結局、「画像の挿入」アイコンから、位置を「中央」にして画像を貼り、その画像をクリックしてリンクアイコンからURLを貼った。

<form mt:asset-id="49" class="mt-enclosure mt-enclosure-image" style="display: inline;" contenteditable="false"><a href="http://openmelody.org/"><img alt="melody.jpg" src="http://midforce.net/images/melody.jpg" class="mt-image-center" style="margin: 0pt auto 20px; text-align: center; display: block;" width="458" height="200" /></a></form>

と成り、どのブラウザで見てもOK。


この form 要素は、MT がブログ記事とアイテムとの関連性が有るので、書き換えない様に、と
「Movable Type 4.2 パーフェクトガイド」に書いて有った。

出力ファイルでは
<span class="mt-enclosure mt-enclosure-image" style="display: inline;"><a href="http://openmelody.org/"><img alt="melody.jpg" src="http://midforce.net/images/melody.jpg" class="mt-image-center" style="margin: 0pt auto 20px; text-align: center; display: block;" width="458" height="200" /></a></span>

と成る。

参照サイト
#fc0
小粋空間
PHP & JavaScript Room

WordPressに対抗した、新たにオープンソース版のMTという事で、MTOSとの関連性など取り沙汰されている。

Melody が出たなら Nelson はどうした、などと変な事も言われている　(^_^)

早速インストールしてアップしてみた。

REDONC MELODY

取りあえず特に変わった所は無いが、インストールの手法が少しだけ昔に戻った。

今回比較的スムーズに行った、と思っていたが良ーく見てみたら、
サイドバーのカスタマイズした部分で、左右のマージンが少し違う。

スタイルを Cityscape Houston を選択しているので、css の修正をしている。
class="widget-content"でデフォルトでは少し左寄りに成っているので、センターにする。

デザイン→テンプレート→スタイルシート
@import url(/~path/cityscape-houston.css);

cityscape-houston.css で、カスタマイズした部分の修正を追加する。

今までのバージョンアップでは、予め用意したファイルをアップして、新規のインストールしていたが、今回は普通のアップグレードの方法だったので、その事を忘れていた。

小粋空間の表現では、「今回は変更ファイルが多かったので、通常のアップグレード手順を紹介します」
という表現でしたが、自分としては、変更ファイルが多い場合であったなら、全部を新規インストールに成ってしまう。

その人のレベルによって、感覚が随分違うもんだなーって思った。

とにかく、何時も css で引っかってしまう。

セキュリティアップデート Movable Type 4.22 の提供を開始

「Movable Type の管理画面において、クロスサイトスクリプティングによる脆弱性が確認されました。この問題に対処するため、Movable Type の修正バージョンを公開致します。脆弱性の修正バージョンとなりますので、アップデートを強く推奨致します。」

という事で、アップデートしました。

 

今までは、内部構造が大きく変わったり、アップデートの方法が、ここをああしてこうして、と面倒な手法を要求される場合が多かった。

じっさい、部分的に自分なりのカスタマイズした部分では、新規でインストールする方法を取っても、内部構造が変わったりしたせいで、かなり手こずった。

4.12 から 4.21 へアップグレードした際にも、散々な目に有って、その様子をブログに書こうと思っていたが、余りにも複雑というか面倒だったので、書き損ねていた。

3.x から　4.0 への時にも苦労したが、毎回悩まされる。

 

今回の場合は、小粋空間：Movable Type 4.21 から 4.22 へのアップグレード 　を参考に、比較的スムーズに行った。