AIを活用したアメブロ集客支援サービスはこちらへ >

アメブロ「HTML編集」の基本と活用方法を解説

この記事ではアメブロ「HTML編集」の基本と活用方法を解説していきます。

アメブロの「HTML編集」を活用することによって枠線やボタンの設置などを行うことができ、コンバージョンをより多く獲得できたり、外部サービスをアメブロ上に表示することが可能です。なお、禁止タグもありますので、その点も踏まえてご紹介していきます。

 

アメブロのHTML編集とは?

HTMLタグはハイパーテキストマークアップランゲージタグ(HyperText Markup Language)の略称で、ホームページの記述言語です。

アメブロではテキスト編集を行う機能以外にも、HTMLタグを表示させた状態で変種することができる機能を有しており、外部サイトや自ら作成したバナーを埋め込みたいとき文字サイズ、文字色のカスタマイズを行うときなど便利です。

 

ただ、アメブロの中には禁止タグと呼ばれているものがあり、これが含まれていると投稿することはできないのですが、HTML編集画面を使えばタグを削除して投稿ができるようになっています。

なお、エディタの表示方法を切り替えるときには、通常表示の右側にあるHTML表示ボタンをクリックすれば簡単に切り替えが可能です。

 

活用方法:ボタンや枠線などのコードを入力できる

ボタンを追加したいときには、INPUT要素を使いTYPE属性にBUTTONを設定することで挿入ができます。

この時、ボタンに文字を入れて表示する形になるかと思われますが、ボタンに確認などの文字を入れたいときには、VALUE属性を使い属性値に確認などの文字を入れるだけです。

 

ただし、これだけではボタンを使って何をするのかといったルールが含まれていませんので、必要に応じたアクションを含めることが大切です。

罫線を変更したいときには、専属性の値をSOLID(実践)やDOUBLE(二重線)など、他にも点線にしたいときはDOTTED、破線にしたいときにはDASHEDといった具合にどのような線にするのかで属性値を変更します。

 

活用方法:外部サービスを貼り付けることができる

動画サイトなどアメブロ内に外部サービスを貼り付けたいとき、HTMLをその都度コーディングするのでは手間がかかりますし、初心者にとってはかなりハードルが高い作業になりがちです。

最も簡単にやる方法は、外部サービスが提供している埋め込みコードをHTML表示モードにして貼り付けるだけで済みます。

 

外部サービスで利用できるものには、グーグルマップやヤフー地図などの地図サービスやInstagramやtwitterなど画像およびSNSサービスなどがあります。

また、楽天やAmazonなど通販系やYouTubeなどの動画、Apple musicなどのような音楽サービスなど自らのアメブロに貼り付けることでユーザーに対するユーザービリティの向上に役立てると良いでしょう。

 

禁止タグがある場合、削除が可能

サービスを貼り付けるときや他のウェブページのHTMLの一部をコピー&ペーストする行為はとても簡単にブログの更新に役立てることができる便利なやり方です。

編集モードを終了してプレビューを行えば、HTMLコードはそのまま反映されてブログを表示できるはずです。

 

しかし、プレビューに仕様とした際に禁止タグが含まれていますといったエラーが表示されて投稿できないケースも少なくありません。主に、他の記事やメモ帳などを使ってコピーペーストしているときやリブログを複数しているときにエラーが表示されやすくなります。

アメブロのヘルプには、どのようなタグが禁止されているのか一覧を見ることができますので、HTML表示に切り替えて対象となるものを削除しましょう。

 

まとめ

アメブロ「HTML編集」の基本と活用方法を解説してきましたが、いかがでしたか?

アメブロのHTML編集を活用することによって枠線やボタンの設置など様々なメリットがあり、記事をカスタマイズすることによって成果に繋げることが可能です。そのため、積極的にHTML編集を活用することをおすすめします。