通常ブログにはブログのタイトルや記事タイトルというのがあります。さらに記事本文中でも見出しを付ける事ができ、「h1」から「h6」というタグで見出しを使う事ができます。「h1」や「h2」等数字が小さい物ほど重要という事を検索エンジンにも使える事ができます。こんなやつです。
基本的に記事の途中で見出しを入れながら記事を書くとまとまりが出てきますし、見た目にも分かりやすいです。さらに見出しは検索エンジンにに重要な部分を使える事ができるので、基本的な部分も含めて紹介していきますね。
見出しの使い方
使い方はまた別記事で紹介するとして、通常のSeesaaブログで多いのは「h1」にブログタイトル、「h2」に記事のタイトルが設定されていて、記事内の見出しには「h3」以降のタグを使う場合が多いです。
簡単に説明するとSeesaaブログの新デザインシステムの場合はこのようなイメージです。
- ブログタイトル：h1 超重要
- 記事タイトル：h2 まあ重要
- 記事内見出し：h3～h6 普通
という感じで使う事が多いです。ブログタイトルや記事タイトルは自動でタグが入るので問題ないのですが、記事中で使う見出しタグは記事中で自分で挿入していく必要があります。記事中に見出しを入れるにはタグ編集エディタで次のように書けば見出しになります（h3を使う場合）。
<h3>ここに見出し</h3>
Seesaaブログの新システムの場合は記事内の見出しタグは「h3」以下を使って作成します。この場合は「h3」以下は何度も使ってもOKなので、「h3」と「h4」などを多用する感じになります。
ちなみにWordPressでは記事タイトルに「h1」が使われているテンプレートが多いですが、無料ブログの場合大体は上記で説明した見出しタグが設定されているはずです。
ただ、見出しタグを挿入して見出しを作ってもスタイルシートで装飾しないと目立たないので先にスタイルシートで見出しタグの装飾をしておきましょう。
見出しの装飾の方法
見出しの装飾方法スタイルシート（CSS）で自由に変更できますが、次の項目を覚えると非常に簡単。次の4つで見出しの装飾が可能です。
- 「border-top」上に線を入れる。
- 「border-bottom」下に線を入れる。
- 「border-left」左側に線を入れる。
- 「border-right」右側に線を入れる。
書き方としてはこんな感じですが、まだ変更はしないで下さい。サンプルなので。
.article__content h3 {
border-top:1px solid #000000;
border-right:1px solid #000000;
border-left:1px solid #000000;
border-bottom:1px solid #000000;}
それぞれ「px」の部分が線の太さ、「#」の部分でカラーを指定。この２つの要素を変更する事で色々な装飾が自分できるようになります。後は見出しタイトルの位置を調整するという流れです。実際にこのブログの場合の見出しを例に解説してみます。
Seesaaブログの管理画面から「デザイン」⇒「CSS/HTML編集」⇒「適応中のデザインタイトル」をクリックして、「スタイルシート編集」のタブを選択。
このブログで使っている見出しの装飾は見出しの左側の線だけ使っているので、「border-left」だけを使っている訳です。こんな感じの見出しにしています。
この場合はスタイルシートにこの記述を追加。
/* 見出しh3の装飾（個別ページ用） */
.article__content h3 {
border-left: 5px solid #1F5E73;
padding: 0 0 0 15px ;
line-height: 2;
font-size: 18px;
background-color: #fff;
margin:25px 0 25px 0;
}
/* トップページ用 */
.article.article--entry h3 {
border-left: 5px solid #1F5E73;
padding: 0 0 0 15px ;
line-height: 2;
font-size: 18px;
background-color: #fff;
margin:25px 0 25px 0;
}
- 「border-left」で5pxの太さの線を左にして色指定。
- 「padding」で見出し内の文字の余白調整「上、右、下、左」の順番。
- 「line-height」で見出し部分の高さを指定。
- 「font-size」で文字の大きさを調整。
- 「background-color」で背景色を指定。
- 「margin」で見出しの上下に余白「上、右、下、左」の順番。
えっと、これは「h3」の装飾ですが、「h3」の部分を「h4」に書き換えると「h4」の装飾になります。それから見出しのタイトルが元々左はしにくるようになっているので、「padding」で見出しのタイトルの位置を調整できます。
「padding」の部分に数字を入れる事で「上、右、下、左」の余白、つまり間隔を空けることができます。今回の場合は左から15px余白を指定したので、見出しタイトルが右に15px移動するという訳です。
「padding」は時計周りに余白を決める事ができるので、「上、右、下、左」の順番になっている事だけ覚えておけばOK。それと変更する場合は「px」を書き忘れない事。
現在使っている見出し
現在はこんな見出しも使ってます。
/* 見出しh3の装飾（個別ページ用） */
.article__content h3 {
font-size: 1.25em;
position: relative;
padding:1em 1.1em;
background: #1f5e73;;
color:#fff;
margin: 40px 0;
}
.article__content h3:after {
position: absolute;
content: '';
top: 100%;
left: 30px;
border: 9px solid transparent;
border-top: 15px solid #1f5e73;
width: 0;
height: 0;
}
/* トップページ用 */
.article.article--entry h3 {
font-size: 1.25em;
position: relative;
padding:1em 1.1em;
background: #1f5e73;;
color:#fff;
margin: 40px 0;
}
.article.article--entry h3:after {
position: absolute;
content: '';
top: 100%;
left: 30px;
border: 9px solid transparent;
border-top: 15px solid #1f5e73;
width: 0;
height: 0;
}
それとトップページ用にもh3の装飾コードを書いていますが、トップページが抜粋記事で「続きを読む」というようなデザインの場合にはこの抜粋記事部分にはh3タグは反映されないので注意。
なので、トップページの抜粋記事を解除して全文を表示させ、「続きを読む」を無くすとh3は反映されるので、一度試してみると良いかも。
スマホページ用の見出しも装飾しておく
上記のスタイルシートはPCページ用なのでスマートフォンページも同じように見出しの装飾をしていきます。
管理画面から「デザイン」⇒「スマートフォン」⇒「CSS/HTML編集」と進みます。
それで適応中のデザインを選択するとスマートフォン版のスタイルシート（CSS）編集画面になるので、そこの一番下に先ほどと同じように次のコードを追加。
/* スマートフォン用のCSSに追加 */
.article-body h3 {
border-left: 5px solid #1F5E73;
padding: 0 0 0 15px ;
line-height: 2;
font-size: 18px;
background-color: #fff;
margin:25px 0 25px 0;
}
私の使っているサンプルのように左側だけに線を入れる事もできますし、上下に線を配置することもできます。先ほど紹介した「border-top」「border-right」「border-left」「border-bottom」の４つを上手く使って線の太さやカラーを装飾してみて下さい。
それから「solid」の部分を「dotted」に変更すると「実線」ではなく「点線」で表示する事も可能です。
以上見出しの装飾でした。
ブログを収益化するならWordPress利用がおすすめ
無料ブログでは利用規約の変更やアカウント停止、サービス終了などのリスクがあります。
また、表示速度も重く、スマホのページには消す事のできない広告が多いためブログでの収益化を考えているならWordPressの利用が圧倒的におすすめです。
WordPressと無料ブログの違いや必要な料金などは以下記事でまとめてます。
コメント
しげぞう さま
はじめまして。
シーサーブログ初心者のこてつと申します。
見出し装飾をしたく、「スタイルシート編集」に
記事のとおり追加しましたが、装飾が反映されません。
/* 見出しh3の装飾（個別ページ用） */
.article__content h3 {
border-left: 5px solid #1F5E73;
padding: 0 0 0 15px ;
line-height: 2;
font-size: 18px;
background-color: #fff;
margin:25px 0 25px 0;
}
/* トップページ用 */
.article.article–entry h3 {
border-left: 5px solid #1F5E73;
padding: 0 0 0 15px ;
line-height: 2;
font-size: 18px;
background-color: #fff;
margin:25px 0 25px 0;
}
使用しているテンプレートは、「こねこ（右サイドバー）」です。
こちらのテンプレートは「続きを読む」パターンではないようなのですが…
知識がまるでないため、初歩的なことで申し訳ございません。
教えていただけますでしょうか？
しげぞう様
わざわざのお返事ありがとうございます。
シーサーブログは結構長いこと使ってきたのですが、
今回のようなカスタマイズは初めてなので迷いましたね＾＾
こちらのサイトではとてもわかりやすく説明されていて
本当に助かりました。
これからも頻繁に訪問させていただくかと思います。
こちらこそ、今後ともよろしくお願いします。
YUNA様
返信ありがとうございます。上手く反映されたようで良かったです！うっかりミスは私も毎日のようにやってて、何で？何で？ってなります（笑）また何か分からない部分などあればいつでもコメント下さい。今後もともどうぞよろしくお願い致します。
しげぞう様
早速のお返事ありがとうございます。
しげぞう様が言われましたように「リッチテキスト」ではなく、
「通常エディタ」で投稿しましたところ、今回はきちんと反映されていました。
悩んでいたのがウソのようにあっけなくです。
でも、アドバイスをお受けしなかったらずっと気付かず
同じミスをしていたかと思います。
とても助かりました。
本当にどうもありがとうございました。
YUNA様
コメントありがとうございます。見出しのタグは「h3」とか「h4」を使って記述していくのですが、おそらく「リッチテキスト」ではそのまま「h3」「h4」という文字列がそのまま文章として表示されるのではないかと思います。
アフィリエイトのコードや今回の見出しを使う場合にはHTMLが編集できるエディタを使う必要があるので、一度通常エディタなどで試して見て下さい。それでも反映されない場合には再度コメント頂けると助かります。また、その場合はブログのURLも教えて下さい。反映されない原因を探してみたいので。
URLはコメント公開時には削除しますので、どうぞよろしくお願い致します。
しげぞう様
初めてコメントさせていただきます。
Seesaaブログの記事中に大見出しと中見出しを入れたいのですが、
方法がわからずこちらのサイトに辿り着きました。
私のブログでは、大見出しは「h3」、中見出しは「h4」になるかと
思います。
まず、こちらのサイトでご紹介されている「見出しのサンプル」を
そのまま真似ようと、ご説明の通りにスタイルシートを変更し、
記事を書く際は「リッチテキスト」の状態で「ここに見出し」
と書き更新したところ、反映されておらず、そのまま「ここに見出し」
と表示されています。
何度かリロードしましたが同じ状態です。
ちなみにテンプレートは「シンプルA.パステルグリーン 右カラム」で
「続きを読む」デザインだったので、貴サイトで説明されていた
「Seesaaブログのトップページの続きを読むを削除して全文表示させる」
こちらの手続きは済ませています。
このような状況ですが、ご教授いただけますと幸いです。
よろしくお願いします。
しげぞう様
いつも素早い対応で感謝致します。
教えて頂いた通りで、ばっちり出来ました！
クラス名が違うのですね。なるほど、本当に勉強になります。
ありがとうございました。
たこやき様
コメントありがとうございます。Seesaaの場合はPC用のスタイルシート（CSS）とスマートフォン用のスタイルシートが別になっていますので、おそらくスマートフォン用のスタイルシートを編集する必要があるかと思います。しかもスマートフォンではクラス名も違いますね。説明不足すみません。記事にも追記しておきます。
スマートフォンページも同じように見出しの装飾をしたい場合には管理画面からスマートフォンのCSSを開く必要があります。「デザイン」⇒「スマートフォン」⇒「デザイン設定」と進みます。
それで適応中のデザインを選択するとスマートフォン版のスタイルシート（CSS）編集画面になるので、そこの一番下に次のコードを追加。
/* スマートフォン用のCSSに追加 */ .article-body h3 { border-left: 5px solid #1F5E73; padding: 0 0 0 15px ; line-height: 2; font-size: 18px; background-color: #fff; margin:25px 0 25px 0; }これでおそらくスマートフォンでも反映されると思いますので、一度試してみて反映されない場合には再度コメント下さい。
しげぞう様
いつも本当にお世話になっております。このサイトのおかげでだいぶ進んできました。
忙しいところ申し訳ございませんがまたひとつ、質問です。
しん様もおっしゃっておられますが、私もスマホのCSSにここで教えてもらった
/* 見出しh3の装飾（個別ページ用） */
.article__content h3 {
border-left: 5px solid #1F5E73;
padding: 0 0 0 15px ;
line-height: 2;
font-size: 18px;
background-color: #fff;
margin:25px 0 25px 0;
}
/* トップページ用 */
.article.article–entry h3 {
border-left: 5px solid #1F5E73;
padding: 0 0 0 15px ;
line-height: 2;
font-size: 18px;
background-color: #fff;
margin:25px 0 25px 0;
}
を貼り付けてみましたが、PCでは問題なく反映されているのですが、スマホでは太字になっているだけで、見た感じですと恐らく、marginも反映されていません。
何か方法はあるのでしょうか。
あっちこっち調べてみたのですが、どこのサイトにも載っておりません。
どうかお助け下さい。
ありがとうございます、反映されました！
続きを読む、を削除して全文表示～の記事はもう拝見しましてやっておりました。とてもありがたいサイトです。
感謝しかありません。本当にありがとうございます。
たこやき様
コメントありがとうございます。Seesaaブログのテンプレート（デザイン）によってはトップページで「続きを読む」が表示されて記事の抜粋のような感じで記事の一覧が表示されます。なので、おそらくたこやき様の使われているデザインはこのタイプかなと思います。これは記事本文の抜粋なので、装飾用のタグが無視されます。
なので、たこやき様の使われているデザインのトップページが「続きを読む」のような抜粋記事になっている場合には抜粋ではなく、全文表示させる事で反映されると思います。まずはスタイルシートに次のコードを追加して保存しておいて下さい。
/* トップページ用 */ .article.article--entry h3 { border-left: 5px solid #1F5E73; padding: 0 0 0 15px ; line-height: 2; font-size: 18px; background-color: #fff; margin:25px 0 25px 0; }後は続きを読むの抜粋ではなく、全文表示にするカスタマイズをすればOKですが、いつでも元に戻せるようにバックアップはとっておいて下さい。
⇒Seesaaブログのトップページの続きを読むを削除して全文表示させる【新システム】
いつも大変お世話になっております。
上記の通りにやってみましたら、記事そのものにはh3タグが反映されました！
しかしブログトップ記事状態ですと反映されません。ブログトップにある記事タイトルをクリックし、記事URLにですと反映されますが、ブログ本体のURLだと反映されない。といった具合です。
お忙しいところ恐縮ですがよろしくお願いいたします。
しん様
コメントありがとうございます。Seesaaブログの場合は管理画面から「デザイン」⇒「スマートフォン」⇒「デザイン設定」と進み、適応中のデザイン名をクリックして下さい。それがスマートフォン版のスタイルシートになりますので、スマートフォン用のスタイルシートにPCと同じような見出しの装飾を書いたら反映されるかと思います。
それから同じ見出しタグでもクラス名をそれぞれ付けて分けることも可能かと思います。例えば記事本文中の見出しにこのようにクラス名を付けます。
後はスタイルシートに移動してこのクラス名に装飾をするような形です。
.midasi { color : #000000; }こんな感じでクラス名ごとにスタイルを当てると上手くいくと思いますが、もし上手く反映されない場合には再度コメント頂けると助かります。
seesaaブログ【新システム】のhタグを変更して見出しタグをつけましたが、PCでは見出しのデザインが正しく表示されましたが、スマホ表示では見出し部分が太字になっているだけでデザインした枠が表示されません。 何か他に設定が必要なのでしょうか？
あと以前までは記事中に見出しのデザイン用のタグを書いていましたので、ページごとに色を変えたりしていました。hタグで見出しデザインを設定するとこのようなことはできなくなるのでしょうか？（例えばh3のデザインを赤にしたり青にしたり…）
しげぞう様
あれから自分でいろいろと試行錯誤してみたのですが、コンテンツhtmlから自分の希望する通り変更することができました。
お騒がせしてすみませんでした・・・
ヒカワ様
コメントありがとうございます。h4の件ですが、サイドバーのタイトルにも反映されるというのはおそらくサイドバーのタイトルも「h4」になっているからだと思います。通常は同じ「h4」でもクラス名などをつけて別々のスタイルを適応する事ができます。スタイルシートの書き方１つで別々にもできる場合もありますが、これは実際にブログを見て見ないとどのような分け方になっているのか分かりません。そのため、もし良かったら一度URLを教えて頂けると助かります。
コメント公開時にはURLは削除しますので、気が向いたら教えて下さいませ。よろしくお願い致します。
しげぞうさん、はじめまして。
ヒカワと申します。シーサーブログ歴一か月の初心者です。
h4タグについてお聞きしたいことがあります。
CSSでh4タグを追加したところ、記事本文中の指定した箇所は自分の期待通りに装飾が反映されました。
しかしなぜかサイドバーにあるコンテンツの「最新の記事一覧」の記事の題名まで同じデザインで装飾されてしまい、困っています。
指定した記事本文中のみの装飾を可能にする方法はないでしょうか？
わかりづらい文面ですみませんが、よろしくお願い増します。
しげぞう様
ご回答ありがとうございます。しげぞう様のおっしゃる通り、＃を1つ削除したらしっかり設定が反映されました。ありがとうございます。
fuku様
コメントありがとうございます。fuku様の追加されたコードの内、border-bottomの部分のカラーコードの部分に「#」が２つ付いてますが、これを１つにして見て下さい。それで一度試して反映されない場合には再度コメント頂けると助かります。
また、反映されないのはキャッシュ（以前のデータ）が残っている場合があるという事なので、ブログを表示させて「Ctrl」と「F5」を一緒に押してリロードすると反映されるかと思います。どうぞよろしくお願い致します。
初めまして。fukuと申します。いつも記事を参考にさせていただいています。
Seesaaブログのスタイルシートを以下のように編集したのですが、結果が反映されません。
/* 見出しh3の装飾 */
.article__content h3 {
border-bottom: 5px solid ##F08080;
padding: 0 0 0 0px ;
line-height: 2;
font-size: 18px;
background-color: #fff;
margin:25px 0 25px 0;
}
上記のコードを、デフォルトの最下部のコードの下に追記しました。
※デフォルトの最下部のコードは以下のようになっています。
.module–category-recent-entry .recent-entry .recent-entry__thumnail {
width: 86px;
height: 86px;
}
}
時間経過で反映されたようだというコメントをしている方もいらっしゃいましたが、即時反映はされない仕様なのでしょうか？
お忙しいところ恐縮ですが、ご教授よろしくお願いいたします。
できました！！！！
なるほど～～ そういう意味だったんですね！
ありがとうございます！！！
今後とも宜しくお願いいたします。
KN様
返信ありがとうございます。記事タイトルにborderのような装飾を入れるのであれば、「.article__content h2」ではなく、先ほどの「.entry__title」と「h2.article__title」のコードに「border」などのコードを入れて見てください。
先ほどのコードが記事タイトル部分「h2」の装飾なので、そこに追加していけば記事タイトルも装飾されるはずです。一度試してみて上手くいかない場合には再度コメント下さい。
しげぞう様
お返事ありがとうございます。
教えていただいた通りにコードを追加すると、トップ、個別ともにタイトルの装飾はできました！
で、そこへ見出しを付けるには、さらに一番下に下記のように追加すればよろしいのでしょうか？
.article__content h2 {
border-left: 5px solid #1F5E73;
padding: 0 0 0 15px ;
line-height: 2;
font-size: 18px;
background-color: #fff;
margin:25px 0 25px 0;
}
これでは入らないようなんです・・・
すいません、URLは控えさせていただきます・・(><)
KN様
返信ありがとうございます。記事本文中の見出しはそのままでOKです。後は記事タイトルですね。
記事タイトルのh2タグですが、これは記事タイトルのテキストを入力するとそのままでもh2タグが付くようになってますので、記事タイトルにはタグは必要ありませんので、そのままテキストを入れて下さい。
それと、今記事を見直ししたら記事タイトルの装飾は記事に書いてませんでした。すみません。記事タイトルは「トップページに表示される記事タイトル」と「個別記事のタイトル」を別々に装飾する必要がありそうです。スタイルシートの一番下に次のコードを入れて見てください。
/* 記事タイトル（トップページ用） */ .entry__title { font-size: 20px; /* 文字の大きさ */ } .entry__title a { color: #000; /* 記事タイトルリンクの色 */ text-decoration: none; /* 記事タイトル下線無し */ } /* 記事タイトル（個別記事用） */ h2.article__title { font-size: 20px; color: #000; text-decoration:none; }個別記事の記事タイトルはリンクになっていないと思いますので、コードをまとめて書く事ができますが、トップページに表示される記事タイトルはリンクになってますので、上記のコードのように、色や文字の大きさなどは分けて書く必要があると思います。
文字の大きさや色を変更してみて一度保存し、反映されるか確認してみてください。一応「Ctrl」と「F5」を一緒に押してリロードしてから確認をお願いします。
それでも反映されない場合にはお手数ですが、URLを教えて頂けると助かります。その他また分からない部分があれば再度コメント下さい。よろしくお願いします。
何度も失礼いたします。
h3の見出しは反映されました！
時間がかかったのか？！ いつの間にか装飾されていました。
ただ、h2はまだできていません・・・
しげぞう様
お返事ありがとうございます。
さて、教えていただいた通りにやってみましたが・・・
ｈ３、ｈ２共に反映されませんでした（泣）
①デザイン→デザイン設定→使用中のデザインタイトル→スタイルシート編集の一番下に以下追記
.article__content h3 {
border-left: 5px solid #1F5E73;
padding: 0 0 0 15px ;
line-height: 2;
font-size: 18px;
background-color: #fff;
margin:25px 0 25px 0;
}
②記事一覧→どれかひとつの記事→本文欄に以下のように記載
見出しにしたい文章
記事タイトルの場合は、記事のタイトル欄で、
記事タイトル
と記載 （①ではh3→h2に変更）
で、合ってますよね？？
ちなみに使用デザインは、「シンプルA。ホワイト右カラム」です。
お忙しいところ、申し訳ございません。宜しくお願いいたします。
KN様
コメントありがとうございます。見出し（h3）自体は記事の本文の途中で入れます。「h3」「/h3」で囲まれた部分のテキストは自由に変更して下さい。スタイルシートにh3の見出しの装飾コードを入れて保存しておけばこの記事本文で追加した見出しが装飾できます。h2は記事のタイトルになりますので、スタイルシートでh2の装飾コードを入れると記事タイトルの装飾ができます。
どちらも試してみて反映されない場合にはお手数ですが、再度コメント頂けると助かります。どうぞよろしくお願い致します。
初めまして。シーサーブログ超初心者です。
記事タイトルに見出しを付ける方法がどうしてもできません・・・
スタイルシートには上記の記述をそのままコピペしたのですが、
ここに見出し
というのは、「コンテンツHTML編集」のところに追加するのですか？
「ここに見出し」という文章もそのまま？？
記事タイトルは「ｈ２」なので、「ｈ３」→「ｈ２」に変更して追加するのですか？？
お忙しいところ恐縮ですが、ご教授ください((+_+))
宜しくお願いします
Kenichi Shimazaki様
返信ありがとうございます。画像を張ってその上にタイトルという事ですが、富士山の画像のサイズを変更するという事でしょうか？それともまた別に画像を追加するという感じでしょうか？また時間のある時に教えて頂けたらと思います。
それから「h3」に関してですが、h3は見出しになるので、記事の本文内で見出しとして使います。記事の本文中にこのように記述すれば見出しになります。
スタイルシートではこの見出しの装飾をすることができます。スタイルシートは下に書いたもの（後から書いたもの）が優先的に反映されますので、見出しの装飾をする場合にはスタイルシートの一番下に装飾するコードを追加すればOKです。
質問です。
スタイルシートにｈ３の記述を追加する場合、どこに入れればいいんですか？
body内であればどこでもいいのですか？
ご教授ください。