レッド ■ ワン: red-one

カスタマイズと言ってもスタイルを適用するくらいですが。

できること

　背景色の変更や画像の表示ができます。
こちらのページ（FireFoxの空白ページを彩る「Dark Firefox」: DesignWorks）にあるようなものを全く一切の拡張機能なしで実現する方法を提案。
対応：　Fx2 ～
（画像表示に対応しているのは2.0からでした）
一部拡張機能と競合します。Speed Dial や Auto Dial などをインストールした状態では効果はありません。

ユーザスタイルシートの利用

　具体的なやり方については、Fxのユーザスタイルシートを使います。

サンプルコード

@-moz-document url("about:blank") {
html {}
body {
 margin: 0;
 width: 100%;
 height: 100%;
 background: #000000
  center no-repeat fixed;
 background-image: url(chrome://branding/content/icon64.png); /* For Fx2 */
}
x:-moz-broken,
body {
 background-image: url(./icon64.png); /* For Fx3 */
}
}

画像を配置する場合は、Fx3 ではchrome:// 以下にアクセスできない替わりにユーザスタイルシートからの相対パスが使えるので、＜Profileのディレクトリィ＞/chrome に画像をバンバン置きましょう。
Fx2 の場合は、相対パスが使えない替わりに chrome:// にアクセスできるので browser.jar の中に入れてしまいましょう。

表示サンプル

テキストを表示させる

　スタイルシートのみのカスタマイズですので、ページのコンテンツそのものは書き換えられないのですが、テキストを表示したい、というときは :before 擬似要素や :after 擬似要素を用いることでテキストの表示ができます。

@-moz-document url("about:blank") {
body {
 margin: 0;
 width: 100%;
 height: 100%;
 font-family: Verdana, Helvetica, sans-serif, Arial;
}
body:before {
 content: "about:blank";
 font-size: 140px;
 font-weight: bold;
 color: #ccccccc;
 cursor: default;
}
html:after {
 content: "Designed by Akanasu.c";
 display: block;
 height: 30px;
 margin-top: -50px;
 text-align: right;
 font-size: 30px;
 font-weight: bold;
 color: #555555;
 cursor: default;
}
}

表示サンプル

応用として

　html 要素と body 要素にそれぞれ別の背景画像を指定することでちょっと複雑な表現も可能です。

参考

• FireFoxの空白ページを彩る「Dark Firefox」: DesignWorks
• usercontent.css - Mozilla Firefox まとめサイト
• Firefox 1.0, 1.5, 3.0 用の CSS ハック | ヨモツネット

CSS3 の Target 擬似クラスというものを IE，Opera に実装するスクリプトです．
Target 擬似クラスについてはこちらを参考に．

• Lucky bag::blog: CSS3 の target 疑似クラスで脚注を動的に表示する

# ざっくり説明しようと思ったら意外と難しかったので省きます．
# リンク先を見てちょ

CSS3 で定義されている Target擬似クラスは IE と Opera では実装されていません．　上記エントリィ内でも Javascript で実現するスクリプトが紹介されてますが，スクリプトが読みづらい＋意味不明な処理が多いので抜本的に作り直してみました．

sfTarget.js: IE，Opera に Target 擬似クラスを実装するスクリプト

JS ファイル

　コメントを削ったちょい軽量版です．

• http://akanasu.googlepages.com/sftarget.js

HTML に埋め込む際は head 要素内に以下の１行を挿入してください．

<script type="text/javascript" src="http://akanasu.googlepages.com/sftarget.js"></script>

ソースコード

function sfTarget () {
 var cls = 'sftarget'; //クラス名
 if (document.location.hash) {
  var id = document.location.hash.substring(1);
  var elm= document.getElementById(id);
  if (elm) { elm.className += ' '+cls; }
 }
 for (var i=0; i < document.links.length; i++) {
  if (document.links[i].hash == '') { continue; }
  document.links[i].attachEvent('onclick', function (event) {
   //前Target要素からクラス削除
   if (document.location.hash) {
    var id = document.location.hash.substring(1);
    var elm= document.getElementById(id);
    if (elm) { elm.className = elm.className.replace(' '+cls, ''); }
   }
   //Traget要素にクラス追加
   var id = event.srcElement.hash.substring(1);
   var elm= document.getElementById(id);
   if (elm) { elm.className += ' '+cls; }
  });
 }
}
if (window.attachEvent) { window.attachEvent('onload', sfTarget); }

CSS 指定方法に関して

　因みに，CSS の指定方法としては

div.sftarget,
div:target {
 /* (IE?), Opera ではここのスタイル指定は無視されます */
 background: #0ff;
}

のようにグループ化して書けませんのでご注意ください．

div:target {
 background: #0ff;
}
div.sftarget {
 background: #0ff;
}

と，同じスタイルでも分けて記述しましょう．
理由としてはこちらの「説明」部分に詳しく説明されています．

• Firefox 1.0, 1.5, 3.0 用の CSS ハック | ヨモツネット

:target が対応していないからですね．

リファレンス

• Lucky bag::blog: CSS3 の target 疑似クラスで脚注を動的に表示する
• Lucky bag::blog: ピュア CSS なプレゼン用スライドショー
• Suckerfish :target | HTML Dog
• :target 疑似クラスでごにょごにょの解 - USOperaION／ε∂.∂з＼ - チーム俺等

更新 at 2007 12 03

　サンプル２，３において IE6 でテーブルが崩れていたものを修正．
CSS コードの修正はありません．

マウスオーバしたテーブルの行・セルをハイライト表示

　CSS のみで，マウスオーバしたセルのスタイルを変更する方法を紹介したいと思います．

※ただし，IE6には対応していません．
※Firefox 1.5, 2.0 で動作確認しております．　IE7, Opera, Safari3.0(Win版) で動作確認しました．

HTML コード：

<table>
<thead> <tr><th> aaa </th><th> bbb </th><th> ccc </th><th> ddd </th></tr> </thead>
<tbody>
  <tr><td> a1 </td><td> b1 </td><td> c1 </td><td> d1 </td></tr>
  <tr><td> a2 </td><td> b2 </td><td> c2 </td><td> d2 </td></tr>
  <tr><td> a3 </td><td> b3 </td><td> c3 </td><td> d3 </td></tr>
  <tr><td> a4 </td><td> b4 </td><td> c4 </td><td> d4 </td></tr>
</tbody>
</table>

元となるHTMLソースコードは上記のような一般的なもの．　もとソースに手を加える必要はございません．


CSS コード：

/*  テーブルのスタイル  */

table, table * {
  border-collapse: collapse;
  border: 1px solid #ddd;  /* テーブルのボーダの色 */
}
th, td {
  width: 3em;
}
thead th {
  background: #69d;  /* 第一行目（項目名）のセルの色 */
}
  th:first-child {
    background: #88d;  /* 左上のセルの色 */
  }

td:first-child {
  background: #ccc;  /* 一列目のセルの色 */
  text-align: center;
}

tfoot td {
  background: #6d9;
}
  tfoot td:first-child {
    background: #8d8;
    text-align: center;
  }

/* マウスオーバしたセルのスタイル  */

tbody tr:hover td {
  background: #dff;  /* 列のハイライト色 */
}
tbody tr:hover td:first-child {
  background: #cdf;  /* 第一行目のハイライト色 */
}

tbody tr:hover td:hover {
  background: #acf;  /* セルのハイライト色 */
}

　上部はテーブル全体のスタイル指定，下部がハイライト部分のセル・行のスタイル指定になります．
色味等は好みで変えましょう（青字部分）．


以下が実際にスタイルを適用したテーブルのサンプルになります．


縦の列（カラム）へのハイライトには対応していません．
なんとかしたい・・・．

テーブルの内容部分のみをスクロールする

　＋αの部分．
　テーブルが巨大になってしまった場合，第一列（ヘッド：項目名部分）を固定して，ボディ部分のみをスクロールさせる方法がある．
それを，HTML には全く手を加えず，CSS のみで表現する手法を提案．

使用する HTML コードは上記と同一．
特別なカスタマイズはいりません．
※ こちらは Firefox ブラウザにしか対応していません．

CSS コード：

tbody {
 height: 200px;
 overflow: auto;
}

tbody タグに高さを指定（例では200px）して，はみ出る部分はスクロールするようにする．

フッタも付けるとこのような感じ．

テーブルの内容部分のみをスクロールする　改良

　上記のコードの場合，table の高さの解釈により，無駄な枠線（ボーダ）が表示され，見苦しいものとなる．
この現象を回避する為に，CSS を一部書き換える．

CSS コード：

table {
 background: #ddd;
 border-spacing: 1px;
}
th, td {
 width: 3em;
 background: #fff;
}

border-collapse や border の指定は消します．　枠をボーダではなくて，セル間の空白で表現．
以下のようになります．

横スクロールバーが出てきてしまうのは・・・見逃してください．

ref.
• 参考：web creators 2008年1月号 目次»

--
１２月になりました．　やりたい事が増えてきた．

　職場では基本 IE6 なのですが，やはり Firefox ブラウザを使いたいと思いまして，勝手に入れてます．
インストールするのは不味いので FirefoxPortable の方をフォルダに解凍してこっそりと．
しかし，Firefox では会社のネットワークが繋がらないらしい．
　User Agent Switcher を使って偽造しても駄目でした．　どんなフィルタかけてるのよ．

　仕方ないので，IE Tab を入れて，気分だけでも Firefox．　IE 表示するフィルタには"http://*"，"https://*"を追加．　タブブラウジングになるだけでもありがたい．

　しかしながら，デフォルトでの設定でいろいろ使い辛いところがあったので，設定変更してみました．
その備忘録としてここに書きます．　酷く限定的な情報ということは重々承知しています．

Firefox search-bar 検索時にタブで開くカスタマイズ

※注意 For Fx 2.0.*

1. Address-bar に"about:config"＜Enter＞と入力．
   
2. browser.search.openintab の項目を探す．
   
3. default で値が false になっていると思うので，ダブルクリックして true へ変更．
   
4. おわり

IE Tab をカスタマイズ

IE Tab アドオンにおいて，リンクスポットを『新しいウィンドウで開く』としたとき，タブをバックグラウンドで開くようにカスタマイズ．

1. Address-bar に"about:config"＜Enter＞と入力．
   
2. ietab.focustab の項目を探す．
   
3. default で値が true になっていると思うので，ダブルクリックして false へ変更．
   
4. おわり

ナビゲーションツールバーをスマートに

ディスプレイは17型でそれ程小さい訳ではないのですけど，ツールバーが丈取りすぎで圧迫感があるので下記のスタイルを適用させてボタン周りを省スペース化．

/* ナビバーをスマートにする */
toolbox toolbar#nav-bar {
}
toolbox toolbar .toolbarbutton-1,
toolbox toolbar .toolbarbutton-menubutton-button,
toolbox toolbar .toolbarbutton-menubutton-dropmarker {
    padding: 0 1px !important;
}

以上をユーザスタイルシート Firefox's Application Data Folder/profile/chrome/userChrome.css へ追記する．

これと併せて，ブックマークツールバーのラベルも消して更にスマートに．

スタイル変更前　※ スクリーンショットは後日挿入します．
スタイル変更後　※ スクリーンショットは後日挿入します．

■ about:config で設定書き換えってのは今まで余りやってこなかったのですが，改めて試してみると通常の設定画面ではできない設定も簡単にできるので便利だな～と関心してしまいました．
　変数名（？）でも十分意味は理解できるしね．
■ 検索バーで検索したあと（Enterキーを押したあと）に，バーの中を空にする（キーワードを消す）方法を知っているヒトいませんか？
　いつまでも検索ワードが残っているのは格好悪い．

参照リンク - Firefox Add-on 関係

• User Agent Switcher :
  • User Agent Switcher
    
  • User Agent Switcher :: Firefox Add-ons
  
  
• IE Tab :
  • IE Tab :: Firefox Add-ons