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

Webデザイン ブログの見出しを装飾

ブログの見出しデザインが素っ気ない感じだったので、
装飾してみました。
備忘録として記載しておきます。

スポンサーリンク

ボックスの構造を理解

CSSで装飾する上で、まずはボックスの構造を勉強しました。
HTMLの表示内容は、ボックスと呼ばれる四角い領域に表示され、
ボーダーと呼ばれる境界線を表示させることができます。
ボーダーの内側と外側には余白をとることができ、
内側の余白をパディング、外側の余白をマージンといいます。

この仕組を利用して、見出しを装飾します。
ボックスの構造

CSSファイルを変更

ボックスの構造を理解したら、実際にCSSファイルを変更して、見出しを装飾します。
まずは、見出しの左端にワンポイントでバーをつけるため、
左ボーダー(border-left)で太さ10pxの線を引きます。
次に見出し表示内容とバーの間隔を左パディング(padding-left)で調整します。
今回は10pxの余白を取りました。
見出し表示の上下の余白は、上パディング(padding-top)
と下パディング(padding-bottom)で調整します。
今回は、5px余白を取りました。
最後に、下ボーダー(border-bottom)で、1pxのアンダーラインを引いて完成です。

見出し装飾説明図

まとめ

しっかりと、ボックスの構造を理解すれば、
見出しの装飾は簡単でした。
少しずつ勉強しながら、見やすいブログ・サイトにしていこうかと思います。
参考になれば幸いです。

スポンサーリンク

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

Twitter で

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

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

ブログ用無料WordPressテーマ

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

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

無料WordPressテーマ

コメントを残す

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

CAPTCHA


ページトップボタン