▲PAGE TOP

2014年4月23日水曜日

クラウド型ラベル一覧表示を角丸背景バナーに変更する



詳しくは「 How To Customize Label Cloud in Blogger With CSS3 Effects 」 で紹介されています。


  1. レイアウト>ガジェットの追加>「ラベル」を追加する
  2. ラベルの設定画面にある「表示」を”クラウド”にして保存し、適当な場所にレイアウトする
  3. テンプレート>HTML編集
  4. ]]></b:skin>の前にCSS(1)を追加して保存する


CSS(1)

background:#ff0 の色を変更すると、選ばれたラベルの背景色を変えることができます。


/*--- クラウド型ラベル表示のカスタマイズ  --- */
.Label a{
padding-left:20px;
background:#000;
padding:0 20px;
color:#fff!important;
border-radius:100px;
-moz-border-radius:100px;
height:32px;
line-height:32px;
text-transform:uppercase;
text-decoration:none;
border:none !important;
-webkit-transition:all .3s ease-in-out !important;t: 30pxt: 30px;
float:left;
margin-left:5px;
margin-top:5px;
font-size:14px; }
.Label a:hover{
color:#000 !important;
background:#ff0; }








COMMENT 投稿した内容は「 掲示板 」に掲載されます。
ペンネーム(必須)

タイトル

メールアドレス

話題にするページ/ウェブサイトのURL
メッセージ(必須)
アップロードする画像
パスワード(必須)