Blogger Labo

Bloggerテンプレート自作 #22：カスタム人気記事ガジェットを作る

前回の「カスタムアーカイブを作る」に引き続き、今回は「カスタム人気記事ガジェットを作る」を実践してみようと思う。 人気記事ガジェットはBloggerの標準ガジェットなのだが、実はこれは条件分岐さえしっかりしていれば丸々自作できてしまう。なので、今回は人気記事ガジェットを自作する方法をまとめていくことにする。

2020/08/31 02:01

Bloggerテンプレート自作 #21：カスタムアーカイブを作る

前回の「サイドバーとデフォルトガジェットのデザインを作る」に引き続き、今回は「カスタムアーカイブを作る」を実践してみようと思う。 カスタムアーカイブを作る意図はデフォルトのブログアーカイブの階層リストのデザイン性が非常に悪いためである。なので、これをコンパクトに表示できるようにするのが本記事の狙いとなる。というわけで、今回はカスタムアーカイブの作り方をまとめておくことにする。

2020/08/30 10:19

Bloggerテンプレート自作 #20：サイドバーとデフォルトガジェットのデザインを作る

前回の「パンくずリストを作る」に引き続き、今回は「サイドバーとデフォルトガジェットのデザインを作る」を実践してみようと思う。今回はサイドバーとガジェットのCSSを紹介するだけなので、デザイン紹介といった内容のまとめになっている。

2020/08/29 21:40

Bloggerテンプレート自作 #19：パンくずリストを作る

前回の「404ページを作る」に引き続き、今回は「パンくずリストを作る」を実践してみようと思う。 パンくずリストとは、サイトのページ階層において現在のページ位置をわかりやすくリスト表示したもので、Bloggerでは 「ホーム ＞ ラベル名 ＞ ページタイトル」のような形で表示される。 今回は、自作テンプレートにパンくずリストを組み込む方法をまとめていくことにする。

2020/08/29 10:37

Bloggerテンプレート自作 #18：404ページを作る

前回の「固定ページを作る」に引き続き、今回は「404ページを作る」を実践してみようと思う。 404ページとは、コンテンツが存在しないページにアクセスしたときに「Not Found（見つかりませんでした）」ということで表示されるエラーページのこと。設定画面からも設定可能だが、一応デフォルトで作る方法をまとめておく。

2020/08/29 03:26

Bloggerテンプレート自作 #17：固定ページを作る

前回の「自動目次機能を追加する」に引き続き、今回は「固定ページを作る」を実践してみようと思う。 といっても、ほぼ個別記事ページの転用なので大した作業はない（一応まとめておく程度）。

2020/08/28 12:32

Bloggerテンプレート自作 #16：自動目次機能を追加する

前回の「記事内にアドセンス表示欄を作る」に引き続き、今回は「自動目次機能を追加」を実践してみようと思う。 要領は前回同様、JavaScriptで記事内にどこかに目次を自動生成させるというもので、「記事のどの部分に表示させるか」と「どういう条件で表示させるか」というのがポイントになる。今回はその辺の点を踏まえて、自動目次生成の方法をまとめていくことにする。

2020/08/27 10:42

Bloggerテンプレート自作 #15：記事内にアドセンス表示欄を作る

前回の「コメントフォームを設置する」に引き続き、今回は「記事内にアドセンス表示欄を作る」を実践してみようと思う。なお、ここで実装するのは「記事中アドセンス」と「記事下アドセンス」の2箇所の予定。 やっぱりBloggerでブログを作る以上はアドセンス表示欄は欲しいと思う。しかも初心者でも表示させる位置をカスタマイズしやすいテンプレートが初心者時代には欲しかった。というわけで、かつての自分が欲した「分かりやすく編集しやすいアドセンス欄」を作る方法をまとめていくことにする。

2020/08/27 10:24

Bloggerテンプレート自作 #14：コメントフォームを設置する

前回の「関連記事を設置する」に引き続き、今回は「コメントフォームを設置する」を実践してみようと思う。 コメントフォームはBloggerの機能として実装されているものの、標準のコメントガジェットや特定の呼び出し関数なんかは用意されていないっぽい、なのでBloggerテンプレートを自作する際には自力で設置するコードを記述しなければならないようだ。今回は、その「コメントを設置するコード」についてまとめておくことにする。

2020/08/26 16:14

Bloggerテンプレート自作 #13：関連記事を設置する

