村雨…叢雨

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

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



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

何なんだよ～

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

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

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

コロコロテンプレート

　

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

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

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

ｈ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Ｂの設定になっていました。

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

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

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

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

ウェブページを作る

ウェブページの存在理由がよく分からなかったのですが、３月２４日の「最近のトラブルあれやこれや」を書いている時に、マシンスペックを表示させるためのHTMLファイルを作っていてやっと分かりました。
このときは作ったHTMLファイルをNiftyに登録してあるホームページ(非公開)にアップロードしてそこへリンクを貼ったのですが、パソコン関係の記事を書くたびに記事内にリンクを貼るのは面倒なのでサイドバーにリンクを張ろうとして気付いたのです。ココログ以外にホームページ等をもっていない方はそれが出来ないので、ウェブページを作ってそこに書き込むって事なんですね。考えてみればこちらの方が手軽に作れるし、デザインも同じなので違和感がありません。

さっそく作ってみましたが、久しぶりにやってしまいました(^ ^；)
何をかと言うと、記事作成後設定を保存して反映させたのですが

ブログを確認してみると

「お薦めの本」の下に表示設定した「ウェブページ」へのリンクが表示されていません。
何か設定を間違えたのかと散々チェックしまくってアッと気付きました。

IEのインターネットオプションで「更新をチェックしない」設定にしているので、キャッシュファイルが表示されていたのです。「最新の情報に更新」をクリックすると表示されました。

サイト表示がオカシイ時は、まず一時ファイル（キャッシュ）の削除！などと人に言っておきながら、自分でやる時はこの為体（ていたらく）

さて、ウェブページを開いてみると

タイトル部分と下部角丸四角の影の表示が変ですが、これは多分カスタムＣＳＳのせいだと思います。

続・背景画像一覧

　昨日の、というか一昨日の続きです。

　友人Sの頼みでサイドバーに【背景画像一覧】のリンクボタンを表示させる事にしました。というのが昨日(一昨日)までのお話。

　今日はその過程を備忘録(間違えて忘備録と覚えていましたが、正しくは備忘録です)を兼ねて記事にします。
　まず最初に【背景画像一覧】のHTMLファイルを作成。
　先頭行のHTML宣言はブログのHTMLソースからソックリそのままコピーです（＾＾；）
　この時、HTMLタグにlang="jp"を書き加えるのをお忘れなく。これでIE6でメイリオ表示が可能になります。
　ヒョッとしたら本体に影響するかも知れないのでCSSファイルはHTMLファイル内に書き込みます。それでも本体に影響するのかも知れませんが、その辺りはどうなのでしょうかね。よく解りません……。
　取りあえずこんな感じで。
　Meiryoの前にメイリオと書いているのは、Operaでメイリオ表示させるためです。

　次にリンク用のボタンを作ります。
　PhotoShopで作れば良いのでしょうが、面倒なので【TAKABO SOFT NETWORK】樣の
【AquaMaker】を使いました。サイズだけ変更してサンプルをそのまま使用（＾＾；）ゞ
　同様のソフトで【ソフト屋 巣】樣の【ボタン工房】というソフトも簡単にボタンが作成できなす。

　出来上がりがコレ。背景色を透明にしてPNGで保存したのですが、IEでは背景が白で表示されたので塗りつぶしツールでサイドバーの色にしてあります。

ボタンA

　ここでフト、マウスポインタを乗せたら明るくなるようにしようと思い立ち、【PhotoFilter】でガンマ値を0.5ずつ上下させて暗いボタンと明るいボタンを作ったら、背景色のグレーも色が変わってしまいました。当然ですよね（＾＾；）ゝゞ
　当たり前の事なのに何故もっと早く気付かなかったのかと己を呪いながら背景を白に塗り替えて、再びガンマ値を変更した画像を作成後、背景色の白をグレーに塗りつぶしてやっと出来たのがコレ。

ボタンa

ボタンb

