デザイン編集日記

こんにちは、@noboruです。宮﨑あおいが好きです。

昨日からブログのデザインを色々いじくりまわしております。

コードのシンタックスハイライトはどうすれば見やすいかなー、とか、広告の位置はどこにすればいいかなーとか、ゆるゆる試行錯誤を重ねております。

作業進捗で言えばまだ20%くらいなんですが、

Web界のサグラダファミリアとして、半永久的に改築を続けてやろうかと。

その前に飽きられるのがオチでありますが。

LESSですが、body領域に基本レイアウト・デザイン、下に汎用スタイルを記述する方式を取りました。

どうせコンパイルするのだから、別ソースにわけるなど、モアベターなソースの分割方法を模索すべきですね。

body{
  #container{
    width:980px;
    margin:0 auto;
    #container-inner{
      margin: 0 15px;
      #blog-title{
        #blog-title-inner{
          #title{
            a{
              color:#666;
              text-decoration: none;
              text-shadow: 1px 1px 0px #9c9c9c;
            }
          } // end of title
        } // end of blog-title-inner
      } // end of #blog-title
      
      #top-editarea{
        margin-bottom:40px;
        
        #top-ad-banner{
          width:728px;
          height:90px;
          margin:0 auto;
        }
        #top-ad-linkunit{
          width:728px;
          height:15px;
          margin:0 auto;
        }
        
      } // end of #top-editarea
      
      #content{
        #content-inner{
          margin: 0 0 0 0;
          #wrapper{
            width:620px;
            float:left;
            #main{
              #main-inner{
                article.entry{
                  margin: 0 0 60px 0;
                  
                  .entry-inner{
                    .entry-header{
                      
                      position:relative;
                      
                      .date{
                        a{
                          time{
                            .date-year{
                              
                            } // end of .date-year
                            
                            .date-month{
                              
                            } // end of .date-month
                            
                            .date-day{
                              
                            } // end of .date-day
                            
                            .hyphen{
                              
                            } // end of hyphen
                            
                          }
                        }
                      } // end of .date
                      .entry-title{
                        .entry-title-link{
                          
                        } // end of .entry-title-link
                      } // end of .entry-title
                      
                      .categories{
                        a{
                          
                        }
                      } // end of .categories
                      
                      .entry-header-menu{
                        position:absolute;
                        top:0;
                        left: -40px;
                        
                        a{
                          
                        }
                      } // end of .entry-header-menu
                      
                    } // end of .entry-header
                    
                    
                    
                  } // end of .entry-inner
                } // end of article.entry
                
                
                .pager{
                  clear: both;
                  padding: 0 0 80px 0;
                }
              } // end of #main-inner
              
            } // end of main
            #box1{
              
            } // end of box1
          } // end of #wrapper
          
          #box2{
            width:300px;
            float:right;
            #box2-inner{
              .hatena-module{
                margin-bottom:20px;
              } // end of .hatena-module
            } // end of #box2-inner
          } // end of #box2
          
        } // end of #content-inner
      } // end of #content
      
      #bottom-editarea{
        #bottom-ad{
          clear:both;
          width:728px;
          height:90px;
          margin:0 auto;
        } // end of #bottom-ad
      } // end of #bottom-editarea
      
    } // end of #container-inner
  } // end of #container
  
  #globalheader-container{

  } // end of #globalheader-container
  
  #footer{
    color:#666;
    clear: both;
    text-align: center;
  } // end of foooter
}


// --------------------------------------------------
// common css
// --------------------------------------------------

pre.code{
  background: #393939;
  border:1px solid #1d1d1d;  
  color:#fff;
  margin:20px;
  padding:15px;
}

HTML5+CSS3の新しい教科書 基礎から覚える、深く理解できる。