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

Seesaaブログの見出しタグの装飾

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

Seesaaブログ見出しタグの装飾方法-2

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

見出しの使い方

使い方はまた別記事で紹介するとして、通常のSeesaaブログで多いのは「h1」にブログタイトル、「h2」に記事のタイトルが設定されていて、記事内の見出しには「h3」以降のタグを使う場合が多いです。

簡単に説明するとSeesaaブログの新デザインシステムの場合はこのようなイメージです。

  • ブログタイトル:h1 超重要
  • 記事タイトル:h2 まあ重要
  • 記事内見出し:h3~h6 普通

という感じで使う事が多いです。ブログタイトルや記事タイトルは自動でタグが入るので問題ないのですが、記事中で使う見出しタグは記事中で自分で挿入していく必要があります。記事中に見出しを入れるにはタグ編集エディタで次のように書けば見出しになります(h3を使う場合)。

Seesaaブログの新システムの場合は記事内の見出しタグは「h3」以下を使って作成します。この場合は「h3」以下は何度も使ってもOKなので、「h3」と「h4」などを多用する感じになります。

ちなみにWordPressでは記事タイトルに「h1」が使われているテンプレートが多いですが、無料ブログの場合大体は上記で説明した見出しタグが設定されているはずです。

ただ、見出しタグを挿入して見出しを作ってもスタイルシートで装飾しないと目立たないので先にスタイルシートで見出しタグの装飾をしておきましょう。

見出しの装飾の方法

見出しの装飾方法スタイルシート(CSS)で自由に変更できますが、次の項目を覚えると非常に簡単。次の4つで見出しの装飾が可能です。

  • 「border-top」上に線を入れる。
  • 「border-bottom」下に線を入れる。
  • 「border-left」左側に線を入れる。
  • 「border-right」右側に線を入れる。

書き方としてはこんな感じですが、まだ変更はしないで下さい。サンプルなので。

それぞれ「px」の部分が線の太さ、「#」の部分でカラーを指定。この2つの要素を変更する事で色々な装飾が自分できるようになります。後は見出しタイトルの位置を調整するという流れです。実際にこのブログの場合の見出しを例に解説してみます。

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

Seesaaブログスタイルシート編集画面

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

Seesaaブログ見出しタグの装飾方法-2

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

  • 「border-left」で5pxの太さの線を左にして色指定。
  • 「padding」で見出し内の文字の余白調整「上、右、下、左」の順番。
  • 「line-height」で見出し部分の高さを指定。
  • 「font-size」で文字の大きさを調整。
  • 「background-color」で背景色を指定。
  • 「margin」で見出しの上下に余白「上、右、下、左」の順番。

えっと、これは「h3」の装飾ですが、「h3」の部分を「h4」に書き換えると「h4」の装飾になります。それから見出しのタイトルが元々左はしにくるようになっているので、「padding」で見出しのタイトルの位置を調整できます。

「padding」の部分に数字を入れる事で「上、右、下、左」の余白、つまり間隔を空けることができます。今回の場合は左から15px余白を指定したので、見出しタイトルが右に15px移動するという訳です。

「padding」は時計周りに余白を決める事ができるので、「上、右、下、左」の順番になっている事だけ覚えておけばOK。それと変更する場合は「px」を書き忘れない事。

現在使っている見出し

現在はこんな見出しも使ってます。

Seesaaブログ見出しタグの装飾方法-1

MEMO

それとトップページ用にもh3の装飾コードを書いていますが、トップページが抜粋記事で「続きを読む」というようなデザインの場合にはこの抜粋記事部分にはh3タグは反映されないので注意。

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

Seesaaブログのトップページの続きを読むを削除して全文表示させる【新システム】

スマホページ用の見出しも装飾しておく

上記のスタイルシートはPCページ用なのでスマートフォンページも同じように見出しの装飾をしていきます。

管理画面から「デザイン」⇒「スマートフォン」⇒「CSS/HTML編集」と進みます。

Seesaaブログスタイルシートスマホ版編集画面

