Blogger でサイト作成

最小限のコードはこんな感じ。

<?xml version="1.0" encoding="UTF-8" ?>
<html b:css='false' b:defaultwidgetversion='2' b:js='false' b:layoutsVersion='3' b:responsive='true' b:templateUrl='' b:templateVersion='1.0.0' 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>
  <b:skin></b:skin>
</head>
<body>
  <b:section id='main' showaddelement='yes'/>
</body>
</html>

サンプル

サンプルコード

<?xml version="1.0" encoding="UTF-8" ?>
<html b:css='false' b:defaultwidgetversion='2' b:js='false' b:layoutsVersion='3' b:responsive='true' b:templateUrl='' b:templateVersion='1.0.0' 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>
  <b:skin><![CDATA[]]></b:skin>
</head>
<body>
  <b:section id='main' showaddelement='yes'/>
</body>
<head>
    <title>Blogger で最小限の CSS, JavaScript テスト</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            text-align: center;
            margin: 50px;
        }
        .box {
            width: 100px;
            height: 100px;
            background-color: blue;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: auto;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h1>Blogger で最小限の CSS, JavaScript テスト</h1>
    <div class='box' onclick='changeColor()'>Test</div>
    
    <script>
        function changeColor() {
            const box = document.querySelector(&#39;.box&#39;);
            box.style.backgroundColor = box.style.backgroundColor === &#39;blue&#39; ? &#39;red&#39; : &#39;blue&#39;;
        }
    </script>
</body>
</html>

ねこうささんの記事。凄い分かりやすいです。ありがとうございます。

公式ヘルプ

以下自分用サンプル

グローバルな設定値、現在の表示状態の取得のサンプル

<?xml version="1.0" encoding="UTF-8" ?>
<html b:css='false' b:defaultwidgetversion='2' b:js='false' b:layoutsVersion='3' b:responsive='true' b:templateUrl='' b:templateVersion='1.0.0' 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>
  <b:skin><![CDATA[]]></b:skin>
</head>
<body>
  <b:section id='main' showaddelement='yes'/>
</body>
<head>
    <title>Blogger で最小限の CSS, JavaScript テスト</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            text-align: center;
            margin: 50px;
        }
        .box {
            width: 100px;
            height: 100px;
            background-color: blue;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: auto;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h1>Blogger で最小限の CSS, JavaScript テスト</h1>
    <div class='box' onclick='changeColor()'>Test</div>
    
    <script>
        var blogUrl = "<data:view.url/>"; //これ
        var blogTitle = "<data:blog.title/>"; //これ
        var pageType = "<data:blog.pageType/>"; //これ
        function changeColor() {
            const box = document.querySelector(".box");
            box.style.backgroundColor = box.style.backgroundColor === &#39;blue&#39; ? &#39;red&#39; : &#39;blue&#39;;
        }
      	console.log(blogUrl);
      	console.log(blogTitle);
      	console.log(pageType);
    </script>
</body>
</html>

ウィジェットデータの取得のサンプル

body の中に以下のコードを入れて Blogger の保存ボタンを押すと書き換えられてしまう。よくわからんけどちゃんと動くのでそれでいいか。投稿、ページ両方ともちゃんと表示できる。

 <b:section id='main' showaddelement='yes'>
    <b:widget id='Blog1' locked='false' title='ブログ投稿' type='Blog'>
      <b:includable id='main' var='top'>
        <div class='blog-posts hfeed'>
          <b:loop values='data:posts' var='post'>
            <div class='post'>
              <h2 class='post-title'>
                <data:post.title/>
              </h2>
              <div class='post-body' id='post-body-content'>
                <data:post.body/>
              </div>
            </div>
          </b:loop>
        </div>
      </b:includable>
    </b:widget>
  </b:section>

さっき作った「ウィジェットデータの取得のサンプル」のコードを保存して Blogger によって自動的に書き換えられた状態から
<b:includable id='main' var='top'>~</b:includable>のところを次のコードで置き換えると、投稿やページの URL のときはそれを表示、そうでないときは(つまりトップページのときは)投稿のリストを表示するようにできた。

<b:includable id='main' var='top'>
  <div class='blog-posts hfeed'>
    <b:if cond='data:view.isHomepage'>
      <ul>
        <b:loop values='data:posts' var='post'>
          <li>
            <a expr:href='data:post.url'>
              <data:post.title/>
            </a>
          </li>
        </b:loop>
      </ul>
      <ul>
        <b:loop values='data:pages' var='page'>
          <li>
            <a expr:href='data:page.url'>
              <data:page.title/>
            </a>
          </li>
        </b:loop>
      </ul>
    <b:else/>
      <b:loop values='data:posts' var='post'>
        <div class='post'>
          <h2 class='post-title'>
            <data:post.title/>
          </h2>
          <div class='post-body' id='post-body-content'>
            <data:post.body/>
          </div>
        </div>
      </b:loop>
    </b:if>
  </div>
</b:includable>

シンプルだが一応完成？

投稿は Blogger の投稿画面から編集できるけど、トップページの編集は theme 開かなあかんのが難儀やな、、、
トップページ

test投稿

https://github.com/kt1917/forsharing/blob/main/SimpleBloggerTheme.xml

このスクラップは16日前にクローズされました