PR無しのスキン「スイート」のカスタマイズ方法を纏めてみました

photo by poolie

前回の記事で紹介させていただいた「PR無しスキン"スイート"のカスタマイズ法」ですが、内容的に初心者には厳しいということで、できるだけわかりやすく纏めてみました。
前回の記事に引き続き、Web 空間づくり～アメブロを自分好みのstyleにさまのブログを参考にさせていただいてます・・・というか、まんま転載のパクリ記事です・・・。
soleil666さま、感謝です。ありがとうございます！

かなり有効な方法ではありますが、アメーバID(ブログ)が2つ必要な場合がありますので、それに関しては自己責任でお願いします。

現在のデザインに少し手を加える場合

「今までスイートを利用してカスタマイズをしてきたけど、手直ししたい部分があるのに編集できなくなった」という人が対象になります。
まず、「サイドバーの配置」から「フリースペース」を、Aカラム(3カラムなら左サイドバー)の一番上に配置します。


次に、フリースペースの一番上にstyleタグを書きます。

<style>ここに改行無しでCSSを書く</style>
例)
<style>#header h1{display:none;}a{color:#0000ff;}</style>

これだけで追加のCSSが反映されます。
大幅なリモデルでなければこれで問題ありません。

ガラっとデザインを変えちゃいたい人

これには2通りあります。
javascriptを使う方法と、CSSを使う方法です。
javascriptを切っている人はかなり稀なので、個人的にはjavascriptをオススメします。
が、CSSの方が汎用性が高く書き方も簡単なので、そのあたりは好みで選んでください。
どちらの方法も、メインのブログのほかに、サブのブログが必要です。

まず、サブのブログにログインし、カスタム可能なスキンを選びます。
次にCSSの編集で、スイートスキンを使用しているメインのブログに適用させたいCSSをサブブログのCSSに書いて保存します。
ここで書いたCSSを、最終的にはスイートを使用するメインのブログのCSSとして使うことが出来ます。
それを保存したら、サブブログを開き右クリック。「ソースを表示」を選びます。


ソースを開いたら、「usrcss」という文字列が含まれるURLを探します。


このURLをメモし、サブブログからログアウトしたら、スイートを使用しているメインのブログにログインします。
ここから2通りに分かれます。

javascriptで行う場合

まず、サイドバーの配置から、フリープラグインをAカラムの一番上に配置します。


次に、フリープラグインのトップに以下のように書きます。

<script type="text/javascript">
jQuery("head > link").eq(5).attr("href","さきほどメモしたURL");
</script>

これでCSSをサブブログで編集したものに差し替えることが可能です！
では次に、CSSで行う場合です。

cssで行う場合

まず、「サイドバーの配置」から「フリースペース」を、Aカラムの一番上に配置します。


フリースペースの一番上に、以下のように記述します。

<style type="text/css">@import url("先ほどメモしたURL");</style>

これで、サブブログのCSSがそのまま反映されます！

javascriptで行う場合とcssで行う場合の違い

javascript版の場合、スイートのCSSは無かったことになり、サブブログのCSSにまるまる差し替えられるような形になります。
CSS版の場合、スイートのCSSに追加する形でサブブログのCSSが適用されます。
ですので、どちらの方法を取るか、によって書くべきCSSが変わってくるというわけです。
もう一つ、javascript版の方が、CSSが適用されるスピードが速いらしいです。
このあたりはお好みでどうぞ～。

せっかく途中まで育てたブログを消したくない！という方は、早速今のうちに完成させちゃいましょう！