それで適応中のデザインを選択するとスマートフォン版のスタイルシート(CSS)編集画面になるので、そこの一番下に先ほどと同じように次のコードを追加。

私の使っているサンプルのように左側だけに線を入れる事もできますし、上下に線を配置することもできます。先ほど紹介した「border-top」「border-right」「border-left」「border-bottom」の4つを上手く使って線の太さやカラーを装飾してみて下さい。

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

WordPressの始め方
にほんブログ村 小遣いブログ アフィリエイトへ
サイトのアクセスアップや稼ぐためにおすすめの無料レポート

個人的にアクセスアップや検索上位表示に役立った無料レポートです。登録にメールアドレスが必要ですが、フリーメールでもOKです。

ブログの更新はこちらから

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

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

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

CAPTCHA


  1. イッチ

    しげぞう様

    詳しい解説をいただきましてありがとうございます。
    ご案内いただいたようにコードの最後に 「}」が抜けていたのが原因だったようです。

    また、最初はトップページのみしか適用がされていなかったので「.entry h3」を以前の「.article__content h3」「.article.article–entry h3」へ戻したところ両方の記事で反映が確認できました。

    お忙しい中ご対応いただきまして誠にありがとうございました。

  2. しげぞう 投稿作成者

    イッチ様

    返信ありがとうございます。CSSが反映されない場合はキャッシュ(以前のデータ)が残っている場合もしくはコードミスというのがほとんどです。リロード(再読込み)して反映されないのであればコードの記述ミスを疑います。

    その部分のコードが反映されないという時にはその部分の記述だけでなく、以前のコードも1つ1つ確認する必要があります。ミスがあるとそれ以降の記述が反映されません。

    イッチ様の場合ですが、多分以下のコードが原因ではないかとおもいます。

    ここ、最後に「 } 」が抜けているため記述されているCSSのほとんどが反映されていないのではないかと思いますので、一度確認してみてもらえますか?

    もしここが原因でなければ再度別の原因を探す必要があります。

  3. イッチ

    しげぞう様

    解説頂きありがとうございます。

    一度ご案内いただいたように「.article__content h3」と「.article.article–entry h3」を「.entry h3」へ変更して更新をした後少し時間を置いてみたのですが、全く変化がありませんでした。
    どこか他に変更する点とかあるのでしょうか?

    もしご迷惑でなければ再度ご確認頂けませんでしょうか。。。

    よろしくお願いいたします。

  4. しげぞう 投稿作成者

    イッチ様

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

    「.article__content h3」「.article.article–entry h3」を「.entry h3」に変更して反映されるか確認してみて下さい。同じシンプルのデザインがちょっと以前と違うのか?何か大きな仕様変更あったかもしれませんね。あとでちょっと確認してから必要であれば記事も修正してみます。

  5. イッチ

    お世話になります。
    いつもブログで困った時に閲覧させていただいております。
    私もペンギン様同様本ページのしげぞう様のやり方にて見出しの設定を行いましたが、プレビューすら反応がない状況です。
    1.ページのリロード
    2.カスタマイズコードを一度削除する
    上記を何度も試し、コードも全く同じようにコピペをしてスタイルシートに貼り付けたので問題はないかと思っております。
    URL添付いたしますので一度どこが違っているのかご確認いただけませんでしょうか?

    ブログデザインはシンプルA.ホワイト 右カラムです。
    大変お手数をおかけいたしますがよろしくお願いいたします。

  6. しげぞう 投稿作成者

    ペンギン様

    コメントありがとうございます。以下試してみてください。

    1.ページのリロード

    ブラウザでのキャッシュ(以前のデータ)が残っている場合がありますので、変更後にサイトを表示して「Ctrl」と「F5」を一緒に押してリロード(再読込み)してください。

    2.カスタマイズコードを一度削除する

    カスタマイズしたコードを一度外して保存します。一度元に戻して保存です。その後再度コードを追加して保存。保存できたらサイトを表示させてリロード。