デザイン制作、Web制作、ブログ運営などのノウハウを配信するサイト

サイトに背景色と枠をつけてみた

background-border
本ブログ・サイトに背景色と枠を付けてみました。
備忘録として残しておきます。

スポンサーリンク

背景指定方法

背景画像を自分の公開しているサイトのフォルダへ格納します。
※背景画像は、以下のサイトから無料でダウンロードできましたので利用させて頂きました。
ホームページ背景画像

background-imageプロパティを使って以下のように指定します。
urlは、画像を保存したurlを指定します。

枠の指定方法

記事の内容や記事一覧に外枠を付けます。
枠を付けたい要素に”contens_border”というクラス名を付け、CSSでレイアウトを設定します。
以下のように、borderでsolid(一本線)を指定し、線の太さと色を指定します。

※線の種類は、solid(一本線)以外にも以下のような種類を指定できます。
double・・・2本線
groove・・・立体的に窪んだ線
ridge・・・立体的に隆起した線
inset・・・上と左が暗く、下と右が明るく表示
outset・・・上と左が明るく、下と右が暗く表示
dashed・・・破線
dotted・・・点線

最後に

以上、背景色の設定と枠の設定方法でした。
背景色と枠を付けただけですが、
見やすさが少し改善されたのではないかと思います。

少しでも参考になれば幸いです。

スポンサーリンク

いいね!を押すと、
最新記事をお届けします。

Twitter で

ブログ用WordPress無料テーマ
「chameleon(カメレオン)」

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

ブログ用無料WordPressテーマ

士業用WordPress無料テーマ
「InomaExpertBasic」

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

無料WordPressテーマ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


ページトップボタン