お問い合わせ

何を探していますか？

管理者
の上2025年9月25日
212 ビュー

初心者向けBloggerテーマ作成ガイド：Bloggerの空白ページ

このBloggerテーマ作成初心者向けガイドでは、Bloggerで使用されるXMLコードの基本構造と、CSSをカスタマイズして美しくレスポンシブなブログデザインを作成する方法を解説します。また、ヘッダー、コンテンツ、サイドバー、フッターなどの主要要素に加え、Bloggerの様々なウィジェットの使い方例も紹介することで、読者が理解しやすく、独自のテーマ開発に応用しやすいようにしています。
空のBloggerテーマ
11 分読む

Bloggerテーマ作成ガイド

目次 見せる

このBloggerテーマ作成初心者向けガイドでは、Bloggerで使用されるXMLコードの基本構造と、CSSをカスタマイズして美しくレスポンシブなブログデザインを作成する方法を解説します。また、ヘッダー、コンテンツ、サイドバー、フッターなどの主要要素に加え、Bloggerの様々なウィジェットの使い方例も紹介することで、読者が理解しやすく、独自のテーマ開発に応用しやすいようにしています。

HTMLで「本当に空」の空白ページを作成する

1. コードBloggerテーマ空白Blogger空白ページ

<?xml version="1.0" encoding="UTF-8" ?>
<html 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='IE=EmulateIE7' http-equiv='X-UA-Compatible'/> 
  <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=1100' name='viewport'/> 
  </b:if> 
  <b:include data='blog' name='all-head-content'/>
  <title><data:blog.pageTitle/></title>
  <b:skin>
   <![CDATA[/* 
    ----- css Yours here -----
   ]]>
  </b:skin>
 </head>
 <body>
  <b:section class='main' id='main' showaddelement='yes'/>
  <!-- Please Keep The Credits -->
  <center><a href="//siammakemoney.com/">siammakemoney.com/</a></center>
 </body>
</html>

—– css ここにあなたの css を入力してください —– ここにあなたの css を入力してください。

基本的なコードを説明する

このコードは Bloggerテーマの最も基本的な構造 と共に：

  • Blogger HTML + 名前空間レイアウト
  • モバイル/デスクトップのメタ
  • ページ名などのブログデータの取得
  • CSSを挿入する領域
  • ウィジェットを挿入するためのセクション
  • 以下にクレジットを追加

シンプルで使いやすく、最小限の Blogger テンプレートを作成できます。

✔ このセクションでは、XML を宣言し、名前空間を定義します。

<?xml version="1.0" encoding="UTF-8" ?>
<html 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'>
  • xmlns:b = 次のような Blogger タグに使用されます: <b:if>, <b:section>
  • xmlns:データ =ブログなどからデータを抽出するために使用される データ:blog.pageTitle
  • xmlns:式 = さまざまな式を処理するために使用されます。

✔ Internet ExplorerをIE7のように表示するように設定する

<head>
  <meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>

✔ モバイル/デスクトップの分割画面サイズを設定する

<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=1100' name='viewport'/>
</b:if>
  • 携帯電話の場合 → レスポンシブなビューポートを使用します。
  • デスクトップの場合→幅を1100pxに設定します。

✔ Bloggerにコンテンツを含めるように指示する <head> ブロガー基準

<b:include data='blog' name='all-head-content'/>
  • 自動スクリプト、各種メタタグなど

✔ ブログページ名から Web ページに名前を付けます。

<title><data:blog.pageTitle/></title>
  • Blogger によって自動的に生成されるデータを使用します。

✔ テーマCSSを挿入するセクション

<b:skin>
   <![CDATA[/* 
    ----- css Yours here -----
   ]]>
</b:skin>
  • <![CDATA[ ]]> = CSS など、XML で直接処理できないコードを挿入するために使用されます。

✔ Bloggerのメインコンテンツ表示セクション

</head>
<body>
  <b:section class='main' id='main' showaddelement='yes'/>
  • <b:section> これはウィジェットを追加できるセクションです。
  • 表示要素='はい' = レイアウトにガジェットを追加できます。

✔ HTML構造を閉じる

</body>
</html>

2. Bloggerテーマ（サイドバーなし）

<?xml version="1.0" encoding="UTF-8" ?>
<html 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='IE=EmulateIE7' http-equiv='X-UA-Compatible'/> 

  <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=device-width, initial-scale=1.0' name='viewport'/> 
  </b:if> 

  <b:include data='blog' name='all-head-content'/>
  <title><data:blog.pageTitle/></title>

  <link href='https://fonts.googleapis.com/css2?family=Kanit:wght@400;600&amp;display=swap' rel='stylesheet'/>

  <b:skin><![CDATA[
    /* Reset */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: 'Kanit', sans-serif;
      background: #f7f9fc;
      color: #333;
      line-height: 1.6;
    }

    a {
      color: inherit;
      text-decoration: none;
      transition: color 0.3s;
    }
    a:hover {
      color: #008f7a;
    }

    header {
      background: #ffffff;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
      padding: 15px 30px;
      position: sticky;
      top: 0;
      z-index: 100;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    header h1 {
      font-size: 1.5rem;
      font-weight: 600;
      color: #008f7a;
    }

    nav ul {
      list-style: none;
      display: flex;
      gap: 20px;
    }

    nav li {
      font-weight: 500;
    }

    .container {
      max-width: 1100px;
      margin: 30px auto;
      padding: 0 15px;
    }

    /* Blog Post Card */
    .post-card {
      background: #fff;
      border-radius: 16px;
      padding: 20px;
      margin-bottom: 20px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.05);
      transition: transform 0.3s;
    }
    .post-card:hover {
      transform: translateY(-4px);
    }

    .post-card h2 {
      font-size: 1.4rem;
      margin-bottom: 10px;
      color: #222;
    }
    .post-card p {
      color: #666;
      font-size: 1rem;
    }

    /* Footer */
    footer {
      background: #222;
      color: #eee;
      text-align: center;
      padding: 20px;
      margin-top: 40px;
    }

  ]]></b:skin>
