しばらく放置していたら、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>