Bloggerって？
2024/10/25 Blogger HTML
Bloggerとは？
Bloggerのメリット
BloggerはGoogleが提供している無料でブログを作成できるツールです。無料のブログ作成サービスは他にも幾つかありますが、Bloggerはその中でも数少ない「勝手に広告が表示されない」サービスであり、クリーンなブログを作るにはもってこいのサービスです。
さらに言うと、BloggerはHTMLレベルでデザインしたり記事を書く事が出来ます。つまりカスタマイズ次第でどんなウェブサイトでも作る事が出来るというメリットがあります。
Bloggerの制限
Bloggerはあくまでブログを作るサービスであり、ウェブサイトを作るサービスではないので、色々と機能が制限されています。例えば画像や動画のアップロード方法が複雑だったり、ブラウザゲームのようなものをアップロードすることは出来ません。
もし完全に自由にウェブサイトを作りたいのであれば、Githubにソースコードをアップロードし、それをウェブサイトとして公開する「Github Pages」というものを利用する方法があります。しかしながら、Github Pagesの場合はブログに必要な機能（記事リストの読み込み、記事毎のラベル管理、検索機能などなど）を全て自分で実装しないといけないので、それはそれで大変です。
結局のところ、普通に使う分にはBloggerは非常に使いやすいブログ作成ツールという事です。
Bloggerでブログを作ろう！
では早速、Bloggerでブログを作る流れを紹介しようと思います！ ただし「Googleアカウントを作って、ブログ名を決めて、URLを決めて……」という部分は割愛します。
テーマ(Theme)について
Bloggerにおいて最も見た目に影響を及ぼすのはテーマ(Theme)です。Bloggerにおけるテーマとは「ブログの大まかなデザイン」の事を指します。例えばクラッシックでシンプルなブログにするのか、それともモダンで豪華なブログにするのか。そういった大雑把な見た目を決めるのがテーマ(Theme)です。
普通のブログを作る時は、公式が公開しているテンプレートから選んだり、ネットで公開されているBlogger用テーマをダウンロードしてくる事が出来ます。
一方で、KUMECのホームページのような「特殊な利用法」をしたい場合、自分で作ることもできます。HTMLに自信がある方は、オリジナルテーマを作ってみてください！
レイアウト(Layout)について
テーマの次にカスタマイズするのはレイアウト(Layout)です。ここでは「要素の順番を入れ替えたい」「要素を追加したい」などの改造を行えます。ただし、あまりに要素を詰め込み過ぎると、見た目がごちゃごちゃするだけでなく全体のデザインが崩れる恐れがありますのでご注意を！
記事(Article)とラベル(Label)
説明するまでもないかもしれませんが、記事(Article)とはその名の通り、日付順に並べられて表示されるものです。個人のブログなら日記の様に使うものですが、KUMECでは活動報告として使用しています。
その性質上、古い記事ほど下に表示されますので、自己紹介や連絡先などの重要な情報は記事には向きません。常に注目してほしい情報は後述する「ページ(Page)」という所に載せましょう。
また、それぞれの記事にはSNSで使われるハッシュタグのようものを付ける事ができ、これをラベル(Label)といいます。これを使って記事を検索したり、絞り込んだりすることが出来ますので、記事を書いたときは積極的にラベルを付けましょう。
さて、記事は「HTMLで書く」か「専用のエディタを使って書く」という二種類の方法があります。ですが、専用のエディタは非常に使いにくいので、出来る限りHTMLを使って書くのが良いでしょう。個人的にはMarkdownを使って書いて、それをHTMLに変換するのが良いかと思っています。
ページ(Page)
「プロフィール」や「連絡先」のような、重要な情報を書く所をページといいます。一般的には画面上部のメニューからアクセスする事が出来ます。
オリジナルテーマを作るなら……
Bloggerのテーマは基本的に以下のような構成になっています。めちゃくちゃ長いです。本当に長いです。
これで最低限の状態というのがゾッとしますね。
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:templateVersion="1.3.3" b:layoutsVersion="3" b:defaultwidgetversion="2" b:version="2" b:css="true" b:js="true"
b:responsive="true" expr:lang="data:blog.locale" expr:dir="data:blog.languageDirection"
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" />
<b:include data="blog" name="all-head-content" />
<b:skin version="1.3.3">
<![CDATA[
/*
<Group description="グループ名">
<Variable name="some.variable" description="変数の説明" type="color" default="#333" value="#333"/>
</Group>
*/
html{
--some-variable: $(some.variable);
}
]]>
</b:skin>
<style>
/*b:skin内で宣言した変数名を使うことで、後々テーマを編集する事が可能になる*/
.body{
background: var(--some-variable);
}
</style>
<script>
//<![CDATA[
// JavaScriptを書きたい場合、このようにCDATAで囲う（のが慣例）
// 実は囲わなくても問題ない
//]]>
</script>
</head>
<body>
<b:section id="セクション名">
<b:widget id="Header1" type="Header">
<!-- Widgetはtypeとidを指定しなくてはいけない -->
<!-- ここで、idは必ず「type名＋数字」でないといけない -->
<b:includable id="main">
<h1>
<a expr:href="data:blog.homepageUrl"><data:blog.title /></a>
</h1>
</b:includable>
</b:widget>
<b:widget id='PageList1' type='PageList'>
<b:includable id='main'>
<ul>
<b:loop values='data:links' var='link'>
<b:if cond='data:link.isCurrentPage'>
<li class='current'><a expr:href='data:link.href'><data:link.title /></a></li>
<b:else/>
<li><a expr:href='data:link.href'><data:link.title /></a></li>
</b:if>
</b:loop>
</ul>
</b:includable>
</b:widget>
</b:section>
<b:section id="次のセクション名">
<b:widget id="Blog1" type="Blog">
<b:includable id="main">
<b:switch var="data:blog.pageType">
<b:case value="item" />
<!--記事なら-->
<b:loop var="post" values="data:posts">
<b:include name="singlepost" />
</b:loop>
<b:case value="static_page" />
<!--ページなら-->
<b:loop var="post" values="data:posts">
<b:include name="staticpage" />
</b:loop>
<b:case value="error_page" />
<!--エラーページなら-->
<b:include name="errorpage" />
<b:default />
<!--その他（記事リストなら）-->
<b:include name="article_list" />
</b:switch>
</b:includable>
<!--記事なら以下が読み込まれる-->
<b:includable id="singlepost">
<h1>
<!--記事タイトル-->
<data:post.title />
</h1>
<p>
<!--日付-->
<span>
<data:post.date />
</span>
<!--ラベル一覧-->
<span id="singlepost-tag">
<b:if cond="data:post.labels">
<b:loop values="data:post.labels" var="label">
<a expr:href="data:label.url + "?&max-results=30"" property="v:title" rel="v:url">
<data:label.name />
</a>
</b:loop>
</b:if>
</span>
</p>
<div>
<!--本文-->
<data:post.body />
</div>
</b:includable>
<!--ページなら以下が読み込まれる-->
<b:includable id="staticpage">
<data:post.body />
</b:includable>
<!--エラーページなら以下が読み込まれる-->
<b:includable id="errorpage">
errorpage
</b:includable>
<!--記事リストなら以下が読み込まれる-->
<b:includable id="articlelist">
<b:loop var="post" values="data:posts">
<a expr:href="data:post.url">
<!--記事タイトル-->
<data:post.title />
<!--投稿日やラベル一覧を乗せる事も出来る-->
</a>
</b:loop>
</b:includable>
</b:widget>
</b:section>
</body>
</html>