当『超入門』コーナーでは、アメブロデザインカスタマイズのいろはのいについて解説したいと思います。初級・中級・上級者へとステップアップしてゆくための基礎の基礎固めに役立つ記事になるように努力します!
「なぜアメブロのデザイン変更はできるのか?」
ウェブサイトづくりにおいてはもっとも基本的なことですので、どのようにしてデザイン変更を実現しているのかを知っておくことは価値あることだと思います。
ページとデザインは別
実は、普段見ているインターネットのサイトでは、ページ内容とデザイン内容は別々に規定されているのです。ページ内容はHTMLファイルに書かれており、そのデザインはCSSファイルで設定されています。
こうすることで、デザイン変更したいとき、いちいち全部のページを修正する必要はなく、CSSファイルを修正すれば全ページいっぺんに変えることができるようになっています。
たとえば、h1
といういちばん大きな見出しを意味するHTMLタグの場合を考えてみます。アメブロでは、記事タイトルにこのタグが付けられています。
<h1>記事のタイトル</h1>
この部分にデザインを施したいときは、CSSファイルでたとえば以下のように設定します。
h1 {
color:red;
}
すると、記事タイトルは全部color:red;
、つまり赤い色になります。設定できる内容はタグによって決められており、h1
ならたとえば、文字の大きさ、四方を囲む罫線の設定、次の行との空きスペース、文字が表示される部分の背景の色や背景画像などなど、様々な設定をすることができるようになっています。
どんなデザインでも実現可能!
ページに書かれている要素は、すべて何らかのタグで囲まれていますから、CSS編集可能デザインならページに手を入れることなく、すべての要素に自由にデザインの設定ができるということになります。
デザイナーのつくったどんなデザインでも、(アメブロの広告を非表示にしないなど)アメブロの取り決めルールを守っている限り、CSSファイルひとつで実現可能なわけです。
HTMLもCSSも、計算機(検索エンジンのロボットなどのコンピュータ)が理解できるように、決められた規則に従って書かれていますので、元々のルールは簡単。最初はとっつきにくくても、少し覚えれば、自由にデザインしてゆける楽しみがどんどん広がっていくこと間違いないと思います。
HTMLとCSSの勉強の仕方は、別の記事で触れたいと思っていますので、お楽しみに。