前回の「個別記事ページにページャを設置する」に引き続き、今回は「関連記事を設置する」を実践してみようと思う。 Bloggerには標準で関連記事を表示させる関数やガジェットは用意されていない。なので、これが設置したければJavaScriptなんかで独自に実装する必要がある。自力で実装するのは結構骨が折れるので、今回は他所様のコードをお借りして実装することにした。非常に便利なコードを見つけたので、今回はその実装方法をまとめておくことにする。

2020/08/26 12:12

Bloggerテンプレート自作 #12：個別記事ページにページャを設置する

前回の「シェアボタンを作る」に引き続き、今回は「個別記事ページにページャを設置する」を実践してみようと思う。 まあ、記事リストの時に作ったものを転用するという方法もあるのだけれど、どうせなら個別記事専用のものということで「前の投稿（PREV）」「次の投稿（NEXT）」のリンクを作る方法をまとめることにした。

2020/08/25 12:09

Bloggerテンプレート自作 #11：シェアボタン（SNSボタン）を作る

前回の「個別記事ページを作る」に引き続き、今回は「シェアボタンを作る」を実践してみようと思う。 シェアボタン（SNSボタン）は、ボタンひとつでSNSに投稿できるようにするボタンリンクを指し、このテンプレートでは「Facebook」「Twitter」「はてなブックマーク」「Pocket」「LINE」の5つのボタンを実装することにした。 というわけで、今回は このシェアボタンを実装する方法についてまとめることにする。

2020/08/25 01:33

Bloggerテンプレート自作 #10：個別記事ページを作る

前回の「記事リスト用のページャを作る」に引き続き、今回は「個別記事ページを作る」を実践してみようと思う。 個別記事ページとは投稿記事が全文表示されるページを指し、Bloggerのページタイプでは item に該当するもの。このページには「記事タイトル」「公開日・タグ」「本文」「SNSボタン」「ページャ」「関連記事」「コメント」が設置される予定。 とりあえず、今回は「個別記事の読み込み」と「記事タイトル」「公開日・タグ」「本文」が表示されるまでの作業工程をまとめていくことにする。

2020/08/24 12:09

Bloggerテンプレート自作 #9：記事リスト用のページャを作る

前回の「記事リストを作る」に引き続き、今回は「記事リスト用のページャを作る」を実践してみようと思う。 ページャとはページ送りのリンクのことで、これがないと記事リストを遷移することができない。 なお、Bloggerには標準で「新しい投稿」「ホーム」「前の投稿」のタグがあるが、番号付きは用意されてない。 なので、本記事では「標準のページャ」と「番号付きページャ」の設置方法をまとめることにする。

2020/08/24 03:54

Bloggerテンプレート自作 #8：記事リストを作る

前回の「メイン部分をページタイプで条件分岐させる」に引き続き、今回は「記事リストを作る」を実践してみようと思う。 記事リストは、トップページ、ラベルページ、アーカイブページで表示される投稿のリストのこと。このデザインは完成しているので、HTMLとCSSでデザイン通りに再現すればいいだけ。というわけで、今回は記事リストの HTML、CSS、レスポンシブ設定までの制作過程をまとめることにする。

2020/08/23 15:57

Bloggerテンプレート自作 #7：メイン部分をページタイプで条件分岐させる

前回の「メイン・サイドバーを横並びで仮設する」に引き続き、今回は「メイン部分をページタイプで条件分岐させる」を実践してみようと思う。 メイン部分には記事リストや個別記事を表示させることになるので、URLによって内容が変化する記述を行う必要がある。そこで、今回はメイン部分に条件分岐を記述し、実際にページが切り替わるかを検証してみた。

2020/08/23 15:23

Bloggerテンプレート自作 #6：メイン・サイドバーを横並びで仮設する

前回の「フッターを作る」に引き続き、今回は「メイン・サイドバーを横並びで仮設する」を実践してみようと思う。 メインとは記事リストや記事が表示される部分のことで、URLによって表示されるコンテンツが分岐する。サイドバーはメインの横に表示されるメニューバーを指し、どのページでも同じように表示されるようにしたい。 メイン・サイドバーを一気に作ると記事が長くなりすぎるので、今回は「メイン」と「サイドバー」をヨコ並びで仮設し、CSSで境界をわかりやすくするところまでまとめることにする。

2020/08/22 11:02

Bloggerテンプレート自作 #5：フッターを作る