</head>

<body>
  <!-- Header -->
  <header>
    <h1><data:blog.title/></h1>
    <nav>
      <ul>
        <li><a expr:href='data:blog.homepageUrl'>Home</a></li>
        <li><a href='#'>About</a></li>
        <li><a href='#'>Contact</a></li>
      </ul>
    </nav>
  </header>

  <!-- Content -->
  <div class="container">
    <b:section id='main' class='main' showaddelement='yes'>
      <b:widget id='Blog1' type='Blog' title='Blog Posts' visible='true'/>
    </b:section>
  </div>

  <!-- Footer -->
  <footer>
    <p>© <data:blog.title/> - Powered by Blogger</p>
    <p><a href='//siammakemoney.com' style='color:#00c9a7;'>siammakemoney.com</a></p>
  </footer>

</body>
</html>

<!-- Content -->
  <div class="container">
    <b:section id='main' class='main' showaddelement='yes'>
      <b:widget id='Blog1' type='Blog' title='Blog Posts' visible='true'/>
    </b:section>
  </div>

<!– Header –> ส่วนหัวเมนู

<!– Content –> ส่วนนี้คือการดึงโพสมาแสดง

<!– Footer –> ส่วนท้าย

🧱 ウェブサイトトップ（ヘッダー）

<header>
  <h1><data:blog.title/></h1>
  <nav>
    <ul>
      <li><a expr:href='data:blog.homepageUrl'>Home</a></li>
      <li><a href='#'>About</a></li>
      <li><a href='#'>Contact</a></li>
    </ul>
  </nav>
</header>

📰 コンテンツセクション

<div class="container">
  <b:section id='main' class='main' showaddelement='yes'>
    <b:widget id='Blog1' type='Blog' title='Blog Posts' visible='true'/>
  </b:section>
</div>

コンテンツセクション どのように機能しますか?

  • <b:section> = ウィジェットエリア（Blogger のレイアウトで配置）
  • <b:widget type="Blog"> = Bloggerの投稿を表示
  • Blogger は次のような内部 HTML を生成します。
    • ホームページの投稿リスト
    • 記事全文は投稿ページをご覧ください

📘 フッター

<footer>
  <p>© <data:blog.title/> - Powered by Blogger</p>
  <p><a href='//siammakemoney.com'>siammakemoney.com</a></p>
</footer>

2.1 様々なブロガーの構造

<?xml version="1.0" encoding="UTF-8" ?>
<html 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, title, CSS/JS -->
</head>

<body>
  <!-- header -->
  <!-- navigation -->
  <!-- main content -->
  <!-- sidebar -->
  <!-- footer -->
</body>
</html>

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
  <b:widget id='Header1' locked='true' title='Header' type='Header'/>
</b:section>

<b:section class='content' id='content' showaddelement='yes'>
  <b:widget id='Blog1' type='Blog' title='Blog Posts'/>
</b:section>

<b:section class='sidebar' id='sidebar' showaddelement='yes'>
  <b:widget id='Profile1' type='Profile' title='About Me'/>
</b:section>

<b:section class='footer' id='footer' showaddelement='yes'>
  <b:widget id='Attribution1' type='Attribution' title=''/>
</b:section>

2.2 Bloggerタイトルを追加する

<title><data:blog.pageTitle/></title>

3. テーマはサイドバー ガジェット/ウィジェットを追加します。

