BloggerのHTMLを徹底紹介！テーマをフルカスタマイズしてオリジナルブログを作る！

Blogger テーマをフルカスタマイズ

皆さんはブログサービスは何を使っていますか？

私は断然 Blogger 派です。
このブログも Blogger で書いています。

無料なのに、

多彩なテンプレートからブログのデザインを選択できる
カスタムドメインが使用可能
サードパーティのブログエディタからも投稿可能
広告掲載も可能
同じ Googleのサービスなので、アドセンスの申請が楽チン♪
画像の容量に制限がない！？

という具合です。
使わない手はありません！

この記事は、Blogger のテーマを自分好みにフルカスタマイズしたい人に、オススメの記事です。
テーマの編集方法、Blogger 固有タグの紹介、簡単なデザインのサンプルを、紹介していきます。

はじめに

Blogger の HTML は、管理画面の [テーマ] -> [HTMLの編集]から変更する事ができます。
ここで直接編集してもいいですが、使いづらいので、HTML コピーして、エディタで編集した方がいいです。

最小構成のHTML

デフォルトテーマの HTML から色々削ぎ落として、ブログタイトルだけ表示する、最小構成の HTML にしたのが、以下のコードです。
この HTML を今後編集していきます。

<?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 name="viewport" content="width=device-width, initial-scale=1" />
  <title><data:blog.pageTitle/>
  </title>
  <b:skin>
    <![CDATA[
      body { font-size: 12px; }
    ]]>
  </b:skin>
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous" />
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</head>
<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

  <!-- ヘッダー -->
  <b:section class='header' id='header'>
    <b:widget type='Header' id='Header1' expr:title='data:blog.title'>
      <b:includable id='main'>
        <h1 class='title'><data:title/>
        </h1>
      </b:includable>
    </b:widget>
  </b:section>
  
 </body>
</html>

※ レイアウト調整の為に、Bootstrap を CDN経由で使用しています。

基本知識

テーマを編集するには、Blogger 固有のタグについて、ある程度知識が必要です。
まずは、基礎知識を身につけましょう♪

それでは説明していきます。

Blogger のタグには、大きく「ページ要素タグ」「ウィジェットタグ」があり、この２つと、HTML を駆使してブログをデザインします。

「ページ要素タグ」

セクション　<b:section>

ページ内にあるヘッダ、メインエリア、サイドバー、フッターなどの領域を定義するタグです。
セクションの子タグには、後述するウィジェット <widget> を１以上設定します。

ウィジェット　<b:widget>

ウィジェットは、ブログの投稿、プロフィールなど、コンテンツを表示する為の、プレースフォルダです。
widget タグの type 属性で、表示するコンテンツの種類を指定します。

Blogger で表示できるコンテンツには、以下のような物があります。

コンテンツの種類	type
ページヘッダー	Header
ブログの投稿	Blog
プロフィール	Profile
ブログのアーカイブ	BlogArchive
フィード	Feed
ラベル	Label
ブログを検索	BlogSearch

「ウィジェットタグ」

<b:widget> タグの中で使えるタグです。
コンテンツに表示するデータの定義や、部品化、繰り返し、条件分岐等の制御が行えます。

色々なタグがありますが、以下の４つのタグさえ抑えておけば OK です。

インクルード　<b:includable>　<b:include>

インクルードは、同じ HTML を複数の場所で再利用したり、特定の条件が満たされている場合にのみインクルードするようにしたりする場合に使います。

公式ドキュメントの例のままですが、使い方は以下の通りです。

<!-- id='main'の includable は、デフォルトで展開されます -->
<b:includable id='main'>
  <b:loop var='p' index='index' values='posts'>
	<!-- id='post' の includable をここに展開 -->
	<!-- cond で条件を書けば、条件に一致した場合のみ展開されます -->
    <b:include name='post' data='p' cond='index < 10'/>
  </b:loop>
</b:includable>
<!-- main 以外の includable は、宣言しただけでは展開されません。-->
<!-- include で指定されて初めて展開されます。 -->
<b:includable id='post' var='post'>
  タイトル: <data:post.title/>
</b:includable>

繰り返し　<b:loop>

トップページに表示するブログの記事、ラベルおよび、月別のブログアーカイブなど、繰り返しのコンテンツを表示する時に使います。

条件分岐　<b:if cond=“条件”> <b:elseif cond=“条件”> <b:else>

これは、簡単ですね。
条件に一致した時だけ、その中のコンテンツを表示する制御に使います。

データタグ　<data: ** />

ブログタイトル、記事タイトルなど、さまざまなデータを表示する為のタグです。

使用でるきデータは、ウィジェットの<b:widget>のタイプ毎に違います。
※ 詳しくはこちらのリンクで確認できます。

属性の条件式（expr:）

公式ドキュメントでは、以下のように定義されています。
「expr 属性を使用して、データディクショナリの値に基づいた属性値を設定できます。」