前回の「ヘッダーナビを作る」に引き続き、今回は「フッターを作る」について実践してみようと思う。 フッターとはページの最下部にが表示される部分のことで、Bloggerには標準で特定のガジェットは用意されていない。なので、特に決まったガジェットを用意する必要はないが、多くのブログではコピーライト（著作権）の記入欄になっているので、それをデフォルトで表示させるような仕様で作っていきたいと思う。 ということで、今回は「フッター」の設置と、CSSでのデザインについてまとめておくことにする。

2020/08/21 08:00

Bloggerテンプレート自作 #4：ヘッダーナビを作る

前回の「ヘッダーを作る」に引き続き、今回は「ヘッダーナビを作る」について実践してみようと思う。 ヘッダーナビとはヘッダーの下にが表示されるリンクリストのことで、Bloggerでは「ページリスト」の標準ガジェットが配置される部分になる。 ということで、今回は「ページリストガジェット」の設置と、CSSでのデザインについてまとめておくことにする。

2020/08/20 03:40

Bloggerテンプレート自作 #3：ヘッダーを作る

前回の「Bloggerのテンプレートタグを知る」に引き続き、今回は「ヘッダ部分を作る」について実践してみようと思う。 ヘッダ部分とは「ページタイトル」＋「サブタイトル」が表示されるページ上部の部分のことで、Bloggerでは通常は「ページヘッダー」の標準ガジェットが配置されている部分になる。 ガジェットが使えたほうが初心者向けになりそうなので、今回は「ページヘッダーガジェット」の設置と、CSSでのデザインについてまとめておくことにする。

2020/08/19 02:56

Bloggerテンプレート自作 #2：Bloggerのテンプレートタグを知る

前回の「最低限の状態を作る」に引き続き、今回は「Bloggerのテンプレートタグを知る」をテーマに進めていく。 Bloggerのテンプレートを自作するには、Blogger独自のテンプレートタグについて理解しておかなければならない。今のところ何となくでしか理解できてないので、この機会にまとめておくことにする（使用頻度の高いもののみ）。

2020/08/17 14:12

Bloggerテンプレート自作 #1：最低限の状態を作る

前回の「テストブログの準備と開発環境の構築」に引き続き、今回は「最低限の状態を作る」から始めようと思う。 テンプレートを自作する際、すでにできあがった既存のテンプレートを改変していく方が楽のように思われるかもしれないが、実際は空の状態から作り始めるほうがかなり楽。これはWordPressで自作テーマ制作のときに学んだことだ。 というわけで、この記事では最低限の状態を作るための「作業工程」「関連知識」をまとめておくことにする。

2020/08/17 13:10

Bloggerテンプレート自作 #0：テストブログの準備と開発環境の構築

以前紹介した「WordPressの自作テーマ」をBloggerに移植すべく、今回から自作テンプレートを制作する過程を記録していこうと思う。Bloggerの自作テンプレートに関する情報は断片的なものが多く、1から制作過程を紹介しているサイトが見つからなかったので、自作テンプレート制作の足がかりになるような情報をまとめておければ幸い（完成すればいいが…）。 ともかく、まずは下準備が必要。なるべく初心者向けの情報からスタートしたいと思っている。ということで、今回は「テストブログの作成」と「開発環境の構築」について書き残しておくことにしよう。

2020/08/17 12:13

TortoiseGitでBloggerテンプレートのバージョン管理をする

プログラミング学習を始めてから「Git（ギット）」というツールでプログラムのバージョン管理ができることを知った。エンジニアの間では当たり前に使われているツールのようで、素人でも知っておくと結構便利に使えるものだと思う。というわけで、このツールをざっくりと紹介しておくことにする。

2020/08/15 15:56

VS CodeでBloggerテンプレートを編集すると楽かも!?

プログラミング学習を始めてから「VS Code（Visual Studio Code）」というエディタを愛用するようになったのだけど、どうやらBloggerのテンプレート編集にも便利に使えるっぽい。 Bloggerは独自の文法らしく、様々な言語に対応しているVS Codeでも予測変換機能は使えないようだが、テンプレートの自作に当たって便利な使い方を発見したので、ここに書き残しておこうと思う。

2020/08/14 15:28

Chromeデベロッパーツールを使えばカスタマイズが捗ります

Chromeデベロッパーツールの使用方法をまとめました。

2020/08/13 19:13

WordPressの自作テーマがついに完成！

Bloggerのお役立ち情報をまとめていくブログです（今はVaster2のカスタマイズ情報が中心）。

2020/08/12 17:50