AddQuicktagでよく使うタグや定型文をボタン化!記事を素早く書けるプラグイン

AddQuicktagというプラグインを使うとテキストエディタに任意のボタンを作成することが出来ます。これの何が便利かというと定型文やよく使うタグをいちいち手打ちしなくてよくなるところです。

ちなみに複数サイトを運営している場合は設定をエクスポート(出力)して、そのファイルをインポート(入力)して使うことも出来ます!

私が愛用しているボタンたちのファイルはコチラからダウンロードできます。また、見出しのデザインや文字の装飾など一部はクラス名から呼び出ししているので、後半のコードを外観のCSS編集にコピペしてくださいね。

AddQuickTagをインストール

プラグインの新規追加で「AddQuickTag」を検索し今すぐインストール→有効化をしましょう。

AddQuickTagの設定

こんな感じで入力します。開始タグと終了タグはそれぞれ分けておくと、実際に使うときに便利です。

クラス名を指定したりダッシュアイコンの指定をする場合はこんな感じ。ダッシュアイコンはテキストエディタではなくビジュアルエディタで使う場合に目印になります。

ビジュアルエディタでAddQuickTagを使う場合はプルダウンメニューとなります。ちなみに右上のメニューを開くボタンが押されてないとデフォルトでは見えないと思うので注意。

設定用ファイルのダウンロードとインポート

ファイルをダウンロード(addquicktag.-07-05-2017.json)
ダウンロード出来たら、AddQuickTagの設定画面下の方にあるインポートを使ってください。

こんなボタンを作っていますよ、の見本と思って不要なものは消したり変更したりしてくださいね。

見出し<h2>やデザインを設定しておくと便利

赤太字マーカーも作っておくと記事を書くときに便利です。使いたいものをコピペして、色などを変更して使って見てくださいね!

色は#~~~のところを変えてくださいね。

マーカーのCSS

見出しのデザイン見本アレコレ

🌼border-style:の指定🌼
solid→1本線
double→2本線
dashed→破線
dotted→点線

大見出しのデザイン

画像は70×70で作ってあります。画像はWordpressのメディアにアップした場合、画像それぞれにURLという箇所があるので、それコピペしたらOKのやつです。余計なスペースとか入らないようご注意くださいまし。

そして画像に文字がかかってしまうなど上手く配置出来ない場合はpadding-left:の部分を調整してみてくださいね!

小見出しのデザイン

とってもシンプルです。widthが線の幅です。

前にアイコンを付けるデザイン

絵文字だと失敗するテーマもあるのでご注意くださいまし。同じような感じでFont Awesomeが使える場合はそれも大丈夫です。

背景に色を付けるデザイン

paddingの数値を増やすと背景の色が大きくなります。

とても便利です!!プラグイン作者様ありがとうございます!!!

オマケ:一気にコピペしたいんだが、という人用

※Copyボタンを押すと一気に選択するのでコピーできます。もしくは<>こういうボタンを押すとこの中だけCtrl+Aで全選択できます。