　しかし！試してみるといかにも色を変えただけというのが丸見え。仕方なく、重いので起動したくなかったPhotoShopでボタンbを開き、新規レイヤーを作ってボタンaをコピーし、イイ感じになるまでボタンaを少しずつ消して、レイヤーを結合。
　面倒な作業の末に出来たのがコレ。あまり変わらないか（＾＾；）ゝゝゞ

ボタンc

　HTMLファイルとボタンa,cをアップロードして、次はリスト作成。

　マイリストの新規作成でリストのタイプをメモにして、リストの名前は【おまけ】で作成。リストの名前がサイドバーに表示されるタイトルなので、もっと洒落た名前にしようと思ったのですがネーミングのセンスゼロなので……考えるの面倒だし……。

　新しいリストが作成されました。

　ラベル欄に何か書き込むとそれもサイドバーに表示されます。表示させたくないので今回は空欄のまま。
　備考欄には以下のHTMLを書き込みます。

<--ここから

<html>
<a href="背景画像一覧HTMLのURL" target="_blank"><img src="ボタンaのURL" onmouseover="this.src='ボタンcのURL';" onmouseout="this.src=ボタンaのURL';">
</a>
</html>

ここまで-->

　onmouseoverがマウスポインタを画像に乗せた時に表示される画像。
　onmouseoutはポインタを外した時に表示される画像ですから、img src=と同じ画像を指定すれば、元に戻ったように見えます。最初と違う画像にしたい時はここを違う画像のURLにします。

　ちなみに、target="_blank"は【背景画像一覧】を別窓で表示します。別窓にしたくない時は不要です。

　ついでに、それぞれ別々のリストで表示していた【UNIQLOCK】と【Blog Ranking】を【おまけリスト】に項目を追加してそこにHTMLを書き込み、まとめて表示するようにしました。

　これで完成。
　と思ったら……。
　一番上に表示したい【背景画像一覧】のボタンが一番下になっている！
　リストに項目を追加すると、ブログの記事同様に自動的に新しい項目が一番上に表示されるのですね。
　どうやら、表示を上下させる事は出来ないようです。
　ゲーッ、なんてこったい！
　しかたがないので、【Blog Ranking】と【背景画像一覧】の内容をそっくり書き換えました。

　これでホントに完成です。（＾＾；）ゝゝゝゞ

背景画像一覧

　仕事が終わって帰宅すると何時もアイスコーヒーを飲んでるのですが、ここ数日は熱いコーヒーが無性に飲みたくなったと思ったら、もう秋なんですね。
　で、コーヒーを淹れていると、携帯に着信が。

「あー、ワシやワシ」(これだけで直情径行型友人のSだと直ぐに判ります)
「何、今手が離せないんだから用件早く言ってよ」
「あのな、自分(私の事です)トコのブログ見るとな、いっつもタイトルの絵は”夕焼け空が真っ赤っかトンビがクルリと輪を描いたヨホホイ～のホイ～♪”っちゅう絵しか出えへんのやけど、ホンマに十七も絵入れとんの？たまに違う絵が出たと思うたら、なんや自分の気色悪い絵やしな」
「気色悪い絵で悪うござんしたね。そりゃあアンタのパソコンが三橋美智也のファンだからでしょう。画像はちゃんと十七枚入ってるよ」
「そんなら他の絵見れんのはワシのパソコンだけやろか」
「そーだよ、アンタだけだよ」

　確かに表示確率は夕焼けトンビが高い気もしますが。

「なんかな、ワシだけ他の絵見れんてめっちゃ気分悪うて精神衛生上良うないで」
「精神衛生！とてもアンタの口から出た言葉とは思えないなー」
「今度夕焼けトンビ出たら、又モニターどついてまうかもしれへん。そやから最初の絵に戻して固定してくれる？他の人もそう思うとるんちゃう？見れへんの絶対ワシだけとちゃうて」

