アップデート可能な状態でカスタマイズする
カスタマイズが必要なスタイル
「Ameblo Rankings Viewer Ⅱ」には、ユーザー自身の「アメーバID」を登録するオプションがあります。 登録は、下図の4ヵ所にIDを記入して、スタイルを保存する形です。
これはインストールしたスタイルに手を加える操作ですから、このスタイルはカスタマイズを前提にしていると言えます。
この記入によって、アメーバの各ランキングページで、そのユーザーの記事が下の様にハイライトされます。
このオプションは重要で、50ページの中から自分の記事を探す時に、大変に役にたちます。
カスタマイズがアップデートの度に必要になるのは不便
オプション設定が「無効/有効」の切替えでも、アップデートの度に自分の設定をやりなおすのは手間です。 私の作るスタイルでは、殆どのオプションはデフォルト設定の使用が前提で、アップデートでユーザーが再設定する必要を極力減らしています。（もっとも、オプションのあるスタイルを公開している人は、そんなに居ない様ですが） 私の場合は、オプションはカスタマイズを求めるユーザーに対する参考コード提示の意味が強いのです。
しかし、上の例の様に書き込みが必要なスタイルや、何ヵ所かオプション選択をしたい場合は、アップデートの手間が問題になります。 また、インストールしたスタイルをカスタマイズして利用している場合は、アップデートが出来ません。
そんな場合は、「ローカルスタイル化 」が一番確実な対処法です。 しかし、基本のスタイル部分に関してはアップデートを期待し、しかもカスタマイズもしたい場合は、別の対処法があります。
カスタマイズの内容だけをローカルスタイルにする
上の「Ameblo Rankings Viewer Ⅱ」の例では、カスタマイズが必要な「Code 9」だけをコピーして、ローカルスタイルを作り、それにカスタマイズを施します。
先ず、管理画面の「スタイルを作成」を右クリックして「新しいウインドウで開く」を押し、新規の「スタイル作成」の編集画面を開きます。
次に、スタイルリストの「Ameblo Rankings Viewer Ⅱ」をクリックして、このスタイルの編集画面を開きます。 これは「コピー元」になります。
作業は、下図の様に「コピー元」と「スタイル作成」の2つの編集画面で行います。
「Code 9」のコードのコピー
「コピー元」の編集画面で「Code 9」に移動します。
編集枠内を右クリックして「すべて選択」❶ を押します。
編集枠内のコード行が全て青反転するので、再度それを右クリックし「コピー」❷ を押します。
コードの貼り付け
「スタイル作成」の編集画面に移動します。
「Code 1」の編集枠内を右クリックして、「貼り付け」❸ を押します。
編集枠に貼り付けられたコードを確認します。
「Code 9」の適用先のコピー
「コピー元」の編集画面に移動します。
適用先の1個目のアドレスの内容をコピーします。
アドレス枠を右クリックし「すべて選択」→ 再度 右クリックし「コピー」❹
適用先の貼り付け
「スタイル作成」の編集画面に移動します。
「Code 1」の適用先の「+」を押して、アドレス枠を表示させます。
アドレス枠を右クリックし「貼り付け」❺ を押します。
アドレスの内容を確認したら、適用先の「指定形式」❻ を「コピー元」と同じに設定します。
適用先が複数ある場合は、以上の「適用先のコピー」「適用先の貼り付け」をくりかえします。
カスタマイズを実行する
「スタイル作成」画面にコピーしたコードは、自由にカスタマイズ出来ます。 この例では、元のコードに「アメーバID」を入力しました。 また、アレンジは後の段階で繰り返し修正すれば良いので、この段階で完成させる必要はありません。
コピー・カスタマイズした内容を保存
カスタマイズした内容を保存する際、スタイルに名前を付けます。 この際、カスタマイズしたコードが、スタイルリスト上で「Ameblo Rankings Viewer Ⅱ」の後方に並ぶ名前にします。 ここでは、「Ameblo Rankings Viewer Ⅱ ■ My Option」というスタイル名にしました。
「スタイル名」❼ の枠にスタイル名を記入し、その下の「保存」を押してスタイルを保存します。
管理画面を開くと、「Ameblo Rankings Viewer Ⅱ」と「Ameblo Rankings Viewer Ⅱ ■ My Option」が首尾よく上下に並びました。 この順序にならない場合は、カスタマイズした方のスタイル名を改めます。
この構成なら、「コピー元」のスタイルのアップデートがあっても、それにカスタマイズした部分の変更が含まれていなければ、カスタマイズ結果に影響しません。 カスタマイズ内容をローカルスタイル化すれば、その後の運用がとても楽になります。
CSSコードの後方優先について
このページの説明は、オプション部のローカル化を例にしたので、セクションをまるごとコピーをしてカスタマイズする説明になりました。
しかし、コードのコピー操作は本来は必要ではありません。（適用先のコピーは必要かも知れませんが） このページの方法の本質は、「インストールスタイル」によるアレンジを「ローカルスタイル」で更にカスタマイズするという所にあります。
下図は、Stylusの管理画面のスタイルリストの模式図です。 但し、これはインストール日（古い順）に設定して、下方が新しいインストール順に並んでいる場合です。
ここで、あるページに対して下の様に3つのスタイルが有効になっているとします。
▪ Code A , Code B の組は「userstyles.org」からインストールしたスタイル
▪ Code C , Code D はユーザーが作ったローカルスタイル
この状態では、Code D > Code C > Code B > Code A の順に修飾内容が優先されます。 CSSの機能は柔軟で、あれこれとデザインの注文を受け入れますが、原則として「後から読み込まれたCSSが優先」します。 そして「Stylus」は、スタイル内なら後方のCode、複数のスタイル間ではインストール日付が新しいスタイルのCodeを、後から読み込んで適用します。
この優先順位のルールにより、カスタマイズのためのローカルスタイルは、インストールスタイルの後に作ったものでないと、（修飾が競合する部分で）修飾内容が反映しないという事が生じます。
一般に、ローカルスタイルは後から作るので問題は生じませんが、何かの理由でインストールスタイルを一度削除してインストールしなおした場合は、優先順位が逆転してローカルスタイルが無効になる事があり得ます。 この場合は、ローカルスタイルをコピーして新たに作り直すと改善します。