サイドバーに任意の順番でカテゴリを並べる [Blogger]

Bloggerのカスタマイズ記事です。
(カテゴリが「Vaster2 カスタマイズ」になっていますが、Bloggerの他のテーマを使用中でもカスタマイズできる内容です)

Bloggerには他のブログのように「カテゴリ」機能がなく、その代わり「ラベル」という機能があります(他のブログでいう「タグ」です)。
このラベル一覧をBloggerのガジェットで表示すると、50音順か投稿数順にしか並べられないという欠点があります。

任意の順番でカテゴリを並べるために、Bloggerの「HTML/JavaScript」を使ってカスタマイズした記事です。

修正前後

修正前


50音順に並んでいる状態です。

修正後


自分で好きなようにレイアウトした順番になりました。
選択したカテゴリは背景色のついた白抜き文字になるようにして、選択していることをわかりやすくしています。

スポンサーリンク

修正方法

サイドバーに任意の順番でカテゴリを並べる方法



1. Bloggerの設定画面から「レイアウト」→「ガジェットを追加」と進み、「HTML/JavaScript」を追加。

2. 好きな順番にカテゴリを並べて表示するように編集する

「HTMLの編集」で記述するときのヒント

基本的なHTMLの知識がなくても、下記の内容を知っていれば編集できます
  • 改行は<br />
  • リンクは<a href="[リンク先のアドレス]">[表示したい内容]</a>
  • 太字は<b></b>で指定する(<span style="font-weight:bold;"></span>で指定すると、テーマの保存をしたときに太字指定が解除される場合がありました)
  • フォントサイズの指定をしたい場合は、↓の説明を参照(ガジェット内で指定するとテーマを保存した時に反映されない場合がありました)

選択したカテゴリに背景色を付けて文字の色を変える方法

ちょっとだけ見栄えをよくするための変更。
フォントサイズの指定もしています。

※この方法で修正するとサイドバーのリンクがすべて設定した通りに変更されるので、レイアウトに注意してください

1. テンプレートに以下の内容を加えます。

.sidebar a:link {
color:#222222;
}
.sidebar a:visited {
color:#686868
}
.sidebar a:active {
background-color:#222222;
color:#ffffff;
}
.sidebar a:hover {
background-color:#222222; 
color:#ffffff;
}
.sidebar {font-size:13px;} ←フォントを変更するのはこれ

それぞれの内容は以下の通り。
color:の後ろの色が文字の色の指定、background-color:の後ろの色が背景色の指定なので、好きな色に変えてください。

.sidebar a:link :リンクの色(カテゴリは基本的にリンクされた表記になるので、基本として表示したい色をここで指定する)
.sidebar a:visited :訪問したリンクの色
.sidebar a:active:クリックしたときの色
.sidebar a:hover:マウスを載せたときの色


関連記事:初心者でもわかるVaster2のカスタマイズ方法の記事リスト
スポンサーリンク

0 件のコメント :

コメントを投稿