JavaScriptツール「Skin Coordinate」は、公式スキンのデザインアレンジをCSS・Htmlの知識がなくても可能にします。 アメーバの公式スキンで「カスタマイズ可能」のタイプは同類のアレンジが可能ですが、このツールは以下の点でより柔軟なアレンジが可能です。
◎ 全ての公式スキンでアレンジが可能です。
ただし、これを可能にするために、目的の公式スキンを「Skin Coordinate 移植ツール」を使って「CSS編集用デザイン」のタイプに置き換える必要があります。
◎ ページ上の表示パーツの多くをアレンジできます。
◎ ユーザーが用意した画像を、ページ全体やページヘッダー部の背景だけでなく、色々なパーツの背景にも設定できます。
◎ CSSの知識があれば、公式スキンを更に高度にアレンジしたデザインに変えて、ブログに適用出来ます。
ただし、このスキンは PCからの閲覧時のみ有効で、スマホアプリでの閲覧時には反映されません。
ver. 3.2以降に対応 2023.08.24 更新
Round Selector で対象要素にアクセスする
ブログページの「背景画像」や「背景色」をアレンジするには、ページ上の多数の要素の中で目的の「背景画像」「背景色」の指定のある要素（対象要素と呼びます）をピンポイントで特定し、その対象要素にアレンジを仕掛ける必要があります。
背景を設定されている要素は、簡単に見つかる場合や、時にはなかなか見つからない事もあります。 この探索は「Round Selector」で行います。 その扱いは少しだけ慣れる必要がありますが、ゲーム感覚ですぐ習得できるので、ぜひ試してください。
❶ どんな対象要素があるのか、ざっと確かめる
「Alt + F7」を押すと「Skin Coordinate」のコントロールパネルが表示されます。
「Round Selector」ボタン上に「対象要素の総数」「選択した対象要素」の2つの数が表示され、右側は対象要素のインデックスです。
◎ 対象要素は「⇧・⇩」のキーで選択を変更しますが、実際のページ上では選択された対象要素の範囲を示す「淡いブルーの矩形」が示されます。
◎「Html：1」「Body：2」のインデックス固定で、「Round Selector」で選択した対象要素は「3」以降のインデックスになります。
上の状態は「Round Selector」はOFFの状態です。このボタンを左クリックすると、下の様にボタンに白枠線が付いてONになります。 同時に、インデックスに相当する対象要素にブルーのフィルター枠が表示されます。
◎「⇧・⇩」のキーを何度も押すと、インデックスが順に増減し、インデックスに相当する対象要素にフィルター枠が移動しながら表示されます。
下は実際に表示されるフィルター枠の様子です。
◎ 対象要素が「div要素」などの場合は、濃い青の枠線が表示されます。 対象要素が「擬似要素」の場合は、オレンジの枠線が表示されます。
◎ 同じ位置と範囲で続けてフィルター枠が表示され、キー操作が無効に感じる場合があります。 また、対象要素によってはフィルター枠が表示されない事があります。
◎ インデックは、最初に「プリセット」の対象要素群、その後に「自動取得」された対象要素群となるので、フィルター枠が何度かページ内を回遊する様に見えます。
❷ 対象要素の背景設定を ことごとく非表示にしてみる
「Skin Coordinate」はブログページの「仮アレンジ」の環境です。 どの様な事をしても、変更はユーザーの画面上だけで、実際のページデザインは変更されません。 安全に様々なデザインのテストが可能で、その試行で実際のアレンジ方針を決めます。 そして最後に、そのアレンジを実現するCSSコードを得ます。
「プリセット」の対象要素は、実際にアレンジが反映するものと、全く反映しないものがあります。 プリセットの「擬似要素」は、ページ上に無い（アレンジができない）場合が多くあります。 一方「自動取得」の対象要素は全てアレンジ可能です。
「Skin Coordinate」は、殆ど全てのページ上の背景設定をアレンジ出来ます。 これは、ページ上のアレンジ可能な対象要素を調べ、背景指定を順に「非表示」にする事で理解できます。 これを試すと、対象要素が重なった場合や、セレクタエンハンスが必要な場合など、少しコツが要る局面について慣れる事が出来ます。
◎ この「全背景の非表示」を行う前に、「Html」ボタンを選択してボタンに枠線を付けた上で「Ctrl + Space」を押し、下の様に「編集マーク」を表示させます。
この操作は「html要素」に網目の背景を設定します。「html要素」は全要素の「底」にあるので、非表示化が進むにつれて「網目の底」が見えて来ます。
◎「Round Selector」をクリックして、セレクターをONにします。
◎ 対象要素のインデックス順に「Ctrl + Space」を押します。 それで背景が非表示にならない場合は、「Ctrl + Alt」（セレクタエンハンス）を押します。 それで変化が無い時は、その対象要素に背景設定が無い場合です。
◎ 次に「⇩」を1回押して、次のインデックスの対象要素に移動します。 再び、この要素で「Ctrl + Space」を押します。 変化がなければ「Ctrl + Alt」を試します。
◎ 背景設定がある場合、「Ctrl +Space」で背景非表示、更に「Ctrl + Space」を押すと元の背景表示に戻ります。
◎ 背景設定のアレンジ対象外は、アメブロヘッダーのユーザー表示、ブログ内検索窓、コメント・いいね・リブログのボタン、プロフィールアイコン、アメーバAD類です。 他のパーツで背景設定を非表示に出来ない物は、できるまで試みます。
インデックスの最後までこれを繰り返して行くと、アレンジの対象とする対象要素を捉えるコツが判ってきます。 実際のアレンシでは、一足飛びに目的の対象要素を選択します。
下は、アレンジ可能な対象要素の背景設定を、順に非表示化して行く様子です。
◎「Html」「Body」のボタンは「プリセット」の一種ですが、これはページの最下層にあり、特別な扱いをしています。 まれに、この2種の対象要素に背景色を設定したスキンがあります。 それをアレンジする時は、これらのボタンを押して編集しますが、操作は「Round Selector」で選択した対象要素と同じです。
◎「Html」ボタンで「html要素」の背景を非表示指定すると、網目が表示されますが、そのアレンジ結果は html要素が「白色」で表示されます。
対象要素の背景設定をアレンジする
以下はヘッダー部の背景画像を変更する例です。 先の非表示化のテストで、インデックス「03」の対象要素にヘッダー部の背景画像が設定されている事が判っています。
背景画像の差替えは、この「03」の様に元々背景画像が設定されている対象要素で可能です。 青枠の対象要素（div要素など）は、元から設定が無くても新たに背景設定が可能です。 しかしオレンジ枠の「擬似要素」は、元の背景設定がない場合は、新たに背景設定をする事が出来ません。
◎「Round Selector」で「03」の対象要素を選択して、ブルーフィルターを被せた状態にします。
◎「Space」キーを押すと、「背景設定パネル」が表示されます。 ブログ画面上のフィルターと元の背景画像が消え、対象要素の範囲を示す青枠だけの状態になります。
これは対象要素の背景設定の編集状態で、対象要素は固定されて変更できません。
❶ 背景画像を設定する
◎「背景設定パネル」の左半分は「背景画像」の設定部です。
差替える背景画像を用意します。 その際「S」ボタンを押すと、対象要素のサイズが判ります。 但しサイズが一致する必要はなく、画面上で配置調整が可能です。
◎「Image Upload」のボタンを押します。 下の「画像フォルダ」の画面が表示されます。 これはデザインが違いますが、ブログ編集画面の画像パネルと同じものです。
ここで、用意した画像をアップロードします。 アップロードが完了すると、下のサムネイルリストに画像が追加されるので、それをクリックします。
サムネイルに赤枠が表示されて、この操作で背景用画像のURLがコビーされます。
◎「背景設定パネル」の「URL入力枠」にペーストし、「Set URL」を押します。
これでアップロードした画像が対象要素の背景画像として設定されます。 背景画像を別のものに変更するには「Reset」を押して最初からやりなおします。
◎ 背景画像が決まると「背景設定パネル」の左側に、下の様な「画像の配置コントロール」のボタン類が表示されます。
この操作で、ページ上の画像の配置を様々に変更できます。 画像の配置設定の詳細については、以下のページを参照ください。
編集を終了して「背景設定パネル」を閉じるには、「Space」キーを押します。 あるいは、緑色の「Round Selector」を左クリックする事で、編集を終了出来ます。
上図では編集マーク「🔵」が表示されていますが、これは「背景設定パネル」を閉じた時にユーザーの編集があれば自動的に表示され、全てのアレンジを「Reset」すれば消えます。
❷ 背景色を設定する
「背景設定パネル」の右半分は「背景色」の設定部です。
◎ 同じ対象要素に「背景画像」のユーザー設定がある場合は、画像が優先されます。 その場合は、「背景色」の設定は画面に反映されません。 ただし「背景画像」が透過型の画像の場合は、画像の透過部だけで「背景色」が背景色として表示されます。
◎「色コード入力枠」か「Set Color」をクリックすると、「カラー設定ダイアログ」が表示されます。
◎「カラー設定ダイアログ」を操作すると、その設定が自動的に「背景色」の設定に取り込まれます。「色コード入力枠」にコードが入力され、同時にブログ画面の対象要素に「背景色」が反映します。
◎「背景色」の設定部には、「透過度」のコントロールと優先設定の「▼」ボタンがあります。 これらの操作の詳細は、以下のページを参照ください。
◎「Reset」ボタンを押すと「背景色」の設定が削除されます。
❸「背景画像」と「背景色」の関係
「Skin Coordinate」の「背景画像」と「背景色」の設定は互いに独立しています。
◎ どちらかの設定が不要な場合は、不要な設定の「Reset」ボタンを押します。 それぞれの「Reset」ボタンは他方に影響しません。
◎ 両方の設定を削除するには「Ctrl + Space」を押すと簡単です。
◎ 対象要素の完全な初期化は、「Ctrl + Space」を複数回押して「編集マーク」が表示されない状態にします。 元の背景画像があれば、それが元通りに表示されます。
◎ 初期化された対象要素に対して「Ctrl + Space」を1回だけ押して「編集マーク」を付けると、対象要素の「背景設定の非表示」を指定した事になります。 これは、アレンジコードに「背景削除」として反映します。
◎ 背景設定には設定の「優先順位」があります。 ひとつの要素に複数の設定が有る場合、優先順位が上位のものが表示されます。「Skin Coordinate」では、以下の順位がデフォルトにしています。
(a)ユーザーの「背景画像」> (b)ユーザーの「背景色」> (c)元の「背景画像」
通常は (b)>(c) で、全ての背景色は (c)を非表示にします。 しかし、背景色設定の「▼」ボタンを押すと、順位を (c)>(b) に変更できます。 これは、(c)が透過型の画像の場合に、それを生かして「背景色」だけ変更するアレンジを可能にします。
最後に「Get CSS」と「CSS Editor」へ進む
「Skin Coordinate」上でのアレンジは、あくまでシミュレーションです。 ページをリロードすればアレンジは霧散します。 アレンジを実際のブログページに固定するには、「CSS編集用デザイン」の環境で「ユーザーCSS」にアレンジコードを書き込む必要があります。
もし、現在のブログが「CSS編集用デザイン」の環境ではない場合は、以下のページの説明に従って環境の移行を行います。（注意書きは必ず読んでください）
「公式スキン」を「CSS編集用デザイン」に移植するツール（7）
❶ アレンジのチェック
◎ アレンジ用のCSSコードを出力する前に、以下のチェック作業をお勧めします。 アレンジをやり直す事は、時間の無駄とは限りません。 同じアレンジと思っても、2度目は最初のアレンジより良い方法に気付く事があります。
---「無駄コード」をチェックする ---
「編集マーク」の着いた対象要素を順に調べて、明らかに必要な指定のものはそのままにします。 これはアレンジした本人にはすぐ判ります。
問題は意味が不明なアレンジで、その様な対象要素があれば「Ctrl + Space」で指定を一旦解除します。 不要なアレンジはデザインに変化が無く、必要なアレンジなら不本意な変化を生じるので、再度アレンジを指定します。
❷ アレンジコードを取得 する
◎ ページのアレンジ状態を確認して「Get CSS」ボタンを押します。
現在のアレンジ状態にするためのCSSコードが編集され、クリップボードにコピーされます。
❸「ユーザCSS」にペーストする
◎「CSS Editor」を押すと「CSS編集画面」が開きます。 編集枠内に表示されているのは「ユーザーCSS」です。 必ずその末尾にカーソルを置いて「Ctrl + V」でペーストします。
◎ アレンジ用のCSSコードがペーストされたら、「保存」ボタンを押します。
以上で、アレンジがブログページに反映します。 実際にブログ画面を表示して、アレンジ結果を確認してください。
備考
◎「Skin Coordinate」は、「Alt + F7」で起動した時の最初の1回目の起動時に、ページ上の対象要素をスキャンします。 ブログページの読み込みが遅い通信環境は、ページ読込みが完了するまで（長い場合は10sec程度）待ってから、起動します。
ページデザインに対するアレンジ処理とその処理データは、途中で「Alt + F7」でパネルを非表示としても維持され、「Alt + F7」で再びパネルを表示した時にも引き継がれます。 アレンジ処理・処理データは、ページのリロード時にリセットされます。
◎ ページデザインのアレンジは、一度に纏めて複数箇所のアレンジを行う事も、別々に少しずつアレンジを積み重ねる事も可能で、その結果は同じです。 ツールの出力するCSSコードは、必ずユーザーCSSの末尾に追加する様にします。
◎ 背景に設定するユーザー画像は、一般のブログに添付する画像と同じ場所にアップロードします。 アップロードした画像を削除すると、ブログページのデザインに欠損が出来るので、間違って削除しない様に扱う必要があります。
背景画像のサイズは、使われる対象要素のサイズに対して適当な大きさのものを用意します。 実際の表示範囲に対して、不必要に大きなサイズの画像を縮小表示させる様な設定は、通信の負担となりページ表示までの時間を増やします。 背景画像は、サイズ、圧縮度、ファイル形式など、対象要素に合わせた適当なものを使用します。
◎ 各種ボタン類やサイドメニューのパーツ類は、ひとつの共通のCSSコードでデザインが指定されている事が多くあります。 この様な対象要素は「Round Selector」が同時に複数の対象要素にフィルター枠を表示します。
この種の対象要素は特に、「セレクタエンハンス」を使ってアクセスを有効にしないと、思い通りにアレンジできない事がよくあります。
このツールの最新バージョンは、以下のリンクリストから探せます。
