村雨…叢雨

　所用で出かけようとしたら外は雨。少し待って、止んだかと思ったら又降ってきました。明日にするか。

　decoweb樣からロゴが表示されていなくても使用可とのメールが届き、自作テンプレートの修正が終わるまで(終わるかな？)またSimple Modernを使うことにしました。Livedoor用のSimple ModernⅡの方が好みの配色なのですが、



　ココログ用はないので残念。

何なんだよ～

　自作テンプレートの修正が終わって適用したら、例によってFirefoxやOperaなどではチャンと表示されるのに、IE系のレンダリングエンジンを使ったブラウザでは記事のタイトルが右へズレるのが直っていない。まだ見ていないけれどIE8ではもっと悲惨な表示だろうな～。
　しかも記事のフッターも右へズレていて、かろうじて枠内に収まっている状態です。更に！どういう訳か５月２１日の記事タイトルだけは設定通りに左寄りで表示されているのは何故？

　この記事をアップしたら、タイトルはどちら寄りで表示されるのでしょうか？結果次第でまた修正かな。
　では「保存」！っと。

続きを読む "何なんだよ～"

無題

お先にと
　濁声で逝く
　　夏の宵

コロコロテンプレート

　

decoweb樣から拝借したテンプレートですが、利用規約に

当サイトでは、無料のテンプレートのフッターに『decoウェブ』ロゴ又は『無料テンプレートのdecoweb - テンプレート』テキストを配置（著作権表記）しリンクの表示をさせていただいておりますので、表記ははずさずにご利用下さい。

