iphone SafariのCSSカスタマイズ Makeover Custom CSSの使い方・初期設定方法

Makeover Custom CSS

Webブラウザでページを表示する際にはCSSという機能によりデザインの設定が行われています。通常Safariを使用する際はCSSの変更をすることはできないのですが、『Makeover Custom CSS』というアプリをインストールし拡張機能の設定を行う事でサイトごとにCSSを個別に設定できるようになります。

この記事ではMakeover Custom CSS の設定方法をまとめます。なお、Safari向けのものになっていますので、iPhone・iPad等を対象としています。

Makeover Custom CSS 設定方法

Makeover Custom CSSをインストール

まず、『Makeover CustomCSS』本体のインストールを行います。他のアプリをインストールする場合と同様に、AppStoreからインストールを行います。

以下のリンクからインストールが可能です。

Makeover – Custom CSS 

‎Makeover - Custom CSS

‎Makeover lets you change the appearance and behavior of web pages with CSS and JavaScript. To use it, you go to a web page you want to customize, tap the Makeover icon, and paste the code into the text field.Note: The "can read and alter webpages" text in the permission section is just unfortunate…

apps.apple.com

設定アプリからSafari拡張機能の設定

端末の設定アプリを起動します。

設定アプリ、画面左端にあるアプリのリストから『Safari』をタップ。その中の『拡張機能』をタップします。

これらの拡張機能を許可という項目の一覧に『Makeover』の項目がありますが、最初はオフになっています。

こちらをタップしてオンに切り替えることでSafariにてMakeoverを活用することができます。

CSS設定方法

設定アプリにて、拡張機能の設定を終えると、SafariのURL表示部分にパズルのピースのようなマークが出現します。

CSSを適用したいウェブページを開いたうえで、このボタンをタップすると拡張機能の一覧が表示されるため、今回使用したい『Makeover』をタップ。

すると以下のようにアクセスを求める表示が出るため、『常に許可』をタップ。

以下のようなCSSを入力する欄が表示されるため、必要としているCSSをこちらに入力することで、現在開いているページにCSSを適用することができます。