サイトに背景色と枠をつけてみた
本ブログ・サイトに背景色と枠を付けてみました。
備忘録として残しておきます。
背景指定方法
背景画像を自分の公開しているサイトのフォルダへ格納します。
※背景画像は、以下のサイトから無料でダウンロードできましたので利用させて頂きました。
ホームページ背景画像
background-imageプロパティを使って以下のように指定します。
urlは、画像を保存したurlを指定します。
1 2 3 |
body {margin: 0; font-family: 'メイリオ', 'Hiragino Kaku Gothic Pro', sans-serif; background-image: url(images/backgroundimg.gif); } |
枠の指定方法
記事の内容や記事一覧に外枠を付けます。
枠を付けたい要素に”contens_border”というクラス名を付け、CSSでレイアウトを設定します。
以下のように、borderでsolid(一本線)を指定し、線の太さと色を指定します。
1 2 3 4 5 6 7 8 |
/* コンテンツに枠をつける */ .contents_border { background-color: #ffffff; border: solid 1px #cccccc; border-radius: 2px; padding: 10px 10px 10px 10px; margin-bottom: 20px; } |
※線の種類は、solid(一本線)以外にも以下のような種類を指定できます。
double・・・2本線
groove・・・立体的に窪んだ線
ridge・・・立体的に隆起した線
inset・・・上と左が暗く、下と右が明るく表示
outset・・・上と左が明るく、下と右が暗く表示
dashed・・・破線
dotted・・・点線
最後に
以上、背景色の設定と枠の設定方法でした。
背景色と枠を付けただけですが、
見やすさが少し改善されたのではないかと思います。
少しでも参考になれば幸いです。
スポンサーリンク
飲食店用WordPress無料テーマ「InomaRestaurantBasic」
飲食店用の無料WordPressテーマを作成しました。
店のコンセプト、メニュー、アクセスなど
飲食店に必要な最低限の機能を搭載しました。
これから飲食店のホームページを開設したい方、
この無料テーマを是非活用してみてください。

ブログ用WordPress無料テーマ「chameleon(カメレオン)」
WordPressテーマ(chameleon)は、「WordPressで手軽・気軽にブログ始められる」をコンセプトに制作しました。 初めてWordPressでブログを始める方、是非シンプルなテーマchameleon「カメレオン」を使ってみてください!

士業用WordPress無料テーマ「InomaExpertBasic」
士業用の無料WordPressテーマを作成しました。
もちろん、一般的なビジネスサイトに活用できます。
自分でサイト更新したい方、
これからホームページを立ち上げようとする方、
自分でWordPressテーマを作ってみたい方、
この無料テーマを是非活用してみてください。
