アメブロカスタム「見出しを飾ってみよう」（4）

「Windows 10 バージョン 1607」

昨夜やっとで更新に成功しました。

なんど固まったことが・・・

Windows10の更新プログラム、うちのパソコンにとっては、なかなかの曲者です

さてさて今日もアメブロカスタマイズのお話しです。

見出しを飾ってみよう！

見出しの装飾（スマホ表示編）

今日の見出し、どうですか

スマホでご覧の方にも装飾された見出しが表示されていますよね。

これは、昨日使った「大見出し」「中見出し」「小見出し」といった段落メニューを使わず、「HTML表示」画面に直接装飾の書き込みをしています。

具体的にその方法を説明しますね。

今日のは簡単です

「HTML表示」に切り替えます。

アメブロアプリの入力画面では、

右下にある「HTML表示」ボタンを

タップします。

さっきの見出しの部分は、

赤く囲んだ部分になります。

昨日のCSSを編集した見出しは、CSS編集可能なテンプレートを選ばないと設定できませんが、今日ご紹介する方法は、どのテンプレートでも装飾できます。

私が今日使った装飾は、

大見出しっぽい装飾

<div style="font-size: 1.2em; font-weight: bold; color: #fff; border: 2px dashed #ffecef; background: #F9B8CD; border-radius: 8px; box-shadow: 0 0 3px 3px #F9B8CD; margin: 0 0 1.5em; padding: 0.5em 0.8em;">見出しを飾ってみよう！</div>

中見出しっぽい装飾

<div style="font-size: 1.2em; font-weight: bold; color: #5C4747; border-left: 7px solid #F9B8CD; border-bottom: 2px dashed #F9B8CD; margin: 0 0 1.5em; padding: 0.2em 0.8em;">見出しの装飾（スマホ表示編）</div>

上記のテキストを直接「HTML表示」画面にコピペすると装飾できます。

「大見出し」と言わず「大見出しっぽい」と言っている理由は、昨日使った方法のように正規の見出し「h2」「h3」「h4」を使っていないので、データ上は構造化された文章にはなっていなくて、この方法は構造的な文章という意味でのSEO効果はありません。

データ上は構造化されていなくても、視覚的に構造化して見える文章、ということになります。

スマホでアメブロをご覧になる方が多いと考えると、SEO効果はなくても読みやすい見た目のほうが、また読みに来てもらえる可能性高まるんじゃないのかなぁ～と思ったります。

見出しの装飾、ネットで検索すると、いろんな種類が見つかると思います。

好みのものを探してみるといいと思います。

検索する際は、

アメブロ　見出し