【はてなブログ】ブログで文字の背景色を設定する方法

前の記事ではてなブログでCSSを適用させる方法を紹介したので、

今回は「CSSの中身はどうするの？」とか「HTML内の記述はどうするの？」などといったような詳細な内容について記述していきます。

www.social-company.site

【スポンサーリンク】

以下は、私が適用しているCSSの中身の一部です。

ul, ol {
  color: #668ad8; 
  border: double 5px #668ad8;
  background: #f1f8ff; 
  padding: 0.5em 0.5em 0.5em 2em;
}

ul li, ol li {
  line-height: 1.5;
  padding: 0.5em 0;
}

.black{
background-color: #000000
}

.gray{
background-color: #808080
}

.silver{
background-color: #C0C0C0
}

.white{
background-color:#FFFFFF
}

.blue{
background-color:#0000FF
}

.navy{
background-color:#000080
}

.teal{
background-color:#008080
}

.green{
background-color:#008000
}

.lime{
    background-color: #00FF00
}

.aqua{
    background-color: #00FFFF
}

.yellow{
    background-color: #FFFF00
}

.red{
    background-color: #FF0000
}

.fuchsia{
    background-color: #FF00FF
}

.olive{
    background-color: #808000
}

【スポンサーリンク】

上記のCCSがどういった内容かと言うのを説明していきます。

CSSは基本的にclassとidという大きな括りがあります。

上述のコード内の.blackなどの「.」がclass属性を示しています。そして、上述コード内にはありませんが、「＃」がid属性を示しています。

CSSは主にルールを定義するというイメージが正しいと思います。

なので、HTML内でしっかりと適用させる必要があります。

<span class="yellow">CSSの適用</span>

上記のようにやるとしっかりとCSSが文字に適用されます。

CSSの適用

こんな感じになります！上手く適用されない人は不要なスペースや半角、全角の違いなどのミスが考えられるので打ち直しをしてみると意外と解決することができます。

TOPに戻る