そんな疑問が解決できる記事を書きました。

本記事では、クラシックモードにてAddQuicktagを使う方法を画像付きで解説します。

ただし、上記の方法は新エディタGutenbergに慣れている人からすると、ちょっぴり使いづらかったりします。

今回は、そんな人のために、僕が使っている代替案も用意しました。

この記事を読んでいただけると、記事執筆のスピードアップが望めますよ。

執筆者情報

さっそく解説していきます。

GutenbergでのAddQuicktagの使い方4ステップ

GutenbergでのAddQuicktagの使い方はこの4ステップでできます。

1. AddQuicktagにタグを登録する
2. ブロックタイプの追加をクリック
3. クラシックモードにする
4. Quicktagsを選択する

AddQuicktagはあらかじめインストールしておいてくださいね。

念のため、以下にインストール方法を示しておきます。

インストール方法

▼[プラグイン]→[新規追加]より、AddQuicktagを検索してインストールしてください。

インストールが終わったら、AddQuicktagを有効化しておいてくださいね。

それでは順に解説していきます。

ステップ１：AddQuicktagにタグを登録する

①[設定]→[AddQuicktag]を選択します。

②タグを登録します。
▼今回は、黄色の蛍光マーカー用のタグを作ってみました。class=”marker”のCSSも別途作成しています。

記入する項目の内容について、下表にまとめておきました。

図の右側に9つほどあるチェック欄は、AddQuicktagを有効にする画面の選択。

一番右のチェック欄にチェックを入れて、すべてにチェックを入れておいてOK。

CSS補足

▼黄色マーカーは需要あるかもなので、一応CSSも載せておきますね。
（僕も既存のサイトを参考にして調整しました。）

