Computer コンピューター パソコン
アドビのソフトウェアはとにかく重い。 うちのボロPCではPDFを開くまでにガリガリ…クルクル…、やっと開けたかと思っても閲覧でズルズル…モッサリ…。 そりゃ再現性の高い電文かもしれんが、見る速度に追いついてこれない電文なんてのは、スピード違反のできない車くらい駄目なやつだ。
というわけで、Adobe Readerは捨ててしまおう。
そして、Foxit Readerを拾おう。
PDFファイルを軽く閲覧する程度なら、どちらを使っても見栄えはほとんど一緒。 それでいてFoxitの方はあきらかに動作が軽快だ。 ここまで違うのかと思うくらいFoxitは軽い。 なのに見た目は一緒。 「どうしてAdobeはそんなに重いんですか？」と質問したくなるぐらい違う。
アドビは昔っからユーザービリティってやつが分かっていない。 マクロメディアを吸収し（やがっ）て少しはましになるのかと期待したんだが、相変わらずっぽいし…。
記事ごとのカテゴリー指定に合わせた背景画像をつけてみる。 これを応用することによって、CSSでやれることなら何でも可能となる。
と、その前に、IEで表示確認をしてみたところ二つ問題が発生していた。 普段Fxを使う身としては、たまにこういうIEでのチェック忘れがある。
まず、PNG画像の透過処理はIEだと無効で、ただ灰色に表示されているだけだった。
二つめは、前回の<code>でカスタマイズしたオーバーフローと改行が想定外の動作をしていた。
PNG画像の透過問題は、透過部分を背景色に合わせた白にしてしまうか、GIF画像にするかで解決する。 GIFを避ける意味でPNGを使っているのだから、今回は透過無しの白背景画像を新たに作った。 どうしても透過が必要な場合はGIFを使うしかないだろう。
本題のカテゴリー別背景画像貼り付けを。 ちょっとしたシールを貼り付けたような感じにしようと決めて、横200pxの画像をカテゴリー別に用意した。
PERSONA3:TNB用画像
Electronics用画像
F1用画像
WordPress用画像
そして、テンプレートとCSSの編集をする。
PHPに関してはズブの素人なので、本来ならWPのテンプレート内にあるPHP部分はいじれないというか、いじってはいけないのだが、テンプレートいじりで少し複雑なことがやりたければ、PHPを編集するしかない。 ここがレンタル物とは違う自前設置ならではの好き放題やり放題となるわけだが、これがモロに敷居の高さとなってくるのだろう。 ましてやWPは英語ができなければまず使いこなすことは不可能。 そして、小生、自慢できるほどに英語が大の苦手でして…、ほんと大変なのです。 っていうか無理がある。
やり方としては、post部分のclassにカテゴリ名を仕込んで、CSSからカテゴリ名のセレクタで背景画像設定をしておく。 これでロジカルなカテゴリシール貼りができる。
予備知識ゼロ、経験値ゼロスタートだから、これまた色々調べてめちゃくちゃ苦労したけれども、修正はたった一行。
<div class="post <?php foreach((get_the_category()) as $cat) { echo $cat->category_nicename . ' '; } ?>" id="post-< ?php the_ID(); ?>"></div>
いつものデフォルトテーマのテンプレートファイル、index.php内の該当箇所をこんな感じにする。 深い意味は考えないほうがいい…。 プログラミングなんてのはTry＆Errorの積み重ねと勘で乗り切るものさ…。
次に、いつものCSSを編集する。
.post.persona3tnb {
background: url(images/p3tnb_2.png) no-repeat right 50%;
}
.post.wordpress {
background: url(images/wordpress-logo-cristal_2b.png) no-repeat right 50%;
}
.post.f1 {
background: url(images/honda_2.png) no-repeat right 50%;
}
.post.electronics {
background: url(images/edison2c.png) no-repeat right 50%;
}
意味としては、まず背景画像を指定して、ノーリピート、右寄せ、縦は領域の中央配置という意味。 これはプログラミングなんかが分からなくても、なんとなく読んで理解できるもの。 もちろん書式の間違いは許されないけれども、とっつきはいい。 CSSは誰でもいじれます。
さらにこれを応用しやすいように、画像ファイル名とカテゴリ名（カテゴリースラッグ）を一緒にしておくといいかも。 そうすればCSS以外の場所でこの画像を引っ張り出せるから。 暇があったらそれもやってみよう。
で、ちょちょっとmemoページを更新。
先日書き終えたD-VHS..の記事は少々マニアックというか、普通の人には分かりにくい用語や説明不足な箇所もあり、そこは毎度お馴染みWikipediaの力を借りるべく、該当リンクの追加作業をしていた。 そうこうしていると、このリンク部分にWikiのアイコンでもつけてみるか、などとまた余計なことをやり始める。
リンクの横に画像をくっつけるのは簡単なことなのだが、この極小画像を作るのがやっぱり苦労した。 っていうか3バージョンほど作ったけれども、全然納得がいかない。
んー、邪魔かなこれ…。
wiki icon 1 
wiki icon 2 
wiki icon 3 
いつものCSSファイルに以下を追加する。
a.wiki-link {
background: url(../../../wp-includes/images/wiki_icon3.png) no-repeat right bottom;
padding-right: 13px;
}
Wikiへのアンカータグにクラス”wiki-link”を追加する。
<a class="wiki-link" href="http://ja.wikipedia.org/">Wikipedia</a>
と、ここで前々から気になっていた<code>の処理がまったくダメダメな状態になり、これはもう放置するわけにもいかずCSSの調整をする。
具体的にどこが気になっていたかというと、<code>内での自動改行処理で、これを自動改行禁止に設定変更し、さらに横スクロールバー処理を追加する。 この表示スタイルはコード表示として結構一般的になりつつある基本形だろう。 個人的にはあまり好きではないテキストスタイルというかレイアウトなのだが、自動処理にまかせていると本気でありえない改行と空白の演出をしてくれるから、やはり強制処理は必要になってくる。
code {
display: block;
overflow-x: scroll; （横軸xの処理にスクロールバーを設定）
background-color: #F5FAFF;
white-space: pre; （自動改行を禁止）
font: 1em 'Courier New', Courier, Fixed;
margin: 15px 15px 0 10px;
padding-left: 20px;
border-left: 5px solid #ddd;
}
この二行を追加する。
この変更により、過去の記事も全て影響を受けるので、念の為いくつか確認しておく。 普段から丁寧な記事書きを心掛けていれば、特に大きな問題とはならないはず。
ふぅ…。
あぁ…、あともう一つ、カテゴリーが増えてまた縦スクロールバーが出てきやがった。 ちょっと前にたしか16emに増やしたんだっけか。 ということで、20emに増やす。
それほど邪魔になるもんでもないんで、先々のことを考え22emに増やす。 なぜか偶数にしてしまう…。
っていうかこれ、height: 22em;をあらかじめ設定しておくことに意味があるのか？ なにも指定しないでおけば、普通IEやFxなら自動で高さ調整してくれんじゃねーの？ というわけでさっくり消してやった。 ふぅー、スッキリ。
ある意味これは、カテゴリ数が膨大になった場合に縦の長さを適量に止める意味があるのか…。
コメント表示をしてみて始めて気付くこのフォントワンサイズ落ち。 個人的に、読みにくい小フォントデザインは悪だと思っているので修正する。 相変わらず適用中のテーマはdefaultで。
編集するファイルも前回同様↓
..\wp-content\themes\default\style.css
.commentlist li, #commentform input, #commentform textarea {
font: 0.9em 'Lucida Grande', Verdana, Arial, Sans-Serif;
}
0.9em → 1em
.commentlist li, #commentform input, #commentform textarea {
font: 1em 'Lucida Grande', Verdana, Arial, Sans-Serif;
}
結構細かく定義されているんだなと思った。
このブログの表示部分をCSSで少しいじってみる。 現在適用中のテーマはdefaultで。
編集するファイルは↓
..\wp-content\themes\default\style.css
ではまず、画像に枠線をつけてみる。
p img {
padding: 1px; （1ピクセル隙間をあける）
max-width: 100%; （拡大縮小せず100％表示）
border: 2px outset; （2ピクセルで枠線をひく 線種はアウトセット）
}
こんな感じ。
そして、画像にリンク指定があった場合に、マウスカーソルが乗ったときの枠線に変化をつける。
a img { （画像にリンク指定があった場合）
padding: 1px;
max-width: 100%;
border: 2px outset #DEF; （枠線の色を#DEF（青白）にする）
}
a:visited img { （リンク先が訪問（クリック）済みの場合）
padding: 1px;
max-width: 100%;
border: 2px outset #DEF;
}
a:hover img { （マウスカーソルが乗ったとき）
padding: 0px; （隙間なし）
max-width: 100%;
border: 3px outset #DEF; （3ピクセルで枠線をひく）
}
こんな感じ。
とまあ、よくあるCSSでの枠線つけで。 IE6とFx1.5で動作確認をしながら微調整する。 多少色味の違い（outsetの描画処理）はあれど、これ以上の互換調整はむりということで終了。
んー、<code>も少し変化をつける必要があるなぁ。
他に、Faviconと、<hr>もいじってあるから、それも覚え書きしておきたいところ。
というわけで、<blockquote>のCSSを参考に<code>を変更する。
code {
display: block; （codeはインライン要素なので、ブロック要素に再定義する）
background-color: #F5FAFF; （薄青白バック）
font: 1em 'Courier New', Courier, Fixed;
margin: 15px 15px 0 10px; （右マージンを30→15ｐｘに減らす）
padding-left: 20px;
border-left: 5px solid #ddd;
}
それに合わせて、参考元になった<blockquote>のCSSも変更する。
blockquote {
background-color: #F5FAFF; （codeと同じバックカラー指定追加）
margin: 15px 15px 0 10px; （codeと同じ右マージンに変更）
padding-left: 20px;
border-left: 5px solid #ddd;
}
全体的に青を主体としたカラーリングに統一しながらCSSカスタマイズされた。
Firefoxの正式な短縮形は『Fx』だそうな。 勝手にFFと省略してきたけれども、今後はオフィシャルにしたがうことにする。
Firefox のスペルは? 短縮形は?
Firefox のスペルは F-i-r-e-f-o-x です。最初の文字だけが大文字になります (例えば、FireFox や FireFOX、FIRE FOX など、多くの人がそうだと思い込んでいるものはすべて間違いです)。好ましい短縮形は「Fx」か「fx」です。
http://www.mozilla-japan.org/support/firefox/..
しかしアレだ、FirefoxのFoxは普通に『狐』のことだし、FireFox＝『赤い狐』とVerdureRaccoonDog＝『緑の狸』なわけで、「FFとVRDでしょう」と、コッテコテの日本人は言いたくなる。
まあでも、Firefoxと呼ばれるまでの流れが、『Phoenix』→『Firebird』→『Firefox』だったわけで、どうしても『赤いイメージ＋動物』からは外れられなかったんだろうなぁ。
その兄弟みたいなソフトウェアにThunderbirdがある。 Firebird＆Thunderbirdなら、ずいぶんと収まりが良かったことだろう。
で、なぜかThunderbirdの短縮形は『Tb』らしい。 「オイオイ…」 こっちこそ普通に単語として存在しているんだから、Fxと同じパターンで『Td』にするのが筋だろう。 Firefoxは無理やり単語化してFxと略したくせに、Thunder-Birdは普通に分割でTbですか…。 だったらやっぱりFirefoxはFfでそろえるべきだと…。
プログラマーと呼ばれる人種は、こういうネーミングルールなんかに厳格だったりするもんだけど、んー、まぁ、どうでもいっか。
続きを読む 超雑記 「TbとFxと私」
凄まじく簡単な作業です。 まず、下にある「英→日」というリンク部分を右クリックしてお気に入りに追加します。 作業はこれだけです。笑 （IEやWindows以外を使っている人も、これと同じ意味を持つ作業をやるだけです。）
英→日 ←これを右クリックしてお気に入りに追加するだけ。
実際にこの翻訳機能を使うには、翻訳したいと思ったページを開いてる状態で、今追加したお気に入りの「英→日」をワンクリックするだけです。
これは別になにか変なものを仕込んだとかそういう話ではなく、ブックマークレットと呼ばれる、ブックマーク（お気に入り）の拡張機能みたいなものです。 少しパソコンに詳しい人は普通に使っていたりする機能です。 あっそれと、お気に入り登録時に「セキュリティ云々――」のような警告があるかもしれませんが、気にしないで作業を進めてOK牧場です。
ここからはビギナーズ向けの話ということで、試しに英語で書かれたページを開いてみて、今ここでお気に入りに追加した「英→日」をクリックしてみましょう。 Googleの翻訳サイトに自動で繋がり、翻訳されたページが表示されるはずです。
英語のページをいくつか貼っておきます。
（相対性理論についての解説、トイザラス、ボストン・レッドソックス）
Theory of relativity – Wikipedia, the free encyclopedia
Toys “R” Us – Toys
The Official Site of The Boston Red Sox: Homepage
これをもっと手軽に使うTipsのTipsがありまして、IEのお気に入りの「リンク」フォルダにこの「英→日」を入れる（移動する）と、IEのメニュー近辺にあるリンクエリアにこの「英→日」が出てきます。 これで擬似ボタン化されるので、いつでもクリックしやすくなります。
まあでも機械翻訳そのものの性能はまだまだですね。
なんだか様子がおかしい…。 Firefox（FF）を再起動してみたら、その2で貼り付けが失敗していたはずのRealPlayer（RP）がくっついているではないか！ …と喜ぶのも束の間、RP上には妙な英字の羅列がウジャウジャと…。 ぅぐぉ。 CPU使用率も100％を振り切って、こ、これはヤバイ…。
まず、その2の作業終了後にFFを再起動するときからおかしかったのだ。 正確には再起動すらできなかった。 FFのプロセスが消えないまま残ってしまったのを確認し、仕方なくそのプロセスを強制終了させた。 結局、その2の作業中もFFは不安定な状態だったのだろう。 だからRPの貼り付きも挙動がおかしかったのだ。 まったく、なんてこった…。
そしてこの英字羅列はデコードエラーっぽいのだが、まだ正確なことは分からない。 RPをスタンドアロンで起動し、そこにこの3gpファイルを放り込むぶんには普通に再生できている。 んー、マンダム…。 もう俺、疲れたよ…。
いろいろと貼り付けテストを繰り返してみるが、どうやらWP付属のエディタが<object>絡みのタグを勝手に書き換えてしまうようで、思うようにテストができない。 このTinyMCEのビジュアルモードは使うべきではないというか、使えるしろものではないのかもしれない。
ただでさえ、IEとFFの<object>互換問題をクリアするのは面倒なのに、その実験段階でエディタがバグ同然の挙動をするというのは致命的すぎる。
こんなことでかなり無駄な時間を費やしてしまった…。 早い段階でビジュアルモードはOFFにすべきだった…。 くっそぉ…。
続きを読む 3gpの貼り付け その2
前回の3gpファイル貼り付けは完全に失敗というか、XHTMLを理解していない自分にも問題があった。
まず、3gpファイルとは、DoCoMoの携帯電話で扱う動画形式。 だから一般的なファイルフォーマットではないのだが、根幹はmp4形式ということで、PC上での再生はQuickTime（QT）を使うのが普通だろう。
しかし、うちのPCのブラウザ上では、前々からQTの動作が怪しく、今回もこの3gpファイルは上手く再生できなかった。 デスクトップ上で直接QTに3gpファイルを放り込む場合は再生可能なのだが…。
続きを読む 3gpの貼り付け
