アメブロのスマホアプリで 見出しを入れる方法

この記事のURLとタイトルをコピーする

この記事を読むのに必要な時間は約 9 分です。
(専門用語などにはポップアップする説明をつけているので時間が長く表示されることがあります。
ツールチップの機能については、こちら)

ついこの間までアメブロのスマホアプリでは見出しが簡単に入れられませんでした。
しかし、いつの間にかデザインされた見出しを数タップで簡単に入れられるようになりました。
パソコンでのエディターにはその機能ついてないのですが、これはかなりの進歩だと思ってます。
見出しを入れることによって内容が脱線することなく読者に伝えたいことを伝えやすくなります。
それだけでなく見出しを入れることでSEO効果もあるのです。
是非、知らなかった方にも使っていただきたいと思います。

 

目 次

見出しを入れる方法

スマホアプリで見出し
2020年10月26日(月)アプリバージョンiOSアプリ 12.5.3より
数タップでデザインされた見出しを簡単に入れられるようになりました。
詳しくは、下記のスタッフブログをご覧ください。

スマホアプリで見出しを入れる
画像の左から順番に操作するだけです。
これならHTMLタグなど知らない方でも見出しをつけることができますね。
見出しについて詳しく知りたい方は、下記の記事を参考にしてください。

アメブロのスマホアプリから入れることのできる見出しを使って記事を書いてみました。
だからといってスマホアプリで書いた記事ではなくパソコンからも入れることが可能です。
スマホアプリで入れられる見出しのHTMLタグを知っていることが条件ですが・・・
また色なども自分の記事に合わせて変更することも可能です。
下記の記事を参考にしてください。

 

見出しの種類

見出しの種類
見出しのデザインは、30種類ほどあるようです。
スマホアプリでこれだけできるならパソコンエディターにも欲しいくらいです。
現状ではスマホアプリから見出しを入れて下書き保存してそのHTMLタグをInsert TextClippingsに登録して使うしかないですが、色やフォントの大きさなどは編集できます。
ただいいことばかりではありません。
アメブロには、いろんな規制があるのです。

 

見出しを使う場合の注意点

見出し
スマホアプリで簡単に見出しを追記できるようになっていますが、注意点としてHTMLの構文に違反しないことがあります。
スマホアプリの見出しを入れてHTMLタグを簡単にチェックしましたが、h2タグとh3タグが混在しています。
h3タグの中にh2タグを入れることはできません。
h2タグの中にh3タグを入れることはできますが・・・
知らないとデザインだけで選ぶことになるのでやってしまいそうですね。
検索エンジンのクローラーが巡回した時に構文違反はマイナスイメージですね。

見出し
上記画像は、HTML表示にしてタグの文字数を調べました。
アメブロの文字数制限についてご存知ですか?
詳しくは、下記のスタッフブログを確認してください。

文字数制限では60000バイトで半角なら60000文字となるのですが、全角は半角の2文字分となります。
アメブロの文字数制限は、HTMLタグを含むなので文字数の多いタグを多様するとそれだけ表示させる文章が減ると言うことです。
理屈は、アメブロのブログカードの場合と同じですね。
なので上記画像ではどの見出しを使った時にどの程度の文字数が加算されるのかと言う目安になるように文字数を表示しています。

見出し
上記画像もスマホアプリで入れた見出しです。
ただこちらは、さっきの画像と違いh3タグになってます。

見出し
上記画像もスマホアプリで入れた見出しです。

見出し
上記画像は、筆者がいつも使っている見出しです。
スマホアプリで入れた見出しと文字数を比べてみてください。
見出しなので10個20個って感じで使うことはないですが、長文記事になった時はちょっと不利になるかもしれません。
制限にかからないように注意してください。

 

使用している見出しデザイン

見出し見本
筆者が実際にアメブロの記事の中で使用している見出しのHTMLタグを紹介しておきますね。
アメブロなので外部スタイルシートにせず、HTMLの属性としてインラインスタイルシートにしています。
コピペするだけで使っていただけます。
ボックスタイプ
上記見出しを使っている記事は多く見出しをわかりやすくしました。
下記のHTMLを参考にしてください。

カギ型見出し
上記の見出しは、アメブロの中ではよく使われている見出しです。
筆者は、h3タグでよく使っています。

使っている記事

バルーン型見出し
上記見出しは、WordPressでも使っている見出しの角を落としたタイプです。
筆者は、バルーンと呼んでいますが・・・

スマホアプリ見出し
アメブロのスマホアプリから入れた見出しです。
下記のHTMLタグを使うとパソコンからでも使うことができます。
また、色の編集や文字の大きさも変更可能です。

使っている記事

以上、4種類筆者が使用している見出しを紹介させていただきました。
色の編集をされる場合は、下記の記事を参考にしてください。

 

見出しを使うメリット

見出しを使うメリット
もし週刊誌に見出しがないとどうでしょう?
筆者だったらそんな週刊誌買いませんね。
まず何のために買うのかと言うことを考えると知りたい情報があるってわかっているから買うんです。
それはどこでわかるのか?
目次見出しを拾い読みしてるからわかるんです。
皆さんもそうしませんか?
多くの方は、それを数秒とかで判断して次にいくのです。
それが読者の行動心理だと思うのです。
見出しについてのメリットは下記の通りです。

  • 見出しを使わないとユーザーがコンテンツを読みづらい
  • 見出しを適切に使うと検索エンジンのクローラーがコンテンツを理解しやすい(SEO効果が期待できる)
  • 見出しを入れることで話が脱線しない

 

まとめ:見出しを効果的に使う

アメブロのスマホアプリで 見出しを入れる方法
見出しは、記事の中でかなり重要な要素になります。
効果的に使うことで読者が記事を読みやすくなります。
目次をつけるともっと効果的になります。
今回の発見で以前、無料配布した記事テンプレートにスマホアプリの見出しを使った記事テンプレートを追加しました。
よく見るとカラーコードを変更することでかなり種類増えますね。
そういったカスタマイズは簡単にできるので目次付きテンプレートを入手してチャレンジしてみてください。
目次見出しをつけることでより読者が読みやすくSEO効果も期待できるなら使わない手はないと思いますよ。
目次付きテンプレートは、下記より入手可能です。
メルマガ購読が無料配布の条件となってます。
メルマガに登録してテンプレートをゲットする!

 


 

チャンネル登録

 

WEBのことならくまはちLABにお任せください。

サービス 制作事例
お問い合わせ
LINEスタンプ
LINE@友だち追加
Vektor WordPress Solutions
Vektor WordPress Solutions

くまはちLABのご利用ありがとうございます!
くまはちLABの最新情報をフォローしてゲットしてください!