日々のコンピュータ情報の集積と整理

Dr.ウーパのコンピュータ備忘録

2015年4月11日土曜日

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;
}


結果





まとめ

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

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






関連記事

関連記事を読み込み中...

同じラベルの記事を読み込み中...
Related Posts Plugin for WordPress, Blogger...