こんにちわ。
今日はずっと記事にしたくて、時間がなくてなかなかできなかったことを、記事にさせて頂きます。
ご自身でアメブロカスタマイズに挑戦されている方や、CSSに興味がある方は、長いですが最後まで読んで頂けると嬉しいです（＾－＾）
**************************************************
アメブロのカスタマイズをされている方はご存じだと思うのですが、今年の７月にアメブロのスキンが変更になり、
今までカスタマイズ用に使用していた”【カスタム可能】ベーシックデザイン”が、使えなくなりました。
その変わりに、新しい”CSS編集用デザイン”が、アメブロから発表されました。
様々な方のブログで、”７月以前にカスタマイズで使っていたCSSは、８月以降は使えません！”という記事を
見かけられると思いますが、正確にはこの言い方が正しいです↓
”７月以前に”【カスタム可能】ベーシックデザイン”でカスタマイズに使っていたCSSは、
８月以降は”CSS編集用デザイン”では使えません！”
つまり、８月以降も引き続き”【カスタム可能】ベーシックデザイン”をお使いの方は、心配無用です！
ただし興味本位で”【カスタム可能】ベーシックデザイン”から”CSS編集用デザイン”に変更してはいけません！
そこは一度行っては二度と戻れない、恐怖の道なのです
一度でもデザインを変更してしまうと、昔の古き良き”【カスタム可能】ベーシックデザイン”には
二度と戻れません。そして今まで行ってきたカスタマイズも、全てパーとなります。
昔のデザインでカスタマイズをされている方は、絶対に恐怖の道には進まないでくださいね！！
************************************************:
さてそもそも、何故一度でも恐怖の道に入ってしまうと元の道に戻れないのか、
怖々ながら知っておきたい！という覚悟がある方は、ぜひこの先もお読みください。
CSSとは何か、という簡単な説明にもなっていますので、CSSに興味がある方もぜひどうぞ！
ここでは分かりやすく、新旧のデザインで作った私の二つのブログを例にとってご説明していきます。
私は両方のブログの”最近の記事一覧”の背景に、オリジナルの画像を入れるというカスタマイズをしています。
■このMyWayのブログ ： ”【カスタム可能】ベーシックデザイン”で作っています。
～グレーの貝殻のような変な画像をいれています。
このカスタマイズを実現するためのCSSはこうです。(なおこのCSSは必要な所だけを抜き出していますので、そのままご使用頂いても動きません)
では、新しいデザインの方はどうでしょうか？
■サンプルブログ ： ”CSS編集用デザイン” で作っています。
～黒色の星の画像をいれています。
このカスタマイズを実現するためのCSSはこうです。(なおこのCSSは必要な所だけを抜き出していますので、そのままご使用頂いても動きません)
同じことをやりたいカスタマイズなのに、CSSの内容が違いますね。
実はこの違いが、一度恐怖の道に入れば戻れない理由なのです
これが違うために、古いデザインで使用していたCSSを新しいデザインに貼り付けても、全く動かないのです。
********************************
なぜだ～！と思われる方は、２つのCSSをよく見比べてください。
旧：
新：
.skinMenuHeader {
よくみてみると、{ } の中身は一緒のようです。
違っているのは { の前の部分、h4.menu_title が skinMenuHeader になっています。
実はこの部分が原因なんです！この部分を”セレクタ”と言います。
セレクタとは何か・・。ブログやホームページは、一つの大きなデザインのように見えますが、
裏では小さなパーツパーツが組みあがってできています。
↓例えば、MyWayのブログの場合。 (#～) の一つ一つがセレクタです。
ここでは分かりやすく主なものを抜きだしてますが、実際はこの数倍のセレクタが入り組んでます。
このセレクタの名前（#messageとか）は誰が決めているのでしょうか・・？
セレクタ名はホームページやブログのデザイナーが、自由に決めて作ってもよいことになっています。
アメブロのテンプレートのデザイナーはどなたでしょうか？？アメブロさんですね。
アメブロのセレクタ名は、アメブロさんが決めています。
さて、ここで少し話は飛ぶのですが、CSSのコードの基本的な読み方について、少し触れたいと思います。
CSSとは基本的に、全て命令文なんです。
セレクタよ！ {
CSSとはこの命令文の連続なんです。
↓では実際のCSSを読んでみましょう。
今日はずっと記事にしたくて、時間がなくてなかなかできなかったことを、記事にさせて頂きます。
ご自身でアメブロカスタマイズに挑戦されている方や、CSSに興味がある方は、長いですが最後まで読んで頂けると嬉しいです（＾－＾）
**************************************************
アメブロのカスタマイズをされている方はご存じだと思うのですが、今年の７月にアメブロのスキンが変更になり、
今までカスタマイズ用に使用していた”【カスタム可能】ベーシックデザイン”が、使えなくなりました。
その変わりに、新しい”CSS編集用デザイン”が、アメブロから発表されました。
様々な方のブログで、”７月以前にカスタマイズで使っていたCSSは、８月以降は使えません！”という記事を
見かけられると思いますが、正確にはこの言い方が正しいです↓
”７月以前に”【カスタム可能】ベーシックデザイン”でカスタマイズに使っていたCSSは、
８月以降は”CSS編集用デザイン”では使えません！”
つまり、８月以降も引き続き”【カスタム可能】ベーシックデザイン”をお使いの方は、心配無用です！
ただし興味本位で”【カスタム可能】ベーシックデザイン”から”CSS編集用デザイン”に変更してはいけません！
そこは一度行っては二度と戻れない、恐怖の道なのです
一度でもデザインを変更してしまうと、昔の古き良き”【カスタム可能】ベーシックデザイン”には
二度と戻れません。そして今まで行ってきたカスタマイズも、全てパーとなります。
昔のデザインでカスタマイズをされている方は、絶対に恐怖の道には進まないでくださいね！！
************************************************:
さてそもそも、何故一度でも恐怖の道に入ってしまうと元の道に戻れないのか、
怖々ながら知っておきたい！という覚悟がある方は、ぜひこの先もお読みください。
CSSとは何か、という簡単な説明にもなっていますので、CSSに興味がある方もぜひどうぞ！
ここでは分かりやすく、新旧のデザインで作った私の二つのブログを例にとってご説明していきます。
私は両方のブログの”最近の記事一覧”の背景に、オリジナルの画像を入れるというカスタマイズをしています。
■このMyWayのブログ ： ”【カスタム可能】ベーシックデザイン”で作っています。
～グレーの貝殻のような変な画像をいれています。
このカスタマイズを実現するためのCSSはこうです。(なおこのCSSは必要な所だけを抜き出していますので、そのままご使用頂いても動きません)
h4.menu_title {
background-image: url("背景画像のある場所のURL");
height: 27px;
}では、新しいデザインの方はどうでしょうか？
■サンプルブログ ： ”CSS編集用デザイン” で作っています。
～黒色の星の画像をいれています。
このカスタマイズを実現するためのCSSはこうです。(なおこのCSSは必要な所だけを抜き出していますので、そのままご使用頂いても動きません)
.skinMenuHeader {
background-image: url("背景画像のある場所のURL");
height: 27px;
}height: 27px;
同じことをやりたいカスタマイズなのに、CSSの内容が違いますね。
実はこの違いが、一度恐怖の道に入れば戻れない理由なのです
これが違うために、古いデザインで使用していたCSSを新しいデザインに貼り付けても、全く動かないのです。
********************************
なぜだ～！と思われる方は、２つのCSSをよく見比べてください。
旧：
h4.menu_title {
background-image: url("背景画像のある場所のURL");
}
height: 27px;
}
.skinMenuHeader {
background-image: url("背景画像のある場所のURL");
height: 27px;
}height: 27px;
よくみてみると、{ } の中身は一緒のようです。
違っているのは { の前の部分、h4.menu_title が skinMenuHeader になっています。
実はこの部分が原因なんです！この部分を”セレクタ”と言います。
セレクタとは何か・・。ブログやホームページは、一つの大きなデザインのように見えますが、
裏では小さなパーツパーツが組みあがってできています。
↓例えば、MyWayのブログの場合。 (#～) の一つ一つがセレクタです。
ここでは分かりやすく主なものを抜きだしてますが、実際はこの数倍のセレクタが入り組んでます。
このセレクタの名前（#messageとか）は誰が決めているのでしょうか・・？
セレクタ名はホームページやブログのデザイナーが、自由に決めて作ってもよいことになっています。
アメブロのテンプレートのデザイナーはどなたでしょうか？？アメブロさんですね。
アメブロのセレクタ名は、アメブロさんが決めています。
さて、ここで少し話は飛ぶのですが、CSSのコードの基本的な読み方について、少し触れたいと思います。
CSSとは基本的に、全て命令文なんです。
セレクタよ！ {
ここの部分を: こうするのだ ;
}
}
CSSとはこの命令文の連続なんです。
↓では実際のCSSを読んでみましょう。
h4.menu_title {
background-image: url("背景画像のある場所のURL");
}
上の例を翻訳すると、”h4.menu_title”セレクタさんよ！あたなの背景画像(background-image)を、このURLの画像にかえるのだ！ という命令になります。
CSSは文字ばかり並んで見づらいですが、命令文の連続だと思うと、なんだかセレクタさんが気の毒ですね
******************************************
ではここでいよいよ、新しいスキンで作ったサンプルブログのセレクタをみてみましょう。
セレクタ名が前のデザインとかわっとるやんけ！！と大阪人のデザイナーなら突っ込みたくなるわけです。
たとえばヘッダー部分、前のデザインだと#headerですが、新しいデザインだと.skinheaderArea ですね。
セレクタ名がかわるとどうしていけないのか、、それはもうすでにお分かりですね。
そうです、昔のCSSの命令文が効かなくなるからです。
昔のCSSを新しいスキンのCSSにコピーしても、新しいデザインから見ると、
”そんなこと命令されても、そんなセレクタ名、もうありませんよ～”、という感じです。
なので、かつての＃カスタム可能ベーシックデザイン”向けに、様々なブロガーの方々が公開していた
素晴らしいCSSは、新しいCSS編集用デザインでは、ほぼ、動きません。
セレクタ名がかわってしまったからです。
セレクタ名を決めていたのは、作成者のアメブロさんですね。
つまり私たちの力ではどうしようもない、ということです。
セレクタ名を変えると、昔のCSSが効かなくなるのは、当たり前田のクラッカーですので、
今回のスキン変更は、それを前提としたデザイン変更だった、ということになります。
*********************************************
ではどうすればよいのか。例えば間違えて新しいデザインに変えてしまった人はどうすればいいのか？
昔のデザイン用のCSSの本を持っているけれど、新しいデザインに使えるのか・・？(←これ切ないですよね・・。
皆さんどうしていらっしゃるのでしょう。。？)
基本的にはセレクタ名が変わっただけですので、CSSの中に書いてある古いセレクタ名を、
新しいセレクタ名で置き換えればOKなのです。
ただ、セレクタ名は一つのブログに多分１００個以上あり、互いが入り組んでいます。
新旧のセレクタ名を比較して変更するのは、CSSの知識がないと難しいかもしれません
お近くのWeｂデザイナーさんにご相談するか、またたび企画 にもよろしければご相談ください。
またこちらで記事にした とおり、新しいデザインには大きな広告が問答無用で入っています。
広告を消すためには有料プランに切り替える必要がありますので、こちらもご検討の必要があります。
詳しくはこちらを・・
*********************************************
最後にもう一つだけご注意事項なのですが、
新しいCSS編集用デザインでは、セレクタ名が最初に選ぶレイアウトによっても違うのです。
↓レイアウトの変更画面。どのレイアウトを選ぶかで、セレクタ名がかわってきます！
なので、Aさんがブログで公開しているCSSを自分のブログに貼り付けても、
なんだかうまく動かない、ということもありえます。
Aさんと自分ではレイアウトが違うので、セレクタ名が違う、というのが原因となります。
恐るべしセレクタ名ですね。
height: 27px;
}
上の例を翻訳すると、”h4.menu_title”セレクタさんよ！あたなの背景画像(background-image)を、このURLの画像にかえるのだ！ という命令になります。
CSSは文字ばかり並んで見づらいですが、命令文の連続だと思うと、なんだかセレクタさんが気の毒ですね
******************************************
ではここでいよいよ、新しいスキンで作ったサンプルブログのセレクタをみてみましょう。
セレクタ名が前のデザインとかわっとるやんけ！！と大阪人のデザイナーなら突っ込みたくなるわけです。
たとえばヘッダー部分、前のデザインだと#headerですが、新しいデザインだと.skinheaderArea ですね。
セレクタ名がかわるとどうしていけないのか、、それはもうすでにお分かりですね。
そうです、昔のCSSの命令文が効かなくなるからです。
昔のCSSを新しいスキンのCSSにコピーしても、新しいデザインから見ると、
”そんなこと命令されても、そんなセレクタ名、もうありませんよ～”、という感じです。
なので、かつての＃カスタム可能ベーシックデザイン”向けに、様々なブロガーの方々が公開していた
素晴らしいCSSは、新しいCSS編集用デザインでは、ほぼ、動きません。
セレクタ名がかわってしまったからです。
セレクタ名を決めていたのは、作成者のアメブロさんですね。
つまり私たちの力ではどうしようもない、ということです。
セレクタ名を変えると、昔のCSSが効かなくなるのは、当たり前田のクラッカーですので、
今回のスキン変更は、それを前提としたデザイン変更だった、ということになります。
*********************************************
ではどうすればよいのか。例えば間違えて新しいデザインに変えてしまった人はどうすればいいのか？
昔のデザイン用のCSSの本を持っているけれど、新しいデザインに使えるのか・・？(←これ切ないですよね・・。
皆さんどうしていらっしゃるのでしょう。。？)
基本的にはセレクタ名が変わっただけですので、CSSの中に書いてある古いセレクタ名を、
新しいセレクタ名で置き換えればOKなのです。
ただ、セレクタ名は一つのブログに多分１００個以上あり、互いが入り組んでいます。
新旧のセレクタ名を比較して変更するのは、CSSの知識がないと難しいかもしれません
お近くのWeｂデザイナーさんにご相談するか、またたび企画 にもよろしければご相談ください。
またこちらで記事にした とおり、新しいデザインには大きな広告が問答無用で入っています。
広告を消すためには有料プランに切り替える必要がありますので、こちらもご検討の必要があります。
詳しくはこちらを・・
*********************************************
最後にもう一つだけご注意事項なのですが、
新しいCSS編集用デザインでは、セレクタ名が最初に選ぶレイアウトによっても違うのです。
↓レイアウトの変更画面。どのレイアウトを選ぶかで、セレクタ名がかわってきます！
なので、Aさんがブログで公開しているCSSを自分のブログに貼り付けても、
なんだかうまく動かない、ということもありえます。
Aさんと自分ではレイアウトが違うので、セレクタ名が違う、というのが原因となります。
恐るべしセレクタ名ですね。