いつもいいねや読者登録
ありがとうございます。
すごく嬉しいですっ
こんにちは！
あか子です
読みやすいブログの特徴の1つとして＜見出し＞を使っているというのがあると思います。
実は、＜見出し＞を正しく使うと読みやすいだけでなく、SEO的にも良いとされています。
SEOとは、サーチエンジンの検索結果のページの表示順の上位に自らのWebサイトが表示されるように工夫すること。また、そのための技術やサービス。Webサイト構築などを手がける事業者の中には、SEOをメニューに用意しているところもある。
引用元：IT語辞典
HTMLで見出しのタグはH1～H6まであり、
数字が小さい程大きい見出しになります。
アメブロでは、
H1 → ブログタイトル
H2 → 記事タイトル
になっているので、記事文中に使う見出しはH3～というわけです。
今日は、H3のスタイルをコピペで使えるように
いくつかご紹介したいと思います。
※パソコンメインの方は、css編集可能テンプレートにしてcssにすべてのスタイルを書くことをおすすめします。私の場合はスマホの閲覧者も多いので、Hタグに直接スタイルを指定する書き方をしています。
アメブロは、スマホ用のcss編集ができない使用になっています。
見出しタグを使わずに<span>や<div>で文字を装飾してる人が多いようです。人間が見る分にはこれで良いのですが、googleやyahooの検索ロボットには見出しとして認識されませんのでご注意～！
フォントは太文字
<h3 style="border-left:10px solid #a9a9a9; border-bottom:2px solid #a9a9a9; margin:20px 0; padding:10px; font-weight:bold;">フォント太文字</h3>
ピンクもかわいい♡フォントは標準
<h3 style="border-left:7px solid #ffc0cb; padding:.6em .8em; margin:20px 0; font-weight:normal;">ピンクもかわいい♡フォントは標準</h3>
↑コピー用のタグが違っていました(汗)
すでにコピペした方すみません！
シンプルなスタイル
<h3 style="border-bottom:1px dotted #3f3f3f; padding:.6em .8em;">シンプルなスタイル</h3>
テキストを中央にもできますよ
<h3 style="border-top:2px solid #add8e6; border-bottom:2px solid #add8e6; padding:.6em .8em; text-align:center;">テキストを中央にもできますよ</h3>
余白多め。フォントサイズも指定できるよ♪
<h3 style="border-left:4px solid #bc8f8f;color:#bc8f8f;font-size:1.2em;line-height:1.4em;padding:30px;margin-top:72px;margin-bottom:36px">余白多め。フォントサイズも指定できるよ♪</h3>
↑の枠線の中のタグをコピペしてテキストを書き換えればすぐ使えます♪
※貼り付けるときには、必ずHTML表示にしてから！
#のあとの英数字は、色指定のコードです。
↓のWEBカラー見本を参考に、お好みの色に変更できます。
WEBカラー見本
♡ランキングに参加しています♡
ポチッとしてもらえたら 嬉しすぎます
ポイントタウン
ポイントインカム
モッピー