要は通常の HTMLに、動的なデータを設定したい場合、
<img src='data:post.firstImageUrl' />
ではなく、
<img expr:src='data:post.firstImageUrl' />
と書くという事です。

Blogger テーマの HTML構造

これまでの話をまとめると、Blogger のHTML構造は、以下のような感じになります。

トップページを作る

それでは、テーマを編集して行きたいと思います。
まずは、ブログの入り口となる、トップページからです。

完成後イメージ

トップページの完成イメージ

ブログでよく見かけるデザインですね！
記事と記事の間にインフィード広告を入れて、アドセンスにも対応して行きたいと思います。

[STEP1] 記事を表示する

まずは、主役のブログ記事を表示します。

トップページの記事には、以下の４つの項目を表示します。

記事タイトル
投稿日
本文の抜粋
サムネイル画像

HTML は、こんな感じです…

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
  ~~ ヘッダ部分のHTMLは省略 ~~

<!-- ブログ記事を表示する section -->
<b:section class='main' id='main' name='Main' showaddelement='no'>
  <b:widget id='Blog1' locked='true' title='ブログの投稿' type='Blog'>
    <!--デフォルトの includable -->
    <b:includable id='main' var='top'>
      <div class="container">
        <!--トップページに表示する記事の数だけ、b:loop で繰り返し -->
        <b:loop values='data:posts' var='post'>
          <!--id='TopPost'の includable をここにインクルード-->
          <b:include name='TopPost' data='post' />
        </b:loop>
      </div>
    </b:includable>

    <!--記事を表示する includable -->
    <b:includable id='TopPost' var='post'>
      <div class="row" style="margin-top:30px;">
        <div class="col-12 col-lg">
          <!--記事タイトル -->
          <h3><data:post.title/></h3>
          <!--投稿日 -->
          <div><data:post.dateHeader/></div>
          <!--本文の抜粋 -->
          <div><data:post.snippet/></div>
        </div>
        <div class="col-12 col-lg">
          <!--サムネイル-->
          <b:if cond='data:post.firstImageUrl'>
            <!--記事内に画像がある場合、最初のイメージをサムネイルとして表示 -->
            <img expr:alt='data:post.title' expr:src='data:post.firstImageUrl' expr:title='data:post.title' />
          <b:else/>
            <!--記事内に画像がない場合 -->
            <div>
              <div class="card" style="width: 18rem;">
                <div class="card-body" style="height:150px; background: #ddd;">
                  No Image
                </div>
              </div>
            </div>
          </b:if>
	    </div>  <!-- end of col -->
	  </div>  <!-- end of row -->
    </b:includable>
  </b:widget>
</b:section>
</body>

実際に表示させたイメージ

enter image description here

[STEP2] インフィード広告を表示する

アドセンスの審査に通過したら、広告を貼りましょう。

広告を表示するまでの手順は、以下の２つです。

まず <head> タグで、アドセンスの Javascript を読み込みます。

<head>
    ~~~~~~ 中略 ~~~~~~~
    <b:if cond='data:widgets.AdSense.any or data:blog.adsenseClientId'>
      <script async='async' src='//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'/>
    </b:if>
</head>

次に、記事と記事の間に、インフィード広告を表示するコードを追加します。
アドセンス規約違反にならないよう、最大３の広告を表示します。

<b:loop values='data:posts' var='post'>
  <b:include name='TopPost' data='post' />
  
  <!-- (1) これを追加 -->
  <b:include name='inlineAd' data='post' />
  
</b:loop>

<!-- (2) これを追加 -->
<b:includable id='inlineAd' var='post'>
  <div>
    <!-- 広告が３つ以上表示されないように制御 (アドセンス規約対策) -->
    <b:class cond='data:post.adNumber lt 3' name='shown-ad'/>
    <!-- インフィード広告のコードをインクルード -->
    <b:include data='post' name='super.inlineAd'/>
  </div>
</b:includable>

記事ページを作る

続いて、記事ページを作っていきます。

完成後イメージ

[STEP1] 記事の内容/記事下の広告を表示する

基本的に、トップページとやる事は同じです。
下のコードの、(1)(2)の部分を追加します。

現在のページがトップページか記事ページなのかは、data:blog.pageTypeから取得する事ができます。

・“index” ：トップページ
・”item" ：記事ページ

記事ページの時だけ、表示させたい場合は、cond='data:blog.pageType == "item"'とします。


