RSS 1.0
ブログでも、ホームページでも使えると思うので、参考にしてみてくださいね。勉強中の身なので、絶対正しくシンプルなタグかって言われると、自信はありませんけど…。
見出し…という言葉は今まで使ってませんでした。
タイトルというと、ブログのタイトルとか、記事のタイトルみたいなので、あえて違う言葉を使いました。
デザインによっては記事のタイトルみたいになりますし、記事タイトルの下層…小見出しにもなると思います。
文章の長さがある程度になったら、小見出しが付いているほうが読みやすいです。このブログでは付けたことがまだありませんが。(^_^)ゞ
小見出しとして使うときは、自分のブログで使っている見出しがどのタグを指定されているか見てみてください。
Seesaaのテンプレートは、
<h1> … ブログタイトル
<h2> … 日付
<h3> … 記事タイトル
となっていますから、<h4>にでもしたらいいんじゃないでしょうか。SEOの観点からは…どうかなぁ？
Seesaaのテンプレートの場合、<h2>が日付っていう時点で適切じゃないような気もするので、まぁ気にしないでいきますか…。
私にはまだよくわからないので、判断は各人に任せます。
以下は、とりあえず<h4>ということで書いておきます。
（スタイルシートについては、前回のページを見てください）
▼サンプル1
ここに見出しの言葉を入れる
h4 {
padding: 5px; /*罫線と文字の距離*/
border-style: solid; /*罫線の種類 直線*/
border-color: #CC6699; /*罫線の色*/
border-width: 1px 1px 1px 5px; /*罫線の太さ 時計回りに、上右下左*/
font-weight:bold; /*太文字*/
}
付箋みたいなデザイン。Web上ではポピュラーですね。
▼サンプル2
ここに見出しの言葉を入れる
h4 {
padding: 5px; /*罫線と文字の距離*/
border-style: solid; /*罫線の種類 直線*/
border-color: #CC6699; /*罫線の色*/
border-width: 1px 5px 1px 5px; /*罫線の太さ*/
font-weight: bold; /*太文字*/
text-align: center; /*文字を中央揃え*/
}
ブログでは、こんな感じのもよく見かけますね。
▼サンプル3
ここに見出しの言葉を入れる
h4 {
padding: 0 0 0 5px; /*罫線と文字の距離*/
border-left: solid #CC6699 5px; /*左罫線の指定*/
font-weight: bold; /*太文字*/
}
こんなシンプルなのが小見出しっぽくていいなー。
▼サンプル4
ここに見出しの言葉を入れる
h4 {
padding: 5px 0 5px 0; /*罫線と文字の距離*/
border-bottom: dashed #6699CC 2px; /*下罫線の指定*/
font-weight:bold; /*太文字*/
}
こんな感じも使いやすいデザインじゃないでしょうか。
文字と罫線の左側が揃っていないとヘンなので、paddingで調整しています。
▼サンプル4
■ ここに見出しの言葉を入れる
h4 {
padding: 5px; /*罫線と文字の距離*/
background-color:#FBF7B3; /*背景色*/
font-weight:bold; /*太文字*/
color:#F58F89; /*文字色*/
}
罫線はなしで背景と文字に色を付けました。
それから、行頭文字として■を付けてみました。
スタイルシートでどうにかする方法もあるのかもしれませんが、わたしにはちょっとわからないので、<span>タグで挿入しています。
<span style="color:#A7D0F1;">■</span>
↓参考になったら、クリックで応援してね！↓
