初心者でもできる!導入から設定まで5分。クリック1発で文字を装飾したいならAddQuicktagが便利

AddQuicktagプラグインの設定方法

完成形

AddQuicktagプラグインをつかうと、文字ドラック+クリックで
簡単に装飾ができちゃいます。
省エネ大好きな草食系には最適だね。

以下、装飾例参考

太字
赤色+太字
黄色マーカー
黄色マーカー+赤文字
黄色マーカー+太字
黄色マーカー+赤太字
黄色マーカー+強調文字(storong)
黄色マーカー+赤文字+強調文字(storong)

以上。

僕は使いこなしてないから文字の装飾だけに使っています。
これが、なかなかイ~んです、くぅー。

では、早速説明を。
すでにAddQuicktagプラグインはインストール済みとして説明します。

インストール方法は丁寧に他ブログ様が書いてくださっていますので、
「こまけぇこたぁいいんだよ」ってなっている方むけの記事となります。

「黄色で線を引いたかのような文字」を設定

実際に設定すると理解がはやいので
まずは「黄色マーカー」を設定してみます。

設定の仕方

ワードプレス管理画面から「概観」→「テーマ編集」に進みます。
編集するのはスタイルシート (style.css)です。
親テーマ・子テーマの記述に注意。

編集画面が開けたら以下の記述をコピペ&ペーストしてください。

.marker_y {
background-color: #FFFF00;
margin-left: 0.0em;
margin-right: 0.2em;
}

次に、AddQuicktagの設定をします。
管理画面から「設定」→「AddQuicktag」ですよ。
あくまで参考例ですので、設定が気に食わなければ個別に編集してください。
カラーコードが小文字じゃないじゃない。
わたし以外私じゃないじゃない…というお方もいますからね。

ボタン名はひとまず「黄色マーカー」と書いてください。
自分が分かりやすい名前でOK.

開始タグには以下をコピペして貼り付け。

<span class="marker_y">

以上。

終了タグは以下。

</span>

以上。

これで準備は整いました。
よくわからない方は以下の図を参考にしてください。

記述書き込み図

AddQuicktag記述設定例

反映方法

基本は「文字をなぞってボタンを押す」これだけです。

ツールバーに「Quicktag」が追加されているはず。
文字をなぞって各装飾を選んでクリックするだけです。
ビジュアルエディタではドロップダウンメニューで表示。
テキストエディタ画面では設定したボタン名でボタンが表示されます。

図:ビジュアルエディタ画面でのAddQuicktag

ビジュアルエディタ画面でのAddQuicktagの見え方

図:テキストエディタ画面でのAddQuicktag

テキストエディタ画面でのAddQuicktagの見え方
AddQuicktagも、アルバトロステーマも使いこなしていないので、
必要最低限のボタンしか設置していません。

あまりにもボタンを追加してしまうと編集画面立ち上げが遅くなるので注意。

1秒程度の遅滞、「もっさり感」が嫌な方は厳選しましょう。
それか高スペックパソコンの購入をお勧めします。

テスト

黄色マーカーボタンが設置されたはずなので試してみます。

テキストエディタ画面で「黄色マーカー」文字を書き込み。


ドラック。文字をなぞります。

kiiroma-ka-2

ツールバーにてさきほど設定したボタンをクリック。

AddQuicktag編集ツールバー

開始タグ・終了タグが挿入されました。
kiiroma-ka-4

確認してみます。

kiiroma-ka-5
成功です。

css・html記述例

太字

.huto {
     font-weight: bold;
}
<span class="huto">

赤色+太字

.hutoaka {
     font-weight: bold;
color:#ff0000;
}
<span class="hutoaka">

黄色マーカー+赤文字

.marker_y_aka {
color: #ff0000;
background-color: #FFFF00;
margin-left: 0.0em;
margin-right: 0.2em;
}
<span class="marker_y_aka">

黄色マーカー+太字

.marker_y_huto {
font-weight: bold;
background-color: #FFFF00;
margin-left: 0.0em;
margin-right: 0.2em;
}
<span class="marker_y_huto">

黄色マーカー+赤太字

.marker_y_huto_aka {
font-weight: bold;
color: #ff0000;
background-color: #FFFF00;
margin-left: 0.0em;
margin-right: 0.2em;
}
<span class="marker_y_huto">

終了タグはどれも

</span>

です。

なお、太字は強調タグ(strong)を使っていません。boldだけです。
SEOにこだわる方は装飾と組み合わせた強調タグを登録してください。

AddQuicktagに登録しなくても標準ツールバーで反映できちゃうけどね。
気分の問題です。時短マニア。効率厨にはおすすめ。

2 件のコメント

  • 久々に覗いたらめちゃめちゃ更新しててブログのデザインも変わっててびっくり!
    しかもどれも読みごたえある記事ですね。
    ニート株式会社の記事や、ライティング検定の記事はさすがの六畳の主節といった感じです。

    私もブログを立ち上げてから3年以上になりますので、そろそろ稼げるようになりたいものです…。
    遅くなりましたが、本年もどうぞよろしくお願いします。

    • またも返信が遅くなって申し訳ないです。

      >ニート株式会社の記事や、ライティング検定の記事はさすがの六畳の主節といった感じです。
      丁寧に書こうとしているのですが、性格の悪さがでちゃってますね。
      ご勘弁ください。

      昨年もニトさまに大変お世話になりました。

      活動記録を丁寧に記事にしていただいているので、
      私も刺激を受け、さらに熱が入ります。

      本年もニト様のブログ更新を楽しみにしております。

      失礼しました。

  • コメントを残す

    メールアドレスが公開されることはありません。