カンタンBlogger学習 #05 Gridデザインのテーマ作成

2023年2月23日

これまででBloggerの基本的な構造が理解できたので、実際にBloggerシステムを使ったWebページを作ってみたいと思います。今回の目標は、トップページでGridデザイン方式のタイル形式に画像が並ぶ表示にして、それぞれの記事ページを表示するところまで作る予定です。ちなみに、ホームページで必要なトップページナビゲーションメニューとフッタも同時に完備して、簡易なホームページを完成させたいと思います。

ヘッダ・フッタの作成

ホームページを作る時に、ナメてはいけないのが、ヘッダとフッタのです。ヘッダは、webマーケテイングでは、「ファーストビュー(First View)」と言われて、いわゆるホームページを開いた時に一番最初に表示される重要な位置にあります。ここをちゃんと丁寧に作っておかないと、どんなにキレイなwebサイトを作ったとしても、使いづらいホームページと認識されてしまうんですよね。

ヘッダのソースコード

<!--<< sample用　-->
<meta charset='UTF-8'/>
<link rel='stylesheet' href='header.css' />
<!-- sample用 >>-->

<header>
  <div class='title'>ブログタイトル</div>
  <nav>
    <input id='menu_toggle' type='checkbox' style='display:none;'/>
    <ul>
      <li><a href='/'>Home</a></li>
      <li><a href='/service/'>Service</a></li>
      <li><a href='/contact/'>Contact</a></li>
    </ul>
    <label for='menu_toggle'>
      <span></span>
      <span></span>
      <span></span>
    </label>
  </nav>
</header>

header{
  padding:20px;
  display:flex;
  gap:10px;
  align-items:start;
  height:100px;
  margin:0 auto;
}

header .title,
header .title *{
  font-size:1.5rem;
  font-weight:bold;
  color:black;
}

header nav{
  margin-left:auto;
  
}
header nav *{
  font-size:0.8rem;
  line-height:32px;
}
header nav > ul{
  display:flex;
  align-items:center;
  gap:10px;
}

header ul,
header ol,
header li{
  list-style:none;
  margin:0;
  padding:0;
}

ヘッダの表示確認

フッタのソースコード

<!--<< sample用　-->
<meta charset='UTF-8'/>
<link rel='stylesheet' href='footer.css' />
<!-- sample用 >>-->

<footer>
  <nav>
    <ul>
      <li><a href='/company/'>会社概要</a></li>
      <li><a href='/kiyaku/'>利用規約</a></li>
      <li><a href='/privacy/'>プライバシーポリシー</a></li>
      <li><a href='/security/'>セキュリティポリシー</a></li>
    </ul>
  </nav>
  <div class='copy'>© 2017 Copyright © MYNT, Inc. All Rights Reserved.</div>
</footer>

footer{
  background-color : var(--color-1);
  height:100px;
  padding:10px 20px;
}
footer *{
  font-size:0.8rem;
  line-height:32px; 
}

footer nav ul{
  display:flex;
  justify-content:center;
}
footer nav ul li a{
  display:block;
  padding:5px 10px;
}

footer .copy{
  display:block;
  text-align:center;
}

footer ul,
footer ol,
footer li{
  list-style:none;
  margin:0;
  padding:0;
}

フッタの表示確認

Grid（トップページ）のHTML作成

Grid部分のソースコード

<!--<< sample用　-->
<meta charset='UTF-8'/>
<link rel='stylesheet' href='top.css' />
<!-- sample用 >>-->

<main class='contents'>
  <div class='grid'>
    <a href='javascript:void(0)'>
      <img src='img/sample-1.jpg'/>
      <div class='title'>Grid表示テスト</div>
      <div class='date'>2023年1月1日</div>
    </a>
    <a href='javascript:void(0)'>
      <img src='img/sample-1.jpg'/>
      <div class='title'>ABCDEFGHIJKLMNOPQRSTUVWXYZ</div>
      <div class='labels'></div>
      <div class='date'>2023年2月2日</div>
    </a>
    <a href='javascript:void(0)'>
      <img src='img/sample-2.jpg'/>
      <div class='title'>あいうえおかきくけこさしすせそたちつてとなにぬねの</div>
      <div class='date'>2023年3月3日</div>
    </a>
    <a href='javascript:void(0)'>
      <img src='img/sample-3.jpg'/>
      <div class='title'>祇園精舎鐘の声、諸行無常の響きあり。娑羅双樹の花の色、盛者必衰の理をあらはす。</div>
      <div class='date'>2023年4月4日</div>
    </a>
  </div>
