2017 07 ≪  08月 12345678910111213141516171819202122232425262728293031  ≫ 2017 09


スポンサーサイト

- --------(--) - 
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
この記事のURL | スポンサー広告 | ▲ top

ツールバーなどを一時的に隠す

- 2009-03-15(Sun) - 

ネットブックなど解像度が比較的狭い環境では、縦方向が窮屈だったりします。F11キーで全画面表示にすると広くなりますが、ウインドウ表示でもなるべく広く使いたいですよね。

表示メニューからツールバーやステータスバーなどを表示/非表示できますが、1つ1つクリックするのは面倒。そこで、私は下記のスクリプトを実行することで、ツールバーやステータスバーなどの表示切替を一度に行い、必要なときだけWebページを縦方向に広く表示しています。

// ツールバーなどの表示/非表示を切り替える
// (表示を切り替えたくない部分はコメントアウトしておく)

/*
表示を切り替えたいツールバーのIDを以下に追加。
(「ツールバーのカスタマイズ」から自分で追加した場合は、
 "__customToolbar_★"の★の部分をツールバー名に置き換えて追加。)
*/
var id = [
  // メニューバー
  "toolbar-menubar",
  // ナビゲーションツールバー
  "nav-bar",
  // ブックマークツールバー
  "PersonalToolbar",
  // Googleツールバー
  "gtbToolbar",
  // Yahoo!ツールバー
  "yahoo-toolbar",
];
for (var i=0, bar; i<id.length; i++) {
  if (id[i]) bar = document.getElementById(id[i]);
  if (bar) bar.collapsed = !bar.collapsed;
}

/*
ステータスバー
*/
document.getElementById("cmd_toggleTaskbar").doCommand();

/*
タイトルバー&枠線
*/
var main = document.getElementById("main-window");
if (main.getAttribute("hidechrome") == "true") {
  main.setAttribute("hidechrome","false");
  window.resizeBy(0, 1);
} else {
  main.setAttribute("hidechrome","true");
  window.resizeBy(0, -1);
}

このスクリプトをCustom ButtonskeyconfigFireGesturesなどの拡張機能でカンタンに実行できます。Custom Buttonsではボタン作成時の「Code」タブに、keyconfigでは設定の「新しいキーを追加」ボタンから、FireGesturesでは設定の「スクリプトを追加」ボタンからスクリプトを貼り付けるとOK。

なお、(上記のスクリプトの代わりに)以前紹介したHide CaptionなどでWindowsのタイトルバーを隠すとさらに広くできますよ。

追記:2009-07-04

タイトルバーとウインドウの枠線の表示を切り替えるスクリプトも上記に追加しておきました。枠線がなくなって見づらい場合、以下のようなCSSをStylishなどに登録しておくと枠線を表示させておくことができます。

@-moz-document url(chrome://browser/content/browser.xul) {
  window[hidechrome="true"] {
    border: 4px solid;
    -moz-border-top-colors: InactiveCaptionText InactiveBorder InactiveCaption InactiveCaption;
    -moz-border-right-colors: InactiveCaptionText InactiveBorder InactiveCaption InactiveCaption;
    -moz-border-bottom-colors: InactiveCaptionText InactiveBorder InactiveCaption InactiveCaption;
    -moz-border-left-colors: InactiveCaptionText InactiveBorder InactiveCaption InactiveCaption;
  }
  window[hidechrome="true"][active] {
    -moz-border-top-colors: CaptionText ActiveBorder ActiveCaption ActiveCaption;
    -moz-border-right-colors: CaptionText ActiveBorder ActiveCaption ActiveCaption;
    -moz-border-bottom-colors: CaptionText ActiveBorder ActiveCaption ActiveCaption;
    -moz-border-left-colors: CaptionText ActiveBorder ActiveCaption ActiveCaption;
  }
}

追記2:2015-06-10

質問を頂いたので、ツールバーなどのIDの調べ方を書いておきます。

私の場合、調べるときは拡張機能のDOM InspectorInspect Contextを使いますのでインストールしておいてください。DOM Inspectorだけでも調べられますが、Inspect Contextがあると簡単に調べられます。

  1. ツールバーなどのIDを調べたい部分を右クリックしてコンテキストメニューの「Inspect」をクリック。
  2. Dom Inspectorのウィンドウが表示され、左ペインのツリーで右クリックした部分の項目が選択されているので、そこから上に遡ってIDが記載されている行をクリックする。
  3. Firefoxのウィンドウで目的の部分が赤枠で点滅するのを確認する。
  4. DOM Inspectorの右ペインのIDの項目をダブルクリックして、IDをコピーする。

ツールバーであれば、ツリー上の「toolbar」の行をクリックするとそのツールバー全体が赤枠で点滅するはずです。もし赤枠で点滅しない場合、DOM InspectorのメニューのView→「Blink Selected Element」をONにしてください。

もし右クリックしてコンテキストメニューが表示されない部分の場合はInspect Contextの代わりにInspectorWidgetを使ってみてください。

関連記事
スポンサーサイト
この記事のURL | Firefox | コメント(1) | トラックバック(1) | ▲ top
<< | メイン | >>
 
コメント
-  -
ツールバーなどのIDの調べ方を追記しました。
2015/06/10 21:05  | URL | 管理人 #r1C70W1Q [ 編集] |  ▲ top


コメントの投稿















管理者にだけ表示を許可する


▲ top
 
トラックバック
トラックバックURL
→http://fxwiki.blog63.fc2.com/tb.php/191-212417d0
- 朝顔日記 - ツールバーを出し入れする拡張機能 ToggleToolbar を作った -
表示領域の狭いネットブックなど用にツールバーを出し入れする拡張機能 ToggleToolbar を作った …
2009/03/20 09:52  朝顔日記 ▲ top

| メイン |
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。