Geeklog実験室 Geeklogのテストや改良のためのサイトです    

2010-09-08 00:23
 記事を友人にメールする 印刷用画面 

透過PNGの対応

変更したところまとめ_重要

今まで散々手動対応してきていた透過PNG(アルファチャネル使用)を画期的な方法で解決できたので重要案件に格上げした。

レイアウトのheader.htmlの<head>エリアに

<!--[if lt IE 7]>
<script type="text/javascript" src="{layout_url}/javascript/pngfix.js"></script>
<![endif]-->

レイアウト/javascript/ に pngfix.js を追加する

以上でBBSなどで表示が不細工になっていたアイコンがきれいに表示される。以前用いていた方法と比較するとはるかにスマートな上にカーソルを合わせたときに指アイコンがなくなってしまうということもなくなった。ただ、記事をメールで送る・プリントアウトするアイコンのサイズが若干おかしいようだ。元のファイルが透過している部分もおかしいので差し替えたほうがよいだろう。以前と比較すればこちらの問題のほうが軽微だ。
スバラシイ!

#サイト名のロゴ表示の透過がうまくいかないようだ。なぜか変更させたくないのかlayout.css中のbackground-imageで表示するというわかりにくい場所と手法だ。この場合の透過はしてくれないので、やはりimgタグなどで表示するのがいいかな。

 記事を友人にメールする 印刷用画面 

なんてこったい!(透過PNG)

ひとりごと

海外から使えるテーマでも探そうかとぶらついていたら、本家のforumプラグインサイトにたどり着いた。「そういや2.7ってどうんなだろ~」とブラウザを切り替えたりしているとハッと気がついた・・・・(いまなんか透過PNGが一斉に切り替わった)
なんだこれぇぇぇどうやってんだろ!とソースを見てみたが私が散々書き換えまくったようなコードも見当たらない。
てことはテンプレートの書き換えなしで出来るのかうほぉぉすげぇぇぇ!いっせいに変わるところを見るとfooterあたりでJavascriptかっ?でも見当たらない。どこじゃどこじゃー、おお先頭にそれっぽいのが!これだー!
JavascriptにURL書いてある。どれ、行ってみよう。おおおお(ここでまた感動)。

読みづらい文章になってしまって申し訳ないです。あまりの喜びに我を忘れていました。
どうやら海外ではPNGfixというのが主流なのかもしれません。

見つけたサイトはこちら
The PNG problem in Windows Internet Explorer
ぜひIEで見てやってください。下のNext>>から辿って、車をドラッグすると・・・

こちらから最新のJavascriptをいただいて当サイトにも適用することにする。いままで文法を無視してAタグの中にDIVタグ入れたりしてたのはなんだったんだと。目から鱗状態。これでレイアウトやソースの改変を大幅に減らすことができそうだ。というか戻す作業が大変。ちなみにforumプラグインの本サイトでもこちらが採用されている。
これから修正したポイントを変更する作業に入ることにする。

IE PNG Fix v1.0 RC4
ほかにも上記のサイトを見つけたので参考に貼り付けておく。

 記事を友人にメールする 印刷用画面 

FCKEditorを2.4.3にアップグレードする

変更したところまとめ_どちらでも

本家のGeeklogでも採用されると思うので適当アップグレード。とりあえずやってみたら成功しちゃったので書いてみる。不具合があっても責任は負えないので自己責任でお願いします。(FCKEditorのことはほとんど理解しないままやっちゃったので)追記:2.4.3は特定環境でセキュリティ脆弱性があるそうですのでご注意を。

1.FCKEditorの最新版をダウンロードしてくる。
2.解凍する。
3.解凍してできたfckeditorフォルダの中身をgeeklog/public_html/fckeditorに全部コピーする
4.パーミッションなんかがおかしかったら適当に直す

ぶっちゃけコピーするだけ(笑)

あとから知ったのですが公式のダウンロードコーナーにGeeklog 日本語環境用 FCKEditor_2.4.3というのを豆腐屋さんという方がアップロードしてくださっているので、そちらに差し替えてみました。手順はほぼ同じ。不要なファイルを消してくださっているのですっきりしました。

重要:ブラウザのキャッシュを一度クリアしないと反映されないかおかしくなります

メリット1:エンターを叩いた時の改行を設定で変更できる(pタグうざいのよ)

メリット2:スキンを変更できる(今までのダサいよね?w)

メリット3:Firefoxで改行の関係で入力している部分が画面外にはみ出てしまうことがなくなった

メリット4:Firefoxで編集エリアを拡大縮小しても勝手に元に戻ることがなくなった

問題点:Firefoxでツールバーを変更するとエディットボックスの長さがうまくついてこない

問題点:Firefoxでの全画面表示は直らなかった(残念)

問題点?メリット?:入力のフォントサイズがだいぶ小さめになっている

設定を変更するには
geeklog/public_html/fckeditorにあるmyconfig.jsを編集すればOK
メニューのカスタマイズもここで可能だ。個人的には消しゴムをデフォルトである一般的なツールバーに入れたいところ。

FCKConfig.EnterMode = 'br' ;      // p | div | br
FCKConfig.ShiftEnterMode = 'p' ;  // p | div | br
FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/silver/' ;


上の3行を追加するとエンターで<br>、Shift+エンターで<p>タグになる(通常は逆)
スキンも古くさいのからXPのシルバー風に!