スタイリッシュな[Firefox＆Chrome]でウェブ上の小さな煩わしさを修正する方法

Webデザイナーにはほとんど不可能な仕事があります。彼らは皆を喜ばせる1つのデザインを考え出す必要があります。世界中の数え切れないほどの人々によって使用されているGmailのようなサービスについて話すとき、あなたは本当に「ほとんど」の部分を落とすことができます–それはただ不可能です。再設計がほとんどの人に好まれているとしても、新しい外観を本当に嫌うユーザーは常に存在します。

Googleが最近Gmailのアイコンボタンで行ったように、これらのユーザーが十分にいて、会社にバックトラックを強制することがあります。しかし、あなたが何かを持っている場合はどうなりますか本当嫌いで、会社はそれを元に戻さないのですか？あなたは永遠にそれに固執していますか？ユーザースタイルのおかげで、このような問題を自分で修正できます。

スタイリッシュなご紹介

Stylishは、両方で利用できる無料のアドオンです。 Firefox とクロム、そしてそれはあなたがかなり魔法のようなことをすることを可能にします-あなた自身のスタイルをウェブページ要素に適用してください。 Web開発者ではなく、人生でCSSを少し書いたことがない場合でも、これは思ったよりもはるかに簡単です。 Stylishを使用してWebサイトを完全に変換できますが（次のセクションで説明します）、さらに重要なことに、Stylishを使用して小さな煩わしさを数分で修正できます。

たとえば、Gmailのデフォルトのフォントサイズに問題がありました。インターフェイスは問題ありませんでした。ブラウザでズームイン（Ctrl +）したくありませんでした。これは、すべてのインターフェイス要素のサイズが大きくなり、非常に見苦しいためです。メッセージフォントを少し大きくする方法が欲しかっただけです。

スタイリッシュで、それは本当に簡単でした、そして私はあなたにその方法をお見せします。ただし、独自のユーザースタイルの作成を検討する前に、他の人の作業を活用する方法について説明しましょう。

UserStyles.org

何かが神経質になっている場合は、あなたが一人ではない可能性があります。 UserStyles.org は、ユーザーが作成したスタイルを共有できるWebサイトです。上にスタイルを見ることができます（ツールバーアイコンにラベルを追加する）Gmailアイコンボタンに関するストーリーへの返信として、MakeUseOfコメンターのRandyNが推奨します。このスタイルでは、アイコンを保持できますが、テキストラベルを追加できます。これは、Googleでは許可されていません。

UserStyles.orgは素晴らしいですが、完璧ではありません。いくつかのデザインはやりすぎ（ウェブサイトの外観を完全に変更する）を試み、いくつかは古いバージョンのウェブサイト用であり、現在は壊れています。小さなものを修正しようとしてUserStyles.orgで見つからない場合は、おそらく自分で修正するのが最善の方法です。

独自のシンプルなユーザースタイルの作成

独自のユーザースタイルを作成するには、最初にページのどの要素を変更しようとしているのかを知り、次にどのような変更を加えたいのかを知る必要があります。したがって、開始するには、変更したいものを右クリックして、 要素を検査する 。次のようなものが表示されます。

Firefoxはページの残りの部分を暗くし、選択した要素の周囲に非常に明確なフレームを描画します。その要素の上に、 div＃2d6.ii.gt.adP.adO は、1つのID（＃で始まる部分）を含む一連のCSSクラスです。これは、この要素のスタイルに影響を与えるセレクターです。画面の下部に沿って、ナビゲーションバーがあります。 DOMツリーをトラバースします '、または簡単に言うと、選択した要素につながる要素の階層を上下に移動します。

ここでのゲームの名前は、スタイルを設定したい要素を選択し、影響を与えたいすべてに影響を与えないほど狭くなく、他のものを台無しにするほど広くないようにすることです。