span.marker {
	font-weight: bold;
	background: linear-gradient(transparent 60%,#ff9 60%);
}

ステップ２：ブロックタイプの追加をクリック

▼下図赤枠のブロックタイプの追加をクリックします。

ステップ３：クラシックモードにする

▼「クラシック」と入力すれば、クラシックモードが選択できます。

ステップ４：Quicktagsを選択する

▼①Quicktagsを選択します。

▼Quicktagsが表示されていない場合は、下図赤枠のアイコンをクリックしてください。

▼②登録したボタンが表示されます。マーカーを選択してみます。

▼できました。

▼黄色のマーカーが引けました。

ああ

以上、簡単ではありますが、GutenbergでのAddQuicktagの使い方でした。

ここまで説明しておいてなんですが、実は僕、AddQuicktagを使ってないんですよね。

（えーー！？）

存在は知ってましたが、はじめたころは使い方が良く分からずにそのまま放置してました。

それに、使ってみると分かってもらえるかもですが、AddQuicktagについて僕はこんな印象を持っているんです。

• どこにマーカーがついているのか分かりづらい
• ブロックエディタの特性がなんだか活かしづらい
• タグの登録がちょっぴり面倒
• プラグインは極力減らしたい

ということで、次にAddQuicktagに似たことができる代替案をご紹介します。

代替案：「クリップNOTE」を使用する4ステップ

代替案として「クリップNOTE」というフリーツールを使って実現する方法を紹介します。

元々このツールは、コピペ入力を支援してくれるソフト。

こちらのほうがサッと登録できて、サッと使えるので僕は気に入っています。

ただし、こちらはWindows専用のツールになります。

以下は、「クリップNOTE」を使用する4ステップです。

1. タグを登録する
2. ブロックタイプの追加をクリック
3. 任意のブロックモードにする
4. Quicktagsを選択する

インストールを済ませておいてくださいね。

ステップ１：タグを登録する

貼り付けたい情報を一旦Ctrl + Cでコピーします。

▼次に、Shiftキーを2回押すと、下図のようなアプリが起動します。

過去にコピーした履歴が表示されますので、その中から保存したいテキストを右クリック→保存で保存しておきます。

ステップ２：ブロックタイプの追加をクリック

▼下図赤枠のブロックタイプの追加をクリックします。AddQuicktagのときと同じですね。

ステップ３：任意のブロックモードにする

▼今回は、HTMLコードなので、カスタムHTMLを選択。

ショートカットキーを覚えよう

カスタムHTMLは、段落ブロックで「/h」と入力してEnterを入力すれば呼び出せます。

これを使えば、ステップ２、３は不要です。

【Gutenbergの使い方】高速化ショートカットテク10選！

2020年5月24日

ステップ４：登録したタグを選択して貼り付け

▼Shiftキーを2回押してクリップNOTEを起動し、登録したタグを選択して貼り付けます。

▼貼り付けできました。

▼もちろん表示もされます。

ああ

テキストのコピペであれば何でも使えますので、記事執筆以外にも使ってみてくださいね。

【最新版】AddQuicktagの使い方【Gutenberg対応】まとめ

いかがでしょうか。

代替案として他にないか調べてみると、再利用ブロックを使った方法がありましたが、僕は今回紹介した方法が手間がかからず気に入っています。

少しでも記事執筆のスピードアップを図りたい方は、一度試されてみてくださいね。

以上、AddQuicktagの使い方とその代替案の紹介でした。　

この記事が少しでもお役に立ちましたなら、下のツイートボタンより感想をツイート頂けると大変うれしいです^^

こんな方の要望に応える記事を書きました。

本記事の内容

• アフィリエイト広告バナーリンクの貼り方
• バナーリンクを中央ぞろえにする方法
• 押しの一言コメントを追加する方法

さっそく解説していきます。

アフィリエイトリンクの貼り方3ステップ【Gutenberg対応】

アフィリエイトの貼り方は、以下の3ステップです。
※Gutenbergに対応しています。

1. 広告リンクをコピーする
2. ブロックタイプを「カスタムHTML編集」にする
3. ペーストする（貼り付ける）

今回は、僕の愛用のテーマ「スワロー」の広告バナーリンクを貼ってみます。

スワローは現在、A8.netで広告提携ができます。

ちなみに、A8.netは広告主数・登録サイト数ともに日本最大級のアフィリエイトサービス会社です。

登録しない手はないので、まだの方はついでに登録してしまいましょう。

>>A8.netでアフィリエイトを始める

それでは順に解説していきます。

ステップ１：広告リンクをコピーする

貼り付けたい広告主と無事提携できましたら、広告リンクの作成ができるようになっているはずです。

▼広告リンクの作成より、今回は広告バナーリンクを選択し、広告リンクを表示をクリックします。

広告がいくつか表示されます。

▼貼り付けたい広告が見つかったら、そこの広告リンクのコードを全コピーします。

「素材をコピーする」ボタンをクリックすれば、簡単に全コピーできます。

ステップ２：ブロックタイプを「カスタムHTML」にする

▼投稿作成画面に戻って、貼り付けたい箇所のブロックタイプを「カスタムHTML」に変更します。
※「/h」と入力後Enterを押せば、簡単に変更できます。

ステップ３：ペーストする（貼り付ける）

先ほどコピーしたコードをCtrl + Vで貼り付けます。

▼プレビュー画面を確認。

無事貼れましたね。

でも、この広告リンクを中央ぞろえにしたくないですか？

そんなときは、少しだけ手を加えてあげましょう。

と言っても簡単です。

発展その１：アフィリエイトリンクを中央ぞろえにする

はじめに、カスタムHTML編集にして、以下のコードを貼り付けておいてください。

<div style="text-align: center;">
（ここに広告バナーコード）
 </div>

あとは、先ほどの広告リンクのコピーを（ここに広告バナーコード）というところに貼り付ければOK。

コードも簡単なので、プログラミング初心者の方もぜひチャレンジしてみてください。

コードを簡単に解説。

▼中央ぞろえにできました。

これでもいいんですが、さらにバナーリンクの上のほうに押しの一言コメントをつけたいときもありますよね。

次章でやり方を解説します。

発展その２：押しの一言コメントを追加する

普通に文を書くように入力して書いてもいいのですが、あなたのブログの行間の取り方によっては、上図のように少し余白が気になるかもしれません。

この行間を埋めるためのコードがこちら。

<div style="text-align: center;">
 <p style="color: #F44336">＼（押しの一言を入れる）／<br>
（ここに広告バナーコード）
 </p>
 </div>

コードを簡単に解説。

▼できましたね！

ちなみに、僕の愛用中のワードプレステーマ「スワロー」は、とにかく初期設定が楽で、書くことに集中したい初心者ブロガーにはちょうど良いですよ。

価格も9,900円（税込）と有料テーマの中でも比較的安いのも特徴ですね。

ブログデビューを飾りたい方はぜひ。

押しの一言はどんな言葉いい？

参考までに、押しの一言はこんな感じがいいかもです。

• 期間限定・特別感（30日間無料お試し可能）
• 権威を伝える（～～が愛用の～～）
• 対象者を伝える（ブログ初心者のための～）

このあたり、興味あれば以下の本がおすすめです。
メンタリストDaiGoさんも影響を受けているくらい、心理学とマーケティングの要素が詰まっています。

シュガーマンのマーケティング30の法則 お客がモノを買ってしまう心理的トリガーとは / ジョセフ・シュガーマン 【本】

posted with カエレバ

楽天市場

Amazon

アフィリエイトリンクの貼り方を3ステップで解説【Gutenberg対応】まとめ

アフィリエイトリンクは無事貼れましたか？

中央ぞろえにしたり、一言コメントの追加も簡単なコードで実現できますので、ぜひチャレンジしてみてください。

こんな感じで、コードの入力が必要な場面について、どこよりも初心者向けに解説していきたいと思います。

【Gutenbergの使い方】高速化ショートカットテク10選！

2020年5月24日

そんな疑問が解決できる記事を書きました。

結論、Gutenbergに用意されているショートカットキーを使いこなしましょう。

本記事では、Gutenbergの使い方を僕も本当に良く使うショートカットキーに絞ってお伝えします。

作業効率を高めたい方は必読ですよ。

執筆者情報

さっそく解説していきます。

＼当ブログで使用中のテーマ／

WordPressテーマ「スワロー」公式サイトはこちら

【Gutenbergの使い方】高速化ショートカットテク10選！

まずはショートカットキーを一覧でご紹介。

Gutenbergで僕がよく使うショートカットキーだけを10個厳選しました。

これらを使いこなすことができれば、マウスを使う回数が減り、作業効率が格段に向上しますよ。

使っていくと、案外すぐに覚えられますので、意識して使っていきましょう。

それでは順にみていきます。

まずは基本の4つ

これは、MicrosoftのOfficeやほかのアプリでも似たキー操作なのでとっつきやすいのではないでしょうか。

最後のリンクに変換する方法だけご紹介。
※Windowsで説明します。

▼①リンクを貼りたい文を選択してから、Ctrl + Kを押します。

▼②あとは任意のリンクを入力すれば完成。

▼（補足）赤枠部を押せば、新しいタブで開く設定やリンク属性を追加できます。

上図のリンク属性などの意味については以下を参照ください。

• Open in New Tab：リンク先を新しいタブで開く
• Add “nofollow to link”：リンク先をクロールしない
• Add “sponsored” to link”：広告リンク

ちなみに、リンク解除したい場合、Windowsなら、Ctrl+ Shift + K。Macなら、⇧⌘Kでできます。

知っておくと便利なブロックショートカット2つ

ブロックとブロックの間に新たなブロックを挿入したいときに便利ですね。

ブロックを下に作成するショートカットキーだけご覧いただきましょう。

▼任意のブロックでCtrl + Alt + Y を押してみましょう。

選択中のブロックの下側に新たなブロックが作成されました。

Ctrl + Alt + Tなら、上側に新たなブロックが作成されます。

高速化に持ってこい！ブロックショートカット3つ

マウス操作でももちろんできますが、結構めんどくさいです。

ショートカットキーを覚えてサクッと行いましょう。

ここで押さえておきたいのが「ブロックタイプの変更」ですね。

▼通常、マウス操作で下図赤枠のブロックの追加ボタンをクリックすれば、各ブロックタイプが表示されますが・・・

▼「/（スラッシュ）」を入力しても、ブロックタイプが出てきます。

続けて、日本語でブロックタイプを入力すれば、ブロックタイプが変換できます。
例）/リスト、/ショート など。

一部のタイプは、英語一文字で呼び出せるので覚えておくと便利です。

• /h　：カスタムHTML編集
• /i　 ：画像挿入

忘れたときはこれで一覧表示！

最後に、ショートカットキーを忘れた時は、上表のキーで一覧表示をしましょう。

このショートカットキー自体が少し覚えづらいんですけどね。

【番外編】マークダウン記法も覚えておくと便利です

クラシックエディタでも対応していると思いますが、Gutenbergでもマークダウン記法を少し覚えておくだけで、スピードアップが図れますよ。

以下の3つだけおさえておきましょう。
※␣はスペースキーです。

• ##␣　：見出し2（###␣なら、見出し3）
• *␣　：リスト
• 1.␣　：番号付きリスト

上記を段落ブロックで入力すれば、すぐに各ブロックに変換できます。

【Gutenbergの使い方】高速化ショートカットテク10選！まとめ

Gutenbergショートカットキー一覧を再掲します。

ぜひこれらを使いこなして、記事執筆の高速化をはかってみてください。

数十分単位の執筆時間削減につながると思います。

【余談】今後のGutenberg

最後にこちらのアンケート結果をご紹介。

【WPブロガーアンケート】#拡散希望

WordPressを使ってるブロガーのみなさんに聞きたいまめ😃🎵

みなさん、WPで記事書くときは、旧エディタかグーテンベルクどちら使ってるまめか⁉️

おまめは旧エディタ(Classic Editor)からなかなか抜け出せないまめ💦#初心者ブロガー#ブログ初心者#ブログ書け

— おまめ Lv.44@ブログ毎日更新GW中(理由は固定ツイートに) (@omame_no_okane) April 29, 2020

（おまめさん、ありがとうございます。）

旧エディタのクラシックエディタ使用者が圧倒的に多いですね。

Gutenbergはまだまだ普及していないのかも。。。

最近ブログを始めた僕は、クラシックエディタの良さを知りません。

HTMLコードでも書けなくはないですが、

• 別エディタで作ったものをコピペするのが面倒
• 画像のリンクを作成したりするのが面倒

上記のような理由より、今のところGutenbergに落ち着いています。

本記事ではGutenbergの使い方をショートカットキーの使い方に絞ってお伝えしました。

新エディタGuternbergは今後ますます発展、機能拡充していくと思います。

クラシックエディタは今のところ、2021年末までサポートされるそうですが、いずれ移行の時期がきます。

今のうちにGutenbergになれておくのも良いかもしれませんね。

記事内の図が見づらいなどありましたら、Twitter（@KoaraCom）にてご連絡ください。早急に対応します。

【最新版】AddQuicktagの使い方【Gutenberg対応】

2020年5月29日

ワードプレス・スワローカスタマイズ 投稿タイトル下のSNSボタンを削除

2020年6月6日