当『超入門』コーナーでは、アメブロデザインカスタマイズのいろはのいについて解説したいと思います。初級・中級・上級者へとステップアップしてゆくための基礎の基礎固めに役立つ記事になるように努力します！
分かる人には当たり前のことでも、PCを使いはじめた頃のことを思い起こすと、何でもないことに一日を費やしてしまったような記憶が私にもあります。その当時のことを思いだして、小学生でも分かる入門編記事と位置づけ、アメブロカスタマイズについてゆっくりていねいに、解説してゆきたいと思います。
この記事を読まれている方は、もうAmebaでブログを開設し、手順どおりにひととおりの設定がお済みかと思いますので、その段階からブログデザインを変更するにはどうすればいいか？ というケーススタディーとして話をすすめたいと思います。
課題：ブログタイトルエリアの見栄えを変えてみる
今回の記事では、実際にブログデザインを変更しようとしたとき、どういった操作をすればよいか？ について順を追って解説してゆきたいと思います。
折角ですので、「ブログタイトルエリアの見栄えを変えてみる」というテーマを設定してみました。その操作については、続編の記事 で解説いたしますが、その直前まですすめれば、この記事内容についてはOKです。
デザインカスタマイズ可能なデザインを選択する
アメブロには、沢山のデザインが用意されていて、好きなデザインを選択することができます。また一度選んだデザインは、いつでも変更することができます。そのデザインのことを、『スキン』とも言っています。スキンとは英語で皮膚や肌のこと。皮膚や肌をいつでも変える訳にはいきませんが（笑）、“外見”といったような意味あいです。
マイページトップからスキンを選択するページを表示させる方法は、【画像1】をご参照ください。簡単な方法を2つあげています。
- ページ左上の「ameba」という文字（ロゴ）画像下の「クイックリンク」の文字をクリックする。出てきた画面のいちばん左の列の中頃の [デザインの変更] の下にある「スキンの選択」をクリックする。
- 画面の左の上から3つ目の四角、「アメーバピグ」の下の「ブログ」というタイトルの付いた四角のなかの「デザインの変更」をクリックする。
の2つです。
右の画面（【画像2】）が出てきたら、「ブログデザインを探す」というタイトルの下に並ぶ4つの丸のいちばん右側、「カスタム可能」という丸をクリックする。
右の画面（【画像3】）が出てきたら、いちばん最初（左上）に表示されいている「CSS編集用デザイン」を選択します。
「CSS編集用デザイン」をクリックすると、右の画面（【画像4】）が表示されます。
「ブログデザインの表示確認・レイアウト変更」では好きなレイアウトを選択すればよいのですが、ここでは真ん中の「3カラム・右ワイドメニュー」を選択したとします。
「3カラム・右ワイドメニュー」の文字あるいは左の○をクリックして、その下の [適用する] ボタンをクリックします。
CSSの編集画面を開く
クリックすると、「ブログデザイン適用完了」画面が表示されます。「CSS編集用デザイン」を適用しました。のメッセージの下に「CSSの編集をする」というリンクがありますので、クリックしてください。
すると、右の画面（【画像5】）が表示されます。赤い四角は実際には表示されませんが、このなかの文字を編集することで、アメブロのカスタマイズができちゃいます！
マイページトップからこの画面を表示させる方法を説明しておきます。
- 【画像1】の1番目の方法では「スキンの選択」をクリックしましたが、その2つ下の「スキンCSSの編集」をクリックする。
- 【画像1】の2番目の方法で【画像3】の「ブログデザインを探す」画面を表示させ、適用中のデザイン：「CSS編集用デザイン」と書かれている下の画像の右にある「CSSの編集」リンクをクリックする。
この2つが簡単です。
実際にマイページトップに戻り、「CSSの編集」画面を表示させてみてください。それができれば、この記事の内容についてはOKです。
（その2 ）に続く