Blogger テンプレート

記事一覧ページをつけてみました

記事一覧のページがほしい

記事一覧表示のページを作りました。

参考にしたのはこちらです。
garafuさんの「galife」

Blogger 記事 を 一覧 表示 する ページ の 作成方法
Blogger の 記事 一覧 を表示する ページ を作成します。 ここで紹介する方法では、ソート順（タイトル名、公開日付、更新日付）、表示方法（一覧、ラベル別）を任意に指定できます。 また、各要素に クラス名 が割り振られているので、好きな表示を簡単に実現できます。

書いている記事はまだそれほど多くはないのですが、一覧表示があるととてもいいなと思いましたので、将来のために設置してみました。

記事一覧表示するために

丁寧な説明にもかかわらず、「DATA LOAD…」で止まってしまうことしばし。ちゃんと表示されるまでに手間取ってしまったので、備忘録として。

作成手順にしたがって作業する

コードが公開されているので手順通りにコピペしましたが、「DATA LOAD…」で止まってしまい、表示されません。何度も繰り返してみたのですが、うまく行きませんでした。

デモページで試してみる

デモページも何度も使わせていただきました。表示されないこともありましたが、なぜなのかは自分ではわかりません(^^ゞ

おそらく、アレもこれもと欲張ったことが原因かと思われます。

やっと一覧が表示されるようになったのですが、ここまで来てもまだブログで動かすことができませんでした。

デモページにはコードが表示さる

何度も読み返しながらやっているうちに、やっとデモページには生成されたコードが表示されているのに気が付きました。そのコードをコピペします。

このブログは「https:リダイレクト」で作成しておりますので、コードの中の2箇所の「http:」に「s」をつけました。

その他に自分のBloggerのドメインの「.jp」を「.com」に変更しました。
これはお問い合わせページ作成時にやっていたことなので、ここでもそうしてみました。

※ 2018-11-20追記

2018年05月くらいからだと思いましたが、

Bloggerの国別リダイレクトがなくなったようです。

記事一覧ページにメッセージを添える

ここまでの状態が下記の画像です。

ここに簡単なメッセージをつけました。

やはり、メッセージがある方が良いように思います。

モバイル表示の問題

なんとか記事一覧が表示されるようになりました。ところがモバイル表示がこのようになっています。

記事一覧の文字が重なってぐちゃぐちゃです…。

これはについては大本でもこのように記されています。

スタイルシート設定
スタイルシート
各要素に対してできるだけ クラス名 を割り振るよう作成されています。 あらかじめある スタイルシート で思うような表示ができていない場合、 <link /> を利用せず、自前で stylesheet を記述することができます。

これからの道のりのほうが、遥かに長く感じます。

直せる日が来ることを祈って、今日はおしまいにします。