新デザインの変更（CSSレイアウトのお勉強） | プログラマー月島優 AmbEditorPlus 公開中
AmebaAmeba 20th Anniv.ホームピグアメブロ
芸能人ブログ人気ブログ
新規登録
ログイン

プログラマー月島優 AmbEditorPlus 公開中

アメブロの標準エディタをカスタマイズする AmbEditorPlus（Chrome 拡張機能）を公開しています。

新デザインの変更（CSSレイアウトのお勉強）

アメブロ カスタマイズ

 

新しいCSS編集用デザインを使って自分専用のオリジナルデザインにするための予備知識です。

こちらの記事で、新しいCSS編集用デザインを適用した際に、どのような構造になっているかを知ることができます。

 

全体構造を見る

CSSレイアウト


ざっと、こんな感じのレイアウトになっています。

簡単な説明

  1. 『ブログ』の一番上の部分が [div#ambHeader] です。

     
  2. 『ブログのタイトル』が [header] です。

     
  3. さらにその下が [div.skinContentsFrame] です。

     
  4. その中に [div.layoutContentsA] と [div.layoutContentsB] があります。



     
  5. さらに、『ブログデザインの表示確認・レイアウト変更』によって、選んだレイアウトにより、[div.skinMainArea] [div.skinSubA] [div.skinSubB] が[div.layoutContentsA] または [div.layoutContentsB] 内に配置されます。 ※[div.skinMainArea]は常に[div.layoutContentsA]内に配置されます。
     
     [div.skinMainArea]
     
     [div.skinSubA]
      
    [div.skinSubB]
     

記事部分の構造を見る

CSSレイアウト

簡単な説明

  1. [div.skinMainArea] の先頭に [div.globalLinkArea]があります。

     
  2. その下に、[div.pagingArea] があります。

     
  3. さらにその下に、[article] があります。

     
  4. その内側に、[skinArticle]→[skinArticle2]→[skinArticle3] と入れ子になっています。
     
  5. [skinArticle3] の先頭に、[skinArticleHeader] があり、その下に [skinArticleBody] があります。
     
  6. [skinArticleBody] の内側に、[skinArticleBody2] があります。
     
  7. [skinArticleBody2] の先頭に、[div._3dcWli0T.articleDetailArea.skinWeakColor] があります。

     
  8. その下が、[div#entryBody] （記事の部分）です。

以上です。お疲れさまでした。

 

 

記事を気に入って頂けたら

お願いします m(_ _)m

 

 

本でしっかり勉強したい人は、こんな本はいかがですか？