見出しのデザインを考えてます。
色々な方のサイトを見ていると、見出しが綺麗に修飾されています。
とても綺麗で目を引きます。
自分のブログも綺麗に作って、たくさんの方に見て頂きたいものですよね。
見出しを綺麗に見せるには、CSS（スタイルシート）を利用します。
CSSだけでも修飾できますし、画像を貼り付けて修飾することも可能です。
今回は、画像を使わずにCSSのみで、見出しを修飾してみます。
修飾するタグを決めておく
見出しですから、使うタグは <h1> から<h4> くらいまでのタグになります。
もしもタグを限定したくない場合は、<div> タグを利用して修飾すると良いでしょう。
見出しを修飾方法
修飾には、次の方法があります。
- タグに対して、styleを指定する方法
- HTMLファイル内に<style>で定義する方法
- CSSファイルを作成して参照する方法
Bloggerでは、テンプレートに指定がありますので、
HTMLファイル内に<style>で定義する方法です。
見出しを修飾する
実際に見出しを修飾してみます。
次のように<h4>に直接、styleを指定してみます。
<h4 style="border-left:#228b22 8px solid;" > 見出しサンプル1 </h4>すると、次のような見出しになります。
見出しサンプル1
次は、<style>で指定してみます。
指定サンプルは、次の通り
<style>
.sample2 {
border-left:#228b22 8px solid;
}
</style>
<h4 class="sample2">
見出しサンプル2
</h4>
見た目は次の通りになります。
見出しサンプル2
CSSファイルを作成して参照する方法では、別ファイルに<style>タグ内の指定を
記述して、ヘッダなどで次のように読み込んで適用するだけです。
<link rel="stylesheet" href="xxxxxx.css" type="text/css" />
Bloggerでの指定方法
指定方法はわかりましたが、Bloggerではどのように指定するのでしょうか？
細かく指定するのであれば、「HTMLの編集」が望ましいですが、
Bloggerではもっと簡単に指定することができます。
まずは、「テンプレート」画面を開き、「カスタマイズ」をクリックします。
「Blogger テンプレートデザイナー」画面で、「アドバンス」→「Add CSS」を選択します。
画面の「Add custom CSS」欄へコードを指定して、
「ブログに適用」をクリックすれば完了です。
とても簡単ですね。
見出しサンプル
参考までに目にとまったサンプルを並べておきます。
見出しサンプル
見出しサンプル
見出しサンプル
見出しサンプル
見出しサンプル
見出しサンプル
見出しサンプル
見出しサンプル
見出しサンプル
見出しサンプル
見出しサンプル
最後まで読んで頂きありがとうございます。
0 件のコメント:
コメントを投稿