Web サイトのスタイルを変更し、Web フォントを置き換えるには、このプラグインを使用すると簡単に行うことができます:スタイリッシュ_html/css_WEB-ITnose

スタイリッシュとは何ですか?

本題に入りますが、Stylish の機能は、Baidu のホームページを次のようなものに変えることができることです:

また、Zhihu を「平坦化」し、Weibo の Web バージョンを非常に簡潔にし、Feedly がマテリアル デザインを使用してください... …

この魔法のスタイリッシュは、実際には Chrome、Firefox、Opera、Safari ブラウザに適したブラウザ プラグインです (ダウンロードするにはブラウザ名をクリックしてください)。スタイリッシュはWebページそのもののCSSを置き換えることで「美しくする」という目的を達成します。

CSSとは何ですか? CSS の中国語の正式名は Cascading Style Sheets で、HTML または XML を表現する方法です...これは曖昧なものです。つまり、CSSはWebページの服のようなもので、Webページそのものの機能を追加することはできませんが、レイアウトやフォント、さらにはスクロールバーなど、見た目に関わるすべてを決定することができます。見た目の重要性については、言うまでもなく私よりも皆さんのほうがよく理解されていると思います。

CSSは高機能だけどStylishも簡単に使えます

Stylishの基本的な使い方はとても簡単で、公式サイトからStylishをブラウザにインストールします。スタイリッシュのオプション メニューでは、Chrome の拡張機能管理と同様に、インストールされている CSS を更新、無効化、アンインストール、編集できます。

* ブラウザによってインターフェイスは若干異なりますが、使用方法は同じです

Stylish が空になったので、次のステップは CSS スタイル テンプレートを追加することです。心配しないでください。Web サイトを開いて、Stylish メニューを開き、「この Web サイトに適したスタイルをさらに検索」をクリックするだけで、Stylish が Web サイトに適した CSS テンプレートをリスト表示します。

userstyles.org に直接アクセスして、事前に作成された CSS テンプレートを見つけることもできます。ただし、Web サイトのインターフェイスは使いにくいので、検索機能を活用することをお勧めします。左上隅。

気に入ったテンプレートを見つけたら、緑色のボタンをクリックしてインストールします。これは、ブラウザのプラグインをインストールするのと同じくらい簡単です。一部の CSS には、図に示すように、さらに多くのオプションがあります。

これらの CSS テンプレートを試してみてください

1. クリーンな Weibo を提供します: Weibo_v6

この CSS は、Weibo を変換する、「Weibo Express」と呼ばれる Chrome プラグインと同じ効果があります。大きなイメージチェンジをしましょう。削除しましょう。広告などの余分な要素を削除し、レイアウトを再配置してすっきりとした Weibo を提供します。

2. Baidu もマテリアル デザインを使用しています: Baidu Light

これは、記事の冒頭で見たように、Baidu がマテリアル デザイン スタイルを使用できるようにする CSS です。検索結果ページにも適用されます。

3. Google 検索の再美化: Google 検索 - マテリアル デザイン

この CSS は、デザイナー Aurélien Salomon の Dribbble ➔ 再設計された Google 検索に基づいています。上記の Baidu Light と同様、Google 自体がすでに非常にクリーンであるため、効果の向上は Baidu ほど明らかではありませんが、見た目は良好です。

4. Zhihu のフラット バージョン: Flat_Zhihu

この CSS は Zhihu をフラット化するだけでなく、フォント、アニメーション、ページ幅も最適化します。全体として、元のバージョンよりもはるかに快適に見えます。ついに、Zhihu を読むためにズームインしたりズームアウトしたりする必要がなくなりました。

5. グローバル ナイト モード: NightShift - アイケア

このグローバル CSS は、ページの白い部分を暗くし、画像の明るさを下げることができます。「ナイト モード」をオンにするようなものです。互換性の問題がいくつかありますが、使用には影響しません。

6. Mac スタイルのスクロール バー: ユニバーサル ミニマリスト スクロール バー

これは Windows システム用のグローバル CSS スタイルです。これにより、ブラウザに Mac OS X スタイルの透明でミニマルなスクロール バーを表示できるようになります。

スタイリッシュを使用して Web フォントをカスタマイズします

多くの人は、Web ページのスタイルを変更するために上記のテンプレートを使用することに加えて、お気に入りのフォントを使用して Web を閲覧したいと考えています。これは、ユーザー スタイルのスタイリッシュ検索を使用して簡単に実現できます。 " "Font" の Web サイトでは、選択して使用できる既製のテンプレートを簡単に見つけることができます。ダウンロード後は、ほとんど調整せずに直接使用できます。

ここでは、ForceMyFont というテンプレートをお勧めします。このテンプレートには非常に豊富な組み込みオプションがあり、CSS について何も知らなくても、手動でさまざまな中国語と英語のフォントを選択できます。設定を選択し、リストから使用したいフォントを選択してインストールするだけです。これは非常に便利です。ただし、対応するフォントがコンピュータにインストールされているかどうかに注意してください。インストールされていない場合は、追加でダウンロードしてインストールする必要があります。

CSS スタイルをいくつか知っている場合は、もちろんページ効果を手動で記述することもできます。自由度が高いのがメリットですが、好みに合わせて変更できるのですが、それに比例して利用の敷居も高くなります。ここではカスタムフォントCSSの例を示します。

まず、Stylish のオプション メニューを開き、「新しいスタイルを作成」​​を選択し、次のコードを入力します:

*{font-weight:600!important;}

*{font-family: Arial, ”方正兰亭黑简体”;}

最初の行はフォントの太さを定義し、フォントが大きいほど太くなります。 2行目は指定したフォントです。コンピュータにインストールされているフォントを入力します。

如果你喜欢字体阴影，可以加入下面这行代码：

*{text-shadow:0.01em 0.01em 0.01em #999999 !important;}

其中的数值依次代表阴影的 X 轴偏移、Y 轴偏移、阴影大小，以及字体颜色。

当填写好「应用对象」之后去页面查看一下效果吧。如果想要应用到全局，如上图配置即可。

最后要说一下，如果你是 Mac 用户，想要调用最新的 San Francisco 字体，可能会发现这个字体并不在 Font Book 里，而在 CSS 中直接键入 "San Francisco"  也没有效果，这是因为苹果并没有把这个字体放在 Font Book 中供大家使用，如果想在网页上使用这个字体，需要用  -apple-system, BlinkMacSystemFont, 才行

最后

可以看到，Stylish 可以优化页面的样式。对于大多数普通用户来说，使用 Stylish 套用那些现成的模板，来优化那些设计不佳或风格不喜欢的网站，是个很好的解决方案。

更进阶一点的话， Stylish 实际上 还可以实现去除广告、补全浏览器部分功能。但这不在本文的范围之中， 这篇文章仅作为抛砖引玉，以便让更多人先知道并初步了解这样一款浏览器扩展。

欢迎各位在评论里一起讨论 Stylish 的更多用法，或分享你喜欢的 CSS 模板。