うっかりスキンを変えたら新しいhtmlに変わってしまい、
元のcssが反映されなくなり、作業が台無しになった話。
※記事の一番下に追記アリ
はじめに管理人の知識はどの程度か？
以前カスタマイズにハマった時期は～2009年頃まで。
独自プロパティで枠線の角丸やボックスシャドウ等を
表現できるようになった頃？までの知識しかない。
むしろ忘れた事も多いので実際はそれ以下！
CSS3とかHTML5とか…ほぼ分かりません。
まぁ初心者～初級者レベルだと思ってもらえれば…
目標は元の見た目に戻す事
以前の見た目に戻すのは、おそらく簡単だ。
新しいhtmlに記述されてる、新しいセレクタ名を調べ、
元のセレクタ名を新しいものに書き換えれば多分OKだ。
調べる手間や微調整などが面倒なだけで難易度は低いと思う。
そんな訳でソースを調べると…
何か私の知識にないhtmlの記述がされている。(汗)
例えばbodyの部分だか昨日までのスキンは
<body>
※昨日までという表現は正確には正しくありません
私は昨日スキンを変えたのがキッカケで切り替わっただけです
本来の公開日というか切り替わり時期は知りません。
私は昨日スキンを変えたのがキッカケで切り替わっただけです
本来の公開日というか切り替わり時期は知りません。
又は2009年頃にもあった古いスキンだと
<body id="mainIndex">
だったのだが今回は…
<body class="skin-columnE" amb-layout="columnE">
となっている。
前半部分の<body class="skin-columnE"> ここは問題ない。
でも後半部分の amb-layout="columnE" は初めて見る記述だ。
○○="○○"って記述から推測すると amb-layout の部分が
#idや.classに相当する部分で"columnE"の部分がセレクタ名に
相当する部分なのかなぁ？と思う。
更にいえば amb- はアメブロって意味？だと思うので
分からない箇所は layout の部分なのだと推測してみた。
疑問はひとまず後回しにして、cssの書き方はこれまでなら
body { プロパティ: 値; }
#mainIndex { プロパティ: 値; }
新スキンを現状の知識で書くなら
body { プロパティ: 値; }
.skin-columnE { プロパティ: 値; }
という書き方しか思い浮かばないのだが、
ユーザーが触れないcssファイルを覗くと…
[amb-layout="columnE"] { プロパティ: 値; }
と例の後半部分を [ ] で囲ったセレクタ？でcssが指定されているのだ。
もっと下の階層にいくと
[amb-component="○○"] { プロパティ: 値; }
何てのも見つけた。
id や class 以外に、この数年で layout や component っていう
属性(呼び方違うかも？)が増えたのか？
又は2009年頃の時点で既にあったのか属性(？)なのか
分からないが、とにかく私の知識にない事は確実だ。
とりあえずグーグル先生に聞いてみたが、聞き方が悪いのか？
私の理解力が足りないのか明確な答えは得られなかった。
何かソースの再利用が容易だとかなんとか？
目的が脱線してきたので
あまり深く追求するとカスタマイズが進まないので、
試しに従来のidやclassでcssを指定してみた。
問題なく反映された。
ユーザーが触れないcssファイルの[ ]で囲ったパターンの記述も、
従来の指定で問題なく上書きされた。
セレクタ部分はどっちを指定しても同じなのかな？
そうなるとどちらで記述した方が良いのだろうか…
慣れを考えると従来の指定で進めたいところだ…、
でも上書きした場合にセレクタ名が違うとややこしい…
決めた！まずは [ ] で囲ったセレクタ？で記述しよう。
暇を見つけて新要素を理解できたら結論を出そうと思う。
カスタマイズ進行状況！ ヘッダーを着色して、フォント変えた。
※追記
前のデザイン(html)のスキンもまだ選べました！
・旧CSS編集デザイン スタンダード
・新CSS編集デザイン スタンダード
・新CSS編集デザイン タイル
・新CSS編集デザイン リスト
CSS編集デザインは全部で4種類あるようです。
詳細は次の記事で書きます→コチラ