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

Seesaaブログの見出しタグの装飾Seesaaブログアフィリエイトとカスタマイズ

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

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

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

見出しの使い方

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

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

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

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

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

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

/* 見出し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」を書き忘れない事。

現在使っている見出し

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

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

/* 見出し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;
}
MEMO

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

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

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

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

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

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

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

それで適応中のデザインを選択するとスマートフォン版のスタイルシート(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」に変更すると「実線」ではなく「点線」で表示する事も可能です。

以上見出しの装飾でした。

ブログを収益化するならWordPress利用がおすすめ

無料ブログでは利用規約の変更やアカウント停止、サービス終了などのリスクがあります。

また、表示速度も重く、スマホのページには消す事のできない広告が多いためブログでの収益化を考えているならWordPressの利用が圧倒的におすすめです。

WordPressと無料ブログの違いや必要な料金などは以下記事でまとめてます。

コメント

  1. カワラ より:

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

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

  2. しげぞう より:

    カワラ様

    コメントありがとうございます。最近のSeesaaブログは旧システムで新デザイン、または新デザインシステムで旧デザインと入り組んでいる部分があるので、デザインによる違いは実際にやってみないと分からない場合があります。特に基本のベースが旧デザインシステムという事なので余計です。なので、もしよかったら一度ブログのURLを教えて下さい。コメント公開時にはURLは削除しますのでどうぞよろしくお願い致します。

    あ、それとカテゴリーのツリー化ですが、おそらくjavaScriptとかで対応する感じなのな?と思います。実際に検証はしてませんが、色々検索して探してみると記事があるみたいです(旧デザインも新デザインも)。
    ⇒http://rebalance.befreefloat.net/seesaa_tips/727

  3. カワラ より:

    いつも参考にさせていただいております。
    私のブログは旧デザインシステムで新しいテンプレートの「SimpleDホワイト/両サイドバー」を使用しています。
    このブログを参考にhタグを有効化したはずなのですが、見出しが反映されません。
    これはテンプレートが新デザインでブログ自体が旧デザインシステムのままだからでしょうか?

    あと新デザインシステムでのPC版、スマホ版のカテゴリのツリー化のやり方などもわかれば教えていただきたいです。
    どうかご回答よろしくお願いいたします。

  4. けけ より:

    連投申し訳ございません。

    先ほどご相談させていただきましたけけでございます。

    あれから時間を置いたところ、
    15分後くらいに反映が確認できました。

    お騒がせし、申し訳ございませんでした。

    今後ともよろしくお願いいたします。

  5. けけ より:

    いつもお世話になっております。
    けけと申します。

    いつも参考にさせていただいております。

    見出しの追加をいたしたく、
    拝見した内容をスタイルシートに追加いたしましたが、
    反映がなされませんでした。

    何度か試しましたがダメでした。
    原因がわかりましたらご教授いただけないでしょうか。

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

  6. しげぞう より:

    ayame様

    コメントありがとうございます。関連する記事の記事タイトルですが、スタイルシートで調整できそうな感じがしますので、一度下記のコードをスタイルシートの一番下に追加してみて下さい。

    .module--category-recent-entry .recent-entry__item p {
        white-space: normal;
        height: 100px;
    }

    スタイルシートに追加できたら保存してブログを表示、それで「Ctrl」と「F5」を一緒に押してロリードしてから確認をしてみて下さい。ただ、PC以外のデバイスでは確認してませんので、一応他のデバイスでも確認をしてみると良いと思います。

    一応heightの部分を100pxにしています。これなら3行くらいは表示できるかな?と思います。これを50pxとかにして高さを低くすると多分2行分表示ではみ出す部分は表示しない感じになりますので、数値はお好みで変更してみて下さい。

    また、反映されない場合にはお手数ですが再度コメント頂けると助かります。どうぞよろしくお願い致します。

  7. ayame より:

    いつも参考にさせていただいています。
    seesaaブログの新システムですが、「関連する記事」のサムネイルはいいのですが、その下の記事タイトル表示が短すぎて、私のブログの記事内容が読者に伝え切れません。せめて表示を2段(できれば3段)表示にできればうれしいのですが、方法があればご教授下さい。
    よろしくお願いいたします。

  8. しげぞう より:

    こてつ様

    返信ありがとうございます。どのデザインにしてもヘッダー画像などは後から変更する事ができますので、とりあえず新デザインのテンプレートでやってみて、もし旧デザインを使いたいという場合があればまたコメント下さい。今後もどうぞよろしくお願い致します。

  9. こてつ より:

    しげぞう さま

    早々にご回答いただき、誠にありがとうございます。
    そういうことだったのですね…。

    とりあえず、慣れるまでは新デザインのテンプレートを使用することにしました。

    とてもわかりやすくて、非常に助かりました。
    誠にありがとうございます。

    また困った際には質問させていただくかもしれませんが、
    何卒、よろしくお願いいたします。

  10. しげぞう より:

    こてつ様

    コメントありがとうございます。Seesaaブログは最近になって「新デザインシステム」という新しいシステムが導入されています。それでテンプレート(デザイン)が旧システムの物と新デザインのものと入り乱れているような状況で非常に分かりにくいです。

    こてつ様の使われているデザイン「こねこ」は旧システムで使われていたデザインで、新デザインシステムのテンプレートとはHTMLやCSSが全く違います。要は別物だと思ってOKです。

    旧システムの場合は記事のタイトルに「h3」というタグが使われているので、記事中で使用する見出しは「h3」ではなく「h4」とか「h5」を使う必要がありますし、装飾のコードも違ってきます。

    なので、このまま旧デザインのテンプレートを使うか、それともテンプレート自体を変更するか?を一度決めて見て下さい。ちなみに新デザインの物は「シンプル系」とか「ノスタルジア」とか「続きを読む」が含まれているデザインですね。

    もし旧デザインのテンプレートを使うというのであればそれ用のコードを考えてみますので、またコメント下さいませ。

  11. こてつ より:

    しげぞう さま

    はじめまして。
    シーサーブログ初心者のこてつと申します。

    見出し装飾をしたく、「スタイルシート編集」に
    記事のとおり追加しましたが、装飾が反映されません。

    /* 見出し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;
    }

    使用しているテンプレートは、「こねこ(右サイドバー)」です。
    こちらのテンプレートは「続きを読む」パターンではないようなのですが…

    知識がまるでないため、初歩的なことで申し訳ございません。

    教えていただけますでしょうか?

  12. YUNA より:

    しげぞう様

    わざわざのお返事ありがとうございます。

    シーサーブログは結構長いこと使ってきたのですが、
    今回のようなカスタマイズは初めてなので迷いましたね^^

    こちらのサイトではとてもわかりやすく説明されていて
    本当に助かりました。

    これからも頻繁に訪問させていただくかと思います。

    こちらこそ、今後ともよろしくお願いします。

  13. しげぞう より:

    YUNA様

    返信ありがとうございます。上手く反映されたようで良かったです!うっかりミスは私も毎日のようにやってて、何で?何で?ってなります(笑)また何か分からない部分などあればいつでもコメント下さい。今後もともどうぞよろしくお願い致します。

  14. YUNA より:

    しげぞう様

    早速のお返事ありがとうございます。

    しげぞう様が言われましたように「リッチテキスト」ではなく、
    「通常エディタ」で投稿しましたところ、今回はきちんと反映されていました。

    悩んでいたのがウソのようにあっけなくです。
    でも、アドバイスをお受けしなかったらずっと気付かず
    同じミスをしていたかと思います。

    とても助かりました。
    本当にどうもありがとうございました。

  15. しげぞう より:

    YUNA様

    コメントありがとうございます。見出しのタグは「h3」とか「h4」を使って記述していくのですが、おそらく「リッチテキスト」ではそのまま「h3」「h4」という文字列がそのまま文章として表示されるのではないかと思います。

    アフィリエイトのコードや今回の見出しを使う場合にはHTMLが編集できるエディタを使う必要があるので、一度通常エディタなどで試して見て下さい。それでも反映されない場合には再度コメント頂けると助かります。また、その場合はブログのURLも教えて下さい。反映されない原因を探してみたいので。

    URLはコメント公開時には削除しますので、どうぞよろしくお願い致します。

  16. YUNA より:

    しげぞう様

    初めてコメントさせていただきます。

    Seesaaブログの記事中に大見出しと中見出しを入れたいのですが、
    方法がわからずこちらのサイトに辿り着きました。

    私のブログでは、大見出しは「h3」、中見出しは「h4」になるかと
    思います。

    まず、こちらのサイトでご紹介されている「見出しのサンプル」を
    そのまま真似ようと、ご説明の通りにスタイルシートを変更し、

    記事を書く際は「リッチテキスト」の状態で「ここに見出し」
    と書き更新したところ、反映されておらず、そのまま「ここに見出し」
    と表示されています。

    何度かリロードしましたが同じ状態です。

    ちなみにテンプレートは「シンプルA.パステルグリーン 右カラム」で
    「続きを読む」デザインだったので、貴サイトで説明されていた
    「Seesaaブログのトップページの続きを読むを削除して全文表示させる」
    こちらの手続きは済ませています。

    このような状況ですが、ご教授いただけますと幸いです。
    よろしくお願いします。

  17. たこやき より:

    しげぞう様

    いつも素早い対応で感謝致します。
    教えて頂いた通りで、ばっちり出来ました!
    クラス名が違うのですね。なるほど、本当に勉強になります。
    ありがとうございました。

  18. しげぞう より:

    たこやき様

    コメントありがとうございます。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;
    }

    これでおそらくスマートフォンでも反映されると思いますので、一度試してみて反映されない場合には再度コメント下さい。

  19. たこやき より:

    しげぞう様
    いつも本当にお世話になっております。このサイトのおかげでだいぶ進んできました。
    忙しいところ申し訳ございませんがまたひとつ、質問です。

    しん様もおっしゃっておられますが、私もスマホの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も反映されていません。
    何か方法はあるのでしょうか。
    あっちこっち調べてみたのですが、どこのサイトにも載っておりません。
    どうかお助け下さい。

  20. たこやき より:

    ありがとうございます、反映されました!
    続きを読む、を削除して全文表示~の記事はもう拝見しましてやっておりました。とてもありがたいサイトです。
    感謝しかありません。本当にありがとうございます。

タイトルとURLをコピーしました