Seesaaブログ、記事の”大見出し”は、h3タグ

Seesaaブログの標準テンプレートは、「シンプルA.ホワイト 右カラム」でした。

スッキリしたデザインで、使いやすかったので、兄弟分の「シンプルC.グレー 右カラム」でカスタマイズをしました。
このシリーズでは、h1がブログ名、h2が記事名に使用されているため、記事の最大の見出し(=”大見出し”)はh3にしました。

シンプルシリーズの記事の”大見出し”はh3タグ

h1~h6までの見出しタグ(Heading tags)は、真面目に上から振っていくようにしています。

このテンプレートのデフォルトでは、h1はブログ名、h2は記事名になっているようでしたので、記事内の最大の見出しはh3タグにすることにしました。

必要に応じて中見出しh4、小見出しh5を追記します。

Seesaa simple series headings
シンプルシリーズ ヘッディングタグ

番号の探し方は、画面のそれっぽい箇所で右クリックして「検証」を選ぶと、右側にソース情報が出てきますので、そこをいろいろ掘って探しました。

セクショニングタグもヘッディングタグもきれいに埋まっている良い感じのテンプレートなのに、「本文」の編集画面に記事中の見出しタグを支援するボタンもないし、字も大きくなるだけって、なんだかおしい。

シンプルシリーズの記事エリアはclass=”article__content”

CSSでデザインを指定する際に、class(属性)やid(id)で区切られたエリアの名前が分かれば、その部分だけに反映し、他のエリアには影響を及ぼさない様にデザイン範囲を指定することができます。

Simple series class-article-content
シンプルシリーズ 記事本文エリア名 class=”article__content”

同じエリアに広告なども入っていますね。(これは取り除けます)

h3タグ、CSSの設定

.article__content h3 {
margin:0.75rem 0;
background: linear-gradient(transparent 50%, #b7ffdb 0%);
font-size:1.3rem;
line-height:1.5;
}

SeesaaでのCSSの変更方法

simple series css updates
SeesaaでのCSSの変更方法

デザイン→PC→デザイン設定→スタイルシート編集→一番後ろに上のコードをコピペです。

古いコードと新しいコードが打ち消しあっている時は、「初期値との差分」の部分に示してくれるので、親切設計です。

h3タグ、HTMLの書き方

<h3>大見出し</h3>

本文エリアに↑のように書けばh3見出しになります。

完成品サンプル

simple series h3 design sample
シンプルシリーズ h3完成サンプル

キャッシュがすぐにかかってしまい、カスタマイズしても、新デザインがすぐに確認できないことが多いので、そういう時は履歴を消すか、ゲストモードで見てみてください。

他のデザインがいい時は、ネットでCSSの記述部分を探して、.article__content h3以外の部分を差し替えるだけです。

コメントを残す

メールアドレスが公開されることはありません。