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>
例)
<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をサブブログで編集したものに差し替えることが可能です!jQuery("head > link").eq(5).attr("href","さきほどメモしたURL");
</script>
では次に、CSSで行う場合です。
cssで行う場合
まず、「サイドバーの配置」から「フリースペース」を、Aカラムの一番上に配置します。
フリースペースの一番上に、以下のように記述します。
<style type="text/css">@import url("先ほどメモしたURL");</style>
これで、サブブログのCSSがそのまま反映されます!javascriptで行う場合とcssで行う場合の違い
javascript版の場合、スイートのCSSは無かったことになり、サブブログのCSSにまるまる差し替えられるような形になります。
CSS版の場合、スイートのCSSに追加する形でサブブログのCSSが適用されます。
ですので、どちらの方法を取るか、によって書くべきCSSが変わってくるというわけです。
もう一つ、javascript版の方が、CSSが適用されるスピードが速いらしいです。
このあたりはお好みでどうぞ~。
せっかく途中まで育てたブログを消したくない!という方は、早速今のうちに完成させちゃいましょう!