「Skin Coordinate 移植ツール」は「公式スキン」を設定したブログを「CSS編集用デザイン」の環境に変更するツールです。
◎ 運用していたスキンデザインを引き継ぐことが出来ます。
◎ 環境の移行時に、サイドバーのカラムの設定を変更出来ます。
◎「新タイプの公式スキン」から移行する場合は、「標準型・タイル型・リスト型」の好みのトップページ型式に変更できます。
「CSS編集用デザイン」の環境は、ブログページの実用的なアレンジを可能にします。 公式スキンのデザインをベースに、それを自由にアレンジできるという事です。
「移植ツール」の使用上の注意
「移植ツール」を利用される場合は、事前に「CSS編集画面」を開き、編集枠内の「ユーザーCSS」のコードをメモ帳等にコピーして保存をしてください。
また「簡単カスタマイズ 」によるカスタマイズ内容も同様に失われます。「カスタム可能」スキンの「カスタマイズ内容」はバックアップが出来ないので、「移植ツール」を使うとデザインを元に戻せない事に注意してください。
◎ このツールが対応できるのは、「CSS編集用デサイン」ではない、現在提供されている「公式スキン」を使用している場合です。
◎ 現在提供されている「公式スキン」を再設定する事で、このツールで移植した「CSS編集用デザイン」の環境から、元の状態に戻すことが出来ます。
◎ スキン変更をすると、サイドバーの配置設定が変わる場合があります。 サイドバーに表示するパネルの設定を元に戻すには、以下のページでスクリーンショットを撮っておくと楽です。
これは、この移植ツールの「メニュー配置」のボタンからも開く事ができます。
ver. 0.7以降に対応 2023.08.24 更新
「Skin Coordinate 移植ツール」の操作方法
「Tampermonkey」にインストールした「Skin Coordinate 移植ツール」をONにしてブログページを表示します。
ショートカットの「Alt+F6」を押すと、下の「コントロールパネル」が表示されます。 ツールを終了するには再び「Alt+F6」を押します。
左側の3個が主要な操作ボタンで、ボタンを押すと操作が右へ移ります。
❶は「コード参照枠」 ❷は「設定パネル」を開閉し、両方が揃うと ❸が押せます。
❶「スキン情報」を押すと、画面右上に「コード参照枠」が表示されます。
枠上部に現在適用している公式スキンの「コードネーム」、枠内に「CSSコード」が表示されます。 この内容はユーザーにとっては参考データです。
❷「トップページ型式・カラムの設定」を押すと、「コントロールパネル」の上側に「設定パネル」が表示されます。
「設定パネル」の「トップページ型式」は、これまでのブログ型式の通りが選択されますが、「新タイプスキン」はこの移植時に自由に型式を変更できます。
ただし「旧タイプスキン」の場合は、「リスト型」「タイル型」が選択できないので、下の様な表示になります。
「カラム設定」は、ユーザーがこれまで選択していた状態が表示されます。「カラム設定」はこの段階で変更できます。
▪「設定パネル」で設定した「トップページ型式」「カラム設定」の内容は、後から変更できません。 変更したい場合は、移植前の公式スキンに戻し、最初から移植操作をやりなおす必要があります。
❸「移植の実行」は、最後の決定ボタンです。
これを押すと、コード上の画像URLの修正、旧タイプの場合はリセットCSSが追加され、「コード枠」上に下の説明が出ます。 コード内容を詳しく調べないと変化が判りませんが、コード枠内は「移植用コード」に変わっています。
後は 数秒程度の間、自動的に移植操作が進行します。 モニター左隅に別ウインドウが表示され、最後に下の様な「CSS編集画面」が表示されます。
この反転表示の状態のまま「Ctrl + V」を押します。 既に「移植用コード」がクリップボードにコピーされているので、それがこの編集枠にペーストされます。 ブルー反転が消えたら「保存」のボタンを押します。
その右の「ブログ画面」のボタンを押すと、スキン移植をしたブログ画面が新しく表示されますから、デザイン上の問題が無いかを確認します。
移植の確認
移植が正常に完了した場合は、ブログ画面は元と同じ表示で違いは判りません。 新しいブログ画面で移植ツールを起動し ❶「スキン情報」を押すと、下の様に背景がグレーの説明が出ます。「CSS編集用デザイン」のスキンからは移植操作が出来ません。
また、パネル右側の「CSS編集画面」のボタンが有効に変化しています。
●「CSS編集画面」のボタンを押すと、移植時に開いたCSS編集画面に直行できます。 もし、今後にスキンのCSS編集を行うなら、このボタンを利用すると便利です。
●「デザインの変更」のボタンは、公式スキンの選択画面です。
移植操作で何かのトラブルがあった場合、この画面から元のスキンを指定しなおして移植前の状態に戻す事が出来ます。
通常の公式スキンは、スキン設定後に右上の「レイアウトの変更」から「カラム設定」の変更ができます。 しかし、移植後のスキンで「レイアウトの変更」を行うとス
キン無しの白背景になるので注意してください。
●「メニュー配置」は、サイドメニューの配置設定画面を開く便利スイッチです。
移植のやりなおし
「移植」の操作は、よく判らないまま失敗する事があるかも知れません。 失敗した場合は、ブログ画面を開くと真っ白な背景になりますが、慌てる必要はありません。
●「やりなおし」は、移植操作を開始した画面を閉じない事が条件です。
移植操作を開始したウインドウまたはタブ画面は、ユーザーが閉じたりリロードしない限りは、下の状態で残っています。
❸「移植の実行」のボタンは何度でも押す事が出来、移植操作を再トライ出来ます。
また、「型式」「カラム」を変更して「移植の実行」を押すと、変更が移植結果に反映します。 目的通りの移植が完了するまで、最初の画面は閉じない事がお勧めです。
（閉じた場合は、元のスキンの再設定からやりなおす必要があります）
「Skin Coordinate 移植ツール」ver. 0.6c
基本機能は変化がありませんが、ver. 0.6 で設定パネルの表示を更新しました。
以下のスクリプトコードは Chrome / 新Edge / Firefox の「Tampermonkey」で動作を確認しています。
◎ この移植ツールは「公式スキン」を「CSS編集用デザイン」のスキンに移植するツールです。
◎ 公式スキンの背景画像のアレンジを簡単にする「Skin Coordinate」のブログ環境を作るために開発した補助ツールです。
◎ これまで利用してきた公式スキンのデザインを受け継いだまま、CSS編集が自由に出来る様になります。 フォントの変更、背景画像の入替え、細部のアレンジなど、アレンジの手を加えて行くための、最初で最適な環境作りが出来ます。
◎ 新タイプの公式スキンでは、トップページの「リスト」「タイル」型式を変更・追加・削除する事に利用出来ます。
◎ このツールは非常駐型で、スキン移植等の作業時のみONとして使用します。 これは、各種の機能ページが専用の挙動をするため、通常の操作がし難くなるからです。
このツールの最新バージョンは、以下のリンクリストから探せます。
