Blogger の 記事 一覧 を表示する ページ を作成します。 ここで紹介する方法では、ソート順(タイトル名、公開日付、更新日付)、表示方法(一覧、ラベル別)を任意に指定できます。 また、各要素に クラス名 が割り振られているので、好きな表示を簡単に実現できます。
とりあえず自分のブログで試したい方は デモページ(日本語) をご利用ください。
(…いくつかの ブログ で "記事一覧を表示する方法" が記載されていましたが、 個人的にしっくりこなかったので新しく作ってしまえ、という経緯です。。)
作成手順
Blogger の 左メニュー から [ページ] を選択します。
[新しいページ] を選択します。
編集ページにおいて、以下の ソースコード を コピー して貼り付けます。
12345678910111213141516171819202122232425262728293031<script type="text/javascript">
var
POSTSTOC_SETTINGS = {
blogURL:
'garafu.blogspot.jp'
,
// Blogger の ドメイン を設定
maxResults: Infinity,
// 最大受信記事数 を設定。Infinity ですべての記事を受信
sort: {
key:
'published'
,
// ソートキー [title, published, updated]
order:
'default'
// ソート順 [default, asc, desc]
},
printby:
'title'
,
// 表示方法 [title, label, label.nameorder, label.contentsorder]
newPost: {
enabled:
true
,
// 新着記事アイコンを表示するかどうか
symbol:
'NEW !'
,
// 新着記事の表示文字列
term: 30
// 新着記事判定する日数
},
thumbnail: {
enabled:
true
,
// サムネイル表示するかどうか
noImageURL:
'//garafu.github.io/blogger.toc/release/0.0.5/noimage.png'
// サムネイルが存在しないときに割り当てる画像
},
published: {
enabled:
true
,
// 公開日を表示するかどうか
format:
'yyyy/MM/dd'
// 公開日のフォーマット
},
updated: {
enabled:
true
,
// 更新日を表示するかどうか
format:
'yyyy/MM/dd'
// 更新日のフォーマット
}
};
</script>
<
link
rel
=
"stylesheet"
type
=
"text/css"
href
=
"//garafu.github.io/blogger.toc/release/0.0.12/simple.css"
/>
<script type="text/javascript" src="//garafu.github.io/blogger.toc/release/0.0.12/blogger.toc.min.js">
</script>
以下の設定を変更します。細かな設定に関しては後述の説明をご確認ください。
blogURL Blogger の ドメイン を設定します。 sort.key 記事ソート順を [title, published, updated] から設定します。デフォルト published。 - title : 記事の名前をキーとしてソート
- published : 投稿日をキーとしてソート
- updated : 更新日をキーとしてソート
printby 表示方法を [title, label, label.nameorder, label.contentsorder] から設定します。デフォルト label。 - title : 記事を一覧
- label : ラベル別に記事を一覧
- label.nameorder : ラベル別に記事を一覧。ラベルはラベル名の昇順にソート。
- label.contentsorder : ラベル別に記事を一覧。ラベルはラベルに含まれる記事が多い順にソート。
thumbnail.enabled サムネイルを表示するかどうか を設定します。デフォルト false 。 - published.enabled
公開日を表示するかどうか を設定します。デフォルト false 。 updated.enabled 更新日を表示するかどうか を設定します。デフォルト false 。 保存して公開します。
説明
とりあえず試したい方は デモページ(日本語) をご参照ください。 試した結果が出力されるので、そのコードをコピー&ペーストすると簡単に "Blogger 記事 の 一覧表示" を作成できます。
リスト出力設定
{ blogURL: 'garafu.blogspot.com', maxResults: Infinity, keyword: 'JavaScript', sort: { key: 'published', order: 'default' }, printby: 'label', newPost: { enabled: false, symbol: 'NEW !', term: 30, target: 'published' }, thumbnail: { enabled: false, noImageURL: '//garafu.github.io/blogger.toc/release/0.0.5/noimage.png' }, published: { enabled: false, format: 'yyyy/MM/dd HH:mm:ss' }, updated: { enabled: false, format: 'yyyy/MM/dd HH:mm:ss' }, target: undefined }
プロパティ | 型 | 説明 | ||||||||
---|---|---|---|---|---|---|---|---|---|---|
blogURL |
string |
ブログのドメインを指定します。
https://garafu.blogspot.com/ であれば garafu.blogspot.com 部分のみを指定します。 |
||||||||
maxResults |
number |
受信する最大記事数を指定します。すべての記事を対象とする場合 Infinity を指定します。
デフォルト Infinity です。 |
||||||||
keyword |
string |
絞り込みたいキーワードを指定します。 日本語タグを指定する場合 URI エンコード を行ったものを指定します(デモページでは自動変換するので日本語のままでOKです)。 何も指定しなければすべてのタグを受信対象にします。 デフォルトは指定なしです。 | ||||||||
sort |
object |
ソート方法に関する設定を指定します。 | ||||||||
sort.key |
enum |
ソートキーを指定します。指定できる値は以下の通りです。
|
||||||||
sort.order |
enum |
ソート順を指定します。指定できる値は以下の通りです。
| ||||||||
printby |
enum |
表示方法を指定します。指定できる値は以下の通りです。
|
||||||||
newPost |
object |
新着記事表示に関する設定を指定します。 | ||||||||
newPost.enabled |
boolean |
新着記事アイコンを表示するかどうかを指定します。 | ||||||||
newPost.symbol |
string |
新着記事アイコンとして表示する文字列を指定します。 | ||||||||
newPost.term |
number |
新着記事として判定する期間(日数)を指定します。 | ||||||||
newPost.target |
enum |
新着記事として判定するとき、比較対象とする日付を指定します。指定できる値は以下の通りです。
|
||||||||
thumbnail |
object |
サムネイル表示に関する設定を指定します。 サムネイルは記事中の一番最初にある画像が使用されます。 サムネイルは通常 72px × 72px の大きさです。 | ||||||||
thumbnail.enabled |
boolean |
サムネイルを表示するかどうかを指定します。 | ||||||||
thumbnail.noImageURL |
string |
サムネイルが存在しない場合に表示する画像へのパス(URL)を指定します。 | ||||||||
published |
object |
公開日に関する設定を指定します。 | ||||||||
published.enabled |
boolean |
公開日を表示するかどうかを指定します。 | ||||||||
published.format |
string |
公開日を表示する場合、どのように表記するかを指定します。 利用できる制御文字は (*1) 日付フォーマット をご参照ください。 | ||||||||
updated |
object |
更新日に関する設定を指定します。 | ||||||||
updated.enabled |
boolean |
更新日を表示するかどうかを指定します。 | ||||||||
updated.format |
string |
更新日を表示する場合、どのように表記するかを指定します。 利用できる制御文字は (*1) 日付フォーマット をご参照ください。 | ||||||||
target |
string |
リンクの開き方( a タグ の target 属性 )を指定します。デフォルトは undefined で指定なしです。 |
制御文字 | 説明 | サンプル |
---|---|---|
d | 月の日にち (1 ~ 31)。 | 3 |
dd | 月の日にち (01 ~ 31)。 | 03 |
E | 曜日の省略名。 | 火 |
EE | 曜日の完全名。 | 火曜日 |
G | 時期または時代 (年号)。 | 西暦 |
h | 12時間形式の時間 (1 ~ 12)。 | 5 |
hh | 12時間形式の時間 (01 ~ 12)。 | 05 |
H | 24時間形式の時間 (1 ~ 24)。 | 8 |
HH | 24時間形式の時間 (01 ~ 24)。 | 08 |
m | 分 (0 ~ 59)。 | 2 |
mm | 分 (00 ~ 59)。 | 02 |
M | 月 (1 ~ 12)。 | 6 |
MM | 月 (01 ~ 12)。 | 06 |
MMM | 月の省略名。 | 1 |
MMMM | 月の完全名。 | 1月 |
s | 秒 (1 ~ 59)。 | 6 |
ss | 秒 (01 ~ 59)。 | 06 |
t | AM/PM 指定子。 | 午前 |
yy | 2桁の年。 | 98 |
yyyy | 4桁の年。 | 1998 |
z | UTCを基準とする時間単位のオフセット (先行ゼロなし)。 | -8 |
zz | UTCを基準とする時間単位のオフセット (先行ゼロ付きの 1桁の値)。 |
-08 |
zzz | UTCを基準とする時間および分単位のオフセット。 | -08:00 |
スタイルシート設定
スタイルシート
各要素に対してできるだけ クラス名 を割り振るよう作成されています。
あらかじめある スタイルシート で思うような表示ができていない場合、
<link />
を利用せず、自前で stylesheet を記述することができます。
不具合、ご要望等はこの記事にレスしていいただくか、こちら(Github garafu/blogger.toc Issues) までご連絡いただけると幸いです。
更新履歴
- 2018/10/08 v0.0.12
- targetオプション追加。
- 2016/10/09 v0.0.11
- keywordオプション追加。microdataの自動生成機能を追加。
- 2016/05/14 v0.0.10
- https対応。
- 2016/05/14 v0.0.9
- 記事フィードが正しく受信できない不具合を修正。
- 2015/10/10 v0.0.8
- 新着記事にアイコンをつける機能を追加。手順の画面キャプチャを更新。説明欄の拡充。
- 2015/08/30 v0.0.7
- ソートの降順、昇順を制御する機能を追加
- 2015/07/12 v0.0.6
- 公開日、更新日を制御する機能を追加
- 2015/07/12 v0.0.5
- サムネイル表示機能を追加
- 2015/05/09 v0.0.4
- 一部のサイトで正しく表示されない不具合修正
- 2014/04/28 v0.0.3
- ブログテンプレートの種類によりスクリプトが正しく動作しない不具合修正
- 2014/04/27 v0.0.2
- ブログ記事をすべて読み込めるよう修正
参考記事
最後に… このブログに興味を持っていただけた方は、 ぜひ 「Facebookページ に いいね!」または 「Twitter の フォロー」 お願いします!!