CKEditor 1.0.2 をJuser.jpで公開しました。

今月早々に3.1がリリースされていたようで今日気づいたばかりでしたが、今回はbaseHrefにちゃんと対応してくれたようでイメージのパスが、AbsoluteであってもRelativeであってもイメージのプロパティ画面で表示され、またエディタ内でもちゃんと表示してくれるようになりました。今まではCKEditor自体をちょっとHackしていましたが、今回からNo Hackでいけそうです。

違うブックマークでそのサイトを見たのですが、ブックマークとは違うものが気になりました。

Chef Curve

なんだろう？と、よく見てみると画像の形に合わせてテキストが画像をよけているではないですか・・・。

これは、見たことが無い気がします。いや、見ていたとしても気づかないかもしれない。あまりにさりげなくよけている・・・。

テキストの高さと画像に合わせてfloatで画像幅の分を左よせにしているだけなのですが、これって必要な場合もあるのじゃないかなぁ。

http://flumpcakes.co.uk/

こちらのサイトでは、他にもおもしろいスクリプトがありました。

Thousand Words

PHPですが、ASCII イメージをつくってくれるようです。これもあれば、実装したい人いるのではないかな・・・少ないだろうけど。

他にも単語の文字を並び替えたりするスクリプトなどがあったりで、サイトのトップ画像がまた・・・なんとも言えないのですが、他のスクリプトも含めて公開されているものを見ているとなんだか、楽しそうな感じがしました。

結局CSS Optimizerを見に行って他のスクリプトを見て帰ってきました。

先日からコツコツとテンプレートを作成していて面倒になってきたので「え～い」とフリーのテンプレートをいろいろ見ながら「よし、これにしよう。」・・・え！？　あまりに面倒になってきたのでフリーのテンプレートでいいやって思ってしまって。

ダウンロードしたテンプレートをいざインストールしようと思ったらそのままインストールできない。たまにあるのですが、一度解凍して中にあるzipファイルが本体でした。解凍してみるとライセンスファイルやread.txtがあるので開いてみるとリンクを消してはいけないと書いてある。消すならいくら払ってくださいとも書いてありました。フムフム、お金取るくらいの良いのを選んだなと。

・・・やっぱり、やめた。

またテンプレート作成の続きをはじめる。

「IE６など無くなってしまえ～。」などと時々つぶやきながら。

おかげでかなり完成に近づきました。

と、ふと思ったのですが、うちのエクステンションにもリンク・・・あっ・・©　がついていた・・・・。

消しても良いですよ。今度から表示しないようにしよう。

今度のテンプレートは、新しいエクステンションを表示しようと思っているのでphpを書きながらcssを編集してjavascriptも編集、htmlも編集、イメージの作成・編集しながらやっているのでなかなか進みません。

私が記事に何を書いてもはみ出さず、崩れずなテンプレートを誰か作ってくれないかしらん・・・。

overflow:hidden!

以前からどこかの記事を見て知っていたのですが使っていませんでしたが、今回ふと思い立ち使ってみました。

はじめは、ヘッドタグに書き込むだけで良いのかと思っていたら

The script only fixes images named: *-trans.png

と書かれています。どうもファイル名に-transがついていないと何もしないようですね。

http://code.google.com/p/ie7-js/

そこで

1. #__contentテーブルだけをphpMyAdminからDROP TABLEとIF NOT EXISTSオプションを追加して（他はデフォルトのまま）エクスポート。
2. テキストエディタで1のsqlファイルを開き正規表現の置き換えで以下のように指定し、pngファイルを指定しているすべてを置き換えた。
   
   検索する文字列　(src="/[^"]*)(\.png")
   
   置き換え後の文字列　\1-trans\2
3. サーバーのイメージの保存場所から全てのイメージをダウンロードし、これまたファイル名を正規表現で置き換えます。
   現在の名前.png　を 現在の名前-trans.pngに置き換える。
4. 全てのイメージをサーバーにアップロードします。
   （万一のリンク切れが発生しないように以前のイメージはそのまま残るようにしています。）
5. テンプレートのindex.phpまたは、CustomHeadTagプラグインを使っているなら以下をヘッドタグに追加します。（IE8.jsを使うならIE7.jsを指定する必要はないようです。）
   <!--[if lt IE 8]>
   <script src="http://あなたのサイトのJSまでのURL/IE8.js" type="text/javascript"></script>
   <![endif]-->
6. 完了

いかがでしょう右上にPNGを貼り付けてみましたが・・・・。

オチがありました。

今回は、メニューを作成してみましょう。

元のメニューは、よく見慣れたJoomla!をインストールするとデフォルトで選択されているテンプレートのメニュー（右側の画像）です。それを下のような横型のメニューに変えてみましょう。

手順は、オンラインでメニューを作成してくれるサイト
「CSS MENU MAKER」
で作成したイメージとCSS Codeを利用してそれをJoomla!のテンプレートに適用します。

まず、下記サイトへ行ってください。

CSS MENU MAKER

今回は、横型なので右側のHorizontalの中から気に入ったメニュー左の「Customize」をクリック。出てきた画面の１番にメニューの数を入力します。面倒なので１でOKです。それから「Update your Menu」ボタンをクリック。２番の「Button Label」と「Link」は、いらないので「Generate Menu Code」をクリック。

上のような画面が出てくるので「Click here to download image files」をクリックしてイメージをダウンロード。そして下の「CSS Code」欄の内容をコピーします。サイトテンプレートのCSSを開き、一番下部にでもペーストし、以下のように変更します。

を

のように変更し、ダウンロードしたイメージをサイトテンプレートのimagesフォルダに入れます。そして管理画面から、モジュール一覧を開き、変更したいメニューモジュールの設定画面を開きます。（今回はメインメニュー）設定項目の「メニュースタイル」でフラットを選択し、保存。

以上で横型メニューができあがりました。

まだ、試していませんが、サブメニューのあるソースもダウンロードできますのでSublevelのメニューが欲しい方も工夫すればJoomla!に適用できるのではないでしょうか。