Web

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

投稿日:2023年1月20日 更新日:

1. はじめに

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

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

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

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

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

Amazon ページ右端のカート内商品リストを非表示にする方法

2021.08.04
Web

YouTube動画の最後に表示されるサムネイルを消す方法

2022.12.09

2. 結果

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

元の画面

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

Stylus でスタイルを少し変更した結果の画面

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

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

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

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

eow.alc.co.jp に対して作成したスタイル

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

Chrome のデベロッパーツールを使ってスタイル (CSS) を調べる。

またこの設定は、ツールバー上の 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 がかなり使いやすくなりました。よく使っているサイトなので、私にとっては必須の設定です。

スポンサードリンク

📂-Web
-

執筆者:labo


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

関連記事

Web

WordPressの記事ページ (それ以外でも多分OK) に、Google Charts を使って生成したグラフを表示する方法

目次1. はじめに2. やりたいこと3. やり方(1) Google Charts の JavaScript ファイルを読み込ませる(2) グラフを表示させたい箇所に div タグを記述する(3) グ …

WordPress

【WordPress】JP Markdownプラグインが code タグの属性を削除する問題への対応方法

目次1. 現象2. 原因3. 対応方法 1. 現象 WordPress の JP Markdown プラグインを使っていると、以下のような (<pre> タグを伴わない単独の) <c …

Xserver

エックスサーバーに独自に Vim を導入する

エックスサーバーに独自に Vim を導入する手順を紹介します。

Web

HTTP/3での接続を強制的に止める方法 (Chrome)

HTTP/3での接続を強制的に止める方法 (Chrome)を紹介します。

Xserver

エックスサーバーに WP-CLI を導入する

エックスサーバーに WP-CLI を導入する方法を紹介します。