味気ないBloggerのラベルを、見やすい四角いラベルに変更する方法

おすすめ記事ピックアップ

Bloggerのラベル(Label)を四角いラベルに、CSSでカスタマイズする方法を紹介します。ブロガーのラベルは、リストっぽくてイマイチだと思っていましたら試してみてください。

下記で紹介するCSSコードをHTMLテンプレートに張り付ければOKです!と言いたいところですが、在来のCSS等のデザインありますとうまく行かないかもしれません。参考として利用ください。


こんな風に分かりやすくなります。


サイドバーのラベルを想定して記事を作成しています。例えばフッターやヘッダーで使いたい場合は、合わせてCSSを調整してください。

Labelの設定がクラウドだと、このように表示されません。後の設定は自由です。


Bloggerのラベルを四角いラベルにするCSSコード

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

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


簡単にCSSを説明します。色やマージンは好みで設定ください。

サイドバーのulのラベルに付く「・」をlist-style: noneで消します。 listは余白が設定されていますので マージンやスペースもゼロにします。

.sidebar ul{
list-style: none;
margin: 0;
padding: 0;
}

次にsidebar(ブログの右側部分)のwidgetを線で囲む設定と、隙間を調整します。ウィジェットを線で囲み見たくなければ、ボーダーの設定を消してください。

.sidebar .widget-content{
padding: 10px 15px;
margin: 0;
border: 1px solid #C0C0C0;
background-color: #FFFFFF;
position: relative;
}

ラベルの設定がこの部分です。パディングでラベルの大きさを調整できます。フォントサイトはfontで調整してください。フォントの指定は下記のように設定できます。不要であれば削除。floatを消せば横まで伸びます。

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

リンクのカラー等をここで設定しています。下線を付けたい場合はtext-decorationを削除してください。

.Label li a {
color:#FFFFFF;
text-decoration:none;
}

.Label li:hover {
background-color:#2E2E2E;
}

HTMLの編集で、任意のCSSコード部分に張り付ければ完成です。

補足としてテキスト部分にしか、リンクの判定がありません。例えば投稿数やラベルの端は、クリックしてもリンク先へ飛びません。ラベルをテキストサイズに合わせたり、テキストを大きくすれば、違和感が無くなります。





いいね!と思ったらお願いします。


名前

AddToAny adsence adwords Amazon AmazonFBA Calculator Analytics Blogger BMAG chrome CODEPREP Eclipse envato facebook FAQ feedly Font Awesome Geek Press Gifzo Illustrator kindle LinkWithin Logaster myfonts NAVER Photoshop PHP picasa Premiere Similarweb TOPSY tumblr Wordpress wpX XAMPP zenback ウェブマスターツール ウハウハモウケタイ カスタマイズ ゲストシリーズ ココナラ サイト制作 ドメイン はじめに プレスリリース プレスリリース作成 プレスリリース利点 まとめ ランディングページ リリース送付先の見つけ方 レビュー 考察 子孫セレクタ 思いつきサイト制作 書評 足成 台湾 通販 日記 忍者おまとめボタン 文章の基本
false
ltr
item
ふりむけばコウホウ : 味気ないBloggerのラベルを、見やすい四角いラベルに変更する方法
味気ないBloggerのラベルを、見やすい四角いラベルに変更する方法
Bloggerのラベル(Label)を四角いラベルにCSSをカスタマイズする方法を紹介します。ブロガーのラベルは、リストっぽくてイマイチだと思っていましたら試してみてください。 下記で紹介するCSSをHTMLテンプレートに張り付ければOKです。と言いたいところですが、CSSのデザインしていると、うまく行かないかもしれません。参考として利用ください。
http://1.bp.blogspot.com/-Y-IkvfScOyE/UpSk7iZBnhI/AAAAAAAANRg/tCsgRi1L2h8/s640/label0002.png
http://1.bp.blogspot.com/-Y-IkvfScOyE/UpSk7iZBnhI/AAAAAAAANRg/tCsgRi1L2h8/s72-c/label0002.png
ふりむけばコウホウ
http://www.furimuke.com/2013/11/blogger-label-css.html
http://www.furimuke.com/
http://www.furimuke.com/
http://www.furimuke.com/2013/11/blogger-label-css.html
true
8618648785166852656
UTF-8
Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All 関連記事:もっと見るはクリック→ LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy