ワードプレスDiver】AddQuicktagを使って入力補助の囲い枠を一発で表示させる方法

こんにちは!現場作業員しながら月間最高16万PVの、さはら(@sahara_momo)です。

さはら
・Diverの囲い枠って数パターン使うし毎回設定が面倒くさい。
・背景色を毎回設定するのジャマクサイ。。
・もっとサクッと表示させたい。

こういった悩みを解決できる記事を書きました。

こういうちょっとした時短作業の積み重ねが大きな時間を生んでくれるからね。

せっかくワードプレステーマDiver使ってるんやし、ドンドン使いやすいようにしようね。

養育費の足しにするために一分一秒でも早く多く稼げるようになりたいしな。

ちびもも
おぉ✨
そりゃ頼もしいな!

この記事を最後まで読んだら、Diverの囲い枠の挿入にストレス感じることなく気持ち良くブログが書けるようになるで!

ポイント!
・今回はワードプレスDiverのグーテンベルクでのやり方やけど、クラシックエディタでも基本は同じやし、参考にしてね!
スポンサーリンク

Diverで入力補助の囲い枠を表示させる簡単な流れ

さはら

Diverの囲い枠を一発で表示させて、時間短縮をめざそうな!
簡単な流れ!
1.ワードプレスにAddQuicktagをインストールして有効化
2.Diverの投稿画面のブロックに囲い枠を表示
3.コードエディタにしてコードをコピー
4.AddQuicktagにペースト
5.Diverの投稿画面に戻りクラシックの段落でAddQuicktagをクリック

簡単に5つのステップで設定を完了することができるで!

Diver入力補助の囲い枠を表示させる5つのステップ

さはら
簡単な流れで紹介した5つのステップを詳しく紹介していくで!

1.AddQuicktagのインストールと有効化

Diver入力補助の囲い枠を一発で表示させる5つのステップ

ワードプレスに『AddQuicktag』というプラグインが入ってない人は、インストールして有効化やで!

インストールの仕方
・ワードプレスメニュー > プラグイン > 新規追加
・検索窓に『AddQuicktag』を入力
・『AddQuicktag』のインストールをクリック
・『AddQuicktag』の有効化をクリック

2.Diverの投稿画面のブロックに囲い枠を表示させる

Diver入力補助の囲い枠を一発で表示させる5つのステップ

登録するのに必要な囲い枠を表示させるで!

ポイントは使いやすい状態にしとくことやで!

ポイント!
・タイトル名
・囲い枠の色
・囲い枠の背景色

これだけ決めといたら、後から変更すること少ないし楽になるで。

Diver入力補助の囲い枠を一発で表示させる5つのステップ
注意!
・囲い枠の『タイトル』は何か入れとかんとタイトル部分が無くなるで。。
・なので今回はよく使う『ポイント!』にしました。

3.コードエディタにしてコードをコピー

Diver入力補助の囲い枠を一発で表示させる5つのステップ

囲い枠を表示させたら、画面右上にある『メニュー > コードエディタ』をクリックしてコードをコピーしてな。

ポイント!
・開始タグ
<div class  ~  </div></div> 』までを貼り付け。

4.AddQuicktagにペースト

Diver入力補助の囲い枠を一発で表示させる5つのステップ

囲い枠のコードをコピーしたら、ワードプレスメニューの『設定 > AddQuicktag』をクリック。

Diver入力補助の囲い枠を一発で表示させる5つのステップ

『AddQuicktag』の画面が開いたら必要事項を入力するで。

入力ヵ所!
・ボタン名 : 後から分かる名前
・開始タグ : コードをペースト
・チェックリスト : 右端にチェック
・あとは無視でOK!
さはら
リストが増えたら『順番』の所に番号振り分けて整理してね!
ちびもも
全部入力したら最後に『変更と保存』を忘れんといてや!

5.Diverの投稿画面に戻りクラシックの段落でAddQuicktagをクリック

Diver入力補助の囲い枠を一発で表示させる5つのステップ

投稿画面に戻ったら、『クラシック版の段落』を挿入。

チェック!
・『変更を保存』したと思うけど、念のため『更新』してね。
Diver入力補助の囲い枠を一発で表示させる5つのステップ

クラシック版の段落を挿入したら、『AddQuicktag』をクリック。

さっき名付けた『囲い枠オレンジ』をクリック。

Diver入力補助の囲い枠を一発で表示させる5つのステップ

こんな感じで表示されたらOKやで!

同じ要領で他のバージョンの囲い枠も作ってな!

【ワードプレスDiver】AddQuicktagを使って入力補助の囲い枠を表示させる方法:まとめ

最後まで読んでいただいてありがとさんやで!

今回は【ワードプレスDiver】AddQuicktagを使って入力補助の囲い枠を一発で表示させる方法!についてご紹介しました。

さはら
タイトルとか背景色、毎回設定すんの面倒くさかったし助かるわ!
ちびもも
これでだいぶ時間短縮できるな!
おさらい
・コードをコピーしてAddQuicktagに貼り付ける。
・開始タグにだけコードをペースト
・タイトルは入力せんと表示されん。

こういう小さいことの積み重からブログを効率化して、記事の更新を早くしていくねん。

ワシ自身も養育費を払うために、一秒でも早くブログから収益が上がって欲しいし、この記事読んでくれたあなたも一緒に頑張ろな。

時短作業でいうと、吹き出し会話も同じようにAddQuicktagを使って短縮できる方法もあるよ。

業界初!全てのアフィリエイト会員さんが対象!!
通常報酬にプラス12%上乗せでお金がもらえる!!
※一部対象外アリ
Amazonアソシエイトに落ちたあなたも『もしもアフィリエイト』からならもしかして・・
Amazon審査落ちた人はもしもで再挑戦やで!
もちろんワシも、もしもから合格したで🤤
アフィリエイト満足度9年連続 No.1 のASP!!
広告の種類も一番多いし、アフィリエイトするなら絶対登録しとかなアカンASPやで!
てか、アフィリエターさんで A8.net 登録してへん人おらんやろ!
知らんけど(笑)
スポンサーリンク
初心者アフィリエイターにこそ使ってほしい。それがDiver。

Diver

htlmやCSSなどのプログラミングを全く知らなくても綺麗なサイト仕上げることが可能!

アップデートにより常に最新のSEO対策の恩恵が受けられる!

クリックだけで吹き出しやランキングを作成可能な手軽さ!

初心者でもベテランアフィリエイターのようなサイトが簡単に作れてしまうのがDiver。

Twitterでフォローしよう

おすすめの記事