記事の本文の部分に背景を設定しよう | アメブロカスタムで見せるブログへ

アメブロカスタムで見せるブログへ

見てもらうブログから見せるブログへ変身させましょう♪

記事の本文の背景に色を敷いたり画像を指定してみましょう。


これは記事の読みやすさも考えながら自分のオリジナリティ溢れる変更を心がけましょうラブラブ

あくまでもブログは他人に読んでもらうことが多いので読みにくい変更はNGです汗



背景に色をつけてみよう


背景に色を敷いてみましょう。


変更前の見出しはこのような感じです。




この背景に色を敷いてみます。

もちろん色は自由に変えることができます。




それでは、やり方と解説をします。


CSS編集で下記を一番下に追加します。



.skinArticle{
backgroundF:#FFEFD5;
border: 1px solid #000000;
}

解説は次の通りです。



background:#FFEFD5;
この部分は背景の色を指定します。
border: 1px solid #000000;
これは記事本文の枠をborder(線)太さ1pxのサイズの#000000(黒色)のsolid(実線)を引く、となりってます。
}

自分のブログに合う背景色を選んで変更してみましょうビックリマーク
色のコードがわからない場合はこちらを参考にしてください。



背景に画像を設定しよう


今度は色だけではなく画像を設定してみましょう。

利用する画像は下記のものです。



CSSの一番下に追加します。



.skinArticle {
background-image: url("画像のURL");
border: 1px solid #000000;
}

解説は次の通りです。



background-image:url(画像のURL);
この部分はアップロードした画像のURLを指定してタイトルの背景に敷きます。
border: 1px solid #000000;
これは記事本文の枠をborder(線)太さ1pxのサイズの#000000(黒色)のsolid(実線)を引く、となりってます。
}

出来上がったものがこちら


ピグタウン


アイデア次第で色々なカスタムができますので、是非チャレンジしてみてください。