(´Д｀ヽ)そんなご無体なァァ、せっかく設定したのにィィ、(/´Д｀)/
　しかしヤツは少し前に、GyaoでスーパーGTを見ていて興奮のあまりにモニターを床にたたき落としてしまい、奥さんに頼み込んで買い換えたばかりだし（三菱の24.1型ワイド液晶モニター に！）。私のせいで又壊したら今度ヤツの家に行った時、奥さんは口も利いてくれないだろうな。

「じゃあさ、(アンタのために特別に、特別にだよ)全部の画像見られるようにしてやるから」
「ほんまに？期待しとるさかい頼むで」

　早速、コーヒーを飲みながら背景画像を一覧表示するHTMLファイルを作り、サイドバーに新設した【おまけ】リストの背景画像一覧ボタンからリンクするようにしました。ついでに他のブログパーツも【おまけ】にまとめてあります。

　明日は休みなので、備忘録も兼ねて制作過程を記事に……します……多分。

IE6でメイリオ表示(ココログ・ベーシック篇)

　自分のブログで【IE6でメイリオを表示させる】方法を書いておきながら、ベーシック・プランなのでHTMLを編集することが出来ず、CSSのフォント設定からメイリオを削除していた(※1)のですが、最近偶然こんなサイトに出会いました。

TECH Matari 樣の
lang=ja属性のないHTMLでもIE6でメイリオを表示させたい！

　タイトルを見ただけで激しく同意！
　方法はJavaScriptを使って強制的にlang属性を書き加えます。これならベーシック・プランでも出来そうなので、早速スクリプトをコピーしてブログのサブタイトル欄に貼り付けました。
　私の環境では一応、IE6、Firefox、safari、Google Chrome、KIKI、Sleipnirでメイリオ表示になっています。
　見てくれはこんな感じ。

　Safari

　Google Chrome

　Firefox

　Opera

　IE6　（ここから下は、同じTridentレンダリングエンジンなので見え方は一緒）

　Sleipnir

　KIKI

　それぞれ微妙に表示が違いますが、SafariとChromeがインターフェイスの関係で見た感じが綺麗です。残念ながら Opera ではメイリオではなく第2候補の Verdana で表示されてしまいました。

※09/09追記ここから

　Operaではメイリオ表示されない理由を調べてみましたが、どうやらcssのフォント設定時に１バイト文字の【Meiryo】の前に【メイリオ】と２バイト文字で設定しなければダメみたいです。
　変更前
　font-family: Meiryo, Verdana,
　変更後
　font-family: 'メイリオ' Meiryo, Verdana,

　結果

※09/09追記ここまで

他の環境でも同じだと思いますが、どうでしょうか？
　TECH Matari 樣、ありがとうございました。

　ついでに、サイドバーのフォントサイズを小さくしたので文字を見やすくするために背景色を#CCCCCCから#D5D8D8に変更。ランダム表示のバナー背景画像も追加して計14枚。24枚になったら1時間毎に切り替わるようにしようかな。
　もう一つ、CSSに text-shadow を加えてブログのタイトル文字に影を付けるようにしてありますが、これは今の所 SafariとOperaでしか表示されません。

　さて、ココログのバージョンアップで新機能が幾つか追加されました。例によってメインテナンス後の不具合も発生していますが、これはココログのお約束みたいなものですから (^-^; と早速顔文字の挿入を使ってみました。

　【お絵描き】ってのも使ってみましたが、ギョエ～！タブレットを使うと線がビシバシと左上に走ってしまう！消しゴムも左上に向かって情け容赦なく勝手に消されてしまう！。゜゜(´□｀｡)°゜。
　描いた線が反映されるまでにチョット間があるので、曲線を描こうとしてペンを素早く動かすと直線で描画される！
　使い難くて慣れるのに時間がかかりそう。

　(※1)　そのままにしていると、IE6では和文がMS UIGothic 欧文がメイリオ(Verdana?)という悲惨な組み合わせで表示されてしまいます。これをClearTypeをＯＮにしたモニターで見ると見苦しい事この上ないデス。あ、閲覧する方のIE6がJavaScriptOFFだったらそうなっている筈です。お見苦しくてスミマセン。