AddQuicktagの使い方とhtmlコードのエクスポートデータ

htmlを登録することでワンボタンで使えるようになるAddQuicktag

ワードプレスを使っているならこのプラグインを上手く使いましょう。

作業がぐっと楽になりますよ!

この記事の目次
1.インストール
2.htmlコードの登録
3.利用
4.エクスポート・インポート
5.エクスポートファイルのダウンロード

AddQuicktag

まずはプラグインをインストールしましょう。

1.インストール

プラグイン⇒新規追加で、AddQuicktagを検索してインストール。有効化です。

2.htmlコードの登録

設定⇒AddQuicktag
または
プラグイン⇒AddQuicktag⇒設定

ここでhtmlコードを登録します。

ラベル名・ボタン名
分かりやすい名前を付けておきましょう。
「枠線」など。
ちなみにこのページの一番最初の枠線は登録してあるhtmlコードを利用しました。

これ、ワンボタンです♪^^

htmlコードは

 

<div style="border: 1px dotted #000000; padding: 5px; background-color: #f0e68c;">これ、ワンボタンです♪^^</div>

 

ですが、これがワンボタンで出来るわけです。

開始タグ・終了タグ
開始タグに表示したい内容を記述します。
終了タグには</最初のコード>を入れましょう。

上のhtml を例に取ると、
開始コードは<div style=”~>になります。
終了コードは</div>ですね。

div ここからが一つのブロックですよ、と言うコード
style=” “ 「”」と「”」の間で表示を指定します
border: 枠線
1px 太さ
dotted 点線。実線ならsolid
#000000 色

/div ここまで有効

となっています。

で、こんなの正直覚えてられない訳ですよ^^;
これを仕事にするなら別ですけども。

だから良く使うようなもの・使いたいものは最初に登録しちゃいます。
htmlは調べれば分かりますので最初だけちょっと苦労してください。
僕がよく参考にしているサイトを紹介しておきます。

ただ、「こうしたい!」と言うのがはっきりしている場合は
「枠線 二重 html」とかでグーグル検索する方が速いですね。

ちなみに参考サイトの横に入っているピンクの線も登録してあるのでワンボタンです♪

アクセスキー・順番
入力しなくても大丈夫です。
アクセスキーを決めておけばCtrl+アクセスキーで一発入力できますが、
元々のショートカットとかぶると不便ですので必要ないです。

一覧表示の順番はたくさん登録する場合は
順序を付けておくと使いやすいので好みで付けてください。

僕はアクセスキー・順番は全くつけていません。

最後に一番右側のチェックボックスにチェックを入れてください。
(全てのボックスにチェックを入れるボタンです)

3.利用

ここまでした状態で記事投稿画面を開くと、
段落や見出しのボックスの横にもう一つボックスが出来ています。
(ヴィジュアルエディタ⇒ツールバー切り替え、でツールバーを表示する)

そこから使いたいコードを選択してボタンを押すだけでコードが挿入されます。

文章の一部を装飾したい場合は、
そこをクリック&ドラッグで選択してからボタンを押してください。

<div ~>や<p ~>で記述すると改行してしまうので、
改行を避けるときは<span ~>で記述します。

4.エクスポート・インポート

複数のブログを作る時に毎回、タグを登録するのは大変ですし面倒です。
と言うか、初回でもかなり面倒です。

そこで便利なのがエクスポートとインポートです。

エクスポートと言うのはタグのデータを出力することで、
(ゲームのセーブデータみたいな感じ)

インポートと言うのはエクスポートされたデータを読み込んでコピーすることです。
(セーブデータをまるまるコピーできる!)
これを使うと、簡単にタグの入力が出来ます。
ただし、今の時点で登録されているタグは消えてしまうので注意です。
全てエクスポートした側のタグになります。

エクスポートファイルのダウンロード

今回、僕の方で以下のタグが入力されているファイルを用意したので使ってみてください。
※自分の登録しているタグを消したくない場合は使わないでください。
こちらからダウンロードできます。

登録されているコードは

小見出し(桃)

小見出し(緑)

 

点線枠

 

青枠

 

蛍光ペン(黄)

です。
コードをいじれば線の種類や、色は簡単に変えることが出来ます。
利用してみてください♪

こちらからダウンロードできます。

インポートの方法は・・・画面下部からインポートの項目を探して、
「ファイルを選択」(ダウンロードしたファイルを選択)⇒「ファイルのアップロード・インポート」

これでOKです。

AddQuicktag を使うことで洒落た文章もお手軽に作れますので
いろんなタグを登録して、上手く利用していきましょう!^^

コメントを残す