英辞郎 on the WEB の隙間を狭くする (Stylusを使う方法)

1. はじめに

最近、英辞郎 on the WEB のデザイン（スタイル）が変わりました。

行間が大きくなり、1画面あたりの情報量が減ったため、以前と較べて使いにくい印象を受けます。

ということで、Chrome ブラウザの拡張機能である Stylus を使い、このスタイルを修正して使っています。

Stylus は、特定のWebページに対して、個別に用意したスタイル (CSS) を適用して見た目を変えることができる拡張機能です。

Stylus の使い方自体は、以下の記事を御覧ください。

2. 結果

例えば、通常通りに because という英単語を表示した画面はこちらです。

これに対して、スタイルを修正した画面は以下になります。

この2つの画面の縦の長さは、ほぼ同じです。

文字と行間を少し小さくしたことにより、同じ画面の大きさであっても、表示される内容がかなり増えたのが分かると思います。

3. Stylus で作成したスタイルについて

今回の設定は、「eow.alc.co.jp」というURLに対して作成しました。

右側の CSSコードは、Chrome のデベロッパーツールの Elements パネルを使って書きました（下画面）。具体的には、行間に隙間のある部分のスタイル (CSS) を調べて、margin や padding プロパティの値を小さくし、そのコードをそのまま Stylus 側のコード部分に貼り付けただけです（文字のサイズも同様です）。なので、かなり適当ではあります。

またこの設定は、ツールバー上の Stylus アイコンをクリックし、「eow.alc.co.jp」という項目の頭にあるチェックボックのチェックを外すことで無効にすることができます（下画面）。

4. Stylus に記述したCSSコード

同じように設定したい方のために、今回 Stylus に記述したCSSコードをここに貼っておきます。

@media screen and (min-width: 1098px) {
  .contents .search-use-list ol, .contents .search-sentence-list ol {
    font-size: .95em;
  }
}
@media screen and (min-width: 598px) {
  body {
    font-size: 1.4em;
  }
}

.contents .search-use-list {
    margin-bottom:.5em;
}

.contents .search-use-list ol>li {
    padding: 0em 0.5em 0em 2.5em;
}

.contents .search-use-list .wordclass {
    padding: 0em 0.5em;
}

.contents .search-use-list li, .contents .search-sentence-list li {
    line-height: 1.4;
}

.contents .search-use-list .wordclass:not(:first-child) {
    margin-top: 0.5em;
}

.contents .search-use-list .attr {
    margin: 0.5em 0;
    padding: 0.5em;
}

@media screen and (min-width: 598px) {
  .header .tbl-01 th, .header .tbl-01 td, .contents .tbl-01 th, .contents .tbl-01 td, .footer .tbl-01 th, .footer .tbl-01 td {
    padding: 0.2em 0.5em;
  }
}

.contents .search-word-table {
    margin-top: 0.2em;
    margin-bottom: 1.0em;
}

.contents .search-sentence-list > ul > li {
    padding: .2em 0.5em;
}

.contents .search-use-list .midashi h2, .contents .search-use-list .midashi_je h2 {
    margin-bottom: .3em;
}

.aboutword {
    margin-bottom: 0;
}

.header .ttl-01, .header .ttl-02, .header .ttl-03, .header .ttl-04, .contents .ttl-01, .contents .ttl-02, .contents .ttl-03, .contents .ttl-04, .footer .ttl-01, .footer .ttl-02, .footer .ttl-03, .footer .ttl-04 {
    margin-bottom: 0.2em;
    line-height: 1;
}

div.sas {
    margin-bottom: 5px;
    margin-top: 0px;
}

#resultsList ul, #resultsArea_je ul {
    margin-bottom: 0;
}

.contents .search-sentence-ttl {
    margin-bottom: .5em;
}

#resultsList > a {
    display: block;
}

5. おわりに

人によって好みがあるとは思いますが、個人的には 英辞郎 on the WEB がかなり使いやすくなりました。よく使っているサイトなので、私にとっては必須の設定です。

スポンサードリンク