猫にも出来るリニューアル・リペア

2008年２月末のリニューアル明けにメイン記事＋サイド欄が表示されなくなっちゃった時は焦りました。原因はオリジナル・スキンの画像（banner）を#containerに入れていた時の設定 {height:175px} が、そのまま残っていたから。慌ててカスタム・スキンのCSSを修正したものの、「SKIN SWITCHER」で切り替えた代替えスキン（alternate）が直っていない！‥‥カスタム・スキンのURLが変更されされてしまったのだ（旧CSSのリンクは生きているけれど編集出来ない）。それならば新しいURLを読み込むように設定を変えれば良いだけのこと。しかし新CSSのURL（http://〜.blog.so-net.ne.jp/styles-index.css?）が曲者で、常にデフォルト（default）のCSSが読み込まれてしまう。一体どのような仕組みでカスタム・スキンのCSSを切り替えているのでしょうか。その仕組みが分かれば対応策も自ずから見えて来るのですが。

「s k i n　s w i t c h e r　i s　n o t　a v a i l a b l e !」──このままでは、折角苦労して作ったiPod shuffle風のスウィッチ・ボタンが鶏肋と化す‥‥というわけで、CSSを外部ファイル化することにした。「U-Page+」の登録まではスムーズに行ったのですが、FTPのインストール、Fetch 4.0.3J1（MacOS X）で躓く（有料なのかよ！‥‥こういうことは一番最初に書いておいて欲しいよね）。定番のCyberduck（無料）はOS Xが古くて非対応らしい。外部ファイル化は敷居が高いなぁ‥‥と凹んでいたら、お助けkovaioさんが「裏技」を発見してくれた。リニューアル後の新機能の１つに「複数のブログ」という項目がある。新しいブログに記事を書かずにCSSだけを入れておき、そのURLを代替えCSSに指定するだけ（もちろん公式スキンでもOK！）。ソネ風呂は４つのブログを新設出来るので合計５つのスキンを着替えられます。

choose a color: 　 　 　 　 　

SKIN SWITCHER（TAG）
<div class="color"><a href="#" onclick="setActiveStyleSheet(''); return false;" onkeypress="">Choose a color:</a>
<span class="reds"><a href="#" onclick="setActiveStyleSheet('skin1'); return false;" onkeypress="">　</a></span>
<span class="grays"><a href="#" onclick="setActiveStyleSheet('skin2'); return false;" onkeypress="">　</a></span>
<span class="greens"><a href="#" onclick="setActiveStyleSheet('skin3'); return false;" onkeypress="">　</a></span>
<span class="blues"><a href="#" onclick="setActiveStyleSheet('skin4'); return false;" onkeypress="">　</a></span>
<span class="violets"><a href="#" onclick="setActiveStyleSheet('skin5'); return false;" onkeypress="">　</a></span></div>

