通常ブログにはブログのタイトルや記事タイトルというのがあります。さらに記事本文中でも見出しを付ける事ができ、「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と無料ブログの違いや必要な料金などは以下記事でまとめてます。
コメント
はじめまして。
Seesaaブログのテンプレート、シンプルA.ホワイト 右カラムを使用して下記の作業行いました。
●フォントや文字のカスタマイズ
●見出しタグの装飾
●サイドバーのタイトルのカスタマイズ
但し、デザイン設定(CSS/HTML編集)のプレビュー画面では変更されているのですが、ページに行くと何も変わっていません。
全く原因が分かりませんので、教えていただけますでしょうか。
よろしくお願いいたします。
ありがとうございます、助かりました。
また何かあった時はよろしくお願いします。
あいうけこ様
返信ありがとうございます。今確認したら反映されてますね。トップページからタイトルクリックして個別ページで確認してください。
丁寧に対応してくれてありがとうございます。
全て試しましたが駄目でした。
他のデザインでも反映されないようです。
h3の使い方は”見出しを反映させたい文字をで囲む”で合っていますよね？
あいうけこ様
返信ありがとうございます。あいうけこ様のスタイルシートからh３の部分をコピペして私のシーサーブログへコードを貼り付けたのですが、こちらは正常に反映されましたので、コード自体のミスではないようです。
いくつか試してもらいたいのですが、
１．一度追加したコードを削除してみる
一度追加したコードを削除して保存⇒再度追加して保存という手順で反映されるか確認する。
２．デザインでも試す
一度別のデザインにしてみてコード追加し反映されるか確認する。
３．コードのスペースを一度削除する
上記２点ためしてもうまく行かない場合にはコードのスペース部分を一度削除して再度半角のスペースを入れてみてください。たまにコピペするとスペースの部分がちょっとおかしい場合があるみたいなので、スペース部分を１つ１つ削除して再度半角のスペースを入れてみてください。
ちょっと面倒なんですが、上記を試してみてください。
最新の記事をh3を使って書いてみました。
この二文字にそれぞれh3タグを使用しています。
よろしくお願いします。
あいうけこ様
返信ありがとうございます。みれました。CSSを見た感じでは間違ってはいない感じはしますが、反映されないですか？
実際にh3が使われてないため、原因がわかりません。デザイン自体の見出しがh3ではないというケースもありますし、それ以外が原因という場合もありますので、もしよかったらh3を使った状態で再度コメントいただけると助かります。使っている場所も一緒に教えてください。
なぜでしょう…。
これではどうでしょうか？
あいうけこ様
返信ありがとうございます。URL確認したのですが、「ブログが見つかりません」になります。URLに間違いはないでしょうか？一度確認をお願い致します。
返信ありがとうございます。
このブログになります。
スタイルシートにコピペした状態です。
hタグは記事に使用していない状態です。
あいうけこ様
コメントありがとうございます。使っているデザインによっても違う部分があったりするのでよかったらブログのURLを教えてください。その際はコードは追加した状態のままにしておいてもらえると助かります。コメント公開時にはURLは削除します。
コメント失礼します。
見出しのサンプルをスタイルシートにそのままコピペさせてもらったのですが、記事でを使用しても何も変わりません。
テンプレートはTime Line Greenというものを使わせてもらっています。
h4で試してみてもダメでした。
原因が分からず困っています…。
しげぞう様
言葉たらずの質問に的確に答えてくださり、ありがとうございます。
他に気になっていたところまで、解説してくださって、驚きました。
旧デザインを使っているようで、新デザインのものを選べば良かったと少し後悔していますが、コンテンツをもっと充実させられるように頑張りたいと思います。
素人の質問に丁寧に答えてくださって本当にありがとうございました。
松野様
コメントありがとうございます。これhタグの最適化については数年前まではみんなやってたと思うのですが、最近は特に必要ないかなと個人的に思ってます。hタグの最適化というよりも記事タイトルを含むコンテンツが重視されてきてる印象です。
しかも無料ブログのhタグの最適化というのはスマホではHTMLが編集できないのでできないんですよね。今後スマホページが重視されてきますので、PCページだけhタグを編集してもそこまでの意味はないと思います。
それと、新デザインシステムの場合は最初からh2が日付ではなく記事タイトルにしてあるデザインがほとんどだと思います。たまに違うのもあるかもですけど。
しげぞう様
コメント失礼します。
旧システムで「ｈタグ」の最適化という記事がありましたが、新システムではｈ２が日付に設定されているのを見出しに変えるなどの「hタグ」の最適化はできないのでしょうか？
しげぞう様
早速のコメントありがとうございます。
今試そうと思ってやってみたら、なぜかできました＾＾；
先日と同様の手順だったはずなのですが、以前が間違っていたのかもしれません。
当方のケアレスミスだったのかも分からないのに、丁寧にコメントいただきありがとうございました。
今後もこちらのブログを参考にさせていただきたいと思います。
花丸
花丸様
コメントありがとうございます。CSSが反映されない原因で多いのが記述ミスと、キャッシュの影響です。記述ミスがないという事であればおそらくブラウザにキャッシュ（以前のデータ）が残っているのが原因という可能性があります。
装飾した状態で確認すると分かるのですが、現在は装飾されていないという事ですので、一度装飾をしてみて「Ctrl」と「F5」を一緒に押してリロードするのと、別のブラウザでの確認もしてみて下さい。
しげぞう様
先日こちらのブログを拝見させていただいて、勉強させていただいております。
早速ですが、質問です。
私も見出しの装飾をしようと、CSSにコードを貼り付けて試してみました。
すると、ひとつのブログでは反映できるのですが、もうひとつのサイトでは反映されません。
CSSの中身を見る限りは、同じ内容なはずなのですが・・・
過去のコメントも確認させていただきましたが、同じような症状の方がいらっしゃらないようなので、こちらで質問させていただきました。
過去の質問ではURLを報告されていたようですので、報告させていただきます。
そのサイトが下記になりますので、ご確認いただけますでしょうか？
装飾が反映されるブログ
装飾が反映されないブログ
現在は、装飾していない状態です。
花丸
できました！しげぞう様この度は誠にありがとうございました！！
カワラ様
返信ありがとうございます。ブログを確認してみましたが、個別記事のタイトルが「h2」でこちらはスタイルが反映されています。それで、記事中の見出しに関しては「h3」が使われているようですので、次のようにスタイルシートに記述してアレンジして試してみて下さい。サンプルなので中身はお好きに変更して下さい。
.blog h3 { font-size: 18px; font-weight: bold; }こんな感じで記事中の見出しの装飾はできると思います。変更したら「個別記事」で反映されているかを確認してみて下さいね。
じげぞう様ご返信ありがとうございます。
こちらが当方のURLです。
お忙しい中ありがとうございます。
カワラ様
コメントありがとうございます。最近のSeesaaブログは旧システムで新デザイン、または新デザインシステムで旧デザインと入り組んでいる部分があるので、デザインによる違いは実際にやってみないと分からない場合があります。特に基本のベースが旧デザインシステムという事なので余計です。なので、もしよかったら一度ブログのURLを教えて下さい。コメント公開時にはURLは削除しますのでどうぞよろしくお願い致します。
あ、それとカテゴリーのツリー化ですが、おそらくjavaScriptとかで対応する感じなのな？と思います。実際に検証はしてませんが、色々検索して探してみると記事があるみたいです（旧デザインも新デザインも）。
⇒http://rebalance.befreefloat.net/seesaa_tips/727
いつも参考にさせていただいております。
私のブログは旧デザインシステムで新しいテンプレートの「SimpleDホワイト/両サイドバー」を使用しています。
このブログを参考にｈタグを有効化したはずなのですが、見出しが反映されません。
これはテンプレートが新デザインでブログ自体が旧デザインシステムのままだからでしょうか？
あと新デザインシステムでのPC版、スマホ版のカテゴリのツリー化のやり方などもわかれば教えていただきたいです。
どうかご回答よろしくお願いいたします。
連投申し訳ございません。
先ほどご相談させていただきましたけけでございます。
あれから時間を置いたところ、
15分後くらいに反映が確認できました。
お騒がせし、申し訳ございませんでした。
今後ともよろしくお願いいたします。
いつもお世話になっております。
けけと申します。
いつも参考にさせていただいております。
見出しの追加をいたしたく、
拝見した内容をスタイルシートに追加いたしましたが、
反映がなされませんでした。
何度か試しましたがダメでした。
原因がわかりましたらご教授いただけないでしょうか。
よろしくお願いいたします。
ayame様
コメントありがとうございます。関連する記事の記事タイトルですが、スタイルシートで調整できそうな感じがしますので、一度下記のコードをスタイルシートの一番下に追加してみて下さい。
.module--category-recent-entry .recent-entry__item p { white-space: normal; height: 100px; }スタイルシートに追加できたら保存してブログを表示、それで「Ctrl」と「F5」を一緒に押してロリードしてから確認をしてみて下さい。ただ、PC以外のデバイスでは確認してませんので、一応他のデバイスでも確認をしてみると良いと思います。
一応heightの部分を100pxにしています。これなら3行くらいは表示できるかな？と思います。これを50pxとかにして高さを低くすると多分2行分表示ではみ出す部分は表示しない感じになりますので、数値はお好みで変更してみて下さい。
また、反映されない場合にはお手数ですが再度コメント頂けると助かります。どうぞよろしくお願い致します。
いつも参考にさせていただいています。
seesaaブログの新システムですが、「関連する記事」のサムネイルはいいのですが、その下の記事タイトル表示が短すぎて、私のブログの記事内容が読者に伝え切れません。せめて表示を2段（できれば3段）表示にできればうれしいのですが、方法があればご教授下さい。
よろしくお願いいたします。
こてつ様
返信ありがとうございます。どのデザインにしてもヘッダー画像などは後から変更する事ができますので、とりあえず新デザインのテンプレートでやってみて、もし旧デザインを使いたいという場合があればまたコメント下さい。今後もどうぞよろしくお願い致します。
しげぞう さま
早々にご回答いただき、誠にありがとうございます。
そういうことだったのですね…。
とりあえず、慣れるまでは新デザインのテンプレートを使用することにしました。
とてもわかりやすくて、非常に助かりました。
誠にありがとうございます。
また困った際には質問させていただくかもしれませんが、
何卒、よろしくお願いいたします。
こてつ様
コメントありがとうございます。Seesaaブログは最近になって「新デザインシステム」という新しいシステムが導入されています。それでテンプレート（デザイン）が旧システムの物と新デザインのものと入り乱れているような状況で非常に分かりにくいです。
こてつ様の使われているデザイン「こねこ」は旧システムで使われていたデザインで、新デザインシステムのテンプレートとはHTMLやCSSが全く違います。要は別物だと思ってOKです。
旧システムの場合は記事のタイトルに「h3」というタグが使われているので、記事中で使用する見出しは「h3」ではなく「h4」とか「h5」を使う必要がありますし、装飾のコードも違ってきます。
なので、このまま旧デザインのテンプレートを使うか、それともテンプレート自体を変更するか？を一度決めて見て下さい。ちなみに新デザインの物は「シンプル系」とか「ノスタルジア」とか「続きを読む」が含まれているデザインですね。
もし旧デザインのテンプレートを使うというのであればそれ用のコードを考えてみますので、またコメント下さいませ。