Blogger:JavaScript:新着情報を表示するガジェット - CSSによるカスタマイズ手法

イントロダクション

以前、Google のブログサービス「Blogger」にて、サムネイル付きの新着情報の一覧を任意の件数表示できる「新着情報ガジェット」を作成しました。

Blogger:JavaScript:新着情報を表示するガジェットを作成(6)-記事の投稿日を追加
http://upa-pc.blogspot.com/2015/03/blogger-new-post-list-gadget-javascript-6.html
Dr.ウーパのコンピュータ備忘録

今回は、その「新着情報ガジェット」をスタイルシートでいろいろとカスタマイズしてみます。

Blogger:JavaScript:新着情報を表示するガジェット - CSSによるカスタマイズ手法

目的別のスタイルシートを定義します。

なお、ここで定義するスタイルシートは、「新着情報ガジェット」に必要なスタイルシートに追加して使います。

区切り線を付ける

CSS

.new-post-list-item {
  border-bottom-style: dashed;
  border-bottom-width: 1px;
  border-bottom-color: #999999;
  min-height: 100px;
}

結果

囲み枠を付ける

CSS

.new-post-list-item {
  border-style: solid;
  border-width: 1px;
  border-color: #999999;
  min-height: 100px;
}

結果

サムネイル画像に囲み枠を付ける

CSS

.new-post-list-item-img {
  border-style: solid;
  border-width: 1px;
  border-color: #999999;
}

結果

マウスを乗せたら背景色を変える

CSS

.new-post-list-item:hover {
  background-color: #ffff00;
}

.new-post-list-item {
  min-height: 100px;
}

結果

タイトルを太字にする

CSS

.new-post-list-item-title {
  font-weight: bold;
}

結果

「続きを読む」を付ける

CSS

.new-post-list-item-post-date:after {
    content: "続きを読む";
    display:block;
    color:#ff0000;
}

結果

記事間のスペースを空ける

CSS

.new-post-list-item {
  min-height: 120px;
}

結果

まとめ

このように、スタイルシートを駆使することで「新着情報ガジェット」に対して、様々なカスタマイズを行うことが可能です。

上記に挙げた例以外にも様々なカスタマイズが可能です。
是非、スタイルシートを駆使して様々なカスタマイズを行ってみてください。

このブログ内の、他の”Blogger”についての情報を見る

---

HTML5&CSS3デザインブック (ステップバイステップ形式でマスターできる)