目次
スタイリッシュとは何ですか?
CSSは高機能だけどStylishも簡単に使えます
これらの CSS テンプレートを試してみてください
1. クリーンな Weibo を提供します: Weibo_v6
2. Baidu もマテリアル デザインを使用しています: Baidu Light
3. Google 検索の再美化: Google 検索 - マテリアル デザイン
4. Zhihu のフラット バージョン: Flat_Zhihu
5. グローバル ナイト モード: NightShift - アイケア
スタイリッシュを使用して Web フォントをカスタマイズします
最后
ホームページ ウェブフロントエンド htmlチュートリアル Web サイトのスタイルを変更し、Web フォントを置き換えるには、このプラグインを使用すると簡単に行うことができます:スタイリッシュ_html/css_WEB-ITnose

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

Jun 24, 2016 am 11:15 AM

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

本題に入りますが、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 模板。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

< Progress>の目的は何ですか 要素? < Progress>の目的は何ですか 要素? Mar 21, 2025 pm 12:34 PM

この記事では、HTML< Progress>について説明します。要素、その目的、スタイリング、および< meter>との違い要素。主な焦点は、< Progress>を使用することです。タスクの完了と< Meter> statiの場合

< datalist>の目的は何ですか 要素? < datalist>の目的は何ですか 要素? Mar 21, 2025 pm 12:33 PM

この記事では、HTML< Datalist>について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。

< meter>の目的は何ですか 要素? < meter>の目的は何ですか 要素? Mar 21, 2025 pm 12:35 PM

この記事では、html< meter>について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化< Meter> < Progress>およびex

HTML5のクロスブラウザー互換性のベストプラクティスは何ですか? HTML5のクロスブラウザー互換性のベストプラクティスは何ですか? Mar 17, 2025 pm 12:20 PM

記事では、HTML5クロスブラウザーの互換性を確保するためのベストプラクティスについて説明し、機能検出、プログレッシブエンハンスメント、およびテスト方法に焦点を当てています。

ビューポートメタタグとは何ですか?レスポンシブデザインにとってなぜそれが重要なのですか? ビューポートメタタグとは何ですか?レスポンシブデザインにとってなぜそれが重要なのですか? Mar 20, 2025 pm 05:56 PM

この記事では、モバイルデバイスのレスポンシブWebデザインに不可欠なViewportメタタグについて説明します。適切な使用により、最適なコンテンツのスケーリングとユーザーの相互作用が保証され、誤用が設計とアクセシビリティの問題につながる可能性があることを説明しています。

HTML5< time>を使用するにはどうすればよいですか 日付と時刻を意味的に表す要素? HTML5< time>を使用するにはどうすればよいですか 日付と時刻を意味的に表す要素? Mar 12, 2025 pm 04:05 PM

この記事では、html5< time>について説明します。セマンティックデート/時刻表現の要素。 人間の読み取り可能なテキストとともに、マシンの読みやすさ(ISO 8601形式)のDateTime属性の重要性を強調し、Accessibilitを増やします

HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか? HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか? Mar 17, 2025 pm 12:27 PM

この記事では、ブラウザのユーザー入力を直接検証するために、必要、パターン、MIN、MAX、および長さの制限などのHTML5フォーム検証属性を使用して説明します。

< iframe>の目的は何ですか タグ?使用する際のセキュリティ上の考慮事項は何ですか? < iframe>の目的は何ですか タグ?使用する際のセキュリティ上の考慮事項は何ですか? Mar 20, 2025 pm 06:05 PM

この記事では、< iframe>外部コンテンツをWebページ、その一般的な用途、セキュリティリスク、およびオブジェクトタグやAPIなどの代替案に埋め込む際のタグの目的。

See all articles