MS Office Online のドキュメント背景色を変更する方法

最近、筆者はLinux環境でMicrosoft Office Onlineスイートを試してみました。このスイートはかなり快適で使いやすく、Windowsに完全移行しなくても、お気に入りのLinuxディストリビューション上で、事実上の標準となっている主要なオフィスソフトをそのまま利用できることを実証しました。コスト面や業務面でのメリットも大きく、これは非常に重要なポイントです。

しかし、一点だけ気になることがありました。それは、Wordのオンライン版でドキュメントの背景がグレー表示されることです。正確には「透明」なのですが、この特定のグレーの色調(しゃれです)が目にかなりの負担をかけます。……冗談はさておき、要するにグレーは目が疲れるということです。ところが、UIにはこれを変更するオプションやボタンが用意されていません。そこで今回は、オンライン作業中にこれを一時的に調整する方法をご紹介します。つまり、Microsoft Office Onlineのドキュメント背景色をお好みの色に変更してしまおう、というわけです。

仕組みはHTML

結局のところ、クラウドアプリがどんなソフトウェアで動いていようと、ブラウザはそれらをHTMLページとしてレンダリングしています。動的な要素やスクリプトもありますが、それらは単にHTMLの各パーツを動かしたり連携させたりしているにすぎません。

つまり、ブラウザに表示されているものはすべてdivやtable、段落などの要素に分解でき、それぞれに文字色、背景色、フォントの太さ、ボーダー、マージンといった属性やスタイルが設定されています。これらを書き換えれば、画面上の表示も変わるというわけです。最新のブラウザであれば、右クリックから「要素を検証」を選択することで、表示中のHTMLページを操作できます(呼び方はブラウザによって多少異なります)。要するに、HTML/CSSのスタイルを変更すればページの見た目が変わる——これこそが今回やりたいことです。ただし、ひとつ問題があります。

右クリックが効かない!

そうなんです。インタラクティブなアプリケーションの中には、JavaScriptを駆使して特定の操作やクリックをブロックしているものがあります。モバイルアプリではよくある話ですが、デスクトップでもさまざまなウェブサイトで遭遇することがあります。標準の右クリックメニューは、そのサイト側が用意したメニューに置き換えられてしまうのです。

Microsoft Office Onlineも同様に、右クリックは独自のコンテキストメニュー専用になっています。以前のレビューでも触れたとおり、右クリックからはテキストのコピーや貼り付け、言語の変更、翻訳、コメントの追加など、さまざまな編集操作を行えるようになっています。

つまり、HTML要素を調査するために必要な「標準のブラウザ右クリックメニュー」にはアクセスできない状態です。これを何とかする必要があります。ブラウザの設定やNoScriptのような拡張機能でJavaScriptを無効化する手もありますが、それではMicrosoft Office Onlineの機能自体が損なわれてしまいます。もっとソフトで、影響の少ない方法が必要です。

右クリック動作を横取りする別の方法として、アドレスバーに直接JavaScriptコマンドを入力するやり方もあります。ただし、これは一時的にしか機能せず、ページが自動的に再読み込みされると変更は無効になってしまいます。興味があれば、以下のコマンドをアドレスバーに入力してみてください。

javascript:void(document.oncontextmenu=null);

javascript:void(window.oncontextmenu=null);

また、ChromeやFirefox向けには、右クリック機能を復活させる拡張機能がいくつか存在します。そのひとつが「Enable Right Click and Copy」です。この拡張機能はインストール後に再起動が不要なので、導入も使用も非常に手軽です。

右クリックで色のプロパティを変更

標準のブラウザ右クリックメニューが使えるようになったら、ページ背景の要素を調べてみましょう。グレーのドキュメント上にマウスカーソルを置き、右クリックして、さっそく簡単なハッキングの始まりです。

ここからの操作は、慣れていない方には少し複雑に見えるかもしれません。「検証」をクリックすると、ページの内部構造をデバッグ・確認するための高機能なメニューが開きます。ネットワークやメモリの使用状況、パフォーマンス、エラーメッセージ、そしてHTMLコードまで、普段意識していないあらゆる詳細情報が表示されます。クリックした箇所が左ペインでハイライトされ、右側には選択した要素に適用されているCSSルールの一覧が表示されます。

今回のケースでは、ページの背景はOutlineContentというクラスを持つdiv要素で定義されており、背景色はtransparent(透明)に設定されています。やるべきことは、右ペインのdiv.OutlineContentの部分にカーソルを合わせ、「background-color: transparent」の行をクリックし、「transparent」を「white」またはお好みの色に書き換えるだけです。Enterキーを押すと、即座に色が変わります。

これはあくまで一時的な対策

非常に重要な点として、これは恒久的な修正ではありません。F5キーでページを更新すると、スタイルの編集は消えてしまいます。ドキュメントをダウンロードしてLibreOfficeやMicrosoft Officeで開けば、通常どおり白い背景で表示されます。これはあくまで見た目上の変更であり、あなた自身のブラウザ内だけで有効なものです。ページが一度読み込まれればサーバー側の処理は完了しており、ページを完全に再読み込みするまでの間だけ、設定した一時的な色が適用され続けます。新しい描画が行われた瞬間、この修正は失われます。

このテクニックはMicrosoft Office Online固有のものではなく、どんなウェブサイトにも応用できます。レイアウトや配色が気に入らない場合に特に便利で、サイトを利用し続ける必要はあるものの、表示が見づらいと感じるときに役立ちます。

もう調整が必要なくなった場合や、アプリ独自の右クリックメニューに戻したい場合は、ブラウザ拡張機能を無効化してページを再読み込みすればOKです。元の状態に完全に戻ります。シンプルで、完全に元に戻せる、影響の少ない方法です。さらに、あのグレーをじっと見つめ続けて目が疲れることがなくなるので、毎日の作業時間を少し快適に過ごせるかもしれません。

まとめ

このチュートリアルでは、重要な2つのことを学びました。1つ目は、HTMLの基礎知識、ページが読み込まれてレンダリングされる仕組み、そしてWebアプリの実態についてです。2つ目は、Microsoft Office Onlineの外観をシンプルかつエレガントに調整する方法です。既定の透過背景の代わりに、目に優しい白色背景を採用することで、長時間ドキュメント作業をしても疲れにくくなります。

いつかMicrosoftが、デスクトップ版スイートと同じように、UI内で背景色を変更できるオプションを提供してくれるかもしれません。それまでの間は、いくつかの方法で色を自分好みに調整できます。目の健康を大切にするなら、些細に見えて実は重要なこの小技、ぜひ試してみてください。今日も何か新しいことを学べたなら嬉しいです。それでは、楽しいタイピングを。

それではまた。