拡張機能「スタイルチューナー」。 自分でサイトスタイルをカスタマイズする

ネットワークの広がりをさまよいながら、私たち一人一人が時々このような問題に遭遇します。サイト上の情報は有用で必要ですが、読むことは非常に困難です。 フォントが小さすぎるか、背景が暗く、テキストが明るく、目がすぐに疲れます。



この記事では、Firefoxの拡張機能「 Styles Tuner 」について説明します。これにより、サイトの色とフォントを自分に合った方法でカスタマイズできます。



たとえば、ミュージシャンが作品を投稿し、作曲を伝え、評価するrocklab.ruを考えてみましょう。 たまたま最初にサイトが暗く作成され、その上のフォントが明るいため、岩の向きに対応していますが、ユーザーにとっては不便なことがよくあります。 特に、例えばフォーラムで多くの時間を過ごす場合。



以下は、拡張機能のデモです(音なし):







そのため、拡張機能をaddons.mozilla.orgからインストールし、編集したサイトを開いてアイコンをクリックします スタイルチューナーアイコン ブラウザバーで。



Firefoxのサイドバーに5つのアイコンが表示されます。



スタイルチューナーコントロールパネル



最後の4つの予定については後で説明しますが、今のところは最初の予定をクリックして、サイトのスタイルの編集モードに入ります。



拡張機能のアイデアは、HTMLやCSSをまったく知らないユーザーでも、あらゆるユーザー向けにサイトのスタイルをカスタマイズすることでした。 プログラムはサイト全体で実行され、サイドバーに要素のリストが表示されます。 同じクラスの同じタグは、単一のブロックとしてパネルに表示されます。



スタイルチューナーコントロールパネル



次に、必要な要素を選択し、編集に進みます。 サイドバーのブロックにカーソルを合わせるか(同時に、ページ上の要素が境界線で強調表示されます)、またはページ自体の要素をクリックして(コントロールブロックがサイドパネルで強調表示されます)選択できます。 ページ自体の選択をキャンセルするには、選択したアイテムをもう一度クリックする必要があります。



サイトの背景は完全に黒ではなく灰色なので、フォントの色で編集を開始し、最後に背景色を置き換えます。



サイドバーで要素を選択し、スライダーをドラッグして、色を黒にします。



スタイルチューナーを使用する



次に、リンクの色を、たとえば青に変更します。



スタイルチューナーを使用する



ページナビゲーションリンクのページの色も設定します。



スタイルチューナーを使用する



さて、最後のステップは、明るいページの背景を設定することです。



スタイルチューナーを使用する



したがって、4つのステップで、より便利で読みやすいコンテンツが得られました。



同様に、サイトの他のすべての要素のコンテンツを編集できます。 フォントと背景色の変更に加えて、フォントサイズを編集してファミリを選択できます。 要素の作成者の設定を返したい場合は、[デフォルト]リンクをクリックしてください。



スタイルチューナーを使用する



次に、ブラウザーのサイドバーの上部にある残りの4つのボタンの目的を検討します。

ボタン「このサイトの変更を削除」 スタイルチューナーを使用する 独自のサイト設定をリセットして元の外観に戻すように設計されています。つまり、サイトが作成者の意図したとおりになります。



「すべてのサイトの変更を削除」ボタン スタイルチューナーを使用する すべてのサイトのすべての設定を削除します。



設定ボタン スタイルチューナーを使用する 拡張機能自体の色テーマをカスタマイズし、ページ上のブロックを強調表示する境界線の色を選択できます。また、別の非常に重要なオプションである「保存時間の変更」もあります。 もちろん、ブラウザのメモリを詰まらせないために、不要な設定を削除する必要があります。 手動で行うのは不便なだけで、誰がどのサイトに変更を加えたか覚えているわけではありません。



そのため、ユーザーが変更を行ったサイトに最後にアクセスした後の日数を設定する機会をユーザーに与えることが決定され、その後、これらの変更は自動的に削除されます。 たとえば、Googleへのアクセスを停止し、10日後にそのインターフェイスへのすべての変更が消去されました。



最後に、「編集モードを終了」ボタン スタイルチューナーを使用する サイドバーから要素のリストを削除し、サイトの開いているページをリロードしますが、サイドバーは開いたままにします。



最後に、拡張機能を別の方法で使用できることを追加できます。 たとえば、あなたやあなたの顧客は、サイトの色やフォントを緊急に変更する必要がありました。 この要素またはその要素に対していくつかの異なるオプションを試してから、CSSボタンをクリックして新しいスタイルを取得し、プロジェクトのソースコードで使用できます。



スタイルチューナーを使用する



近い将来:背景画像を有効または無効にする機能を追加するとともに、線の高さやフォントスタイルなどのプロパティを制御する機能を追加します。



All Articles