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

2015年4月11日土曜日

イントロダクション

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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