Web制作ネタを中心に、ネット上の様々な情報をゆる~く発信する個人ブログです

KuzLog

2019/05/07 2019/05/07 ソフトウェア

Webページの表示を自由にカスタマイズできるChrome拡張機能『Amino: Live CSS Editor』が便利だった

Webサイトのレイアウトや配色は、そのWebサイトに用意されている「CSS(カスケーディング・スタイル・シート)」というファイルで管理されています。

今回の記事は、そのCSSを自分好みに編集してWebサイトにカスタマイズすることができる『Amino: Live CSS Editor』というChromeExtensionの紹介です。よく使うWebツールのコンテンツ幅が狭くて地味にストレスだったので、これはありがたい。

あ、CSSの知識が必須なので、CSSって何?って人は適当にググってね。

Amino: Live CSS Editor


上記リンク先からExtension(拡張機能)をインストールすれば準備OKです。設定などは特に変更しなくてもいいかと。

使い方

スタイルを編集したいWebページを開き、Chromeメニューのアイコンをクリックしてエディタを開きましょう。ここに書いたCSSが</head>の直前に挿入されるという仕組みです。

あとはCSSをガリガリ記述していくだけですが、適用範囲は「This Page(そのページのみ)」と「This Domain(そのドメイン全体)」のどちらかを上のタブで選べます。

最後に下の方にある「Save」を押せば、記述したCSSがWebサイトに適用されます。

↑例えばうちのブログでこういう記述をすると…

うわぁダサい。

要素の特定について

編集したいんだけど、どの要素をいじればいいのか分からない!という方は、編集したい要素を右クリックして「Amino: Copy This Selector」を押せばいい感じにセレクターがクリップボードにコピーされます。

それで上手くいかないなら、Chromeの検証ツールを使ってチマチマ調べるしかないですね…

以上。