</main>

main .grid{
  --color-bg:black;
  --size-image-height   : 160px;
  --size-border-width   : 4px;
  --size-borfder-radius : 8px;

  display:grid;
  flex-wrap:wrap;
  gap:10px;
  justify-content: center;
  grid-auto-rows: minmax(var(--size-image-height) auto);
  width:100%;
  font-size:0;
  margin:0 auto;
}

main .grid > *{
  width:100%;
  height:100%;
  border:var(--size-border-width) solid var(--color-bg);
  display:flex;
  flex-direction:column;

  box-shadow:3px 3px 6px rgba(0,0,0,0.5);
  transition-property:transform , box-shadow;
  transition-duration:0.3s;
  background-color:var(--color-bg);
  border-radius: var(--size-borfder-radius);
  font-size:0;
  overflow:hidden;
}
main .grid > *:hover{
  transform:translate(-4px,-4px) rotate(-1.5deg);
  box-shadow:7px 7px 6px rgba(0,0,0,0.5);
}

main .grid img{
  width:100%;
  height:var(--size-image-height);
  object-fit:cover;
  background-color:#5ED7F2;
}

main .grid .title{
  padding:3px 5px;
  font-size:0.8rem;
  white-space:pre-wrap;
  word-break:break-all;
  color:white;
  border-top:1px solid white;
}
main .grid .date{
  font-size:0.6rem;
  color:#eee;
  text-align:right;
  margin-top:auto;
}

main .grid a{
  text-decoration:none;
}

@media (max-width:409px){
  main .grid{
    width:100%;
    grid-template-columns: 1fr;
  }
}

