WordPress Theme Sereneを適用


ちょっと空いた時間があったので気分転換に新しいイマドキでcoolな(?)Wordpressのテーマを当ててみました。

Serene
http://www.elegantthemes.com/gallery/serene/

そのまま当てるだけではいくつか変な点があったので、納得のいくデザインになるまで少し手を加えて微調整しました。メモ。

以下の気になった点に対してそれぞれ、wordpressのadmin画面のAppearence -> Editor -> Serene: Stylesheet (style.css)で以下のCSSを足しました。

  • タイトルの文字がでかい(72px -> 48px)
    .post-content .title {
        font-size: 48px
    }
    
  • デフォルトの文字がでかい(22px -> 20px)
    body {
        font-size: 20px;
    }
    
  • mobileで横幅が狭い
    min/max-widthのmedia指定で固定widthがセットされているため96%に変更

    @media only screen and ( min-width: XXXpx ) and ( max-width: XXXpx ) {
        #container {
            width: 96%;
        }
    }
    
  • mobileでfooterが消える
    display: noneがセットされているので消す

    @media only screen and ( min-width: XXXpx ) and ( max-width: XXXpx ) {
        #footer-widgets {
            /* display: none; */
        }
    }
    
  • mobileでsocialアイコンがでない
    記事トップの著者用のsocialリンクのアイコンがmobileだと表示されず代わりに機能しない変なアイコンがでるので、PC版と同様にするためmedia内の記述を消す。

    @media only screen and ( min-width: XXXpx ) and ( max-width: XXXpx ) {
        #et-social-icons {
            /* display: none; */
        }
        #et_mobile_nav_menu {
            /* display: block;*/
        }
    }
    
  • mobileで上部の余白が多い
    PCではさほど気にならないmain headerのmargin-top 140pxがmobileでは気になるので40pxを指定

    @media only screen and ( min-width: XXXpx ) and ( max-width: XXXpx ) {
        #main-header {
            margin-top: 40px;
        }
    }
    
  • mobileでsyntax highlightの高さがずれる
    何故かmobileだとcodeを記述するためのsyntax highlihterの行数とコードのそれぞれの高さがズレるので固定値を指定

    .entry-content .syntaxhighlighter a,
    .entry-content .syntaxhighlighter div,
    .entry-content .syntaxhighlighter code,
    .entry-content .syntaxhighlighter table,
    .entry-content .syntaxhighlighter table td,
    .entry-content .syntaxhighlighter table tr,
    .entry-content .syntaxhighlighter table tbody,
    .entry-content .syntaxhighlighter table thead,
    .entry-content .syntaxhighlighter table caption,
    .entry-content .syntaxhighlighter textarea { 
         height: 22px !important;
    }
    

以上。これでできあがったのが、今のこのblogです。