ニケッチャニッキ

はてなブログ・WordPressカスタマイズ・Androidプログラミング

cssのクラスは複数設定できる!よく使うクラスを登録して使いまわそう

WordPressを使い始めたとき、クラス指定のところにあるスペースは一体なんだ?と思ったことがあります。

調べてみると、スペースで区切ることで複数のスタイルを指定できるということらしい。

同じスタイルを使いまわせて便利です!

複数のクラスを指定する方法

css
.center{
    text-align:center;
}
.futomoji{
    font-weight:bold;
}
html
<div class="center">ここはセンタリング</div>
<div class="futomoji">ここは太文字</div>
<div class="center futomoji">ここはセンタリングで太文字</div>
表示見本
ここはセンタリング
ここは太文字
ここはセンタリングで太文字

このサイトのサイドバータイトル

このサイトのサイドバーは以前、下記の画像のようにコンテンツ毎にFontAwesomeのアイコンを変えていました。

これも複数クラス指定で表現しています。

関連1行追加するだけ!簡単かわいいアイコンフォントFontAwesomeを導入する方法

css
.sidebar-title{
    position: relative;
    padding: 2px 0 2px 18px;
    font-size: 18px;
    font-weight: bold;
    color: #333333;
    margin:10px 0;
}

.sidebar-title:before{
    font-family: FontAwesome;
    display: inline-block;
    position: absolute;
    padding: 0;
    background: #56BACC;
    color: #fff;
    font-weight: normal;
    line-height: 35px;
    text-align: center;
    width: 35px;
    height: 35px;
    left: -25px;
    top: 50%;
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    border-radius: 50%;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.29);
}
.relate:before{
    content: "\f0c1";/* 関連 */
}
.popular:before{
    content: "\f201";/* 人気 */
}
html
<div class="sidebar-title relate">related post</div>
    ※関連記事リストコンテンツ※
<div class="sidebar-title popular">popular post</div>
    ※人気記事リストコンテンツ※