Seesaaブログの見出しタグの装飾【新システム】

通常ブログにはブログのタイトルや記事タイトルというのがあります。さらに記事本文中でも見出しを付ける事ができ、「h1」から「h6」というタグで見出しを使う事ができます。「h1」や「h2」等数字が小さい物ほど重要という事を検索エンジンにも使える事ができます。こんなやつです。

見出し-1

基本的に記事の途中で見出しを入れながら記事を書くとまとまりが出てきますし、見た目にも分かりやすいです。さらに見出しは検索エンジンにに重要な部分を使える事ができるので、基本的な部分も含めて紹介していきますね。

見出しの使い方

使い方はまた別記事で紹介するとして、通常の無料ブログで多いのは「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」の部分が線の太さ、「#」の部分でカラーを指定。この2つの要素を変更する事で色々な装飾が自分できるようになります。後は見出しタイトルの位置を調整するという流れです。実際にこのブログの場合の見出しを例に解説してみます。

Seesaaブログの管理画面から「デザイン」⇒「デザイン設定」⇒「適応中のデザインタイトル」をクリックして、「スタイルシート編集」のタブを選択。

新デザインパンくず-3

このブログで使っている見出しの装飾は見出しの左側の線だけ使っているので、「border-left」だけを使っている訳です。こんな感じの見出しにしています。

見出し-1

この場合はスタイルシートにこの記述を追加。

