今回のカスタマイズ
今回はブログのサイドバーをカスタマイズします。サイドバーには、「最近の投稿」や「最近のコメント」など、色々な情報をリスト表示することができます。そのリストのデザインを変更してみます。
サイドバー
サイドバーのHTML構造とクラス、ID指定は以下のようになっています。
HTML構造
リストの左側にアイコンを表示
「最近の投稿」などのリストの左側に、アイコン画像を表示してみます。まずは、小さなアイコン画像を作成して、TypePadにアップロードしてく ださい。画像をアプロードしたら、「カスタムCSSを編集」で以下のCSSを追加します。background-image: url()の中にアップロードした画像のURLを指定します。padding-leftで、アイコンと文字が重ならないように調整をします。
.module-list-item {
padding-left: 20px;
background-image: url(http://www.sixapart.jp/typepad/images/2005/11/green_arrow.gif) ;
background-repeat: no-repeat;
}
以下のように、リストの左側にアイコンが表示されます。
リストの種類ごとにカスタマイズ
上の例では、サイドバーのすべてのリストにアイコン画像が表示されるようになりますが、特定のリストを指定することも可能です。サイドバーには色々な種類のリストを表示できますが、それぞれに以下のようなクラスが指定されています。
| リストの種類 | Class属性 |
| プロフィール | .module-about |
| アーカイブ | .module-archives |
| カレンダー | .module-calendar |
| カテゴリー | .module-category |
| メール送信 | .module-email |
| あなたの写真 | .module-photo |
| Powered by Typepad | .module-powered |
| オンライン状態 | .module-presence |
| 最近のコメント | .module-recent-comments |
| 最近のエントリー | .module-archives |
| 最近のトラックバック | .module-recent-trackbacks |
| TypeListのひとリストに追加 | .module-subscribe |
| RSS/XMLフィードを登録 | .module-syndicate |
| 最近更新されたブログ | .module-update-list |
| Amazonウィッシュリスト | .module-wishlist |
| RSS/XMLフィード配信 | .module-feed |
リストのクラスを指定してから、その下の .module-list-itemなどの要素を指定することで、リストごとに異なるデザインにすることが可能です。
.module-archives .module-list-item {
margin-left: 8px;
padding-left: 16px;
background-image: url(http://www.sixapart.jp/typepad/images/2005/11/green_arrow.gif) ;
background-repeat: no-repeat;
}
.module-recent-comments .module-list-item a:hover{
background:#f0aa2f;
color:#fff;
}
この例では、「最新の投稿」リストにはアイコンを表示し、「最近のコメント」リストには、リンクにマウスを重ねると背景色が変わるように指定しています。
