Blogger Templateを自作する。 : Candielost

GoogleがGoogle Driveの簡易Hosting Serviceを終了するとのことで、このBlogも一部ファイルをGoogle Driveに置いているので、いろいろ対応せなあかんなぁとか思いながら半年ぐらい放置していたのだけど、越年してしまったので、いっそTemplateごと作りなおそうと思ってやったことのメモ。

もともとこのBlogでは、標準Templateの一番シンプルなやつのCSSを一部修正して使っていたのだが、一番シンプルなTemplateが実のところ全然シンプルじゃないし、改造するのが面倒くさいので、もっと構造が単純なやつが欲しいと思っていたんだよね。

作り方は、主にここの記事を参考にした。

まず、HTMLでHeaderやSidebarなどの基本レイアウトを書いて、そこにSectionタグ（b:section）を置くと、ダッシュボードのレイアウトタブでWidgetを自由に配置できるようになる。max-widgetで置けるWidgetの最大値を指定、"showaddelement='no'"指定でWidgetの追加不可になる。

複数のAttributeを追加するときは、間に半角スペースを挟まないとエラーになるので注意。

Sectionの直下にはWidgetしか置けない。
HeaderやBlogなどの基本WidgetはTemplateに直接書き込んで、”Locked=true”指定しておくと位置固定となり、レイアウトタブで配置を変更できなくなる。Sectionタグの"showaddelement='no'"と組み合わせてレイアウトを固定したいときに使う。

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE HTML>
<html>
  <head>
    <title>
      <b:if cond='data:blog.pageType == &quot;item&quot;'>
          <b:eval expr='data:blog.pageName ? data:blog.pageName : &quot;タイトル未設定&quot;'/> : <data:blog.title/>
      <b:else/>
        <data:blog.pageTitle/>
      </b:if>
    </title> 
    <b:skin><![CDATA[[/*ここにレイアウト用のCSSを書く。*/]]></b:skin>
  </head>
  <body>
    <style></style>
    <div class='wrapper'><div class='wrapper-inner'>
      <div class='header-wrapper'>
        <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
          <b:widget id='Header1' locked='true' title='Candielost (Header)' type='Header'/>
        </b:section>
      </div>
      <div class='content-wrapper'>
        <div class='main-content'>
          <b:section id='mainSection'>
            <b:widget id='Blog1' locked='true' title='ブログの投稿' type='Blog' version='1'/>
          </b:section>
        </div>
        <b:if cond='data:blog.isMobile'>
        <b:else/>
            <div class='sidebar'>
            <b:if cond='data:blog.pageType in {&quot;index&quot;, &quot;item&quot;}'>
              <b:section id='sidebar'/>
            </b:if>
          </div>
        </b:if>
      </div>
      <div class='footer-wrapper'>
        <b:section id='footer' preferred='yes'/>
      </div>
    </div></div>
  </body>
</html>

b:skinタグは必須。ここにCDATAセクションで囲ってCSSを書く。ただ、ここに書いたstyle指定はレイアウトタブの表示にも反映される?ので、複雑なレイアウトを組むときは、別にstyleタグを用意したほうが無難だと思う。b:skin内のCSSにはレイアウトタブ専用のstyle指定を、#layoutセレクタを使用して書く。

  html{font: 14px Sans-serif; line-height: 1.3;}
  body{margin: 0; padding: 0; border-style: none; overflow: hidden;}
  @media(max-width: 480px){
       body{font-size: 80%;}
  }
  div.wrapper{
      width: 100%;
      position: absolute; top: 0px; bottom: 0px;
      background-color: #fff;
      overflow-x: hidden; overflow-y: scroll;
      display: flex; flex-direction: column;
  }
  div.wrapper-inner{
      margin: 0 auto; max-width:1000px; width: 100%;
  }

  /* Header */
  div#header{
      width: 400px; height: 200px;
      margin-left: 200px; padding-top: 7em;
      text-align: center;
  }
  @media(max-width:850px){
      div#header{margin: 0 auto; width: auto;}
  }
  @media(max-width:480px){
      div#header{margin: 0 auto; width:100%; height: 120px;}
  }

  /*content-wrapper*/
  div.content-wrapper{
      width: 100%;
      margin: 0 auto;
      display: flex; flex-direction: row; justify-content: center;
  }
  @media(max-width:850px){
      div.content-wrapper{display: block; max-width: 700px;}
  }
  div.main-content{margin: 0; width: 100%; max-width: 700px;}

  /*sidebar*/
  div.sidebar{
      width: auto; max-width: 370px; padding: 0 20px 0 0;
  }
  @media(max-width:850px){
      div.sidebar{display: none;}
  }

  /*footer-wrapper*/
  div.footer-wrapper{padding: 2em 0 2.8em 0;}

b:skinタグ内。

  #layout div.content-wrapper{
      display:flex;
      flex-direction:row;
  }
  #layout div.main-content{
      width:100%;
  }
  #layout div.sidebar{
      width:320px;
  }

headタグ内。

  <b:include data='blog' name='all-head-content'/>
  <title>
    <b:if cond='data:blog.pageType == &quot;item&quot;' >
      <b:eval expr='data:blog.pageName ? data:blog.pageName : &quot;タイトル未設定&quot;' /> : <data:blog.title/>
    <b:else/>
      <data:blog.pageTitle/>
    </b:if>
  </title>

BlogWidget。
b:includable id='main' 以下の内容がHTMLに展開されるので、改造するときはここをいじる。
b:include name='※※'というタグはb:includable id='※※'以下のレイアウト定義を展開するマクロ。

<hr class='separator'/>
<b:loop values='data:posts' var='post'>
  <section class='post'>
    <b:if cond='data:blog.pageType == &quot;index&quot;'>
      <h1 class='post-title'><a expr:href='data:post.url'>
        <b:eval expr='data:post.title? data:post.title : &quot;タイトル未設定&quot;'/>
      </a></h1>
    <b:else/>
      <h1 class='post-title'>
          <b:eval expr='data:post.title? data:post.title : &quot;タイトル未設定&quot;'/>
      </h1>
    </b:if>
    <b:include name='timestamp'/>
    <section class='post-body'><data:post.body/></section>
    <b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
        <a expr:href='data:post.url' expr:title='data:post.title'>
          <data:post.jumpText/>
        </a>
      </div>
    </b:if>
    <b:include name='post_footer'/>
  </section>
  <hr class='separator'/>
</b:loop>
<b:include name='nextprev'/>
<hr class='separator'/>

記事の公開日を展開するデータタグ、dateHeaderは使い勝手が悪いので、代わりにtimestampISO8601を使ってjavascriptで自前処理するほうが楽。

<b:includable id='timestamp'>
  <div class='timestamp updated' expr:timestamp='data:post.timestampISO8601'>
    <script type='text/javascript'>
      var d = "<data:post.timestampISO8601/>".split(/[-T:]/g);
      document.write('公開日: '+d[0]+'年'+d[1]+'月'+d[2]+'日 '+d[3]+':'+d[4]);
    </script>
  </div>
</b:includable>

ひとまず完成。後は追々記事更新しつつ(するのか？)直していこう。

Candielost

Blogger Templateを自作する。

読まれている記事