.color{border:solid 1px #; background:#ffffff; width:173px; height:17px; padding:2px 0px 2px 2px}
.color a{float:left; margin-right:1px}
.reds a, .grays a, .violets a{width:17px; height:17px; display:block; float:left}
.greens a, .blues a{width:18px; height:17px; display:block; float:left}

GRAY SKIN（Default）
<link rel="alternate stylesheet" type="text/css" href="http://sknyslab2.blog.so-net.ne.jp/styles-index.css?" title="skin1">
<link rel="alternate stylesheet" type="text/css" href="https://sknys.blog.so-net.ne.jp/styles-index.css?" title="skin2">
<link rel="alternate stylesheet" type="text/css" href="http://sknyslab3.blog.so-net.ne.jp/styles-index.css?" title="skin3">
<link rel="alternate stylesheet" type="text/css" href="http://sknyslab4.blog.so-net.ne.jp/styles-index.css?" title="skin4">
<link rel="alternate stylesheet" type="text/css" href="http://sknyslab1.blog.so-net.ne.jp/styles-index.css?" title="skin5">

GRAY SKIN（CSS）
.reds a{background:url("/_images/blog/_fc3/sknys/11154837.gif"); background-position:0px 0px}
.grays a{background:url("/_images/blog/_fc3/sknys/11154838.gif"); background-position:0px 17px}
.greens a{background:url("/_images/blog/_fc3/sknys/11154839.gif"); background-position:0px 0px}
.blues a{background:url("/_images/blog/_fc3/sknys/11154840.gif"); background-position:0px 0px}
.violets a{background:url("/_images/blog/_fc3/sknys/11154841.gif"); background-position:0px 0px}
.blacks a{background:url("/_images/blog/_fc3/sknys/11538153.gif"); background-position:0px 0px}

「s k i n　s w i t c h e r　i s　a v a i l a b l e　n o w !」──外部ファイル化計画は頓挫しちゃったけれど、kovaioさんの「skin switcher改」で復旧しました。一足早くリニューアルされた「ヘッダ」部分は変更されていないようで、〈猫にも出来るワイド・ヘッダ攻略改〉が有効です。ヘッダ（header）のCSSはカスタム・スキン内ではなく、カスタマイズ公式サポート以前のようにカスタムペイン（サイド）に入れないと反映されませんが、代替えスキン（alternate）の中に入れたヘッダのCSSは反映されるんです。デフォルト（default）→ ヘッダ（header）→ 代替え（alternate）の順に読み込んでいるから。スニンクスではスキンを「代替え」に切り替えると、ヘッダの文字色も変わるように指定しています。外部ファイル化したら作ろうと思っていた６番目の「白抜きスキン」は〈月の時計のアリス〉（記事限定）で試してみました。

　　　　　　　　　　　　　　　　　　　　＊

リニューアル後の後遺症の１つに「改行問題」がある。本文記事が改行出来ないという不具合・障害は一見解消されたように思われるけれど、「改行は<br/>タグに変換する」に設定していると、HTMLタグやCSSを入れた際に不用意に改行するとレイアウトが崩れてしまう（<p>や<div>など自動改行して１行分の空白が空くタグの場合も同じ）。だからといって「改行を<br/>タグに変換しない」設定では、いちいち改行タグを挿入しなければならないので面倒臭い。サイド欄の「改行問題」は更に深刻で、HTMLタグやCSS、JavaScript内に改行タグ<br/>が入っていると正常に動作しなくなっちゃうこともある。しかも改行タグは不可視！‥‥ソースを表示させて不必要な改行タグを消しましょう。もしサイド欄に不自然な空白が空いたり間延びしている場合は、この改行タグの乱入が原因と考えて間違いない。

カスタムペインのタイトル欄にリンクが埋め込められなくなったのも痛かった。スニンクスはサイドバーのタイトルが、その項目の一覧記事へのリンクになっているので、リンク機能が使えないのは実に不便。かと言ってHTMLを弄る（HTML編集）のも嫌なので、タイトルのCSSを{display:none}で消して、カスタムペインの自由入力欄に「タイトル 2」を入れました。これで旧タイトル欄のような字数制限もなく、どんなに長いURLでも埋め込められます。下記は「TAG CLOUD」の挿入テキスト（上部）に入れた例。カスタムペイン内にCSSを入れる場合は、<style> 〜 </style>で囲ってね。

<h3 class="sidebar-title2"><a href="https://sknys.blog.so-net.ne.jp/tag/articles/" style="text-transform:none">TAG CLOUD</a>（43 / 133）</h3>

.sidebar-title{display:none}
.sidebar-title2{margin:-2px 0px 10px 0px; padding-left:5px; border-left:4px solid #; font-size:x-small; line-height:110%; color:#}

　　　　　　　　　　　　　　　　　　　　＊

リニューアル後のレイアウト変更で気になった箇所を、旧レイアウトの修正も含めて幾つか微調整しました。

♪コメント欄 ── ログイン状態で表示される「チェックしたコメントを消去」の位置修正

.link-del{border-style:outset; border-width:1px; margin-top:15px; color:#; background:#}

　ログアウト状態で表示される「画像認証」に外枠を付ける

#myblog-comment-captcha-area img{border-style:solid; border-width:1px}

♪トラックバック欄 ──「この記事について書く（簡単トラックバック）」の位置調整

#myblog-tb-regist-area{margin-top:10px}

　URLボックスの横幅調節（HNの長さに合わせて調整してね）

.trackback-url input{border:inset 1px #ff6600; color:#ff6600; background:#ffffff; width:360px; padding-left:6px}

♪サイド欄 ── RSSアイコン の位置調整（リニューアル前から気になっていました）

#rssfeed img{padding-bottom:3px}

　　　　　　　　　　　　　　　　　　　　＊

ソネ風呂のリニューアルで唯一使える機能は「TAG CLOUD」じゃないかな。逆に「アクセス解析」は無くても良い、余計な機能でしょう。つい誘惑に負けて、最初の頁だけ見ちゃいますが、殆ど役に立たないなぁ。「記事別」のアクセス数は「記事一覧」ページをチェックしていれば分かることだし、読者が閲覧している「ブラウザ」や「OS」を知っても意味がない‥‥。読者のプライヴァシーを画質の悪い監視カメラで覗いているようで後味が悪いしね（エロ男爵がソネ風呂を辞めた理由の１つは、この「アク解」機能にあるのではないでしょうか）。今後も窃視を頻繁に繰り返しているようでは「NO AFFILIATE, NO ANALYZE!」の看板を下ろさなければなりません。

　　　　　　　　　　　　　　　　　　　　＊

• 記事編集＆レイアウト・ページの挙動が隔靴掻痒！‥‥JavaScriptの読み込み過ぎ？


• 「SKIN SWITCHER」のボタン（画像）は iPod shuffleから借用しました＾＾;

　　　　　　　　　　　　　　　　　　　　＊

　 skin switcher 1.2 / renewal repair / sknynx / 151

タグ：original skin cats skin switcher

コメント 2

sknysさん　こんばんはっ。＾＾
TBさせていただきました～

skin switcherも復活したことですし、
そろそろ「s k n y s - s y n k s」のワイド化はいかがっすか～＾＾

デジモノ大好きにもFlashを導入しようと画策しているkovaioより。（笑）
by kovaio (2008-06-19 03:11) 

kovaioさん、コメントありがとう。
〈猫にも出来るスキン・スウィッチ 2〉というタイトルにしようかとも
思ったのですが、基本的にリンク先を変更しただけなので、
リニューアル後の「小技」と併せて１本の記事にしました＾＾;

メインの横幅を変えずに（文字レイアウトは崩したくない！）、
サイドとの間を少し空けるプチ・ワイド化計画を考慮中。
Flashを導入するとバナー（画像）に飛行機を飛ばしたり、
サイドの黒猫ちゃんにデジタル時計を埋め込んだり出来るのかな？
by sknys (2008-06-19 22:23)