@media (min-width:410px){
  main .grid{
    width:390px;
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width:620px){
  main .grid{
    width:600px;
    grid-template-columns: 1fr 1fr 1fr;
  }
}

@media (min-width:830px){
  main .grid{
    width:810px;
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}

@media (min-width:1040px){
  main .grid{
    width:1020px;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  }
}

*, *:before, *:after {
  -webkit-box-sizing : border-box;
     -moz-box-sizing : border-box;
       -o-box-sizing : border-box;
      -ms-box-sizing : border-box;
          box-sizing : border-box;
}

Gtip(top)の表示確認

記事ページの作成

<!--<< sample用　-->
<meta charset='UTF-8'/>
<link rel='stylesheet' href='article.css' />
<!-- sample用 >>-->

<main>
  <article>
    <h1>file_get_contentsでPOSTリクエスト送信</h1>
    <div class='published'>2023年2月2日</div>
    <div class='labels'>
      <a class="label-item" href="https://blog.myntinc.com/search/label/Javascript">Javascript</a>
      <a class="label-item" href="https://blog.myntinc.com/search/label/%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0">プログラミング</a>
      <a class="label-item" href="https://blog.myntinc.com/search/label/%E5%AD%A6%E7%BF%92">学習</a>
    </div>
    <div class='blog-body'><img alt="" border="0" data-original-height="768" data-original-width="1280" src="" style='width:100%;height:300px;background-color:#5ED7F2;'>

    <h2>ソースコード</h2>
    https://example.com/sample.php?mode=test&amp;id=001
    
    <code>function post_access($url=null , $queries=array()){
if(!$url){return;}
$query = http_build_query($queries, "", "&amp;");
$options = array(
  'http' =&gt; array(
    'method'  =&gt; 'POST',
    'header'  =&gt; 'Content-Type: application/x-www-form-urlencoded',
    'content' =&gt; $query,
  )
);
$context = stream_context_create($options);
return file_get_contents($url , false , $context);
}</code>

<h3>実行</h3>
<code>$queries = array(
'mode' =&gt; test,
'id' =&gt; 001,
);
post_access('https://example.com/sample.php' , array());</code></div>
  </article>
</main>

main article{
  width:768px;
  max-width:100%;
  margin:0 auto;
}

main article .published{
  font-size:0.8rem;
  color:#999;
  padding:10px;
}
main article .labels{
  padding:10px;
  text-align:right;
  font-size:0;
  white-space:normal;
}
main article .labels > *{
  display:inline-block;
  background-color: #80e2a5;
  color:white;
  padding:5px 10px;
  font-size:0.8rem;
  margin:3px;
  border-radius:4px;
  text-decoration:none;
}
main article .labels > *:hover{
  color:#eee;
}

main article .blog-body,
main article .blog-body *{
  white-space:pre-wrap;
  word-break:break-all;
}

main img{
  max-width:100%;
}

*, *:before, *:after {
  -webkit-box-sizing : border-box;
     -moz-box-sizing : border-box;
       -o-box-sizing : border-box;
      -ms-box-sizing : border-box;
          box-sizing : border-box;
}

code{
  border: 0;
  padding : 20px;
  display:block;
  line-height:1.4rem;
  overflow-x: auto;
  white-space:pre;
  background-color :  #364549;
  font-weight:normal;
  color:white;
  max-height:90vh;
  border:1px solid #364549;
}

code{
  font-family: SFMono-Regular, Consolas, 'Courier New', 'BIZ UDGothic', Meiryo, monospace; 
}

code[name]::before{
  content:attr(name);
  display:block;
  margin-top:-20px;
  margin-left:-20px;
  margin-bottom:20px;
  color:white;
  border-bottom:1px solid white;
  background-color:white;
  padding:5px 10px;
  color:black;
  width: calc(100% + 40px);
  position: sticky;
  top: -20px;
  left:-20px;
  font-size:0.8em;
  background-color: #eee;
}

h1,h2,h3,h4,h5,h6{
  font-weight: bold;
  margin:0;
}

h1{
  font-size: 2.3rem;
  margin-bottom:1rem;
}

h2{
  font-size: 1.8rem;
  padding: 10px 15px;
  border-radius: 4px;
  line-height: 1.1;
  background: #80e2a5;
  color: #ffffff;
}

h3{
  font-size: 1.4rem;
  padding: 5px 0;
  line-height: 1.1;
  border-bottom: solid 2px #80e2a5;
}

記事ページの表示確認

※記事の内容はサンプル用です。

テーマXMLの作成

<!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 charset='utf-8'/>
<title><data:blog.title/></title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>
<b:include data='blog' name='all-head-content'/>

<b:skin><![CDATA[

:root{
  /* --color-1 : #19c3ba;
  --color-2 : #80e2a5; */
  --color-1 : black;
  --color-2 : #80e2a5;
}

html,body{
  width              : 100%;
  height             : 100%;
  padding            : 0;
  margin             : 0;
  border             : 0;
  scroll-behavior: smooth;
}

*, *:before, *:after {
  font-size:16px;
  /* line-height:32px; */

  -webkit-box-sizing : border-box;
     -moz-box-sizing : border-box;
       -o-box-sizing : border-box;
      -ms-box-sizing : border-box;
          box-sizing : border-box;
}


img{
  max-width:100%;
}

ul,ol,li{
  list-style:none;
  margin:0;
  padding:0;
}

a{
  text-decoration:none;
}

input,textarea {
  -webkit-appearance: none;
}

.center{
  text-align:center;
}
.right{
  text-align:right;
}
.red{
  color:red;
}
.text{
  white-space:pre-wrap;
  word-break:break-all;
}
.small{
  font-size:0.8rem;
}

h1,h2,h3,h4,h5,h6{
  font-weight: bold;
  margin:0;
}

h1{
  font-size: 2.3rem;
  margin-bottom:1rem;
}

h2{
  font-size: 1.8rem;
  padding: 10px 15px;
  border-radius: 4px;
  line-height: 1.1;
  background: var(--color-1);
  color: #ffffff;
}

h3{
  font-size: 1.4rem;
  padding: 5px 0;
  line-height: 1.1;
  border-bottom: solid 2px var(--color-1);
}

h4{

}

h5{

}

h6{

}





/* Header */
@import 'header/hamburger.css';

header{
  padding:20px;
  display:flex;
  gap:10px;
  align-items:start;
  height:100px;
  margin:0 auto;
}

header .title,
header .title *{
  font-size:1.5rem;
  font-weight:bold;
  color:black;
}

header nav{
  margin-left:auto;
  
}
header nav *{
  font-size:0.8rem;
  line-height:32px;
}
header nav > ul{
  display:flex;
  align-items:center;
  gap:10px;
}


/* Footer */
footer{
  background-color : var(--color-1);
  height:100px;
  padding:10px 20px;
}
footer *{
  color:white;
  font-size:0.8rem;
  line-height:32px; 
}

footer nav ul{
  display:flex;
  justify-content:center;
}
footer nav ul li a{
  display:block;
  padding:5px 10px;
}

footer .copy{
  display:block;
  text-align:center;
}

@media (max-width:768px){

}

/* Main */
main{
  min-height:calc(100vh - 200px);
  padding-bottom:50px;
  margin-top:20px;
}

/* Grid */
main .grid{
  --color-bg:black;
  --size-image-height   : 160px;
  --size-border-width   : 4px;
  --size-borfder-radius : 8px;

  display:grid;
  flex-wrap:wrap;
  gap:10px;
  justify-content: center;
  grid-auto-rows: minmax(var(--size-image-height) auto);
  width:100%;
  font-size:0;
  margin:0 auto;
}

main .grid > *{
  width:100%;
  height:100%;
  border:var(--size-border-width) solid var(--color-bg);
  display:flex;
  flex-direction:column;

  box-shadow:3px 3px 6px rgba(0,0,0,0.5);
  transition-property:transform , box-shadow;
  transition-duration:0.3s;
  background-color:var(--color-bg);
  border-radius: var(--size-borfder-radius);
  font-size:0;
  overflow:hidden;
}
main .grid > *:hover{
  transform:translate(-4px,-4px) rotate(-1.5deg);
  box-shadow:7px 7px 6px rgba(0,0,0,0.5);
}

main .grid img{
  width:100%;
  height:var(--size-image-height);
  object-fit:cover;
  background-color:white;
}

main .grid .title{
  padding:3px 5px;
  font-size:0.8rem;
  white-space:pre-wrap;
  word-break:break-all;
  color:white;
  border-top:1px solid white;
}
main .grid .date{
  font-size:0.6rem;
  color:#eee;
  text-align:right;
  margin-top:auto;
}



/* Article */
main article{
  width:768px;
  max-width:100%;
  margin:0 auto;
}

main article .published{
  font-size:0.8rem;
  color:#999;
  padding:10px;
}
main article .labels{
  padding:10px;
  text-align:right;
  font-size:0;
  white-space:normal;
}
main article .labels > *{
  display:inline-block;
  background-color:var(--color-1);
  color:#ddd;
  padding:5px 10px;
  font-size:0.8rem;
  margin:3px;
  border-radius:4px;
}
main article .labels > *:hover{
  color:white;
}

main article .blog-body,
main article .blog-body *{
  white-space:pre-wrap;
  word-break:break-all;
}

/* Code */
code{
  border: 0;
  padding : 20px;
  display:block;
  line-height:1.4rem;
  overflow-x: auto;
  white-space:pre;
  background-color :  #364549;
  font-weight:normal;
  color:white;
  max-height:90vh;
  border:1px solid #364549;
}

code{
  font-family: SFMono-Regular, Consolas, 'Courier New', 'BIZ UDGothic', Meiryo, monospace; 
}

code[name]::before{
  content:attr(name);
  display:block;
  margin-top:-20px;
  margin-left:-20px;
  margin-bottom:20px;
  color:white;
  border-bottom:1px solid white;
  background-color:white;
  padding:5px 10px;
  color:black;
  width: calc(100% + 40px);
  position: sticky;
  top: -20px;
  left:-20px;
  font-size:0.8em;
  background-color: #eee;
}


/* Responsive */
@media (max-width:409px){
  header{
    width:100%;
  }
  main .grid{
    width:100%;
    grid-template-columns: 1fr;
  }
}

@media (min-width:410px){
  header{
    width:410px;
  }
  body[data-style='article'] header{
    width:100%;
  }
  main .grid{
    width:390px;
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width:620px){
  header{
    width:620px;
  }
  body[data-style='article'] header{
    width:100%;
  }
  main .grid{
    width:600px;
    grid-template-columns: 1fr 1fr 1fr;
  }
}

@media (min-width:768px){
  body[data-style='article'] header{
    width:768px;
  }
}

@media (min-width:830px){
  header{
    width:830px;
  }
  body[data-style='article'] header{
    width:768px;
  }
  main .grid{
    width:810px;
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}

@media (min-width:1040px){
  header{
    width:1040px;
  }
  body[data-style='article'] header{
    width:768px;
  }
  main .grid{
    width:1020px;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  }
}

]]></b:skin>

<script>/*<![CDATA[*/

/*]]>*/</script>
</head>

<body>
<header>
  <div class='title'><a href='/'><data:blog.title/></a></div>
  <nav>
    <input id='menu_toggle' type='checkbox' style='display:none;'/>
    <ul>
      <li><a href='/'>HOME</a></li>
      <li><a href='https://myntinc.com/'>MYNT</a></li>
      <!-- <li><a href='about.html'>ABOUT US</a></li> -->
      <li><a href='https://myntinc.com/#contact'>CONTACT</a></li>
    </ul>
    <label for='menu_toggle'>
      <span></span>
      <span></span>
      <span></span>
    </label>
  </nav>
</header>

<main>
<b:section id='メイン' class='main'>
  <b:widget id='Blog1' locked='true' title='ブログの投稿' type='Blog' visible='true' version='2'>
    <b:widget-settings>
      <b:widget-setting name='showDateHeader'>true</b:widget-setting>
      <b:widget-setting name='commentLabel'>comments</b:widget-setting>
      <b:widget-setting name='showShareButtons'>true</b:widget-setting>
      <b:widget-setting name='authorLabel'>By</b:widget-setting>
      <b:widget-setting name='style.unittype'>TextAndImage</b:widget-setting>
      <b:widget-setting name='timestampLabel'>-</b:widget-setting>
      <b:widget-setting name='reactionsLabel'/>
      <b:widget-setting name='showAuthorProfile'>false</b:widget-setting>
      <b:widget-setting name='style.layout'>468x60</b:widget-setting>
      <b:widget-setting name='showLocation'>false</b:widget-setting>
      <b:widget-setting name='showTimestamp'>false</b:widget-setting>
      <b:widget-setting name='postsPerAd'>3</b:widget-setting>
      <b:widget-setting name='style.bordercolor'>#ffffff</b:widget-setting>
      <b:widget-setting name='style.textcolor'>#ffffff</b:widget-setting>
      <b:widget-setting name='showCommentLink'>true</b:widget-setting>
      <b:widget-setting name='style.urlcolor'>#ffffff</b:widget-setting>
      <b:widget-setting name='postLocationLabel'>Location:</b:widget-setting>
      <b:widget-setting name='showAuthor'>false</b:widget-setting>
      <b:widget-setting name='style.linkcolor'>#ffffff</b:widget-setting>
      <b:widget-setting name='style.bgcolor'>#ffffff</b:widget-setting>
      <b:widget-setting name='showLabels'>true</b:widget-setting>
      <b:widget-setting name='postLabelsLabel'>カテゴリ</b:widget-setting>
      <b:widget-setting name='showBacklinks'>false</b:widget-setting>
      <b:widget-setting name='showInlineAds'>true</b:widget-setting>
      <b:widget-setting name='showReactions'>false</b:widget-setting>
    </b:widget-settings>

    <b:includable id='main'>
      <b:switch var='data:blog.pageType'>
        <b:case value='index'/>
          <b:if cond='data:blog.searchQuery'>
            # 検索結果
            <b:loop var='post' values='data:posts'>
              <b:include name='articles' />
            </b:loop>

          <b:elseif cond='data:blog.searchLabel'/>
            # ラベル検索結果
            <b:loop var='post' values='data:posts'>
              <b:include name='articles' />
            </b:loop>

          <b:else/>
            <script>document.body.setAttribute('data-style','articles')</script>
            <b:include name='articles' />

          </b:if>
        <b:case value='item'/>
          <script>document.body.setAttribute('data-style','article')</script>
          <b:include name='article' />

        <b:case value='static_page'/>
          <b:include name='article' />

        <b:default/>
          <b:if cond='data:blog.url == data:view.url path "//static"'>
            <h2>固定ページ一覧(js)</h2>
            <ul id='item_lists'></ul>
            <b:include name='js_statics' />

          <b:elseif cond='data:blog.url == data:blog.url path "//blog"'/>
            <h2>ブログ一覧(js)</h2>
            <ul id='item_lists'></ul>
            <b:include name='js_blogs' />


          <b:else/>
            その他 : <data:blog.pageType/>
            <b:include name='articles' />
          </b:if>

      </b:switch>
    </b:includable>
    
    <b:includable id='articles'>
       <div class='grid'>
        <b:loop values='data:posts' var='post'>
          <b:if cond='data:post.dateHeader'>
          <script style='display:none'>var dateHeader = '<data:post.dateHeader/>'</script>
          </b:if>

          <a expr:href='data:post.url'>
            <img expr:src='resizeImage(data:post.firstImageUrl,320,"1:1")' />
            <div class='title'><data:post.title/></div>
            <div class='labels'></div>
            <div class='date'><script>document.write(dateHeader)</script></div>
          </a>
        </b:loop>
      </div>
    </b:includable>

    <b:includable id='article'>
      <b:loop var='post' values='data:posts'>
        <b:if cond='data:post.dateHeader'>
        <script style='display:none'>var dateHeader = '<data:post.dateHeader/>'</script>
        </b:if>

        <article>
          <h1><data:post.title/></h1>
          <div class='published'><script>document.write(dateHeader)</script></div>
          <div class='labels'>
            <b:loop values='data:post.labels' var='label'>
              <a class='label-item' expr:href='data:label.url'><data:label.name/></a>
            </b:loop>
          </div>
          <div class='blog-body'><data:post.body/></div>
        </article>
      </b:loop>
    </b:includable>

    <b:includable id='js_blogs'>
<script>/*<![CDATA[*/
feed('/feeds/posts/default?alt=json&max-results=10&callback=item_lists')
/*]]>*/</script>
    </b:includable>

    <b:includable id='js_statics'>
<script>/*<![CDATA[*/
feed('/feeds/pages/default?alt=json&max-results=10&callback=item_lists')
/*]]>*/</script>
    </b:includable>

  </b:widget>
</b:section>

</main>

<footer>
  <nav style='display:none;'>
    <ul>
      <li><a href='/company/'>会社概要</a></li>
      <li><a href='/kiyaku/'>利用規約</a></li>
      <li><a href='/privacy/'>プライバシーポリシー</a></li>
      <li><a href='/security/'>セキュリティポリシー</a></li>
    </ul>
  </nav>
  <div class='copy'>© 2017 Copyright © MYNT, Inc. All Rights Reserved.</div>
</footer>
</body></html>

今回作ったHTMLパーツとこれまで学習したBlogger用のページ切り分けを使って、xmlを構築してみました。ヘッダ部分とフッタ部分のリンクリストは、今の所、固定で書き込んでいますが、次回はこれをウィゲット対応させてみたいと思います。

カンタンBlogger学習 #05 Gridデザインのテーマ作成

ヘッダ・フッタの作成

ヘッダのソースコード

ヘッダの表示確認

フッタのソースコード

フッタの表示確認

Grid（トップページ）のHTML作成

Grid部分のソースコード

Gtip(top)の表示確認

記事ページの作成

記事ページの表示確認

テーマXMLの作成

人気の投稿

このブログを検索

ごあいさつ

ブログアーカイブ

ラベル

カンタンBlogger学習 #05 Gridデザインのテーマ作成

ヘッダ・フッタの作成

ヘッダのソースコード

ヘッダの表示確認

フッタのソースコード

フッタの表示確認

Grid（トップページ）のHTML作成

Grid部分のソースコード

Gtip(top)の表示確認

記事ページの作成

記事ページの表示確認

テーマXMLの作成

人気の投稿

このブログを検索

ごあいさつ

ブログ アーカイブ

ラベル

ブログアーカイブ