「自分のブログの記事は他のブログと比べて読みにくい」と思ったことがきっかけで、見出しのカスタマイズ方法を調べました。
見出しをカスタマイズするためにいくつかサイトや記事を参考にしました。
【Blogger】シンプルテンプレートをCSSでカスタマイズする
見出しをカスタマイズするためにCSSを使用する方法を紹介します。
HTMLとCSS
HTMLとCSSの基本構造を簡潔に説明します。
HTMLの基本構造
<タグ名>タグの中身</タグ名>
タグには様々な種類があり、どのタグで囲むかでタグの中身の役割が変わります。
見出しタグ
<h1>タグの中身</h1>
1が一番大きい見出しで、h2、h3と数字が大きくなるほど小さな見出しになります。
CSSの基本構造
セレクタ {
プロパティ：値
}セレクタ：どこに追加するか
プロパティ：何を変更するか。色・大きさ・余白など。
値：どのように変更するのか。例えば、色の場合は赤色・青色など。
CSSの追加方法
HTMLにCSSを追加するためにはいくつか方法があります。
適応される優先順はタグ内に書き込む → styleタグを使用してHTMLに書き込む → 別ファイルで作成して読み込ませる、となります。
- CSSを別ファイルで作成して読み込ませる
- CSSをstyleタグを使用してHTMLに書き込む
- CSSをHTMLのタグ内に書き込む
CSSを別ファイルで作成して読み込ませる
CSSファイルを別に作成します。
HTML文書のheadタグ内でlinkタグを使用してCSSファイルを読み込みます。
<link rel="stylesheet" href="CSSファイルの名称">
CSSをstyleタグを使用してHTMLに書き込む
styleタグの中にCSSを書き込む。
<style>セレクタ {プロパティ：値}</style>
CSSをHTMLのタグ内に書き込む
タグ内に直接CSSを書き込みます。
<h2 style="プロパティ：値">～</h2>
BloggerでCSSを追加する方法
- 「テーマデザイナー」からCSSを追加
- HTMLの編集で直接書き込む
「テーマデザイナー」からCSSを追加する方法
- サイドメニューの「テーマ」をクリック
- 「カスタマイズ」をクリック
- 「テーマデザイナー」の中から「上級者向け」をクリック
- 「CSSを追加」をクリックしてCSSを書き込みます。
HTML編集でCSSを直接書き込む
HTML編集でCSSを直接書き込むには2種類の方法があります。
- テーマからHTML編集で書き込む
- 各記事のHTML編集で書き込む
テーマからHTML編集で書き込む
- サイドメニューの「テーマ」をクリック
- 「HTMLの編集」をクリック
- headタグ内にCSSを書き込む
各記事のHTML編集で書き込む
- 記事編集画面から「HTML」を選択
- タグ内に直接CSSを書き込む
最後に
CSSで作成した見出しのデザインのサンプルを紹介している記事もありますので、色々と自分の好みの見出しを探してみるといいと思います。
また、HTML、CSSの基本についてはこちらの記事が参考になります。
ブログ内関連記事
0 件のコメント :
コメントを投稿