まぁ「シンプル」テーマ の様な全文表示のテンプレートはまだ需要としてはあるわけですが
まずはレイアウトを決めます
body部分
<div class='header'>
<header>
</header>
</div>
<div class='row'>
<div class='leftcolumn'>
</div>
<div class='rightcolumn'>
</div>
</div>
<footer>
</footer>
CSS (2026/05/10 clearfix修正)
* {
box-sizing: border-box;
}
.leftcolumn {
float: left;
width: 75%;
}
.rightcolumn {
float: left;
width: 25%;
padding-left: 20px;
}
.row:after {
content: "";
display: table;
clear: both;
}
.row:before,
.row:after {
display: table;
content: "";
}
.row:after {
clear: both;
}
@media screen and (max-width: 800px) {
.leftcolumn, .rightcolumn {
width: 100%;
padding: 0;
}
}
単純にfloatで左右振り分け(実際にはどちらも左)、ビューポートが 800 ピクセルより狭い場合カラムを重ねて表示
最終的なテンプレート(2026/05/29 iframeのレスポンシブ修正)
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' expr:lang='data:blog.locale' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<meta content='width=device-width, initial-scale=1' name='viewport'/>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[
/* CSS
----------------------------------------------- */
* {
box-sizing: border-box;
}
.leftcolumn {
float: left;
width: 75%;
}
.rightcolumn {
float: left;
width: 25%;
padding-left: 20px;
}
.row:after {
content: "";
display: table;
clear: both;
}
.row:before,
.row:after {
display: table;
content: "";
}
.row:after {
clear: both;
}
@media screen and (max-width: 800px) {
.leftcolumn, .rightcolumn {
width: 100%;
padding: 0;
}
}
img{
max-width:100%
}
.post-body iframe{
max-width:100%
}
]]></b:skin>
<b:include data='blog' name='google-analytics'/>
</head>
<body>
<b:if cond='data:blog.pageType == "index"'>
<div itemscope='itemscope' itemtype='http://schema.org/Blog' style='display: none;'>
<meta expr:content='data:blog.title' itemprop='name'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' itemprop='description'/>
</b:if>
</div>
</b:if>
<div class='header'>
<header>
<b:section class='header' id='header' maxwidgets='1' name='Header' showaddelement='no'>
<b:widget id='Header1' locked='true' title='' type='Header'/>
</b:section>
</header>
</div>
<div class='row'>
<div class='leftcolumn'>
<b:section class='main' id='main' name='Main' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='ブログの投稿' type='Blog'/>
</b:section>
</div>
<div class='rightcolumn'>
<b:section id='sidebar' name='Sidebar' preferred='yes'>
</b:section>
</div>
</div>
<footer>
</footer>
</body>
</html>
とりあえず最低限という事で、画像、iframeのレスポンシブ(2026/05/29修正)、サイドバーセクションを追加
現在デモ > https://blog---layout.blogspot.com/
0 comments:
スパム対策の為コメントをオフにしています。
Disqusは利用出来ます。
注: コメントを投稿できるのは、このブログのメンバーだけです。