/* 見出し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の装飾コードを書いていますが、トップページが抜粋記事で「続きを読む」というようなデザインの場合にはこの抜粋記事部分にはh3タグは反映されないので注意。

なので、トップページの抜粋記事を解除して全文を表示させ、「続きを読む」を無くすとh3は反映されるので、一度試してみると良いかも。
Seesaaブログのトップページの続きを読むを削除して全文表示させる【新システム】

それからこれはPCページにしか反映されないので、スマートフォンページも同じように見出しの装飾をしたい場合には管理画面から「デザイン」⇒「スマートフォン」⇒「デザイン設定」と進みます。

スマホCSS-1

それで適応中のデザインを選択するとスマートフォン版のスタイルシート(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」の4つを上手く使って線の太さやカラーを装飾してみて下さい。

それから「solid」の部分を「dotted」に変更すると「実線」ではなく「点線」で表示する事も可能なので色々試してみてね。

Seesaaブログの見出しタグの装飾【新システム】”に60件のコメントがあります。

コメントの反映には時間がかかる場合があります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

  1. あいうけこ

    ありがとうございます、助かりました。
    また何かあった時はよろしくお願いします。

  2. しげぞう 投稿作成者

    あいうけこ様

    返信ありがとうございます。今確認したら反映されてますね。トップページからタイトルクリックして個別ページで確認してください。

  3. あいうけこ

    丁寧に対応してくれてありがとうございます。
    全て試しましたが駄目でした。
    他のデザインでも反映されないようです。
     
    h3の使い方は”見出しを反映させたい文字をで囲む”で合っていますよね?

  4. しげぞう 投稿作成者

    あいうけこ様

    返信ありがとうございます。あいうけこ様のスタイルシートからh3の部分をコピペして私のシーサーブログへコードを貼り付けたのですが、こちらは正常に反映されましたので、コード自体のミスではないようです。

    いくつか試してもらいたいのですが、

    1.一度追加したコードを削除してみる

    一度追加したコードを削除して保存⇒再度追加して保存という手順で反映されるか確認する。

    2.デザインでも試す

    一度別のデザインにしてみてコード追加し反映されるか確認する。

    3.コードのスペースを一度削除する

    上記2点ためしてもうまく行かない場合にはコードのスペース部分を一度削除して再度半角のスペースを入れてみてください。たまにコピペするとスペースの部分がちょっとおかしい場合があるみたいなので、スペース部分を1つ1つ削除して再度半角のスペースを入れてみてください。

    ちょっと面倒なんですが、上記を試してみてください。

  5. あいうけこ

    最新の記事をh3を使って書いてみました。

    この二文字にそれぞれh3タグを使用しています。 
    よろしくお願いします。

  6. しげぞう 投稿作成者

    あいうけこ様

    返信ありがとうございます。みれました。CSSを見た感じでは間違ってはいない感じはしますが、反映されないですか?

    実際にh3が使われてないため、原因がわかりません。デザイン自体の見出しがh3ではないというケースもありますし、それ以外が原因という場合もありますので、もしよかったらh3を使った状態で再度コメントいただけると助かります。使っている場所も一緒に教えてください。

  7. しげぞう 投稿作成者

    あいうけこ様

    返信ありがとうございます。URL確認したのですが、「ブログが見つかりません」になります。URLに間違いはないでしょうか?一度確認をお願い致します。

  8. あいうけこ

    返信ありがとうございます。
    このブログになります。

    スタイルシートにコピペした状態です。
    hタグは記事に使用していない状態です。

  9. しげぞう 投稿作成者

    あいうけこ様

    コメントありがとうございます。使っているデザインによっても違う部分があったりするのでよかったらブログのURLを教えてください。その際はコードは追加した状態のままにしておいてもらえると助かります。コメント公開時にはURLは削除します。

  10. あいうけこ

    コメント失礼します。
    見出しのサンプルをスタイルシートにそのままコピペさせてもらったのですが、記事でを使用しても何も変わりません。
    テンプレートはTime Line Greenというものを使わせてもらっています。
    h4で試してみてもダメでした。
    原因が分からず困っています…。

  11. 松野

    しげぞう様

    言葉たらずの質問に的確に答えてくださり、ありがとうございます。
    他に気になっていたところまで、解説してくださって、驚きました。

    旧デザインを使っているようで、新デザインのものを選べば良かったと少し後悔していますが、コンテンツをもっと充実させられるように頑張りたいと思います。

    素人の質問に丁寧に答えてくださって本当にありがとうございました。

  12. しげぞう 投稿作成者

    松野様

    コメントありがとうございます。これhタグの最適化については数年前まではみんなやってたと思うのですが、最近は特に必要ないかなと個人的に思ってます。hタグの最適化というよりも記事タイトルを含むコンテンツが重視されてきてる印象です。

    しかも無料ブログのhタグの最適化というのはスマホではHTMLが編集できないのでできないんですよね。今後スマホページが重視されてきますので、PCページだけhタグを編集してもそこまでの意味はないと思います。

    それと、新デザインシステムの場合は最初からh2が日付ではなく記事タイトルにしてあるデザインがほとんどだと思います。たまに違うのもあるかもですけど。

  13. 松野

    しげぞう様
    コメント失礼します。
    旧システムで「hタグ」の最適化という記事がありましたが、新システムではh2が日付に設定されているのを見出しに変えるなどの「hタグ」の最適化はできないのでしょうか?

  14. 花丸

    しげぞう様

    早速のコメントありがとうございます。

    今試そうと思ってやってみたら、なぜかできました^^;
    先日と同様の手順だったはずなのですが、以前が間違っていたのかもしれません。

    当方のケアレスミスだったのかも分からないのに、丁寧にコメントいただきありがとうございました。

    今後もこちらのブログを参考にさせていただきたいと思います。

    花丸

  15. しげぞう 投稿作成者

    花丸様

    コメントありがとうございます。CSSが反映されない原因で多いのが記述ミスと、キャッシュの影響です。記述ミスがないという事であればおそらくブラウザにキャッシュ(以前のデータ)が残っているのが原因という可能性があります。

    装飾した状態で確認すると分かるのですが、現在は装飾されていないという事ですので、一度装飾をしてみて「Ctrl」と「F5」を一緒に押してリロードするのと、別のブラウザでの確認もしてみて下さい。

  16. 花丸

    しげぞう様

    先日こちらのブログを拝見させていただいて、勉強させていただいております。

    早速ですが、質問です。

    私も見出しの装飾をしようと、CSSにコードを貼り付けて試してみました。
    すると、ひとつのブログでは反映できるのですが、もうひとつのサイトでは反映されません。
    CSSの中身を見る限りは、同じ内容なはずなのですが・・・
    過去のコメントも確認させていただきましたが、同じような症状の方がいらっしゃらないようなので、こちらで質問させていただきました。

    過去の質問ではURLを報告されていたようですので、報告させていただきます。
    そのサイトが下記になりますので、ご確認いただけますでしょうか?

    装飾が反映されるブログ

    装飾が反映されないブログ

    現在は、装飾していない状態です。

    花丸

  17. カワラ

    できました!しげぞう様この度は誠にありがとうございました!!

  18. しげぞう 投稿作成者

    カワラ様

    返信ありがとうございます。ブログを確認してみましたが、個別記事のタイトルが「h2」でこちらはスタイルが反映されています。それで、記事中の見出しに関しては「h3」が使われているようですので、次のようにスタイルシートに記述してアレンジして試してみて下さい。サンプルなので中身はお好きに変更して下さい。

    .blog h3 {
        font-size: 18px;
        font-weight: bold;
    }

    こんな感じで記事中の見出しの装飾はできると思います。変更したら「個別記事」で反映されているかを確認してみて下さいね。

  19. カワラ

    じげぞう様ご返信ありがとうございます。
    こちらが当方のURLです。

    お忙しい中ありがとうございます。