<?xml version="1.0" encoding="UTF-8" ?>
<html 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='IE=EmulateIE7' http-equiv='X-UA-Compatible'/> 
  <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=device-width, initial-scale=1.0' name='viewport'/> 
  </b:if> 

  <b:include data='blog' name='all-head-content'/>
  <title><data:blog.pageTitle/></title>

  <link href='https://fonts.googleapis.com/css2?family=Kanit:wght@400;600&amp;display=swap' rel='stylesheet'/>

  <b:skin><![CDATA[
    body {
      font-family: 'Kanit', sans-serif;
      background: #f7f9fc;
      color: #333;
      line-height: 1.6;
      margin: 0;
    }

    a { text-decoration: none; color: inherit; }

    header {
      background: #fff;
      padding: 15px 30px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
      position: sticky;
      top: 0;
      z-index: 100;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    header h1 { color: #008f7a; font-size: 1.5rem; }

    nav ul { display: flex; gap: 20px; list-style: none; }
    nav li { font-weight: 500; }

    .container {
      display: grid;
      grid-template-columns: 2fr 1fr; /* Main 2 ส่วน / Sidebar 1 ส่วน */
      gap: 20px;
      max-width: 1200px;
      margin: 30px auto;
      padding: 0 15px;
    }

    /* Post card */
    .post-card {
      background: #fff;
      border-radius: 12px;
      padding: 20px;
      margin-bottom: 20px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.05);
      transition: transform 0.3s;
    }
    .post-card:hover { transform: translateY(-4px); }
    .post-card h2 { font-size: 1.3rem; margin-bottom: 10px; }
    .post-card p { color: #666; }

    /* Sidebar */
    .sidebar {
      background: #fff;
      border-radius: 12px;
      padding: 20px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.05);
      height: fit-content;
    }
    .sidebar h3 { font-size: 1.2rem; margin-bottom: 15px; color: #008f7a; }

    /* Footer */
    footer {
      background: #222;
      color: #eee;
      text-align: center;
      padding: 20px;
      margin-top: 40px;
    }

  ]]></b:skin>
</head>

<body>
  <!-- Header -->
  <header>
    <h1><data:blog.title/></h1>
    <nav>
      <ul>
        <li><a expr:href='data:blog.homepageUrl'>Home</a></li>
        <li><a href='#'>About</a></li>
        <li><a href='#'>Contact</a></li>
      </ul>
    </nav>
  </header>

  <!-- Content -->
  <div class="container">
    <!-- Main -->
    <main>
      <b:section id='main' class='main' showaddelement='yes'>
        <b:widget id='Blog1' type='Blog' title='Blog Posts' visible='true'/>
      </b:section>
    </main>

    <!-- Sidebar -->
    <aside class="sidebar">
      <h3>Gadgets</h3>
      <b:section id='sidebar' class='sidebar-widgets' showaddelement='yes'/>
    </aside>
  </div>

  <!-- Footer -->
  <footer>
    <p>© <data:blog.title/> - Powered by Blogger</p>
    <p><a href='//siammakemoney.com' style='color:#00c9a7;'>siammakemoney.com</a></p>
  </footer>

  <!-- Back to top -->
  <button id="back-to-top" class="back-to-top">↑</button>

</body>
</html>

サイドバーガジェット/ウィジェット Bloggerテーマでは以下を追加する必要があります <b:section> 保管してください <body> それ以外 主要 （投稿表示欄）

✅ 3.1. XML宣言と名前空間セクション

<?xml version="1.0" encoding="UTF-8" ?>
<html 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'>
説明する
  • <?xml ...?> → Blogger が HTML に変換するために使用する XML ファイルであると言われています。
  • xmlns:b → 次のような Blogger タグに使用されます: <b:section>, <b:widget>
  • xmlns:データ → 次のようなデータを抽出するために使用される <data:blog.title/>
  • xmlns:式 → 次のような表現を挿入します expr:href='data:blog.url'

✅ 3.2. <head> ウェブサイトのヘッダー

3.2.1 古いInternet Explorerをサポート
<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
3.2.2 モバイル/デスクトップ ビューポート
<b:if cond='data:blog.isMobile'>
  <meta content='width=device-width,initial-scale=1.0,...' name='viewport'/>
<b:else/>
  <meta content='width=device-width, initial-scale=1.0' name='viewport'/>
</b:if>

どのように機能しますか?

  • 携帯電話からウェブサイトにアクセスする場合 → モバイルフレンドリービューポートを使用します。
  • デスクトップの場合→全画面表示にします。
3.2.3 Bloggerヘッダーの自動読み込み
<b:include data='blog' name='all-head-content'/>

と共に：

  • 記事メタ
  • オープングラフ
  • 基本スキーマ
  • 餌
    非常に重要なので削除しないでください。
3.2.4 ページ名を次のように取得する <title>
<title><data:blog.pageTitle/></title>
3.2.5 Google Fontsを読み込む
<link href="https://fonts.googleapis.com/css2?family=Kanit..." />

🎨3.3 すべてのCSS（内部 <b:skin>)

<b:skin><![CDATA[
  ... CSS ...
]]></b:skin>

Blogger には CSS を組み込む必要があります。 <b:skin> のみ

🧱 4. ウェブサイトのヘッダー

<header>
  <h1><data:blog.title/></h1>
  <nav>
    <ul>
      <li><a expr:href='data:blog.homepageUrl'>Home</a></li>
      <li><a href='#'>About</a></li>
      <li><a href='#'>Contact</a></li>
    </ul>
  </nav>
</header>
説明する
  • <data:blog.title/> → ブログ名
  • 左から右に並べられたメニュー
  • CSS スティッキーヘッダー

📰 5. コンテンツコンテナのレイアウト

<div class="container">
  <main>
    <b:section id='main'>
      <b:widget type='Blog'/>
    </b:section>
  </main>

  <aside class="sidebar">
    <h3>Gadgets</h3>
    <b:section id='sidebar'/>
  </aside>
</div>
5.1 メインコンテンツ
<b:widget type='Blog' />

それは Blogger の心臓部です。
見せる：

  • 投稿リスト
  • 記事全文
  • ページ付け
5.2 サイドバー
<b:section id='sidebar' ... />

次のようなレイアウトからウィジェットを追加できます。

  • 人気の投稿
  • HTML/JavaScript
  • ラベル
  • 広告

🧩 6. フッター

<footer>
  <p>© <data:blog.title/> - Powered by Blogger</p>
  <p><a href="//siammakemoney.com">...</a></p>
</footer>
説明する
  • ブログの年と名前を自動的に取得する
  • クレジットを追加
  • 背景色は黒です。

⬆️ 7. トップに戻るボタン

<button id="back-to-top" class="back-to-top">↑</button>

通常、次のような JS も必要です。


window.addEventListener('scroll', () => {
  document.getElementById('back-to-top').style.display =
    window.scrollY > 300 ? 'block' : 'none';
});


document.getElementById('back-to-top').onclick = () =>
  window.scrollTo({ top: 0, behavior: 'smooth' });
一部何をしてるんですか?
XML名前空間Bloggerタグを有効にする
ビューポートレスポンシブ
すべてのヘッドコンテンツBloggerからのSEO + Meta auto
CSレイアウト全体を設計する
ヘッダロゴ + メニュー
容器2列グリッド
ブログ1ブログ投稿を表示
サイドバー必要に応じてウィジェットを配置します。
フッター著作権表示
トップに戻る戻るボタン

4. Bloggerサイドバー左テーマコード+メニューの追加

<?xml version="1.0" encoding="UTF-8" ?>
<html 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='IE=EmulateIE7' http-equiv='X-UA-Compatible'/> 
  <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=device-width, initial-scale=1.0' name='viewport'/> 
  </b:if> 

  <b:include data='blog' name='all-head-content'/>
  <title><data:blog.pageTitle/></title>

  <link href='https://fonts.googleapis.com/css2?family=Kanit:wght@400;600&amp;display=swap' rel='stylesheet'/>

  <b:skin><![CDATA[
    body {
      font-family: 'Kanit', sans-serif;
      background: #f7f9fc;
      color: #333;
      line-height: 1.6;
      margin: 0;
    }

    a { text-decoration: none; color: inherit; }
    a:hover { color: #008f7a; }

    header {
      background: #fff;
      padding: 15px 30px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
      position: sticky;
      top: 0;
      z-index: 100;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    header h1 { color: #008f7a; font-size: 1.5rem; }
    nav ul { display: flex; gap: 20px; list-style: none; }
    nav li { font-weight: 500; }

    .container {
      display: grid;
      grid-template-columns: 300px 1fr; /* Sidebar 300px / Main content flexible */
      gap: 20px;
      max-width: 1200px;
      margin: 30px auto;
      padding: 0 15px;
    }

    /* Post card */
    .post-card {
      background: #fff;
      border-radius: 12px;
      padding: 20px;
      margin-bottom: 20px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.05);
      transition: transform 0.3s;
    }
    .post-card:hover { transform: translateY(-4px); }
    .post-card h2 { font-size: 1.3rem; margin-bottom: 10px; }
    .post-card p { color: #666; }

    /* Sidebar */
    .sidebar {
      background: #fff;
      border-radius: 12px;
      padding: 20px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.05);
      height: fit-content;
    }
    .sidebar h3 { font-size: 1.2rem; margin-bottom: 15px; color: #008f7a; }

    /* Footer */
    footer {
      background: #222;
      color: #eee;
      text-align: center;
      padding: 20px;
      margin-top: 40px;
    }

    /* Back to top */
    .back-to-top {
      position: fixed;
      bottom: 20px;
      right: 20px;
      background: #008f7a;
      color: #fff;
      border: none;
      border-radius: 50%;
      width: 50px;
      height: 50px;
      font-size: 20px;
      cursor: pointer;
      display: none;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    }
    .back-to-top:hover {
      background: #006f5a;
    }

    /* Responsive */
    @media screen and (max-width: 900px) {
      .container {
        grid-template-columns: 1fr;
      }
      .sidebar { margin-bottom: 20px; }
    }
  ]]></b:skin>
</head>

<body>
  <!-- Header -->
  <header>
    <h1><data:blog.title/></h1>
    <nav>
      <ul>
        <li><a expr:href='data:blog.homepageUrl'>Home</a></li>
        <li><a href='#'>About</a></li>
        <li><a href='#'>Contact</a></li>
      </ul>
    </nav>
  </header>

  <!-- Container: Sidebar + Main -->
  <div class="container">
    <!-- Sidebar -->
    <aside class="sidebar">
      <h3>Menu &amp; Gadgets</h3>
      <b:section id='sidebar' class='sidebar-widgets' showaddelement='yes'/>
    </aside>

    <!-- Main content -->
    <main>
      <b:section id='main' class='main' showaddelement='yes'>
        <b:widget id='Blog1' type='Blog' title='Blog Posts' visible='true'/>
      </b:section>
    </main>
  </div>

  <!-- Footer -->
  <footer>
    <p>© <data:blog.title/> - Powered by Blogger</p>
    <p><a href='//siammakemoney.com' style='color:#00c9a7;'>siammakemoney.com</a></p>
  </footer>

  <!-- Back to top -->
  <button id="back-to-top" class="back-to-top">↑</button>

  <script>
    const btn = document.getElementById('back-to-top');
    window.addEventListener('scroll', () => {
      btn.style.display = window.scrollY > 200 ? 'flex' : 'none';
    });
    btn.addEventListener('click', () => {
      window.scrollTo({ top: 0, behavior: 'smooth' });
    });
  </script>
</body>
</html>

<!– Sidebar (ซ้าย) –>

<!– Main content (ขวา) –>

🔷 このテーマのコード概要

これは 2列のBloggerテンプレート（サイドバー+メイン） と：

  • ヘッダー固定
  • サイドバーの固定幅（300ピクセル）
  • メインコンテンツは柔軟
  • ポストカードのデザイン
  • フッター
  • トップに戻るボタン
  • レスポンシブレイアウト
  • ポストを通す <b:widget type="Blog">

🔶 4.1. XML宣言と名前空間セクション

<?xml version="1.0" encoding="UTF-8" ?>
<html 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'>

✔ 説明

これは ブロガーが使用しなければならない主な構造:

名前空間義務
b:次のような Blogger のシステム タグを使用します。 <b:section>, <b:widget>
データ：次のようなデータを取得します <data:blog.title/>
式:次のような表現を書きます。 expr:href="data:blog.homepageUrl"

🔶 4.2. <head> — ウェブヘッダー

✔4.2.1 モバイル用ビューポート
<b:if cond='data:blog.isMobile'>
  <meta content="width=device-width, initial-scale=1.0" />
<b:else/>
  <meta content="width=device-width, initial-scale=1.0" />
</b:if>
✔ 4.2.2 Bloggerの自動生成メタとスクリプトを追加する
<b:include data='blog' name='all-head-content'/>

Blogger は以下を自動的に追加します。

  • ページのタイトル/説明
  • オープングラフ
  • 記事スキーマ
  • 正規URL
  • 餌
  • CSSウィジェット

重要な部分ですので削除しないでください。

✔ 4.2.3 ページタイトル
<title><data:blog.pageTitle/></title>

次のようにページごとに名前を取得します。

  • ホーム → ブログ名
  • 投稿表示ページ → 投稿名
  • ラベル付きページ → ラベル名
✔ 4.2.4 Google Fontsをダウンロード
<link href="https://fonts.googleapis.com/css2?family=Kanit..." />

サイト全体のフォントを設定する

🔶 4.3. <b:skin> — テンプレートのCSSセクション

BloggerはすべてのCSSを内部に含める必要があります <b:skin><![CDATA[ ... ]]></b:skin>

✔ 4.3.1 ウェブサイトの主なスタイルを定義します。
body {
  font-family:'Kanit';
  background:#f7f9fc;
  color:#333;
}

背景色、フォント、テキスト色を設定する

✔ 4.3.2 ヘッダースティッキー
header {
  position:sticky;
  top:0;
  background:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,0.05);
}

スクロール時→ヘッダーが上部に付きます

✔ 4.3.3 ナビゲーションメニュー
nav ul {
  display:flex;
  gap:20px;
  list-style:none;
}

Flexboxを使った水平メニュー

✔ 4.3.4 2列レイアウト構造
.container {
  display:grid;
  grid-template-columns: 300px 1fr;
  gap:20px;
}
カラム幅
サイドバー300ピクセル固定
メインコンテンツ1fr（完全に伸縮性）
✔ 4.3.5 ポストカード（記事リスト用）
.post-card {
  background:#fff;
  border-radius:12px;
  padding:20px;
  box-shadow:0 4px 12px rgba(0,0,0,0.05);
}

美しいポストカードを作成する

✔ 4.3.6 サイドバーボックス
.sidebar {
  background:#fff;
  border-radius:12px;
  padding:20px;
}

サイドバーはカードのようなスタイルです。

✔ 4.3.7 フッター
footer {
  background:#222;
  color:#eee;
  text-align:center;
}
✔ 4.3.8 トップに戻るボタン
.back-to-top {
  position:fixed;
  bottom:20px;
  right:20px;
  background:#008f7a;
  width:50px;
  height:50px;
  border-radius:50%;
  display:none;
}

とりあえずボタンを非表示にします。

✔4.3.9 レスポンシブモバイル
@media (max-width:900px) {
  .container {
    grid-template-columns:1fr;
  }
}

モバイル → 1列に変更

🔶 4.4 部 <body>

✔ ヘッダー
<header>
  <h1><data:blog.title/></h1>
  <nav>
    <ul>
      <li><a expr:href='data:blog.homepageUrl'>Home</a></li>

ブログ名を引いて表示する

✔ レイアウト: サイドバー + メイン
<div class="container">
📌 サイドバー
<aside class="sidebar">
  <b:section id='sidebar'/>
</aside>

は ウィジェット配置エリア のような：

  • 人気投稿
  • ラベル
  • HTML/JS
  • プロフィール

Bloggerのレイアウトページから追加されたユーザー

📌 メインコンテンツ
<main>
  <b:section id='main'>
    <b:widget type='Blog'/>
  </b:section>
</main>

これがテンプレートの核心です。
画面：

  • 投稿リスト
  • 記事全文
  • 写真
  • ページネーション
  • コメントフォーム
✔ フッター
<footer>
  © <data:blog.title/>
</footer>
✔ トップに戻るボタン + スクリプト
ボタン
<button id="back-to-top" class="back-to-top">↑</button>
作業スクリプト
window.addEventListener('scroll', () => {
  btn.style.display = window.scrollY > 200 ? 'flex' : 'none';
});

条件: 下にスクロール > 200px → ボタンを表示

btn.addEventListener('click', () => {
  window.scrollTo({ top: 0, behavior: 'smooth' });
});

クリックすると→スムーズにトップへ戻る

✨ このコードの概要

一部どのように機能しますか?
XML名前空間Bloggerタグを有効にする
ビューポートレスポンシブなウェブサイトを作る
すべてのヘッドコンテンツ自動SEOメタ
ヘッダスティッキー + ナビゲーション
容器2列グリッドレイアウト
サイドバーレイアウトページからウィジェットを配置する
メインセクションブログ投稿を自動的に表示する
CSUI全体を設計する
レスポンシブモバイル向けに最適化されたレイアウト
トップに戻る自動スクロールアップボタン

5. Bloggerのフル機能サイドバー（左右）

<?xml version="1.0" encoding="UTF-8" ?>
<html 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='IE=EmulateIE7' http-equiv='X-UA-Compatible'/> 
  <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=1200, initial-scale=1.0' name='viewport'/> 
  </b:if> 

  <b:include data='blog' name='all-head-content'/>
  <title><data:blog.pageTitle/></title>


  <link href='https://fonts.googleapis.com/css2?family=Kanit:wght@400;600&amp;display=swap' rel='stylesheet'/>

  <b:skin><![CDATA[
    /* ---------- Variables ---------- */
    :root {
      --primary-color: #008f7a;
      --layout-max-width: 1200px;
      --sidebar-width: 250px;
    }

    /* ---------- Reset ---------- */
    * { margin: 0; padding: 0; box-sizing: border-box; }

    body {
      font-family: 'Kanit', sans-serif;
      background: #f7f9fc;
      color: #333;
      line-height: 1.6;
    }

    a { text-decoration: none; color: inherit; }
    a:hover { color: var(--primary-color); }

    header {
      background: #fff;
      padding: 15px 30px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
      position: sticky;
      top: 0;
      z-index: 100;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    header h1 { color: var(--primary-color); font-size: 1.5rem; }
    nav ul { display: flex; gap: 20px; list-style: none; }
    nav li { font-weight: 500; }

    /* ---------- Layout ---------- */
    .container {
      display: grid;
      grid-template-columns: var(--sidebar-width) 1fr var(--sidebar-width);
      gap: 20px;
      max-width: var(--layout-max-width);
      margin: 30px auto;
      padding: 0 15px;
    }

    main { display: flex; flex-direction: column; }

    .post-card {
      background: #fff;
      border-radius: 12px;
      padding: 20px;
      margin-bottom: 20px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.05);
      transition: transform 0.3s;
    }
    .post-card:hover { transform: translateY(-4px); }
    .post-card h2 { font-size: 1.3rem; margin-bottom: 10px; }
    .post-card p { color: #666; }

    /* ---------- Sidebar ---------- */
    .sidebar {
      background: #fff;
      border-radius: 12px;
      padding: 20px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.05);
      height: fit-content;
    }
    .sidebar h3 { font-size: 1.2rem; margin-bottom: 15px; color: var(--primary-color); }

    /* ---------- Footer ---------- */
    footer {
      background: #222;
      color: #eee;
      text-align: center;
      padding: 20px;
      margin-top: 40px;
    }

    /* ---------- Back to Top ---------- */
    .back-to-top {
      position: fixed;
      bottom: 20px;
      right: 20px;
      background: var(--primary-color);
      color: #fff;
      border: none;
      border-radius: 50%;
      width: 50px;
      height: 50px;
      font-size: 20px;
      cursor: pointer;
      display: none;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    }
    .back-to-top:hover { background: darken(var(--primary-color), 10%); }

    /* ---------- Responsive ---------- */
    @media screen and (max-width: 1200px) {
      .container { grid-template-columns: 200px 1fr 200px; }
    }

    @media screen and (max-width: 900px) {
      .container { grid-template-columns: 1fr; }
      .sidebar { margin-bottom: 20px; }
    }
  ]]></b:skin>
</head>

<body>
  <!-- Header -->
  <header>
    <h1><data:blog.title/></h1>
    <nav>
      <ul>
        <li><a expr:href='data:blog.homepageUrl'>Home</a></li>
        <li><a href='#'>About</a></li>
        <li><a href='#'>Contact</a></li>
      </ul>
    </nav>
  </header>

  <!-- Container: Left Sidebar + Main + Right Sidebar -->
  <div class="container">
    <!-- Left Sidebar -->
    <aside class="sidebar">
      <h3>Left Menu</h3>
      <b:section id='left-sidebar' class='sidebar-widgets' showaddelement='yes'/>
    </aside>

    <!-- Main Content -->
    <main>
      <b:section id='main' class='main' showaddelement='yes'>
        <b:widget id='Blog1' type='Blog' title='Blog Posts' visible='true'/>
      </b:section>
    </main>

    <!-- Right Sidebar -->
    <aside class="sidebar">
      <h3>Right Menu</h3>
      <b:section id='right-sidebar' class='sidebar-widgets' showaddelement='yes'/>
    </aside>
  </div>

  <!-- Footer -->
  <footer>
    <p>© <data:blog.title/> - Powered by Blogger</p>
    <p><a href='//siammakemoney.com' style='color:#00c9a7;'>siammakemoney.com</a></p>
  </footer>

  <!-- Back to Top -->
  <button id="back-to-top" class="back-to-top">↑</button>

  <script>
    const btn = document.getElementById('back-to-top');
    window.addEventListener('scroll', () => {
      btn.style.display = window.scrollY > 200 ? 'flex' : 'none';
    });
    btn.addEventListener('click', () => {
      window.scrollTo({ top: 0, behavior: 'smooth' });
    });
  </script>
</body>
</html>

–primary-color: #008f7a; /* 基本色、編集可能 /

–レイアウト最大幅: 1200px; / レイアウト幅を調整する /

–サイドバーの幅: 250px; / サイドバーの幅 */

6. 箇条書き（先頭のピリオド）を削除します。

  • （箇条書きはこんな感じ）
ul, ol {
  list-style: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}

7. シンプルな 20×20 ピクセルの画像を追加します。

<img src="https://example.com/icon.png" alt="icon" width="20" height="20">

8. Font Awesome アイコンを簡単に追加します。

8.1 Font Awesome CDNを追加する（まだ利用できない場合）

<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css' rel='stylesheet'/>

8.2 Font Awesome アイコンを追加し、サイズを変更します。

<i class="fa-solid fa-house" style="font-size:20px;"></i>

8.2 Font Awesomeアイコンに色を追加する

<style>
.icon-small {
  font-size: 20px;
  color: #000; /* เปลี่ยนสีไอคอนได้ */
}
</style>

<i class="fa-solid fa-heart icon-small"></i>
&amp;

9. Blogger テーマは美しいトップ メニューを追加します。

<?xml version="1.0" encoding="UTF-8" ?>
<html 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='IE=EmulateIE7' http-equiv='X-UA-Compatible'/> 
  <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=1100' name='viewport'/> 
  </b:if> 
  <b:include data='blog' name='all-head-content'/>
  <title><data:blog.pageTitle/></title>
<b:skin><![CDATA[
/* Reset body */
body {
  margin: 0;
  height: 10vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f4f4f4; /* สีพื้นหลัง */
}

/* Container เมนู */
.radio-inputs {
  position: relative;
  display: flex;
  border-radius: 1rem;
  background-image: linear-gradient(to right, #31c7c1, #499b87, #4a715b, #3d4a3b, #262724);
  box-sizing: border-box;
  font-size: 17px;
  width: 80%;
  padding: 1rem 1rem 0 1rem;
}

/* ซ่อน radio จริง */
.radio-inputs .radio input {
  display: none;
}

/* ปุ่มเมนู */
.radio-inputs .radio .name {
  display: flex;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
  border: none;
  padding: 0.5rem 0.8rem;
  color: #fff;
  transition: all 0.15s ease-in-out;
  position: relative;
}

/* ปุ่มที่ถูกเลือก */
.radio-inputs .radio input:checked + .name {
  background-color: #FFFFFF;
  font-weight: 600;
  color: #000;
}

/* Hover */
.radio-inputs .radio input + .name:hover {
  color: #fff;
}
.radio-inputs .radio input:checked + .name:hover {
  color: #000;
}

/* มุมโค้งสวย ๆ เวลาเลือก */
.radio-inputs .radio input:checked + .name::after,
.radio-inputs .radio input:checked + .name::before {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  bottom: 0;
}

.radio-inputs .radio input:checked + .name::after {
  right: -10px;
  border-bottom-left-radius: 300px;
  box-shadow: -3px 3px 0px 3px #FFFFFF;
}
.radio-inputs .radio input:checked + .name::before {
  left: -10px;
  border-bottom-right-radius: 300px;
  box-shadow: 3px 3px 0px 3px #FFFFFF;
}
]]></b:skin>

 </head>
 <body>
  <!-- Navigation Menu -->
  <div class='radio-inputs'>
    <label class='radio'>
      <input checked='' name='radio' type='radio'/>
      <span class='name'>Home</span>
    </label>
    
    <label class='radio'>
      <input name='radio' type='radio'/>
      <span class='name'>HTML</span>
    </label>

    <label class='radio'>
      <input name='radio' type='radio'/>
      <span class='name'>CSS</span>
    </label>
    
    <label class='radio'>
      <input name='radio' type='radio'/>
      <span class='name'>JS</span>
    </label>
    
    <label class='radio'>
      <input name='radio' type='radio'/>
      <span class='name'>PHP</span>
    </label>
    
    <label class='radio'>
      <input name='radio' type='radio'/>
      <span class='name'>Name</span>
    </label>
    
    <label class='radio'>
      <input name='radio' type='radio'/>
      <span class='name'>Menu</span>
    </label>
  </div>
  <!-- Main Section -->
  <b:section class='main' id='main' showaddelement='yes'/>
  

</body>

</html>

สามารถใส่ script ก่อนปิด </body> หรือ หาแท็ก <head>

使用 ＆ その代わり ＆ いつも

テンプレートには少なくとも 1 つの b:section タグが含まれている必要があります。

10. Bloggerテンプレートコード（SEO対策済み）

<?xml version="1.0" encoding="UTF-8" ?>
<html 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='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>

  <!-- VIEWPORT -->
  <b:if cond='data:blog.isMobile'>
    <meta name='viewport' content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0'/>
  <b:else/>
    <meta name='viewport' content='width=1100'/>
  </b:if>

  <!-- Blogger HEAD -->
  <b:include data='blog' name='all-head-content'/>

  <!-- TITLE -->
  <title><data:blog.pageTitle/></title>

  <!-- ==========================
        SEO META TAGS
       ========================== -->

  <!-- Meta Description -->
  <meta name="description" expr:content="data:blog.metaDescription"/>

  <!-- Keywords -->
  <meta name="keywords" content="blogger, seo, website, travel, tutorial"/>

  <meta name="author" content="Your Name"/>

  <!-- Open Graph (Facebook / LINE) -->
  <meta property="og:title" expr:content="data:blog.pageTitle"/>
  <meta property="og:description" expr:content="data:blog.metaDescription"/>
  <meta property="og:type" content="website"/>
  <meta property="og:url" expr:content="data:blog.url"/>
  <meta property="og:image" expr:content="data:blog.postImageUrl"/>

  <!-- Twitter Card -->
  <meta name="twitter:card" content="summary_large_image"/>
  <meta name="twitter:title" expr:content="data:blog.pageTitle"/>
  <meta name="twitter:description" expr:content="data:blog.metaDescription"/>
  <meta name="twitter:image" expr:content="data:blog.postImageUrl"/>

  <!-- Canonical -->
  <link rel="canonical" expr:href="data:blog.url"/>

  <!-- Robots -->
  <meta name="robots" content="index, follow"/>
  <meta name="googlebot" content="index, follow"/>

  <!-- Schema.org -->
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "WebSite",
    "url": "<data:blog.homepageUrl/>",
    "name": "<data:blog.title/>",
    "alternateName": "<data:blog.title/>"
  }
  </script>

  <!-- Favicon -->
  <link rel="icon" type="image/png" href="YOUR-FAVICON-URL.png"/>

  <!-- ==========================
        CSS ZONE
       ========================== -->
  <b:skin>
    <![CDATA[
      /* ----- Your CSS Here ----- */
      body { font-family: sans-serif; }
    ]]>
  </b:skin>

</head>

<body>

  <!-- MAIN CONTENT SECTION -->
  <b:section class='main' id='main' showaddelement='yes'/>

  <!-- CREDITS -->
  <center><a href="//siammakemoney.com/">siammakemoney.com/</a></center>

</body>
</html>
Facebookコメントボックス
管理者
の上2025年9月25日
212 ビュー
共有
前の記事

15 の無料プラグインの管理リンクの管理

次を読む

3 最小読み取り
テキストをコピーしないでください。
管理者
の上2025年3月22日
1.6K ビュー

コピーを防止するための 10 個の JavaScript コード ❌ ウェブサイト上のテキストをコピーしないでください。

ユーザーによるコンテンツのコピーや複製を防止したい場合は、「テキストをコピーしないでください」。ウェブサイトでは、JavaScript を使用してテキスト上のドラッグを防ぐことができます…
新しいオンライン ツールに関する最も包括的なリソースへようこそ。教育のための厳選されたコンテンツを探索します。それをあなた自身のオンライン収入の創出に応用してください。
© 2024 — siammakemoney。無断複写・転載を禁じます。

さまざまなアイコン フラットアイコン フリーピック