- MicrosoftExpressionWeb
Microsoftが開発していた元・有料のホームページ制作ソフト。簡単なホームページであれば楽に作成できるスグレモノ！個人的には同じシリーズのイラストソフトExpressionDesignもお気に入りです。
🔗使い方の記事：ExpressionWeb4関連記事 - VisualStudioCode
こちらもMicrosoftが開発しているコードエディタ。プログラミングソフトとして歴史のあるVisualStudioのエディタ部分だけ持ってきたようなソフトです。 - BlogArchive
- Blog
- Feed
- Header
- HTML
- SingleImage
- LinkList
- List
- Logo
- BlogProfile
- Navbar
- VideoBar
- NewsBar
公開日：5/23/2020
シェア：Tweet
このサイトでもこれまでBloggerを使ったホームページ作成を紹介してきましたが、既存の機能だけではどうしても力不足感が否めない....
と、いうわけで先人たちの経験と知恵をお借りしながら「Bloggerのテーマを自作する」記事を始めます！HTMLとCSSの勉強ということでお付き合いください。
操作はすべてブラウザ上で行っていきますが、コードを書くときには、エディタを使ったほうが便利です。しかも、タイプミスも減らす事ができるというメリットもあります。
シェア：Tweet
Bloggerでオリジナルのテーマを作成
無料で広告も入れやすくそれでいてあの「Google」が運営しているBloggerでオリジナルのホームページ作成ができたら良いなと思っている方も多いはず。
このサイトでもこれまでBloggerを使ったホームページ作成を紹介してきましたが、既存の機能だけではどうしても力不足感が否めない....
と、いうわけで先人たちの経験と知恵をお借りしながら「Bloggerのテーマを自作する」記事を始めます！HTMLとCSSの勉強ということでお付き合いください。
| この記事は、既に公開している次の記事を一つにまとめ、さらに修正と加筆を行っています |
| Bloggerのテーマを自作する①空のテーマとタイトル表示 Bloggerのテーマを自作する②CSSを導入する Bloggerのテーマを自作する③ヘッダーを設置する Bloggerのテーマを自作する④記事の一覧を表示する |
⚠この記事は、Bloggerの使い方について個人的に解説しています。Bloggerを運営しているGoogleからの公式の情報ではありませんので予めご了承ください。また、操作はすべて自己責任でお願いします。
Bloggerで全体のデザインを決める
まずは、ベースを作っていきます。と、いっても普通にブログを解説する手順で大丈夫！
ブログの解説については(Blogger)01-下準備をするで紹介しています。
ここで、作りたいサイトのトップ画面と個別画面のイメージを固めておきます。もし思いつかない予期には、お気入りのサイトと同じようなデザインを作るのもおすすめです。
このサイトも、いくつかのキュレーションサイトデザインを参考に組み立てています。
今回の「Bloggerでオリジナルのテーマを作成」では次のデザインで進めていきます。
トップ画面と、それぞれの記事画面のレイアウトです。イメージがつきにくい場合には、今見ているこのサイトのデザインをそのまま再現していくんだなと思っていただければ大丈夫です。
エディタにも沢山の種類がありますが、個人的におすすめの2つをご紹介。どちらも無料です。
エディターの準備ができたら、ブログの画像アイコンを準備しておきましょう。なくても当然大丈夫なんですが、参考にしているサイトはのきなみ設置していたので、真似して作っています。
ロゴを作るのはペイントやPowerPointで十分です。最終的にPNG形式で保存しておきます。また、本格的に作りたいのであれば、ExpressionDesignもおすすめ。フリーなのにベクタデータが書き出せるので、少し前のIllustratorレベルであれば再現可能です
🔗使い方の記事：ExpressionDesignの関連記事
では、ここからはコードを書いていきます。
Bloggerでつくる基本の空テーマとコード
まずは、空っぽのなにも入っていないベースを作っていきます。
基本的にはHTMLで記述をしていくのですが、<b:>というBloggerオリジナルのタグも出てきて、最初はすごく戸惑います。
Bloggerのヘルプに詳しい情報がありますので、解説している内容とリンクを張っておきます。わからなくなったら参照していきましょう。
Bloggerのタグ
widgetの種類一覧
今の時点では、何のことかわからなくても大丈夫です。実際にコードを書きながら覚えていきましょう。
ではさっそく、基本のコードを書いていきます。
【コード01】<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html lang="ja" b:version='3' class='v3' 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>
<title><data:blog.pageTitle/></title>
<b:skin></b:skin>
</head>
<body>
<b:section id='main'>
<b:widget type='Header' id='Header0'>
<b:includable id='title'>
<h1><data:blog.pageTitle/></h1>
</b:includable>
</b:widget>
</b:section>
</body>
</html>
記事のタイトルだけが表示される空のテーマコードです。
ここで、Blogger独自のコードの決まりを覚えておきましょう。
session・widget・includableの関係
Bloggerでは、投稿されている記事をsession・widget・includableを使って表示します。まず、大枠の「session」があり、その中に「widget」を設置します。widgetは指定されたTypeによって扱えるデータが変わります。
例えば、Headerのタイプであれば、ブログのタイトルやブログのURLを表示することができますが、各記事のタイトルなどは表示することができません。
widgetの中には「includable」を設置します、実際に取得するデータをWEB上で表示するのはこの部分です。公式では、各widgetの中で必ず一つは「id=main」のincludableを設置するようにとあります。
コードをBloggerに読み込ませる
書いたコードをBloggerに読み込ませましょう。Bloggerのコードがあるのは「テーマ」→「︙」→「HTMLを編集」の中。開くとコード現時点でのコードが表示されます。
表示れているコードはすべて削除をして、今作ったコードを貼り付けましょう。貼り付けたら画面右上の目のマーク（プレビュー）をクリックします。
そうすると。入力したコードに沿ってどのように表示できるかを確認することができます。今回のコードでは、ブロクのタイトルだけが表示されます。
また、新しいバージョンから、プレビュー画面下に、PC・タブレット・スマートフォンそれぞれの見え方も確認できるようになりました。
注意点として、プレビュー画面では記事内のリンクをクリックすることができません。りんぅの確認などは、画面右上のフロッピー（保存）をクリックしてから、HTML編集画面を出て「ブログを表示」で確認しましょう。
保存をすると足りない部分が補完される
保存をクリックすると、Bloggerは足りないこt－ドを自動的に補完してくれます。とても助かる機能なのですが、コードを編集するときにどこをどうしたら良いのかがわからなくなってしまうので、書いているコードは別に保存をすちようにしましょう。
空のテーマが完成したので、ここから一気にトップ画面を組んでいきましょう。
BloggerにCDNでスタイルシートを読み込ませる
空のテーマにスタイルシートを読み込ませます。サイトのデザインに統一感をもたせるのに重要なスタイルシートですが、最初から作るのは大変です。
そこで、GoogleのサービスっぽいデザインのCSSフレームワーク「Materialize」を導入します。
🔗公式サイト：https://materializecss.com/
コードは、公式サイトの案内通り<haerd>~＜/heard＞の間に入れます。
【コード02】<head>
<title><data:blog.pageTitle/></title>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"/>
<!-- Compiled and minified JavaScript -->
<script src="//cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<!--Import Google Icon Font-->
<link href="//fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<b:skin></b:skin>
</head>
今回はCDNでスタイルシートの読み込みをしています。
CDN（コンテンツデリバリネットワーク）とは、コンテンツをネット経由で配信するために最適化されたネットワークのことで、本来は同じサーバー上に置かなければいけないCSSのファイルをネット上で呼び出して使うことができるた、作るコードがスッキリします。
Bragaーにヘッダーを設置する
続いて、Bloggerにヘッダーを設置していきます。ヘッダーにはブログタイトルだけ入れます。この時点で、サイト全体の大枠も作っておきましょう。
枠はすべて「div」で作成します。ここは一般的なホームページ作成と変わりませんが、ここで、導入した「Materialize」のスタイルシートも適用していきます。
「Materialize」には、レイアウト枠を12等分したうちの指定個数分の幅の枠をつくることができます。
例えば「6」を指定すれば全体の半分の大きさのDIV枠をつくることができます。この機能によって、画面幅が異なる端末ごとに、レイアウトの幅も可変でき、現代のホームページ作成の絶対必要事項「レスポンシブ」サイトが簡単に構築できます。また、スマホとパソコンで割合を変えるということもできます。
その点も考えながらレイアウト枠を設置していきます。
【コード03】※<body>と</body>の間のみ抜粋<!--記事全体のレイアウト枠-->
<div id="main" class="container">
<!--ヘッダーエリア-->
<div id="header" class="row">
</div>
<!--コンテンツエリア-->
<div id="content" class="row">
<!--人気記事一覧-->
<div id="popular" class="row">
</div>
<!--記事一覧または記事-->
<div id="posts" class="col s12 l9">
</div>
<!--サイドバー-->
<div id="side" class="col s12 l3">
</div>
</div>
<!--フッターエリア-->
<div id="fotter" class="col l6 s12">
</div>
</div>
</body>
</html>
<body>
これでレイアウト枠の設置が終わりました、続いてヘッダーの内容を入れていきます。（ここで保存やプレビューを押してもエラーが出るので注意）
<!--ヘッダーエリア-->
<div id="header" class="row">
</div>
の部分を次のように書き換えます。
【コード04】<!--ヘッダーエリア-->
<div id="header" class="row" style="text-align: center">
<b:section id='header'>
<b:widget id='Header0' type='Header' >
<b:includable id='main'>
<a expr:href='data:blog.homepageUrl' style="color: black;">
<h1><data:blog.pageTitle/></h1>
</a>
</b:includable>
</b:widget>
</b:section>
</div>
ヘッダーの枠は横幅を最大（row）にして、中のは中央寄せにしています。続いて<d:~>のアイテムを順番通りに置いていって、<data:~でブログのURLを自動的に取得。次の行で同じようにブログタイトルを取得しています。
ここでプレビューをクリックすればブログタイトルの表示が確認できます。
Bloggerにフッターを設置する
続いてフッターを設置していきます。「Materialize」には、フッターのレイアウトも用意されているので、利用してリンクやサイト説明などを入れています。
<!--フッターエリア-->
<div id="fotter" class="col l6 s12">
</div>
の部分を下のように書き換えます。
【コード05】<!--フッダーエリア--> <div id="fotter"> <b:section id='fotter'> <b:widget id='Header1' type='Header' > <b:includable id='main'> <footer class="page-footer orange"><div class="container"> <div class="row"> <div class="col l6 s12"> <h5 class="white-text"><data:blog.title/></h5> <p class="grey-text text-lighten-4"><data:description/></p> </div> <div class="col l4 offset-l2 s12"> <h5 class="white-text">Links</h5> <ul> <li><a class="grey-text text-lighten-3" href="#">リンク</a></li> <li><a class="grey-text text-lighten-3" href="#">リンク</a></li> </ul> </div> </div> </div> <div class="footer-copyright"> <div class="container"> © 2020 Copyright <data:blog.title/> </div> </div></footer> </b:includable> </b:widget> </b:section> </div>
ブログのタイトルとブログ説明を取得するために、ここでもヘッダーのwidgetを設置しています。その他、もう少しスッキリできそうな気もしますが、まずはテーマの完成を目指して、ある程度落ち着いたら調整をしていきましょう。
プレビューで確認するとブログタイトルの真下にフッダーが表示されているのを確認できます。
Bloggerに記事の一覧を設置する
それでは、サイトの中核部分でもある記事の一覧表示の部分を作っていきます。本題に入る前に、この部分の仕組を最初に押さえておきます。
Bloggerは表示しようとしているページの種類で表示を変えてくれます。今回であれが「posts」の中身だけ、記事一覧を表示する場合と記事を表示する場合で処理を変えています。そのほかの部分は同じものを使いまわしています。
では、最初に切替部分と、それに合わせた見出しの設定などを書いていきます。
<!--記事一覧または記事-->
<div id="posts" class="col s12 l9">
</div>
の部分を下のように書き換えます。
【コード06】<!--記事一覧または記事-->
<div id="posts" class="col s12 l9">
<b:section id='posts'>
<b:widget id='Blog0' type='Blog'>
<b:includable id='main'>
<!--エリア見出し-->
<b:if cond='data:blog.pageType == "index"'>
<h1>Post</h1>
</b:if>
<!--教示処理分岐-->
<ul>
<b:loop var='post' values='data:posts' >
<b:include cond='data:blog.pageType == "index"' name='PostList' data='post'/><!--トップ・カテゴリ-->
<b:include cond='data:blog.pageType == "item"' name='PostShow' data='post'/><!--記事の表示-->
</b:loop>
</ul>
</b:includable>
<!--トップ・カテゴリ表示の処理-->
<b:includable id='PostList' var='post'>
</b:includable>
<!--記事の表示の処理-->
<b:includable id='PostShow' var='post'>
</b:includable>
</b:widget>
</b:section>
</div>
少し長いコードで、条件分岐やループを使っています。indexの場合（トップ）は'PostList'の処理、記事のページや呼び出された場合は'PostShow' の処理が実行されます。
<b:include cond='data:blog.pageType == "index"' name='PostList' data='post'/>
<b:include cond='data:blog.pageType == "item"' name='PostShow' data='post'/>
の部分が分岐する箇所です。その下にそれぞれの処理部分を入れておきます。ちなみに「include」で呼び出す名前を指定。「includable」で呼び出される名前を指定します。
では、記事一覧を表示するコードを入れていきましょう。コードを入れるのは
<!--トップ・カテゴリ表示の処理-->
<b:includable id='PostList' var='post'>
</b:includable>
の部分です。記事一覧には、各投稿の最初の画像をサムネイル表示し、記事のタイトル、記事のテキストの最初の部分を表示します。それを一つのボックスにして、大きくリンクで囲むことで全体をクリックすると、それぞれの記事にジャンプできるようにします。
全体のイメージを上のように仮定して、下のコードに書き換えましょう。色の指定や画像サイズは今後変更していくかもしれないので、参考程度に読み取ってください。
【コード07】<!--トップ・カテゴリ表示の処理-->
<b:includable id='PostList' var='post'>
<a expr:href='data:post.url' style="color: black;">
<div class="row">
<li>
<!--画像の表示-->
<div class="col s4 l3" style="text-align:center; max-height:;">
<b:if cond='data:post.firstImageUrl'>
<img expr:src='data:post.firstImageUrl' style="margin: 2px; width: 100%; max-height: 146px; object-fit: cover;" />
<b:else/>
<p>Noimage</p>
</b:if>
</div>
<!--記事タイトルの表示-->
<div class="col s8 l9" >
<h4><data:post.title/></h4>
</div>
<!--記事内容の表示-->
<div class="col s12 l9">
<b:eval expr='data:post.body snippet{length: 75, links: false, linebreaks: false}'/>
<p>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<a class="waves-effect waves-light btn-small" style="background-color:#ff9800; " expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='not data:label.isLast'></b:if>
</b:loop>
</b:if>
</p>
</div>
</li>
</div>
</a>
</b:includable>
また、<b:loop values='data:post.labels' var='label'>で紐付けされているラベルも表示しています。
画像表示の部分はもう少し改変が必要かもしれませんが、まずはこれで進めていきます。
プレビューで確認をすると、記事一覧が確認できます。
Bloggerで各記事を表示する
記事の一覧が表示できたら、次に各記事を表示する部分を書いていきます。各記事の部分は各記事のレイアウトに左右される部分が多いので、コードもシンプルです。記事表示部分には記事のタイトルと公開日。記事の本文を表示します。
<!--記事の表示の処理-->
<b:includable id='PostShow' var='post'>
</b:includable>
の部分を下のように書き換えていきます。
【コード08】<!--記事の表示の処理-->
<b:includable id='PostShow' var='post'>
<div class="row">
公開日：<data:post.timestamp/><hr/>
<h1><data:post.title/></h1> <!--記事タイトル-->
<span><data:post.body/></span> <!--記事コンテンツ-->
</div>
</b:includable>
書き換えたら保存をして、一度HTML編集画面から出たあとに「プログを表示」でブログを開き、記事一覧の記事をクリックして開いてみましょう。
Bloggerにサイドバーを設置する
サイドバーに記事のメニュー代わりにタグの一覧を設置します。
<!--サイドバー-->
<div id="side" class="col s12 l3">
</div>
を下のように書き換えましょう。ここでも「Materialize」のスタイルを使って見た目をよくしていきます。
【コード09】<!--サイドバー-->
<div id="side" class="col s12 l3">
<div id="Labellist" class="collection row">
<b:section id='label'>
<b:widget id='Label1' type='Label'>
<b:includable id='main'>
<div expr:class='"widget-content " + data:display + "-label-widget-content"'>
<b:loop values='data:labels' var='label'>
<b:if cond='data:blog.url == data:label.url'>
<h5><a class="collection-item active" style="background-color:#ff9800 ;" expr:dir='data:blog.languageDirection'><data:label.name/></a></h5>
<b:else/>
<h5><a class="collection-item" style="color:#ff9800;" expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a></h5>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span dir='ltr'>(<data:label.count/>)</span>
</b:if>
</b:loop>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
</div>
書き終わったらプレビューで確認してみましょう。サイドバーにタグの一覧が表示されます。
これで基本的な部分は完成です。次回はページを移動する「ボタン」や「ロゴ」の設置、「人気記事」や「関連記事」を設置していきます。