<!-- ブログ記事を表示する section -->
<b:section class='main' id='main' name='Main' showaddelement='no'>
  <b:widget id='Blog1' locked='true' title='ブログの投稿' type='Blog'>

    <!--デフォルトの includable -->
    <b:includable id='main' var='top'>
      <div class="container">
        <!--トップページに表示する記事の数だけ、b:loop で繰り返し -->
        <b:loop values='data:posts' var='post'>
          <!--現在表示しているページが、トップページの場合、記事リストを表示する includable を展開 -->
          <b:include cond='data:blog.pageType == "index"' name='TopPost' data='post'  />
          <!--インフィード広告(id='inlineAd')を展開-->
          <b:include cond='data:blog.pageType == "index"' name='inlineAd' data='post' />
          <!-- (1) これを追加 -->
          <b:include cond='data:blog.pageType == "item"' name='DetailPost' data='post'  />
        </b:loop>
      </div>
    </b:includable>
      
    ~~ 中略 ~~

     <!-- (2) これを追加 -->
     <b:includable id='DetailPost' var='post'>
       <div class="row" style="margin-top:30px;">
         <div class="col-12">
           <!--記事タイトル -->
           <h3>
             <data:post.title/>
           </h3>
         </div> <!-- end of col --> 
         <div class="col-12">
           <!--記事の本文-->
           <div>
             <data:post.body/>
           </div>
         </div> <!-- end of col --> 
       </div> <!-- end of row -->

       <!--記事の下に表示する広告-->
       <b:includable id='inlineAd' var='post'>
         <div>
           <b:class cond='data:post.adNumber lt 3' name='shown-ad'/>
           <b:include data='post' name='super.inlineAd'/>
         </div>
       </b:includable>
    </b:includable>
       
  </b:widget>
</b:section>

実際に表示させたイメージ
記事ページ表示

SEO対策を行う

Blogger は Google のサービスだけあって、SEO対策は簡単です。
やる事は、２つだけです！！

まず、以下のコードを <head>タグに追加し、SEO/SNS対策用の <meta> タグを出力します。

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

次に、Twitterカードの対応を行ます。

Twitterカードは、URLをツイートする時に、サムネイルと紹介文を表示してくれるあれです。
SNS対策として絶対やった方がいいので、必ず設定しましょう。

<head>タグに以下の２行を追加します。

<!-- Twitterカードの種類 (summary_large_image or summary) -->
<meta content='summary_large_image' name='twitter:card'/>
<!-- Twitterのユーザー名 -->
<meta content='@ユーザ名' name='twitter:site'/>

Twitterカードは、ブログサイトであれば、以下の２種類の表示形式から選びます。

種類	イメージ
summary_large_image
summary

最後に

Blogger のタグは、Ruby や PHPなどのサーバサイド側の処理をやった事がある人、もしくは、vue.js/React/angular JSなどの Javascript フレームワークを触った事の、すぐに理解が出来ると思います。

参考にしたドキュメント

この記事を作成する時に、参考にしたサイトです。
主に公式ドキュメントです。

レイアウト用ページ要素タグについて

https://support.google.com/blogger/answer/46888?hl=ja&ref_topic=6321969

レイアウト用のウィジェットタグ

https://support.google.com/blogger/answer/46995?hl=ja&ref_topic=6321969

レイアウト用のデータタグ

https://support.google.com/blogger/answer/47270?hl=ja

Customize CSS tags for layouts

https://support.google.com/blogger/answer/46871?hl=ja&ref_topic=6321969

■ Bloggerで「このブログの自分のビューを追跡しない」が効かない(チェックが外れる)時の対処方法)

Bloggerで、 [このブログの自分のビューを追跡しない]をチェックにしたにも関わらず、自分のアクセスがカウントされていたので、その問題の解決方法です。

■ Blogger 目次を見出しから自動生成するプラグイン（忙しい人向け）

Bloggerで目次を自動生成するブラグインを自作しました。
このプラグインを導入する事で、WordPressの「TOC+」プラグインの様に、簡単に目次を自動生成させる事が出来る様になります。
是非ご賞味下さい。

BloggerのHTMLを徹底紹介！テーマをフルカスタマイズしてオリジナルブログを作る！

BloggerのHTMLを徹底紹介！テーマをフルカスタマイズしてオリジナルブログを作る！

はじめに

最小構成のHTML

基本知識

「ページ要素タグ」

「ウィジェットタグ」

Blogger テーマの HTML構造

トップページを作る

完成後イメージ

[STEP1] 記事を表示する

[STEP2] インフィード広告を表示する

記事ページを作る

完成後イメージ

[STEP1] 記事の内容/記事下の広告を表示する

SEO対策を行う

最後に

参考にしたドキュメント

関連記事

0 件のコメント:

コメントを投稿

人気の投稿

このブログを検索

Profile

ラベル

BloggerのHTMLを徹底紹介！テーマをフルカスタマイズしてオリジナルブログを作る！

BloggerのHTMLを徹底紹介！テーマをフルカスタマイズしてオリジナルブログを作る！

はじめに

最小構成のHTML

基本知識

「ページ要素タグ」

「ウィジェット タグ」

Blogger テーマの HTML構造

トップページを作る

完成後イメージ

[STEP1] 記事を表示する

[STEP2] インフィード広告を表示する

記事ページを作る

完成後イメージ

[STEP1] 記事の内容/記事下の広告を表示する

SEO対策を行う

最後に

参考にしたドキュメント

関連記事

0 件のコメント:

コメントを投稿

人気の投稿

このブログを検索

Profile

ラベル

「ウィジェットタグ」