AFFINGER

AFFINGER(アフィンガー)AddQuickTagで複数スタイルをまとめて1クリック設定する方法

2018-03-03

AFFINGER(アフィンガー)AddQuickTagで複数スタイルをまとめて1クリック設定する方法
つぶろ
こんにちは!つぶろ@リーマンブロガーです!

今日はAFFINGERを触っていてずっと面倒に思っていた「スタイルタグを複数設定したいときにまとめて1クリックで設定したい」という痒いところが無事に解決できたのでその方法を覚書として残しておきたいと思います。

他にも

AFFINGERを使ったサイトのSSL化についてはこちらの記事でまとめています!

AFFINGERで作る404ページはこちら。

AFFINGERのスタイルは使いやすい

AFFINGERには文章のスタイルを設定できるようにビジュアルエディターでボタンが提供されています。

AFFINGER(アフィンガー)AddQuickTagで複数スタイルをまとめて1クリック設定する方法

「スタイル」ボタンを押すと出てきます。

文章を書いていてもこれがあると簡単に文字のスタイルを設定できて便利ですよね!文章を目立たせたい時に役に立ちます。

欠点 まとめて1クリック設定できない

AFFINGER(アフィンガー)AddQuickTagで複数スタイルをまとめて1クリック設定する方法

でもこれ、それぞれの文字装飾が別ボタンになっているため、複数スタイルをまとめて1クリックで設定することができません。

例えば、「つーぶろっく」という文字を「つーぶろっく」に設定したいと思ったら以下の手順を踏まないといけません。

  1. スタイルで「太文字(赤)」を選択→「つーぶろっく
  2. スタイルで「ドット線」を選択→「つーぶろっく
  3. スタイルで「黄マーカー」を選択→「つーぶろっく

つまりこの場合は3手間かかってしまうんです。

文章を目立たせたい箇所が多ければ多いほどこれの積算になってしまいます。

どうにかこれを1手間で終わらせたいという思いが前からありました。

それが今回無事に解決することができました!プラグインを使ってタグを作り出す方法です。

プラグイン「AddQuickTag」の導入

AddQuickTag

今回はこの「AddQuickTag」を導入することで複数のスタイルをまとめて1クリックで設定することに成功しました。

「AddQuickTag」のインストール

「AddQuickTag」のインストール方法はWordpressの「プラグイン」→「新規追加」で「AddQuickTag」を検索して「インストール」→「有効化」を行ってください。

「AddQuickTag」の設定

AddQuickTag 設定

WordPressの「設定」→「AddQuickTag」をクリックすると設定画面に入ることができます。

ボタンのラベル、ダッシュアイコン、ラベル名

「ボタン名」のところは自由に書いてOKです。ビジュアルエディター上で表示される名前になります。

自分は「bigred-dot-ymarkeiko」と設定しました。

「ダッシュアイコン」「ラベル名」は未記入でも可能。

開始タグ*と終了タグ(s)

開始タグ*

<span class="rmarker-s">

終了タグ(s)

</span>

と入れてください。

開始タグに書かれているところが一番重要なところになります。

今回はrmarker-sと記入しているのですがそれぞれ呪文になっており、ドット線、黄マーカー、太文字(赤)をまとめるよっていう呪文になります笑

ドット線dotline
黄マーカーymarker
太文字(赤)hutoaka

 

他にもAFFINGERでは以下の呪文が唱えることが可能なのであなたのお好みに設定すれば良いと思います!

大文字oomozi
太文字huto
赤マーカーrmarker
小文字komozi

 

また、この呪文は以下の記事を参考にすることによって増やしていくことも可能です。

アクセスキーと順番

未記入で大丈夫です。

チェックボックス

右にあるチェックボックスには

ビジュアルエディター、post、pageにそれぞれチェックを入れておいてください。

 

最後に「変更を保存」を押す。

以上で設定の完了になります。

設定の確認

ここで投稿画面に行ってみてください。

QuickTag Editor

エディターの中に「Quicktags」があります。

ここをクリックすると先ほど設定した「bigred-dot-ymarkeiko」ができているのがわかります。

これで文字を書いて「Quicktags」→「bigred-dot-ymarkeiko」を設定すれば1クリックで設定できたことが確認できたと思います。パチパチ〜!

まとめ

AFFINGER(アフィンガー)AddQuickTagで複数スタイルをまとめて1クリック設定する方法

今回の記事ではAFFINGERで複数スタイルを1クリックで設定する方法について記事にまとめました。

AFFINGERでも他のテーマでも同じなのですが、テーマを直接触ってしまうと予期せぬトラブルが発生するので絶対にやめてください。プラグインを使うのが一番無難な方法だと思います。

なかなかネット上に文献がなかったので調べるのに苦労した〜!
AFFINGER(アフィンガー)AddQuickTagで複数スタイルをまとめて1クリック設定する方法
つぶろ

-AFFINGER
-, ,