見やすくキレイにアレンジできます。
細かく指定すれば、さらに自分らしくアレンジできます。
ラベル一覧を可愛いポストイット風にカスタム
ラベル一覧をカスタムします。
参考にしたのはこちらのサイトです。
味気ないBloggerのラベルを、見やすい四角いラベルに変更する方法
http://www.furimuke.com/2013/11/blogger-label-css.html
では始めてみましょう。
まず、ラベル一覧をリスト表示でウィジェットに追加して下さい。
管理画面のレイアウト→
ウィジェットの追加→
ラベル一覧から設定出来ます。
クラウド表示では上手くカスタム出来ないようなので、
リストにして下さい。
次はBloggerの管理画面。
テンプレート→
テンプレート編集へいきます。
以下を追加します。
.sidebar ul{
list-style: none;
margin: 0;
padding: 0;
}
.sidebar .widget-content{
padding: 10px 15px;
margin: 0;
border: 1px solid #C0C0C0;
background-color: #FFFFFF;
position: relative;
}
上記コードは、私は使っていません。
サイドバーのリスト表示を
レイアウト調整するコードです。
他のCSSで指定されているのか、
サイドバーの表示が少し崩れたので
導入しませんでした。
皆様も必要に応じて追加して下さい。
もともとあるご自身のテンプレートに
.sidebar
コードがあるので、
それを見て、同じようなコードがあり、
不要であれば導入しないで下さい。
一度テンプレートのバックアップを取ってから
試しに導入してみて、
キレイになったらそのまま。
他のリスト表示ウィジェットに影響が出たら
削除したら良いと思います。
リストをポストイットのように色付けするコードが
.Label li {
padding: ;
float: left;
margin: 2px 1px 2px 2px;
background-color: #f9ffd0;
border-top: 1px solid #DCDDDD;
border-radius: 10px;
font-weight:bold;
}
.Label li a {
text-decoration:none;
}
.Label li:hover {
background-color: ;
}
です。
.Label li {
でラベルの色や位置を指定します。
私は背景色や角に丸みをもたせるコードを追加しています。
.Label li:hover {
で、カーソルを合わせた時に色がつくようにできます。
これはユーザーが使いやすいのでおすすめです。
私はリンク文字の色だけ変化するようにしているので、
このコードは空欄にしています。
原文からカスタムしたい方は、
.Label li {
padding: 5px 5px;
float: left;
margin: 0px 3px 3px 0px;
background-color: #0077B9;
color: #B8B8B8;
font: 12px'Lucida Grande','Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
}
.Label li a {
color:#FFFFFF;
text-decoration:none;
}
.Label li:hover {
background-color:#2E2E2E;
}
をどうぞ。
サイトを運営する上で、
こういうカスタムがとても楽しいですね。
見栄えがとても良くなります。
是非チャレンジしてみましょう！
当ブログ内の情報は、
全ての方に応用できるとは限りません。
必ずテンプレートはバックアップを取っておいて下さいね。
また、ご利用は自己責任でお願い致します。
ラビットしま子は美容ライターであり、
サイト制作のプロではありません。
個別のカスタマイズについてのご相談は、
乗ってあげたいけど、乗れません。（わからんから）
スポンサードリンク