Insert Textを使ってHTMLタグを簡単挿入

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

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

はじめにお断りしておきますが、2021年3月Googleのポリシー違反と言うことでWEBストアのページが削除されており新規に拡張機能を追加することができなくなっています。
Inert Textは、定型文や HTMLなどを右クリックだけで入れられるようになる便利ツールです。
アメブロで記事を書かれている方は、Amecareの方が便利だと思われる方もいるでしょう。
ただ、そうとばかり言ってられない状況になるかもしれません。
もし、ある日突然にAmecareが使えなくなったとしたらどうしますか?
そんな時に代替になるものがなければたちまちに困ってしまいます。
ちょっと使い方が違うので登録の方法や使い方を覚えてください。

 

目 次

Chromeに拡張機能を入れる

Insert Text
ウェブストア
Inert Text  Chrome の拡張機能は、上記画像をクリックするとウェブストアが開きますのでボタンをクリックして拡張機能をインストールします。

Chrome Toolbar Insert Text
インストール完了したらツールバーに赤丸のようなアイコンが追加されています。

 

HTMLタグなどを登録する

HTMLタグを登録
 HTMLタグを上記画像のように登録しておくと右クリックで挿入したいアイテムを選ぶことができるので別に HTMLを覚えてなくても簡単に使えるのです。
この機能はAmecareにもあるのですが、なぜInert Textを使うのかという理由は、後ほど書きますね。
名前は、自分がわかりやすい名前に変えてもOKですね
 HTMLタグなどは、間違えないように気をつけてくださいね。
ここで WordPressではビジュアルモードかテキストモード、アメブロなら通常表示とHTML表示で使い分けしないといけないですね。
どのアイテムをテキストで入れてどのアイテムは、通常表示で入れるのか?
それによって登録する時に矢印の部分で[ Plain Text ]なのか[ Rich Text ]なのかを選ぶ必要がありますね。
[ Rich Text ]は、修正が必要ないものについては[ Rich Text ]でいいと思ってます。
それと囲み枠や見出しも[ Rich Text ]でOKですね。

 

よく使うタグを一括で入れるのは?

Insert Text
はじめての人がいきなり多くの HTMLタグなどを登録していくのは厳しいかもしれません。
メルマガ購読の特典に追加しております。
すでに登録している方は、メルマガにダウンロードできるリンクを掲載しますので登録しなおす必要ないですよ。
メルマガに登録してテンプレートをゲットする!

 

Amecareとの違い

Amecare定形タグ
AmecareにもInert Textと同じ機能があるのに・・・
そう思う方もいらっしゃいますね
Amecareは、アメブロにログインした状態であれば WordPressなどでも活用が可能です。
では筆者は、なぜInert Textと併用するのか?
Amecareが使えなくなる可能性だけではないのです。
上記画像は、定形タグを開いた状態ですが、登録の数を増やすとこの画面に限ってはスクロールにならず画面の上に出てきてしまうのです。
それを嫌って併用しています。
それと基本的にアメブロ WordPressで使用するタグの書き方を筆者が変えていることも1つの要因です。
基本的に違うのは、 スタイルシートの部分になります。
これは、アメブロレスポンシブデザインではなく WordPressと同じやり方をするとスマホでは一切 スタイルシートが適用されないということになったりします。

 

エディタの違い

使うエディタによりInert Textでの保存方法が違います。
下記の2パターンを見て覚えてください。

Rich Text

アメブロ

WordPress

上記画像は、アメブロの通常表示エディターと WordPressビジュアルエディタになります。
このエディターでInert Textから HTMLタグを挿入する場合には、[ Rich Text ]で登録したものを使う必要があります。
見出しや囲み枠は、[ Rich Text ]になってます。

Plain Text

アメブロ

WordPress

上記画像は、アメブロのHTML表示エディタと WordPressのテキストエディターになります。
上記エディタを使う場合は、Inert Textに[ Plain Text ]で保存したアイテムを使う必要があります。

 

自分用にカスタマイズする

HTMLタグ
 HTML スタイルシートをカスタマイズするのはあくまで自己責任で行ってください。
基本的には、フォントの大きさや色などまた背景色などが スタイルシートなどでカスタマイズ可能です。
ただ記述方法に一貫性がないので戸惑う場合もあるかもしれませんが、指定する単位が違うだけになります。
定型文であれば HTMLで書いてブログで修正がいらないものは[ Rich Text ]で保存してもいいと思います。
ただアメブロ WordPressも通常表示やHTML表示の切り替えを繰り返すと不要なスペースやタグを入れるという傾向にありますので気をつけてください。
筆者は、それが嫌いなのでアメブロは、HTML表示で書いています。
別にプレビューで確認すればいいだけのことなので・・・
 WordPressでも考え方は同じで常にテキストエディターで書いてます。
色コードは、下記を参照してください。

 

エラー回避方法

Insert Textのエラー
Inert Textをすでにインストールしている場合は、 Chrome のアドレスバーの横から消えていませんか?
Googleにより強制的にオフにされています。
拡張機能管理を開いてInert Textの詳細を開きます。

オフからオンへ
右上のスイッチが左寄りの場合は、オフで右寄りの場合は、オンです。
オンにすると問題なく使えます。
ただ永久的に使えることを保証できません。
 Firefox Clippingsを使うということも検討しなくてはいけないかもしれません。

 

まとめ

Insert Text
Inert Textは、慣れるとすごく便利なツールです。
筆者は、このツールのおかげで記事を自在に装飾したりすることができます。
手打ちでタグ打ちするとなると障害のある身体ではかなりの時間がかかってしまうでしょう。
みなさんも便利に使ってみて下さい。
メルマガに登録してテンプレートをゲットする!

 


 

チャンネル登録

 

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

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

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