使い始めた WordPress のビジュアルエディタは先にも述べたようにRTFを扱うように便利なのだが、丸ゴファンとしては Safari RSS の時と同様に変更したいところだ。

wp-includes/js/tinymce/themes/advanced/skins/wp_theme/の中にあるcontent.cssを見ているようなので、このファイルを開き、74行目のbody.mceContentBodyのフォントサイズの指定数値を14pxに変更してみました。

引用元: WordPressのビジュアルエディタのフォントを変更する

具体的には次のように変更した。バージョン2.8ではどうやらこのファイルだけ編集すれば良いらしい。

font: 14px/19px 'HiraMaruPro-W4', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', sans-serif;
line-height: 1.5;

実際に Safari 4 と IE7 ではこう見える。

iPhone で表示される JavaScript イベントの背景について処理する方法を以前紹介したが、具体的に CSS ファイルに直接書く方法と、JavaScript から操作する方法がある。

7 tips for using UIWebView « Coding Ventures
document.documentElement.style.webkitTapHighlightColor = “rgba(0,0,0,0)”;

次のアップデートでは、このようなコードを差し込む予定。

window.addEventListener("load", function() {
 initScore();
 document.addEventListener("touchmove", function(){ event.preventDefault(); }, false);
 document.documentElement.style.webkitTapHighlightColor = "rgba(0,0,0,0)";
});

また、アクションポップアップを消す方法として次のような処理が紹介されていたが、イベントハンドラに onclick を使わずに onTouchStart を使うと（反応が速いという利点もあって）良いと思う。（と、彼の投稿にコメントを書こうと思ったのだが面倒に…）

7 tips for using UIWebView « Coding Ventures
document.documentElement.style.webkitTouchCallout = “none”;

一方この資料で面白かったのは、 DeliciousSafari も使っているプロトコルの作成方法だ。
sqlite から保存データを別の UIVew へ表示する場合や、同じソフトを持つ友人とメールで共有する場合に使おうと計画している。

iPhone に搭載されている mobile Safari では、JavaScript を使ってタップイベントを作ると背景に影が付き、参照タグのタイトル属性を「アクション」という見出しで吹き出し風に表示する。

インタラクションをユーザーに通知する方法として２通り存在するのは冗長だと感じたので、背景処理をなんとかしようと決めた。

iphone onclick shading – iPhoneWebDev | Google グループ
To disable tap highlight for an element add to its style
the following CSS tag: -webkit-tap-highlight-color:rgba(0,0,0,0);

“-webkit-tap-highlight-color” という属性を知らなかったことはさておき、”rgba” を使いアルファ値を “0″ にしている点に注目だ。しかしこのアルファ値は面白いことに、0 かそれ以外の値しか取らないようだ。これはもしかして Safari 4 で有効になるかもしれないので今後のアップデート（今週火曜の3.0で？）に期待する。

Safari ブラウザを 3.1.1 にアップデートしたところ RSS Feeds に読み込みに失敗するという問題が生じたが、こちらのディスカッションを参考に無事回復することができた。具体的には次の2つの、sqlite3 データベース用のファイルとキャッシュファイル格納用のディレクトリを一時的にデスクトップなどの適当な場所に移動した後、Safari を再起動するだけで良いが、RSS Feed の登録数によっては虹カーソルが回り続け、ドックの Safari アイコンを右クリックするとあたかもフリーズしたかのように “アプリケーションが応答しません” と言われるが、再構築まで少しの時間辛抱して待つ必要がある。

~/Library/PubSub/Database/Database.sqlite3
~/Library/PubSub/Feeds

さて、子供が産まれてからというものじっくりと机に向かうことが少なくなり RSS もリビングに設置してある Mac mini で閲覧することが増えてきたのだが、初期状態の見出しフォントが小さく、毎回フォントサイズを大きくする手間がストレスとなっていたため次の場所に置いてある CSS ファイルを編集した。

/System/Library/Frameworks/PubSub.framework/Versions/A/Resources/PubSubAgent.app/Contents/Resources/Main.css

余談まで、Finder で “コンピュータ” や “ホーム” といったショートカットを持たないディレクトリ移動は、以下のようにパスまでをクリップボードに入れた状態でコマンド＋シフト＋G を押すと良い。

しかし先日、OS の進化を支えてきたと言って過言ではない機能 “コピペ” を知らない方にお会いすることがあった。自分の親も然り、年配であれば無理もないと改めてユーザビリティについて思いにふけってしまった。確認まで、上のテキスト入力フィールドは “コピペ” を信じて設置している。
また、ブックマークレットのインストール（表現が硬いか？登録や設定という方が簡単かも）にもある種の敷居があることを発見した。PDF も良いと思うものの、説明はデモを録画することが最善な気がしている。

さて、font-family と font-size プロパティの値を変更しただけだが、以下のような画面表示となる編集済みのCSS ファイルを公開サーバー上に置いたので自力作業が面倒な方はバックアップを保存した上でお使い頂きたい。（このファイルの置換や編集には管理者権限が必要で作業には認証を求められる。）

最後に、どうして Safari の環境設定で RSS Feeds ページの見栄えを変更することができないのだろうと syndtheme.com というドメインを勢いで取得してしまったが、あまり需要が少なそうなのでサービスインするかどうか分からない…

Ajax を活用した構築方法ですと、DOM スクリプトを使って backgroundImage に放り投げるため “no-repeat center center” とすれば微力ながらも画像ダウンロード禁止処理が加わり良いと思うのですが、ホットペッパーWebサービスの設計はどうなのか気になります。

さらにこの Blogger 上で試してみると、空白ピクセルを使わずに縦方向の位置が変化しています。（デフォルトの CSS 記述を読むか important で避ける必要アリ。）

CSS＋αで縦横混在の長方形画像を、正方形枠でセンタリングさせる方法 : Media Technology Labs (MTL) : メディアテクノロジーラボ　ブログ
<div style="width:100px;height:100px;text-align:center;border:1px solid #ccc;padding:0;">
<img src="http://mtl.recruit.co.jp/blog/IMG_3385.jpg" width="100" height="75" alt="IMG_3385" />
</div>

少し話は逸れますが、もし初回の読み込み時（ページ表示の初期化）に PHP でタグを出力したとしても、ページャーを使う以降の同じページ設計の遷移では Ajax を利用することでサーバーサイドから徐々にクライアントサイドの技術を利用するソフトウェアやサービスに移行することができます。

最近 PHP で MVC 設計のソフトウェアを見せて頂いたのですが、ファイルやディレクトリ名とその位置関係が分かりにくい反面、関数の連携や処理を確認するのに適していると思いました。

話を戻すと、使う html のバージョンについても意識しておくと(・∀・)ｲｲ！ですね。

今回は仕事メールの文調で。

I agree with most of what Particletree » Rediscovering the Button Element has said, but I think many programmers who create administration tools would like to use the input with the type=”submit”.

As is, the input with the type=”submit” is either too ugly (Firefox), a little buggy (Internet Explorer) or completely inflexible (Safari).

So, here’s the CSS code I have thought on the Submit object to claim cross-browser compatibility in a more easily readable and understandable format.

input[type=submit] {  border: 2px outset #CCC;  cursor: pointer;  padding: 3px;  font-weight: bold;  width: 100px;  height: 30px;  background-color: #F0F0F0;}

input[type=submit]:active {  border: 2px inset #CCC;}

Of course, the submit button markup is a standard one.

<input type="submit" value="送信" />

And it looks like this… is what I would like to say, but I stop uploading the image since it looks much the same. (with reference to the above