Bloggerのデザインを修正

しばらく放置していたら、Bloggerもスマホ対応していたのですね。このBlogのデザインも変更しないと...
ということで、トマトジュース色に染めるためのカスタムスタイルを追加。

body { padding:0 4px 4px !important }
.header-inner .Header .titlewrapper { padding:6px 6px 0 !important }
.Header h1 { margin-bottom:0 !important; font-size:200% !important; }
.header-inner .Header .descriptionwrapper { margin-bottom: 0 !important }
.Header .descriptionwrapper { margin-bottom: 0 !important }
.Header .description { font-size:50% !important }
.Header h1, .Header .description {
  text-shadow: 1px 2px 3px rgba(0, 0, 0, 0.8); }
.header-outer {
  margin: -4px -4px 0 -4px;
  border-radius:8px;
  box-shadow: 2px 2px 10px rgba(0,0,0,0.8);
  background: #e60004 url() !important;
  background: -ms-linear-gradient(top, #FF6666 0%, #E60004 10%, #E60004 90%, #AA0000 100%), #e60004 url();
  background: linear-gradient(to bottom, #FF6666 0%, #E60004 10%, #E60004 90%, #AA0000 100%), #e60004 url();
  background-clip: padding-box; }
h2.date-header { margin-bottom: 4px !important; }
h3.post-title { margin-top: 4px !important;
  text-shadow:  0 0 2px #fff, 2px 2px 4px rgba(0,0,0,0.8);
  margin: 0 5px 0 -15px;
  padding: 2px 8px;
  background: -ms-linear-gradient(top, rgba(230,0,4,0.1) 0%, rgba(230,0,4,0.3) 100%);
  background: linear-gradient(to bottom, rgba(230,0,4,0.1) 0%, rgba(230,0,4,0.3) 100%);
  border-radius:8px;
}
.post-body { line-height:1.2 !important }
.post { margin-bottom: 0 !important }
.widget { line-height:1.1 !important; margin: 4px 0 !important }
.main-inner .column-center-inner { padding:0 0 0 10px !important }
.main-inner .column-right-inner { padding: 0 !important }
.main-inner .column-center-inner .section { margin: 0 4px 0 0 !important }
.footer-inner { padding:0 !important }
#footer-3 { display:none }

HTMLソース中に、スマホ上でのページ幅が1100pxと固定されているので、これを960pxに修正。
SyntaxHighliter も導入しましょう。

<b:if cond='data:blog.isMobile'>
      <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
    <b:else/>
      <meta content='width=960' name='viewport'/>
    </b:if>
    <b:include data='blog' name='all-head-content'/>
    <!-- Syntax Highlighter Scripts Generator -->
    <link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
    <link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
    <script language='javascript' type='text/javascript'>
      SyntaxHighlighter.config.bloggerMode = true;
      SyntaxHighlighter.all();
    </script>
    <style>
      .syntaxhighlighter {
        overflow: auto !important;
        overflow-y: hidden !important; }
      .syntaxhighlighter .toolbar{ display:none !important }
    </style>

    <title><data:blog.pageTitle/></title>