　と、明記されています。
　ところが、設置したブログのフッター部にロゴもリンクテキストも表示されていません。メールで問い合わせたのですが未だ返答を頂いていないので、それまでココログのテンプレートを使うことにしましたが、IE8での馬鹿でかいh2要素のフォント表示がネックになってこれ！といったテンプレートが見つかりません。
　前に使っていた自作テンプレートの修正が終わるまでは、(ノ･･)ン｡｡｡｡｡｡(((●コロコロッとテンプレートが変わってお見苦しいかも知れません、悪しからず。

Google Chrome V2 アップデート

先日、Google Chrome beta版V2のアップデートを実行しましたが、う～ん何だか起動が少し遅くなった気がする。

それより何より、オートスクロールの表示が変わってしまったのがとても残念！

前の表示、棒振(ぼうふら)みたいな動きが好きだったのにな～。
Safariと同じではイヤなのでしょうか？Googleさん。

なんて事を書いていたら、あ、またバージョンアップしている。早速アップデートっと。

お、起動時間が前のように速くなっています。よしよし。

だけど、オートスクロールの表示はそのままでした。ガッカリィィイ。

ｈ2要素

　CSSを手直しして、とりあえずOperaでのメイリオ表示と、Safari、Google Chromeでの背景表示が可能になりました。

　Operaでメイリオが表示されなかった原因は簡単なことでした。これは私の場合ですが、OperaでCSSのフォント設定にメイリオを指定するときは半角英数字の「Meiryo」の前に全角文字で「メイリオ」と記入しなければ反映されません。

font-family: 'メイリオ',Meiryo,～

　一応CSSには全角文字で書き込んだので安心していたのですが、実はいったんテキストエディタで記述した文字をCSSファイルにコピペする際に、文字コードをシフト-JISで貼り付けていたのです。ココログは文字コードがUTF-8ですからこの部分だけ読み込んでいなかった訳ですね。Operaでメイリオ表示されないのでブラウザからCSSを呼び出したら上記の箇所が文字化けしていてやっと気づきました。

　SafariとGoogle Chromeで背景が表示されなかったのは、なぜか背景画像を読み込んでいなかったからです。以前にも同じようなことがあったのですが、その時は背景画像を呼び出すCSSの記述をファイルの一番最後に持ってきたと思うのですが、設定しなおすのが面倒なのでカスタムテーマのページ設定で背景色を背景画像と同じ色に設定しました。要するに誤魔化したと……(^ ^;)

　しかし、相変わらずIE8でのh2要素が馬鹿でかいフォントで表示されるのは直っていません。
　他のサイトを開いても同じように、デザインが崩れて馬鹿でかい文字で表示されているところがあります。
　ココログのトップページは私のIE8で開くとこんな風に表示されます。画像解像度1024×768、文字サイズは中です。他の方のIE8でもこんな風にデカ文字で表示されているのでしょうか？文字サイズを最小にすれば丁度良い大きさにはなりますが……。

　IE8については、まだ訳が解らんところがあるので、手直しはこれで終了。
　ただ、このテンプレートはdecoweb樣からの借り物ですがフッターにロゴやリンクテキストが表示されないのが気になります。

テンプレート変更

初号機のIE8でこのブログを見ると記事のタイトル位置が右へずれています。
これはIE8だけの現象だろうと思っていたら、弐号機のIE7でも同じように表示されています。

ずれているのは文字だけで、リンクの位置は指定位置です。何だこれは？

サイドバーのメモ欄にCSSを色々と書き込んでいる影響だと思いますが、修正する間に違うテンプレートを使用します。といっても、ココログデザインのテンプレートはパッとしないし……。
他のブログと違い、ココログ用のテンプレートを公開しているサイトはないし……。
と思っていたら、ありました。

decoweb

目新しいテンプレートが色々とありますがその中で、左にメイン右にサイド二つというココログでは珍しいレイアウトのSimple Modern 3カラムを使うことにしました。

ところが、FirefoxやIE6/7でみると正常なのですが、初号機のIE8では見るも無惨な表示に。

文字サイズを最小にしてもダメですね。

おまけに、Operaではメイリオが表示されないし、SafariとGoogle Chromeでは背景画像が表示されていない(T-T)

う～ん、前の自作テンプレートを修正した方が良いのか、このテンプレートを修正した方が良いのか。
迷っています。

新・お絵かきツール

お絵かきツールがバージョンアップしています。
前バージョンは、私のＰＣ環境で使うとキャンバスの左上に向かって線が勝手に描画されて使えなかったのですが、今回のバージョンは使えるのか？早速使ってみます。

キャンバスサイズは300×300pixelの正方形。
小さい気もするのですが、ブログに載せるのならこの大きさで充分か。欲を言えば4：3のサイズ(320×240とか)も選択できればいいな。
描画はアンチエイリアシングで滑らかに表示されますが、素早く描画すると表示にタイムラグあってちょっと戸惑う。「戻る」「進む」は共にメモリーの範囲内で無制限に可能なのかな？試してみましたが50回以上戻せました。

使っていて気になった事が二つあります。
まず、テキスト挿入で欧文フォントは問題ないのですが和文フォントにすると、変換時までは選択フォントですが確定するとすべてMSゴシック（多分）になってしまう事。ＩＭＥがＡＴＯＫだからかな？

　　　　　↓


もう一つ、何がきっかけでそうなるのかまだ判りませんが、マウスボタンを離すと、描画していた線が消えてしまうことがある事。
ひょっとしてこの設定が原因？この画面をキャプチャーする前は100KＢの設定になっていました。

でも、これは私のＰＣ環境固有の現象かも知れません。

とはいっても、前バージョンに比べると機能、使いやすさにおいても格段の差で、特にレイヤー機能はありがたくて涙がでそうです。

これは使えるぞ！
って、記事の更新頻度少ないから……。
あ、「お知らせココログ」のお絵かきツールバージョンアップのお知らせに、こんな記述が（＾＾；）

今回の「お絵かきツール」にはお題機能があるので、描くネタがない方も気軽にお絵かきできます

リサイズソフト 番外編

同じネタの繰り返しで スミマセン m(_"_)m

事の始まりはScott Churchのサイトで見つけたこの写真。


著作権上これ以上大きく表示できませんが、Scott Churchらしい脚のラインが魅力的な写真です。顔が好みではないのが残念。
ちなみに、Scott Churchの写真ではこのモデルさんの方が好み。

これを壁紙にしようと思い、PhotoShop Elements2で画像を加工しました。
(こらこら、オマエ今自分で著作権がどーたら言ったじゃんかよ～)
元画像は451×648ですからキャンパスサイズを4：3の比率で864×648と横に拡大。

コピースタンプツールを使って元画像の左部分をコピーします。

ところが、壁のラインが上手くいきません。出来上がったのはこんな画像。

つま先から左へ伸びるラインはいいのですがその上の2つのラインが変です。これを綺麗にするには、左に進むにつれて3つの壁のラインを少しずつズラしながらコピーしなければいけません……面倒。

諦めかけた時フト思い出したのが、以前窓の杜で読んだ→この記事

さっそくSeam Carving GUI をインストール。
詳しくは後述しますが、こんな感じで作業して

出来上がった画像がこれ。
壁のラインが綺麗です。

Seam Carving GUI
Gabe Rudy樣のフリーソフトです（たぶん（＾＾；））
詳しい（簡単にでも）原理はわかりませんが、窓の杜の記事にあるように元の画像を補間しながらリサイズします。英語版ですが、試行錯誤でなんとなく使えてしまいます。日本語化パッチ等は無いと思います。
ダウンロードファイルはLinux用、Windows用、Mac OSX用と三種類あるのでお間違えなく。

バナー用画像を作る時は、元画像を拡大縮小した一部を740×217にトリミングしているのですが、今回はこのソフトを使ってリサイズで作ってみます。

元画像はPhotolibrary樣のフリー素材で639×425のJPEG画像です。

これをこのまま740×217に画像解像度を変更すると縦に圧縮されて下のようになります。

これはこれで悪くはありませんが、奥にある山はそのまま残したいのです。
はたして上手くいきますでしょうか？

先ずはFile→Openで画像ファイルを開きます。
開くことが出来る画像ファイルはbmp,jpg,jpeg,png,ppm,xbm,xpmの五種類です。

右側にあるメニューのMark area for retainingを選択して、残したい部分を緑に塗ります。ブラシのサイズや濃さはその下で可変。わたしのＰＣではブラシサイズ、濃度とも最大にすると描画が重くなります。塗り損じたりはみ出して塗った部分はClear Marked areaを選択して消します。いわゆる消しゴムですね。

リサイズ時に消したい部分はMark area for removalを選択して赤に塗ります。

色を塗った部分はマスクとしてFile→Save Maskでpng画像で保存できます。
残したり消したりする部分の位置や量で出来上がりの画像が違ってきますから、何度か同じ事を繰り返す時には便利かも知れません。マスクを読みこむのはFile→Open Mask。

塗り終わったらメニュー下のResize Dimensionsでサイズを設定してResizeボタンをクリックします。

私のPCではリサイズ時間は約5秒でした。上の壁紙を作った時は画像サイズが大きかったので10秒以上かかりました。

色を塗った部分はClear Marked Areaボタンをクリックすれば即消えます。

出来上がりが気に入らなかったらEdit→Undo又はRedoで何度でもやり直しができます。
後は名前を付けて画像を保存します。

プルダウンメニューには他にも色々と項目があるのですが、使い方がよく分かりません。

元画像

出来上がり画像

参考画像（緑に塗った部分が山の上部からはみだした）

参考画像（赤く塗った部分が無い画像）

参考画像（PhotoShop Elements2で画像解像度を740×217にしたもの）

→　リサイズソフト Part1
→　リサイズソフト Part2

リサイズソフト 一部変更

Part1、2共にサムネイル画像をクリックして表示される一部を拡大した画像を、リサイズソフトを使い補間して拡大した画像をトリミングしたものから、補間せずに拡大表示して画面をキャプチャしたものに変更しました。画像ファイルに手を加えていないのでコチラの方が正確です。

リサイズソフト お詫び編

part2の最後になって分かったのですが、実は元画像のサムネイル画像リンク先を間違えていて実際には280×210の画像を320×240に拡大表示していたので画像が綺麗ではないことに気付きました。いや～これは大失敗です。
ところが、IE6では酷いサムネイル画像ですがGoogle Chromeで見ると綺麗に表示されているではありませんか！

他のブラウザではどうなのか、インストールしてあるブラウザ全部で見てみました。

IE6 (6.0.2900.5512)

Google Chrome (Beta 2.0.172.8)


Opera (9.64)

Safari 4 (Beta528.16)

Firefox (3.0.10)


普段使っているSleipnirとKIKIはHTMLレンダリングエンジンにIE6と同じTridentを使っていますから見え方はIE6と同じです。見てみるとOperaがIE6よりは少しましな程度の表示ですが、それ以外のブラウザでは拡大表示でも綺麗に表示されています。
ところが同じIEでも初号機のIE8では綺麗なのです。

IE8 (8.0.6001)

要するにIE6だけが（IE7はわかりませんが）拡大表示が酷いと…（＾＾；）
IE6はバグでメイリオを表示することもできないし、こうなるとIE8をインストールできないのはつらいな～。

最後に、ココログのサムネイル画像の名誉のために、って私が悪いのですが、本当のココログ製サムネイル画像を正しいリンクで表示させます。画像クリックで一部を拡大した画像が表示されますが、とても綺麗なリサイズ画像です。ファイル容量がリサイズソフトで作成した画像の約5倍なので綺麗で当然ですが。

ココログ製サムネイル 〔58.7KB〕

リサイズソフト Part2

　記事に画像を挿入する際は、画像クリックで元画像を表示させたいとき以外はリサイズソフトを使って320×240にリサイズした画像を使っています。
　だったら画像の挿入時にサムネイルサイズを320×240にしても同じではないかと思われるでしょうが、第一にファイル容量が違います。私が持っているJPEGファイルで一番容量が大きいのは1600×1200サイズで1.8MBです。これと同じ容量の画像を1日三枚挿入した記事を毎日書くとしたら、ココログで使える全ファイル容量はベーシックで2GB（2048MB）ですから、―メインの他にサムネイル画像もアップされるので―約1年でパンクしてしまいます。尤も私の更新頻度からすると10年は大丈夫そうですが（＾＾；）第二に、これが重要なのですがココログのサムネイル画像はあまり綺麗ではありません。下にある元画像の表示を見て頂くとよく分かります。表示サイズをもう少し大きくすれば大丈夫なのかも知れませんが……。

　で、そのリサイズソフトです。
　なにせ根がズボラですから簡単に綺麗なリサイズが出来るソフトしか使っていません。今でもメインで使っているのは前回紹介した「縮小専用。」です。

　まずは
リサイズ超簡単！Pro （Ver 2.23）
　Kazuo Chiba WEB 樣が公開されているフリーソフトです。元は有料ソフトだったらしいのですが、フリーソフトとして公開されています。
　動作条件に「Microsoft .NET Framework 2.0 がインストールされていること」というのが初心者にはネックかな？
　Microsoft .NET FrameworkはMicrosoftダウンロードセンターから入手できます。

　以前インストールした時はMain画面の一部の文字が文字化けしていたので削除していました。更新履歴にはVer2.22で文字化けに対応とあったのですが、文字化けは直っていませんでした。原因は「リサイズ超簡単！Pro」ではなく、レジストリを書き換えてシステムフォントを変更している私のPC環境だと思いますが、記事のために新たにインストールした今回のバージョンから文字化けしなくなっています。

　出力時にリネームや保存フォルダ指定等が簡単にできますので、「リサイズ専門。」では物足りないが「リサイズ専科」ほど細かく出力設定しない、という方に向いています。
表示場所をとってしまいますが、このソフトや、「リサイズ専門。」のようにプリセットされた出力サイズが有った方が便利です。

　ステップ1から6まで順に進んでいけば簡単にリサイズできます。

　リサイズ実行前にプレビューで確認することもできます。

　フォルダごとリサイズすることもできます。
　一度設定すれば次回から同じ設定で起動しますから、私のようにいつも同じサイズにリサイズするのなら後は画像のDrag&Dropだけですみます。

藤 -Resizer- （Ver 2.59.0 #207）
　Leafel's note 樣が公開されているフリーソフトです。
　使用しているのは公開テスト版です。タダでソフトを使わせて頂くのですから、フリーソフトは極力ベータ版を使って微力ながらバグ報告などで開発の手助けになればと思っているのですが、これまでにベータ版を使って不具合が起こったことは、メーカー製ソフト以外にはありません（＾＾；）
　正式版のバージョンは （Ver 2.57.2 #202）です。

　シンプルな起動画面ですがリサンプリングエンジンを切り替えたり、リサイズと同時に付ける効果を細かく設定することができます。ファイルやフォルダをこの画面にDrag&Dropするとリサイズが実行されて元画像のフォルダ内に出力されます。

　インストールしてある他のリサイズソフトではリサイズ実行前か実行後にしか効果等をつけられませんが、「藤 -Resizer-」では効果を付けてリサイズすることができます。私の場合は同時に効果を付けることはないのですが。

　同時に数種類の効果を重ねて付けることもできます。

　この画面で効果の値を変更します。

リサイズしてみる
　条件を同じにするためにリサイズソフト Part1と同じく元画像には恥ずかしながら自作画像を使用します。「リサイズ超簡単！Pro」「藤 -Resizer-」共に保存JPEGファイル画質を「80」にした以外は初期設定値でリサイズしています。
　画像をクリックすると一部を拡大した画像を表示します。もっともこれもリサイズしたものですから参考程度に見て下さい。髪の毛の尖端やGパンのボタンの色等を見ると分かりやすいです。

元画像 JPEG80画質 1280×960 〔825KB〕
サムネイル表示 320×240 〔66.3KB〕
　この画像だけクリックで元画像が別窓表示されます。
　ね、リサイズした画像と比べるまでもなく酷いサムネイル画像でしょう？

　「リサイズ超簡単！Pro」
中精度：バイリニア法 〔13.0KB〕

　「リサイズ超簡単！Pro」
高精度：バイキュービック法 〔14.1KB〕

　「藤 -Resizer-」
最近傍補間 〔20.9KB〕

　「藤 -Resizer-」
平均画素法 〔18.0KB〕

　「藤 -Resizer-」
Lanczos-2 〔18.0KB〕

　「藤 -Resizer-」
Lanczos-3 〔18.4KB〕

　「藤 -Resizer-」
Lanczos-4 〔18.4KB〕

　「藤 -Resizer-」はSusie plug-in の使用でPhotoShopのPSDファイルを直接読みこんでリサイズ出来ます。

　「藤 -Resizer-」　PSDファイル直接読込
Lanczos-3 〔22.0KB〕

　前回同様に320×240サイズでは画質の違いが殆ど分かりません。拡大した画像を見ると「リサイズ超簡単！Pro」ではGパンのボタンの茶色が飛んだり、おなかの肌色にGパンの青が被ったりしていますが全く気になりません。
　「藤 -Resizer-」の最近傍補間だけが画質が荒いのですが、ファイル容量は〔20.9KB〕と大きいのは何故でしょうか？
　と、ここまで書いて記事を修正している時にふと元画像のサムネイルを右クリックして画像を保存して拡大表示してみようとダウンロードしてみると……。

　ありゃ？綺麗じゃん。というか、これサイズが280×210です。ということはサムネイル画像はコレを320×240に拡大して表示してるから酷い画像になっている訳か……。
　うんー、どうしてこんな事に？ってそりゃあ画像のリンク先を間違えてる（わたしが）ってことですね。リサイズソフトを使う第二の、しかも重要な（＾＾；）理由が消えてしまいました。せっかくだから元画像のサムネイル表示はそのままにしておきます。（こらこら）
　リサイズソフト Part3（番外編）をやる時に修正します。

　は～。いつもの事ながらお粗末樣でした～。

→ リサイズソフト Part1
→ リサイズソフト 番外編