当『超入門』コーナーでは、アメブロデザインカスタマイズのいろはのいについて解説したいと思います。初級・中級・上級者へとステップアップしてゆくための基礎の基礎固めに役立つ記事になるように努力します！
サイトづくりには、失敗がつきもの。アメブロのデザインカスタマイズでも、CSS編集をやってみて、ブラウザで確認して、間違っていたら修正する。その繰り返しです。ですから、デザインが崩れてしまっても慌てることはありません。やり直せばいいのですから。
ですが、たまには大きな落とし穴にはまってしまうもの…
バックアップがないと、悲惨な気持ちに
エクセルやワードで何時間もかけて、一所懸命文章を作成していたのに、ソフトやPCがフリーズ（動かなくなって）してしまって、それまでの苦労が泡に。そんな経験は、誰にでもあると思います。落ち込んだ気持ちを立て直すのに1時間（笑）、そしてやっとスタート地点。再び数時間の作業を再開することになってしまいます。
そんな時、作成しかけの文章の半分でもいいから残っていたら随分助かりますよね。
アメブロのCSS編集でもバックアップを取っておかないと、同じようなことが起こりえます。CSS編集を、アメブロの編集画面の枠のなかだけでやっている方は、いますぐそのやり方を改めましょう！
では、どういう手順を取ればいいかを簡単にご説明します。
- テキストを編集するソフトなら、Windowsのメモ帳でもいいですから、編集前のアメブロのCSS編集枠のなかのソース（書かれている文字全部）をコピーして別ソフトに貼り付け、「名前を付けて保存」で一旦保存します。これが、編集直前のバックアップファイルになります。
- そして、編集前に、いまから編集するファイルを再び「名前を付けて保存」で別のファイル名で保存します。これは、誤ってバックアプファイルを上書きしないためです。
- そしていよいよ作業スタート。CSSを編集して、アメブロのCSS編集枠に貼り付ける。プレビューでうまくいったかどうか見る。だめだったら修正する。また貼り付けてどうなったか確認する…
- その繰り返しで、ひとつの作業が終わったら、編集後のファイルを保存します。
このとき、2つのバックアップファイルが保存されているはずです。次の作業にとりかかる際は、2.からまた再スタート。バックアップファイルは、日付と作業内容が分かるような名前にしておけば、いつでも過去の状態に戻せることになります。
デザインが崩れてしまったら、いったん直前の状態に戻せばよいわけです。
デザイン崩れの原因を突き止める方法
CSSのことを理解している方は、ソースを丁寧に見てゆけばいずれ原因は分かりますが、そうでない方のために、いちばん簡単な方法をご説明します。
CSS素人でもプロでも、間違いの原因はたいてい同じですから、次のなかにかなりの確率でその原因があるもんだと思います。
コピー＆ペーストのミス
私も結構よくあります。
- コピー元のデータをすべてコピーしていなかった（コピー漏れ）
- 貼り付けミス。これは、元のCSSを、編集した別のCSSに置き換えようとする場合、元のCSS以外の部分まで上書きしてしまったり、元のCSSの文字が残っていたりするときに起こります。
たとえば、ブログタイトルの説明文字の色を変えたい場合。
/* skinDescription ブログの説明文字 */
.skinDescription{
color:#333333;
}グレーからブルーに変えようと思って、黄色い部分をcolor:#0000ff;に編集したとします。そして間違って次のように貼り付けてしまうようなケースです。
/* skinDescription ブログの説明文字 */
.skinDescription{
color:#333333;
}
}黄色い文字の部分が多くなっています。
編集ミス
慣れてくると、コピー＆ペーストだけでなく、自分で直接文字を打って編集するようになります。そうなるとよく起こるミスです。前の例の文字色修正を、直接文字を打って行いました。最初のコードと、どこが違うか見つけてみてください。
/* skinDescription ブログの説明文字 */
.skinDescription{
color:0000ff
}333333を、0000ffに変えた以外に、2か所違いがあります。分かりますでしょうか？
他には、000ffと、桁数をひとつ足りなくしてしまったりすることもたまにあります。
間違いを見つけられない場合は、問題を切り分ける
こうした小さいミスは結構見つけにくいものです。また、CSSカスタマイズの場合、修正か所が1か所でない場合も多いですから、そうした場合には、問題を切り分けることが有効になってきます。これは、CSSが分からなくてもできることです。
CSSの指定は、先のソースコードが一つの指定になっています。当ブログの「やってみよう！カスタマイズ」の記事でも、1つの指定で完結するカスタマイズはなく、複数の指定を同時に行うものばかりです。
どこが間違っているのかわからない場合は、いっぺんに修正するのではなく、いくつかに分けて修正してゆけば、どこでおかしくなったかがはっきり分かります。デザインが崩れた際に貼り付けたCSSソースが犯人です。
コンピュータってのは融通が効かないので、1文字違うだけで、正しく動作してくれません。私もそうですが、プログラムやウェブページのソースコードを書く人間は、いつも間違い探しをしてるんですよね（笑）
間違いをしないためにソフトウェアを使う
そうした仕事をしている方々は、間違いをしないために専用のソフトウェアを使います。ソフトウェアには、入力支援機能がついているものが多く、途中まで書くと、最後まで書かなくてもあとはやってくれたり、間違った場合にどこが間違っているのか教えてくれる機能がついています。
当ブログで何度もおすすめしているのが、ez-HTML。
何と、タダです！
最初はとっつきにくく感じたり、難しく感じるかも知れませんが、とにかく使ってみてください。合う合わないはあると思いますが、高いお金を出して買うソフトと難しさは変わりません。というより、おそらく簡単です。
次回からは実習です！
さて、『超入門』の記事もこれで、カスタマイズのための準備に関する記事は終わりにします。
次回からは、実際に簡単なカスタマイズ方法をご紹介する予定です。時間があるときは、素材も作成してご提供するようにしたいと思います。
もし記事が気に入ったら、クリックいただければうれしいです
またのご訪問、お待ちしております