1つ上の要素をクリックしました。 div.gs 、その名前が好きだからです（すぐには変わらないようですが、それは私の側の完全な推測です）。メッセージ領域全体に影響します。スタイルを設定する領域を選択したら、をクリックします。 スタイル 右下隅のボタンをクリックして、 ルール パン：

最初は怖いです。ただし、ここで、選択した要素に影響を与えるさまざまなCSSルールを確認できます。また、ここで、独自の一時的な変更を行って、ページを再読み込みせずにリアルタイムでページに与える影響を確認できます。しかし、あなたは何を変えるべきですか？クリック プロパティ ボタンを押してチェックを外します ユーザースタイルのみ ：

ここでは、の完全なリストを見ることができます全て CSSルール。必要なルール（この場合はフォントサイズ）が見つかるまでリストを下にスクロールし、その横にある疑問符をクリックして説明ページを開くこともできます。これで、クラスが 'であるすべてのdiv要素のfont-sizeプロパティを微調整する必要があることがわかりました。 gs '（省略形で次のように書かれています div.gs ）。

残っている唯一の問題は、その価値をどうしたいかということです。そのために、[ルール]ペインに戻り、次の操作を開始します。

40ピクセルは少しおかしいかもしれませんが、一般的な考え方は理解できます。これをいじって、目的の外観が得られるまで、他のプロパティを自由に追加してください。変更内容は次のとおりですので、ページを閉じないように注意してください いいえ どこにでも保存されます。

新しいスタイルを保存する

サイトのこの部分が思いどおりに表示されたら、保存します。クリック スタイリッシュ アドオンバーのアイコンをクリックし、 新しいスタイルを書く 。スタイリッシュな人は、新しいスタイルをどのページに適用する必要があるかを知りたいと思うでしょう。この場合、2番目のオプションを選択してください。 mail.google.com 。次に、次のダイアログが表示されます。

私はすでにそれを記入しました。明らかに、私はスタイルの名前といくつかのタグを選びました。しかし、実際のことはコード内で発生します。3行目はすでにそこにあります–スタイリッシュに配置して、スタイルがどのページに適用されるかを認識できるようにします。しかし、5〜7行目は私のものです。それらを分析してみましょう：

5行目： div.gs { –この部分は認識しておく必要があります。これは、スタイルを設定することにした要素です。冒頭の中括弧は、CSSルールをいくつか作成することを意味します。6行目： font-size：20px！important; –これが変更したいルール（フォントサイズ）、新しい定義（20ピクセル）、そして！important宣言です。これは、テキストに近い要素が設定しようとしても、Firefoxがこのルールに従うことを意味します。フォントサイズを別のものに変更します。7行目：} –スタイル定義を閉じます。

次に、[プレビュー]をクリックして、作業に驚嘆します。

そして最後に、それが機能していることを確認したら、をクリックします 保存する。

これは完全なガイドではありません

この短いチュートリアルを1つの投稿の範囲内に収めるために、私は何度も飛躍しなければならなかったことをよく知っています。途中で混乱した場合は、お詫び申し上げます。 CSSは最初は注意が必要ですが、一度慣れればそれほど複雑ではありません。Webサイトをローカルでカスタマイズすることは、学習するための最良の方法の1つです。

何かご不明な点がございましたら、下記までお問い合わせください。できる限りサポートさせていただきます。

私はいくつかを見つける必要があります

共有共有つぶやき Eメール VirtualBoxLinuxマシンを過給するための5つのヒント

仮想マシンによって提供されるパフォーマンスの低下にうんざりしていませんか？ VirtualBoxのパフォーマンスを向上させるためにすべきことは次のとおりです。

次を読む 関連トピック

ブラウザ
ウェブ開発
ウェブマスターツール
Mozilla Firefox
グーグルクローム
ウェブデザイン

著者について エレズ・ズカーマン（288件の記事が公開されました） ErezZukermanのその他の記事

ニュースレターを購読する

ニュースレターに参加して、技術的なヒント、レビュー、無料の電子書籍、限定セールを入手してください。

購読するにはここをクリックしてください