blogger

Blogger カスタマイズ備忘録2　記事の一覧表示が欲しい

私が使用しているテンプレート

トーマスさんが公開されている Vaster2　レスポンシブ対応済みのblogger日本語テンプレートを使っています。 素晴らしいです。
引き続き Blogger　の設定についてです。
あっちもこっちも、やりたいことがいっぱいありますね。

記事の一覧表示が欲しい

まだ、それほと記事の枚数はありまらんが、サイトマップのようなものがあればなぁと思っていました。

記事の一覧を見るためにはスクリプトを入れなければなんですね。
Blogger 記事 を 一覧 表示 する ページ の 作成方法 - galife　を参考にさせていただきました。

こちらの　blogger.toc　を開くと一覧表示のHTMLを自動的に作ってくれます。
また、その場でデモ画面も表示されますので、とても便利ですね。

作成されたHTMLをページに貼り付けますが。
貼り付けた後に　http://　を　https://　に変更しないとエラーメッセージが出ます。

こんな感じで、一覧を見ることができます。

設定を変更すればラベルごとの一覧もできます

サイトマップではリストに番号を振るようにしてみました。
HTML編集画面で、最初に下記CSSを入れると、番号が表示されます。

記事中の画像に影をつけたい

色々あれこれやってみたくなりますよね。
そう考えると、Bloggerは柔軟性があるけど、初心者向けではないような気がします。

このページの画像には影を付けてあります。
詳細は　CSSで画像に影をつける方法について！ブログの見た目を綺麗に　を参考にさせていただきました。

次のCSSをページHTMLのトップに書き込み、imgタグにclassを追加します。

.shadow {
    margin-top: 5px; /* 画像の上の余白*/
    display: inline-block; 
    box-shadow: 0px 5px 15px -5px rgba(0, 0, 0, 0.8); 
    /*横方向　下方向　ぼかし　広がり　色 */
}

imgタグにclassを追加します。