Opera Mail のビューアペイン（メールが表示される所）の見栄えを変えてやろうと思ったら mime.css を編集する必要があります。多少HTMLとCSSの知識が必要ですが、僕みたいなヘタレでも弄れたのでなんとかなります。
実際に mime.css をカスタマイズすることによって、以下のようなスタイルを作成することができます。
表示を試してみたいという奇特な方はそれぞれのCSSファイルをダウンロード後、 mime.css とリネームして使用中の mime.css と置き換えるか、適当な場所に保存した mime.css を MIME Style File で指定して下さい。どちらも Opera の再起動は不要です。また、上の mime.css でニュースフィードを読む場合、次の browser.css を適用しておくといいかもしれません。ダウンロードしたファイルを Browser CSS File で指定して下さい。
そんなわけで、本題に入りましょう。
HTMLやCSSがあまりわからない人は 3 へ飛んで下さい。解説や用語の使い方が間違ってたら教えて下さい。
先ず、メール表示部分がどのような構造になっているか、大雑把にでも知っておく必要があります。メールを開いてAlt+F3を押してソースを表示してみましょう。すると、
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">
<html>
<head>
<title>件名</title>
<link rel="stylesheet" href="mime.css">
</head>
<body>
<!-- ヘッダ -->
<div class="headers">
<object type="application/vnd.opera.omf+xml" data="attachment:/***/headers.xml"> Mail headers </object>
</div>
<!-- メール本文 -->
<div class="plainpart">
<object id="omf_body_part_1" type="application/vnd.opera.omf+xml" data="attachment:/***/plain.xml"> Mail body </object>
</div>
</body>
</html>
という風にHTMLファイルのソースが表示され、object 要素でXMLファイルが埋め込まれているのがわかります。ちなみに、メールを表示させた状態で情報パネルを開き、
一番上のURLへ移動すると operaemail:/***/mail.html というメールそのものにアクセスできます。そこでまた情報パネルを見ると、
という具合に Inline frames のところに各XMLファイルへのリンクが表示されているので、headers.xml，plain.xml それぞれにアクセスできるかと思いきや、エラー! とか怒られて表示することができません（9.24 現在）。9.0 の頃はアクセスできたはずなんだけどなぁ…
まあ各ファイルにアクセスはできないものの、ソースを表示させることはできます。方法は、ヘッダ部分・メール文中いずれかにフォーカスをあててAlt+F3です。上手くいかない人は適当な文字を反転させてAlt+F3を押しましょう。とは言え、現行バージョンではヘッダはヘッダツールバーで眺めることがデフォルトとなっておりますので、mime.css を少し弄ってやらないと生身のヘッダを拝むことはできませんが。
以下、それぞれのパートごとにいい加減な解説をしてみます。
大雑把な構造を表すとこんな感じです。見やすいように適当に改行したりスペースを入れてあります。
<?xml version="1.0" encoding="utf-16"?> <!-- 文書宣言 -->
<omf:mime xmlns:omf="http://www.opera.com/2003/omf" xmlns:html="http://www.w3.org/TR/REC-html40"> <!-- HTMLで言うところのhtml要素みたいなもの -->
<html:link rel="stylesheet" href="mime.css" /> <!-- mime.css -->
<omf:headers> <!-- ヘッダ -->
<omf:hgrp> <!-- ヘッダグループ -->
<omf:hdr name="name属性"> <!-- ヘッダの各要素 -->
<omf:n> ヘッダ項目名 </omf:n> <!-- ヘッダ項目の名前 -->
<omf:v> ヘッダ項目値 </omf:v> <!-- ヘッダ項目の値 -->
</omf:hdr>
</omf:hgrp>
</omf:headers>
</omf:mime>
例えば、
というヘッダ情報は以下のようになります。実際は、<omf:hdr>～</omf:hdr>は一行で表示されます。
<?xml version="1.0" encoding="utf-16"?>
<omf:mime xmlns:omf="http://www.opera.com/2003/omf" xmlns:html="http://www.w3.org/TR/REC-html40">
<html:link rel="stylesheet" href="mime.css" />
<omf:headers>
<omf:hgrp>
<omf:hdr name="date">
<omf:n> 日付 </omf:n>
<omf:v> Mon, 01 Apr 2007 00:00:00 +0900 </omf:v>
</omf:hdr>
<omf:hdr name="subject">
<omf:n> 件名 </omf:n>
<omf:v> サイトの件 </omf:v>
</omf:hdr>
<omf:hdr name="from">
<omf:n> 送信者 </omf:n>
<omf:v> 芦塚 円 <shishimushi@xxxx.xxx> </omf:v>
</omf:hdr>
<omf:hdr name="user-agent">
<omf:n> User-Agent </omf:n>
<omf:v> Opera Mail/9.24 (Win32) </omf:v>
</omf:hdr>
</omf:hgrp>
</omf:headers>
</omf:mime>
ただ、このヘッダ部分は mime.css で、
div.headers {
position: absolute;
top: -60000px;
}
という指定がされているため、普段は僕らの目には見えないところに押しやられています。
大雑把な構造を表すとこんな感じです。見やすいように適当に改行したりスペースを入れてあります。
<?xml version="1.0" encoding="utf-16"?> <!-- 文書宣言 -->
<omf:mime xmlns:omf="http://www.opera.com/2003/omf" xmlns:html="http://www.w3.org/TR/REC-html40"> <!-- HTMLで言うところのhtml要素みたいなもの -->
<html:link rel="stylesheet" href="mime.css" /> <!-- mime.css -->
<omf:body xml:id='omf_body_start'> <!-- HTMLで言うところのbody要素みたいなもの -->
<omf:div xml:id='flowed or wrapped' html:class='plaintext'> <!-- 本文の汎用ブロック -->
<omf:ql html:class='L0'> <!-- 引用レベル0、ということで普通の文 -->
<omf:p> <!-- 段落 -->
<omf:l> 本文 </omf:l> <!-- 行 -->
<omf:l> 本文 <html:a href="URL"> URL </html:a> 本文 </omf:l> <!-- リンクがある場合はこうなる -->
</omf:p><!-- 以下、基本的に文は <omf:p><omf:l>ほげほげ</omf:l></omf:p> という形になる -->
<omf:p> <omf:l html:class='lf'>   </omf:l> </omf:p> <!-- 空行の場合はこうなる -->
<omf:ql html:class='L1'> <!-- 引用レベル1（行頭に">"がついた文） -->
<omf:p> <omf:l> 引用文 </omf:l> </omf:p>
<omf:ql html:class='L2'> <!-- 引用レベル2（行頭に">>"がついた文） -->
<omf:p> <omf:l> 引用文 </omf:l> </omf:p>
<omf:ql html:class='L3'> <!-- 引用レベル3（行頭に">>>"がついた文） -->
<omf:p> <omf:l> 引用文 </omf:l> </omf:p>
</omf:ql>
</omf:ql>
</omf:ql> <!-- …という具合に入れ子になる -->
<omf:sig> <!-- 署名ブロック -->
<omf:p> <omf:l> -- </omf:l> </omf:p> <!-- セパレータ -->
<omf:p> <omf:l> 署名 </omf:l> </omf:p> <!-- 署名 -->
</omf:sig>
</omf:ql> <!-- 引用レベル0ここまで -->
</omf:div>
</omf:body>
</omf:mime>
例えば、
どもども。お久しぶりです。
今は以下のサイトで活動しています。やってることは今も昔も変わりありません。
> お久しぶりです。
> 数年ぶりにパソコン起動してお気に入りを開いてみたら、
> ほとんどのサイトが閉鎖されていて悲しくなりました。
> 芦塚さんは現在サイトをお持ちですか？
> 差し支えなければお教え下さい。--
芦塚 円：shishimushi@xxxx.xxx
という文面の場合は以下のようになります。実際は、<omf:sig>～</omf:sig>は一行で表示されます。
<?xml version="1.0" encoding="utf-16"?>
<omf:mime xmlns:omf="http://www.opera.com/2003/omf" xmlns:html="http://www.w3.org/TR/REC-html40">
<html:link rel="stylesheet" href="mime.css" />
<omf:body xml:id='omf_body_start'>
<omf:div xml:id='flowed' html:class='plaintext'>
<omf:ql html:class='L0'>
<omf:p> <omf:l> どもども。お久しぶりです。 </omf:l> </omf:p>
<omf:p> <omf:l> 今は以下のサイトで活動しています。 </omf:l> </omf:p>
<omf:p> <omf:l html:class='lf'>   </omf:l> </omf:p> <!-- 空行 -->
<omf:p> <omf:l> <html:a href="http://kawatarou.info/note/"> http://kawatarou.info/note/ </html:a> </omf:l> </omf:p> <!-- URL -->
<omf:p> <omf:l html:class='lf'>   </omf:l> </omf:p> <!-- 空行 -->
<omf:p> <omf:l> やってることは今も昔も変わりありません。 </omf:l> </omf:p>
<omf:p> <omf:l html:class='lf'>   </omf:l> </omf:p> <!-- 空行 -->
<omf:ql html:class='L1'> <!-- 引用 -->
<omf:p> <omf:l> お久しぶりです。 </omf:l> </omf:p>
<omf:p> <omf:l> 数年ぶりにパソコン起動してお気に入りを開いてみたら、 </omf:l> </omf:p>
<omf:p> <omf:l> ほとんどのサイトが閉鎖されていて悲しくなりました。 </omf:l> </omf:p>
<omf:p> <omf:l> 芦塚さんは現在サイトをお持ちですか？ </omf:l> </omf:p>
<omf:p> <omf:l> 差し支えなければお教え下さい。 </omf:l> </omf:p>
</omf:ql>
<omf:p> <omf:l html:class='lf'>   </omf:l> </omf:p> <!-- 空行 -->
<omf:sig> <!-- 署名 -->
<omf:p> <omf:l> -- </omf:l> </omf:p>
<omf:p> <omf:l> 芦塚 円：shishimushi@xxxx.xxx </omf:l> </omf:p>
</omf:sig>
</omf:ql>
</omf:div>
</omf:body>
</omf:mime>
<omf:div xml:id='flowed' html:class='plaintext'>と<omf:div xml:id='wrapped' html:class='plaintext'>との違いがちょっとよくわかりません。mime.css の中では引用符omf|ql.Lnのみに指定されています。
HTMLメールの場合は、
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">
<html>
<head>
<title>件名</title>
<link rel="stylesheet" href="mime.css">
</head>
<body>
<div class="headers">
<object type="application/vnd.opera.omf+xml" data="attachment:/***/headers.xml"> Mail headers </object>
</div>
<div class="htmlpart">
<object id="omf_body_part_1" type="text/html" data="attachment:/***/attachment***.htm"> Mail body </object>
</div>
</body>
</html>
画像が添付されている場合は、
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">
<html>
<head>
<title>件名</title>
<link rel="stylesheet" href="mime.css">
</head>
<body>
<div class="headers">
<object type="application/vnd.opera.omf+xml" data="attachment:/***/headers.xml"> Mail headers </object>
</div>
<div class="plainpart">
<object id="omf_body_part_1" type="application/vnd.opera.omf+xml" data="attachment:/***/plain.xml"> Mail body </object>
</div>
<div class="attachments">
<object type="image/jpeg" data="attachment:/***/hoge.jpg"> Attachment </object>
</div>
</body>
</html>
となっており、これら Opera で表示可能なものはそのまま直接表示されるようになっています。
XMLファイルで使われている要素がわかってしまえば、あとはCSSで好きなように料理するだけです。当然のことながら、この mime.css は Opera Mail のビューアペインのみに適用するものですので、他ブラウザでの表示確認なんてする必要はありません。Opera がサポートする CSS から何をどう使うかは、あなたのアイディアとセンス次第というわけです。
ですから、わざわざ章まで設けて解説することは何もないのですが、なんとなくダラダラ続けてみます。
mime.css は、通常 Opera のインストールディレクトリ（Windows なら C:\Program Files\Opera\styles\mime.css）にあります。弄る前に元のファイルをどこかにコピーしてバックアップしておくか、適当な場所にコピーした mime.css を MIME Style File で指定しておきましょう。
個人的には、インストールディレクトリ（Windows なら C:\Program Files\Opera\styles\mime.css）のものには手を加えず、 それをどこか別の場所にコピー & わかりやすいように適当な名前にリネーム（customize_mime.css とか）したものを MIME Style File で指定しておき、カスタマイズする時はそのコピーした mime.css に手をつけることをオススメします。
上書きインストールしたら mime.css も上書きされちゃったよーとかシャレになりませんから、と経験者はかく語りき。
わかると思いますが念のため。
omf:p {
white-space: -o-pre-wrap;
padding: 0;
margin: 0;
display: block;
line-height: 1.5;
}
等と指定してはいけません。何その疑似クラスおいしいの？と Opera に笑われてしまいます。: (コロン) ではなく | (パイプ) です。
画像のように周囲を灰色、本文の背景を黒、本文の文字色を白なスタイルにするべく、
body {
background-color: gray;
padding: 1em;
}
omf|div {
display: block;
padding: 2em;
background-color: black;
color: white;
}
と指定してみたら、
本文の文字色まで真っ黒になってしまった…という期待に反した光景に遭遇するかもしれません。原因は、
body {
background-color: gray;
padding: 1em;
}
omf|div {
display: block;
padding: 2em;
background-color: black;
color: white;
}
:
: 中略
:
omf|ql.L0 {color: #000000;}
omf|ql.L1, omf|ql.L7, omf|ql.L13, omf|ql.L19, omf|ql.L25, omf|ql.L31 {color: #385FA3;}
omf|ql.L2, omf|ql.L8, omf|ql.L14, omf|ql.L20, omf|ql.L26 {color: #4FA729;}
omf|ql.L3, omf|ql.L9, omf|ql.L15, omf|ql.L21, omf|ql.L27 {color: #CC0000;}
omf|ql.L4, omf|ql.L10, omf|ql.L16, omf|ql.L22, omf|ql.L28 {color: #6D3420;}
omf|ql.L5, omf|ql.L11, omf|ql.L17, omf|ql.L23, omf|ql.L29 {color: #458183;}
omf|ql.L6, omf|ql.L12, omf|ql.L18, omf|ql.L24, omf|ql.L30 {color: #212326;}
と、omf|ql.L0（引用レベル0、普通の文）にcolor: #000000が指定されているからです。当然と言えば当然なのですが、これがまたわかりにくい所にあるんですよね。
デフォルトの mime.css を覗いてみると、
の2つのメディア別指定がされています。後者の方はわかるのですが、前者の screen が指定されている意図が僕にはわかりませんでした。
@media screen, projection, tv {
.attachments object {
vertical-align: middle;
padding: 4px;
width: auto;
max-width: 98%;
height: auto;
}
omf|mime {
color: WindowText;
background-color: transparent;
display: block;
}
omf|headers {
font: status-bar;
color: ButtonText;
background: ThreeDFace;
padding: 4px;
border: 1px outset ThreeDFace;
width: 100%;
table-layout: fixed;
}
}
9.23，9.24 でヘッダを表示させて弄っている人は、omf|mimeのbackground-color: transparentを覚えておくといいかもしれません、とだけ言っておきます。
デフォルトの mime.css には、
omf|body, omf|div {
margin: 0;
display: block;
}
omf|p {
white-space: -o-pre-wrap;
padding: 0;
margin: 0;
display: block;
}
などとあちこちで（というほどでもないけど）display:blockが指定されています。僕には詳しいことはわかりませんが、指定しない場合（つまりデフォルト）はインライン要素の扱いを受けるみたいです。ここら辺、普通にCSSを弄るのとは勝手が違うんじゃないかと思います。いや実際どうなんだろ。
headers.xml や plain.xml のようにあれこれ指定はできませんが、
/* HTMLメール */
div.htmlpart {
display: block;
margin: 0 5%;
background: #efefef;
border: 1px solid #adadad;
}
/* 左右の間隔をとり背景色を指定して周りに線を引く */
とか、
/* 添付ファイル（画像） */
div.attachments object[data$=".jpg"],
div.attachments object[data$=".JPG"],
div.attachments object[data$=".jpeg"],
div.attachments object[data$=".JPEG"] {
display: none;
}
/* 拡張子が.jpg，.JPG，.jpeg，.JPEG の場合表示しない */
などと発想次第である程度のことができます。
Opera の 内蔵CSSにおいては、W3Cの仕様にはない独自プロパティを使うことができ、それらは Mozilla の-moz-みたいに-o-という文字列が入っています。Opera 9 のサポートするウェブ標準ならびに仕様 - Opera CSS リンク拡張のところに2つほど挙がっていますが、実はもうちょっとあります。詳しくは以下のリンク先を参照して下さい。
実際に mime.css でどのように使われているかというと、
object {
width: 100%;
height: -o-content-size;
display: block;
}
omf|p {
white-space: -o-pre-wrap;
padding: 0;
margin: 0;
display: block;
}
[class^="smiley"] {
width: -o-skin;
height: -o-skin;
}
.smiley-happy {
background-image: -o-skin("Smiley Happy");
}
.attachments a.unknown::before {
content: "";
background-image: -o-skin('Attachment Documents');
margin-right: 3px;
width: 16px;
height: 16px;
display: inline-block;
}
こんな感じです。まあ色々試してみて下さいな。
Opera はMHTMLファイルを閲覧する際にも mime.css を適用するようです。ファイルを開いた後に DOM Snapshot で見てみると、
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">
<html>
<head>
<title>ページタイトル</title>
<link rel="stylesheet" href="mime.css">
</head>
<body>
<div class="htmlpart">
<object id="omf_body_part_1" type="text/html" data="attachment:/***/attachment***.htm"> Mail body </object>
</div>
</body>
</html>
とこのように HTML メール と同じ扱いを受けているのがわかります。MHTMLファイルにスタイルを適用したくない場合、以下のことに気を付ける必要があります。
当然のことながら、デフォルトで定義されている
object {
width: 100%;
height: -o-content-size;
display: block;
}
によりMHTMLファイル閲覧に支障が出ることはありません。むしろ、これらを削除すると正常に閲覧できなくなります。
編集作業にあたっては Windows ならメモ帳でも構いませんが、後々のこと（そのうちメニューとかカスタマイズしたくなるかもしれないし）を考えて、何か手頃なテキストエディタをインストールしてそちらを使った方がいいと思います。UTF-8N（BOMなし）が読み書きできるやつで、できれば行番号が表示されたり、検索・置換機能が備わっていたり、コードが色分け表示されるやつを使うといいです。ここのページの UTF-8N に二重丸が付いてるやつから適当に選んで下さい、としか僕は言えません。
使用する mime.css をメモ帳なり好みのテキストエディタで開けば編集作業は整います。あとは編集するだけ…なのですが、何やら怪しいコードが並んでいてわけがわからない、という人が大半だと思います。それとも、人によってはそこそこ見慣れた光景となっているでしょうか。馬鹿にするなこれくらい読めるわ！という人はこんな所を読んでいてはいけません。
ともかく、取っかかりとしていくつかのカスタマイズ例を挙げておきます。全てデフォルトの mime.css を編集することを前提として書いています。
なお、編集中は他のメールにフォーカスを移すか、Reload stylesheets を実行すれば即座に変更後のファイルが反映されるので、Opera を再起動する必要はありません。
以下のような記述を見つけましょう。
omf|div.plaintext {padding: 0 8px;}
これはメール部分の周囲のスペースが上下0ピクセル、左右8ピクセルに設定されているということです。さすがに0はないだろう…というわけで、次のように書き換えます。
omf|div.plaintext {padding: 1em;}
こうすることで、上下左右に適度なスペースをとることができます。数値は好みで変えて下さい。
以下のような記述を見つけましょう。
omf|p {
white-space: -o-pre-wrap;
padding: 0;
margin: 0;
display: block;
}
これを次のように書き換えます。
omf|p {
white-space: -o-pre-wrap;
padding: 0;
margin: 0;
display: block;
line-height: 1.5;
}
こうすることで、適度な行間がとられたかと思います。数値は好みで変えて下さい。
メールのフォントは、設定 > 詳細設定 > フォント > メール表示 で好みのタイプ・サイズが設定できますが、特定の箇所のみを変更したいという人もいるかもしれません。例えば、引用部分のフォントサイズのみを小さくするには、以下の記述を適当な場所に追記して下さい。
omf|ql.L1, omf|ql.L2, omf|ql.L3, omf|ql.L4, omf|ql.L5,
omf|ql.L6, omf|ql.L7, omf|ql.L8, omf|ql.L9, omf|ql.L10,
omf|ql.L11, omf|ql.L12, omf|ql.L13, omf|ql.L14, omf|ql.L15,
omf|ql.L16, omf|ql.L17, omf|ql.L18, omf|ql.L19, omf|ql.L20,
omf|ql.L21, omf|ql.L22, omf|ql.L23, omf|ql.L24, omf|ql.L25,
omf|ql.L26, omf|ql.L27, omf|ql.L28, omf|ql.L29, omf|ql.L30,
omf|ql.L31 {
font-size: 90%;
}
場所はどこでも構いませんが、
omf|sig {
font-style: italic;
color: gray;
}
omf|ql.L1, omf|ql.L2, omf|ql.L3, omf|ql.L4, omf|ql.L5,
omf|ql.L6, omf|ql.L7, omf|ql.L8, omf|ql.L9, omf|ql.L10,
omf|ql.L11, omf|ql.L12, omf|ql.L13, omf|ql.L14, omf|ql.L15,
omf|ql.L16, omf|ql.L17, omf|ql.L18, omf|ql.L19, omf|ql.L20,
omf|ql.L21, omf|ql.L22, omf|ql.L23, omf|ql.L24, omf|ql.L25,
omf|ql.L26, omf|ql.L27, omf|ql.L28, omf|ql.L29, omf|ql.L30,
omf|ql.L31 {
font-size: 90%;
}
#flowed omf|ql {
padding: 0 0 0.3em 0.4em;
margin-left: -0.2em;
border-left: 2px solid;
display: block;
}
辺りが良いかと思います。数値は好みで変えて下さい。
例として、周りを淡いグリーンというか抹茶色に、メール本文の背景を白っぽいけど白じゃないっぽい色に変更する手順です。
先ず、以下の記述を適当な場所に追記して下さい。
body {
background-color: #b8d26b;
}
場所はどこでも構いませんが、上の方の、
* {
margin: 0;
padding: 0;
}
body {
background-color: #b8d26b;
}
object {
width: 100%;
height: -o-content-size;
display: block;
}
辺りが良いかと思います。次に、以下のような記述を見つけましょう。
omf|div.plaintext {padding: 0 8px;}
ここを次のように書き換えます。
omf|div.plaintext {
padding: 0 8px;
margin: 1em;
background-color: #f5f5f5;
}
周りの色ともう少し間隔を取るには、
omf|div.plaintext {
padding: 1em;
margin: 1em;
background-color: #f5f5f5;
}
という具合にするとよろしいです。数値や色は好みで変えて下さい。
以下の記述を適当な場所に追記して下さい。
/* 通常のリンク */
html|a:link {
color: #1018b5;
}
/* 訪問済みリンク */
html|a:visited {
color: black;
}
/* リンクマウスオーバー */
html|a:hover {
color: red;
}
場所はどこでも構いませんが、
omf|l {
padding: 0;
margin: 0;
display: block;
}
/* 通常のリンク */
html|a:link {
color: #1018b5;
}
/* 訪問済みリンク */
html|a:visited {
color: black;
}
/* リンクマウスオーバー */
html|a:hover {
color: red;
}
omf|sig {
font-style: italic;
color: gray;
}
辺りが良いかと思います。色は好みで変えて下さい。
以下のような記述を見つけましょう。
omf|sig {
font-style: italic;
color: gray;
}
これを次のように書き換えます。
omf|sig {
font-style: normal;
color: black;
}
色や書体は好みで変えて下さい。
以下のような記述を見つけましょう。
#flowed omf|ql {
padding: 0 0 0.3em 0.4em;
margin-left: -0.2em;
border-left: 2px solid;
display: block;
}
ここの部分へ最初に /* 、最後に */ を追記します。
/*
#flowed omf|ql {
padding: 0 0 0.3em 0.4em;
margin-left: -0.2em;
border-left: 2px solid;
display: block;
}
*/
ついでにそのちょっと下にある、
#flowed omf|ql.L1, #flowed omf|ql.L7, #flowed omf|ql.L13, #flowed omf|ql.L19, #flowed omf|ql.L25, #flowed omf|ql.L31 {border-left-color: #385FA3;}
#flowed omf|ql.L2, #flowed omf|ql.L8, #flowed omf|ql.L14, #flowed omf|ql.L20, #flowed omf|ql.L26 {border-left-color: #4FA729;}
#flowed omf|ql.L3, #flowed omf|ql.L9, #flowed omf|ql.L15, #flowed omf|ql.L21, #flowed omf|ql.L27 {border-left-color: #CC0000;}
#flowed omf|ql.L4, #flowed omf|ql.L10, #flowed omf|ql.L16, #flowed omf|ql.L22, #flowed omf|ql.L28 {border-left-color: #6D3420;}
#flowed omf|ql.L5, #flowed omf|ql.L11, #flowed omf|ql.L17, #flowed omf|ql.L23, #flowed omf|ql.L29 {border-left-color: #458183;}
#flowed omf|ql.L6, #flowed omf|ql.L12, #flowed omf|ql.L18, #flowed omf|ql.L24, #flowed omf|ql.L31 {border-left-color: #212326;}
という箇所にも同様に追記します。
/*
#flowed omf|ql.L1, #flowed omf|ql.L7, #flowed omf|ql.L13, #flowed omf|ql.L19, #flowed omf|ql.L25, #flowed omf|ql.L31 {border-left-color: #385FA3;}
#flowed omf|ql.L2, #flowed omf|ql.L8, #flowed omf|ql.L14, #flowed omf|ql.L20, #flowed omf|ql.L26 {border-left-color: #4FA729;}
#flowed omf|ql.L3, #flowed omf|ql.L9, #flowed omf|ql.L15, #flowed omf|ql.L21, #flowed omf|ql.L27 {border-left-color: #CC0000;}
#flowed omf|ql.L4, #flowed omf|ql.L10, #flowed omf|ql.L16, #flowed omf|ql.L22, #flowed omf|ql.L28 {border-left-color: #6D3420;}
#flowed omf|ql.L5, #flowed omf|ql.L11, #flowed omf|ql.L17, #flowed omf|ql.L23, #flowed omf|ql.L29 {border-left-color: #458183;}
#flowed omf|ql.L6, #flowed omf|ql.L12, #flowed omf|ql.L18, #flowed omf|ql.L24, #flowed omf|ql.L31 {border-left-color: #212326;}
*/
次にそのちょっと下にある、
#wrapped .L1 omf|l:before {content: '> ';}
#wrapped .L2 omf|l:before {content: '>> ';}
#wrapped .L3 omf|l:before {content: '>>> ';}
:
: 中略
:
#wrapped .L30 omf|l:before {content: '>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> ';}
#wrapped .L31 omf|l:before {content: '>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> ';}
という箇所の #wrapped を全て削除して次のように書き換えます。
.L1 omf|l:before {content: '> ';}
.L2 omf|l:before {content: '>> ';}
.L3 omf|l:before {content: '>>> ';}
:
: 中略
:
.L30 omf|l:before {content: '>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> ';}
.L31 omf|l:before {content: '>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> ';}
これでメール表示の時も引用符が表示され、引用符をコピペすることができるようになります。
このような感じでカスタマイズすると、デフォルトのそれよりはだいぶ見やすくなったかと思います。最初のうちはデフォルトの mime.css をお手本として、ブラウザで表示確認しながら少しずつ弄っていくと良いです。あと、
omf|p {
white-space: -o-pre-wrap;
padding: 0;
margin: 0;
display: block;
line-height: 1.5; /* 行間を広く */
}
このように自分が弄った箇所にコメントを付けておくと後々楽です。/* から */ で括られた箇所は、実際のスタイルには影響しません。同様にして、デフォルトの記述をこういう風に括っておくと、弄って表示がおかしくなった時にすぐ元に戻すことができます。
詳しいCSSの仕様やテクニック等は誰か偉い人がWeb上に残して置いてくれてますので、Opera の検索機能を駆使してそちらをあたって下さい。ちなみに、Opera Widgets の The Colours Of The Rainbow や Color-Picker :: Tools、Font Colorgradient 等を使うとカラーコードがお手軽に取得できるので、フォントの色や背景色を考えたり指定する際は便利です。こういう時にこそ活用しましょう。
僕が Opera Mail を使い出したのは、Opera に出会ってから2年ほど経った春の頃でした。それまでは、
という理由で敬遠していましたが、他の Opera な人の甘言にまんまと乗せられて使ってみたらさあ大変、驚くほど使いやすいのです。「ブラウザと一体型なのがなんとなく嫌」というのが「ブラウザと一体型だからこそイイ」に変わり、「フォルダ管理じゃなくフィルタ管理なのが使いづらい」というのが「フォルダ管理よりもフィルタ管理の方が断然使いやすい」に変わりました。
しかし、依然として「ビューアペインが見づらい」というのは不満として残っています。そこで、なんとかこれを解消する術はないかと調べているうちに辿り着いたのが、temp_hさんのサイト Temporary-Depot 内コンテンツ「おぺらえむつー[Opera,M2] の mime.css の弄り方」でした。そして気に入らないなら直せばいい
という言葉そのままに弄り倒し、かくして僕は理想のメーラーに出会うことができたのです。
残念ながら、temp_hさんのサイトは2005年12月8日に閉鎖されてしまい、今となってはそれらの貴重なコンテンツはWebの藻屑となって読むことはできません。最初はもし有益だと思われる情報がありましたら、どんどん安全な場所に引き上げて下さい。こちらとしてもありがたいです。転載推奨。
というお言葉に甘えてそのまま転載しようかとも思ったのですが、その頃には Opera Mail が吐くXMLの様子も変わっていたりして、なかなかそうもいかなくなってきました。
Opera ユーザーは少ないですが、その中でも Opera Mail を使っているユーザーは更に少ないという風説（あるいは妄想）が届きます。でもひょっとしたら、かつての僕のように Opera Mail のビューアペインを変えたくてネットを彷徨っている方がいるかもしれません。それならば、やはりこういう文書はあった方がいいだろうと思い、temp_hさんのそれと流れや形式を（なるべく）同じにして、内容や情報、文章はごっそり一から書き直してこのようにアップした次第です。
それでは頑張って俺色のメーラーを創り上げて下さい。
2007/10/19 芦塚 円 御意見はこちらのコメント欄まで