クリップタイムsearch相手を操る心理術Psychology簡単WEB制作WordPress初級編(初期設定~テーマ選択)初めての方へAboutスタッフ紹介Staffお問い合わせContactmenuCLOSEよく寄せられるお悩みWordPressサイトを作りたい(初級編)管理人『うつけ』よりお問い合わせ初めての方へスタッフ紹介CLOSEキーワードで記事を検索CLOSEクリップタイムはすぐ仕事に活用できる実践型のビジネスノウハウ学習サイトです。当校の講師紹介はこちら。使っていると思います。使っていないタグもいっぱいあるのでは?よく使う文言や、よく使う画像、よく使う補足項目や、よく使う吹き出しなどはワンクリックで設定出来たら便利ですよね。この「AddQuicktag」は自分流にボタンをカスタマイズできる便利なプラグインです。今回は、吹き出しや補足表示も簡単にできてしまう「AddQuicktag」を使って、記事作成の効率を劇的にアップさせる方法をクリップタイムしていきます。うつけってかさー、タグってなに?いちいち面倒くさいこと覚えたくないんだけど。つねちゃんタグっていうのは、太字にしたり文字色を変えたりするときに、その変えたい文字を囲む記号のようなモノなんだけどー、詳しくはこれ読んで。MONEY」タグってなに?タグは、<タグの名前>で囲まれた半角英数字の記号のことで、このタグで文章や画像などを囲むことによって、その文章などが表示されるときの指示命令を与えることができる便利なモノです。この文章は大事だから太字で表現したい。上記の文章を太字に設定するときは、編集画面で赤枠の「B」のボタンを押して太字にしますよね。この文章は大事だから太字で表現したい。普段ビジアルエディタで編集作業をしている人は、上記のように視覚的に表示されるのであまり馴染みのないモノですが、今の作業をテキストエディタで見てみると・・・。青枠と赤枠を見比べてみると、赤枠の文章にはなにやら英記号が追加されていますね。ここで追加されているのは<strong></strong>太字にする場合、したい文字を<strong></strong>で囲むことで、「お前らは太字になって表示するんだぞ!」と命令を与えていることになります。ビジュアルエディタではボタン一つで表現できるのでこのタグは表示されませんが、実はこんな指示が裏では行われています。当サイトでは基本的にビジュアルエディタでの編集を推奨しています。テキストエディタでもビジュアルエディタでも同じ作業ができますので、せっかく簡単に操作できる環境が用意されているのなら、それを使って快適に記事編集をして、余った時間は他のことに使う方がよっぽど効率的です。なんとなく「タグ」の理解は深まったでしょうか、太字や見出し、下線や文字色など、色んなボタンが用意されているように、このタグにもそれに比例して色んなタグ(英記号)が存在します。いままで何気なく使っていたボタンを、テキストエディタで確認してみると、色んな発見があるかもしれないですね。今回クリップする「AddQuicktag」は、そんなタグを自分流にカスタマイズして追加や設定ができる便利なプラグインです。インストールしてみましょう。AddQuicktagをインストール管理画面の「プラグイン」→「新規追加」から検索窓でAddQuicktagを検索。赤枠のプラグインを「今すぐインストール」。なかに「AddQuicktag」が追加されていますので、早速クリック。この画面になりますが、赤枠で囲まれた部分が、ひとつのタグに対しての設定項目部分です。1から6まで記入欄があります。ひとつひとつ解説していきましょう。ボタンの名前ここに入力する名前が、実際ワンクリックボタン機能を使う時に表示される名前です。編集画面に、このようにプルダウン表示されます。(ピンク枠の部分)自分で変わりやすければどんな名前でもOK!ボタンの説明ここは特に記入しなくても大丈夫です。自分用のメモ欄ですね。先ほどの<strong></strong>の場合は最初の<strong>の部分を入力します。先ほどの<strong></strong>の場合は最初の</strong>の部分を入力します。IEのみ対応ここは、PCのショートカットキーのように、「Alt」+「〇〇〇」みたいなショートカットを作れますが、インターネットエクスプローラ(IE)のみの対応になるので、使用頻度は少ないですね。名の通り表示する順番を指定できます。プルダウン表示される順番を指定できます。今回はこのように設定してみました。当サイト、クリップタイムでは、うつけ俺や!きちょう私が!つねちゃん会話を繰り広げるエンターテイメントサイトだから、僕らの顔の画像をよく使うんだよね。この「AddQuicktag」にあらかじめ、この3人の顔の種類をそれぞれ登録しています。うつけもちろんこの吹き出しのタグも、あらかじめ登録してあるから、2秒で設定出来ちゃうよー。ちなみに、よく使う言葉だったり、画像だったりを設定したいときは、開始タグの部分に、画像のURLや言葉を入力するだけで、終了タグは未記入でOKです。ボタン名、開始タグと終了タグの入力が終わったら、一番右側のチェックボックスにチェックします。すると全てにチェックが入ります。最後に忘れずに「変更を保存」をクリックしたら、タグの登録完了です。タグを使ってみる実際にさっき登録したモノを使ってみましょう。編集画面にいくと、赤枠の「Ouicktags」のボタンが追加されています。その中から、先ほど登録したうつけの画像を読みだしてみます。【うつけ】ガーンをクリックします。https://cliptime.jp/wp-content/uploads/2017/01/utsuke06.png↑このように、登録した画像のURLがパパッと出てきました!これが、「AddQuicktag」の最大の良いところ。使う画像があるのに、その度にメディアのライブラリから画像を探してURLをコピーしてなんてやってたら時間がもったいないどころの話じゃなくなりますよね。うつけあれ、でもこれ俺の画像が表示されてないじゃん。↓このように入力するだけで、うつけ復活っ!いつもの感じで表現することができます。デフォルト表示のタグを非表示に編集画面にはデフォルトで表示されているタグもいっぱいあります。使わないモノは非表示にすることもできます。赤枠のチェックボックスにチェックすると、編集画面からそのタグが消えますので、普段使わないものは非表示にしておくと画面がスッキリして編集に集中できますね。拡張コードクイックボタンここでは、「pre」ボタンと、「htmlentities」ボタンを表示or非表示の設定ができます。「pre」ボタン空白と改行をそのまま表示する機能です。コピー&ペーストで、ソースコードをそのまま記入したいときなどに使います。」や「&lt;」などのそのまま表示させることができる機能です。この文章を赤く表示したい。#ff0000;”>この文章を赤く表示したい。</span>と入力すると思います。(ビジュアルエディタでボタン操作しても、テキストエディタにはこう記載されています)でも、これをそのまま編集画面で入力すると、この文章を赤く表示したい。と実際に変換されて表示されてしまします。やり方を伝えたいのに、これでは意味がありません。#ff0000;”>この文章を赤く表示したい。</span>を囲むことによって、コードをそのまま表示させることができます。Entities」ボタンをクリック。見知らぬ英記号で囲まれたら完了です。プレビューで確認してみましょう。Entities」タグは、テキストエディタだけに表示されます。使用するときはテキストエディタで作業を行ってください。書き出し&インポート最後は、いま登録したタグの一覧を保存&反映させることができます。登録したタグの一覧データを保管しておきたいときは、「書き出しファイルをダウンロードする」。保管しておいた一覧データを反映させたいときは「ファイルを選択」→「ファイルとインポートをアップロード」。サイトを引っ越しする時や、サーバー移管の際などには非常に役に立ちます。やり方だけでも覚えておくといざという時に便利です。応用するとこんなこともできる上記で「AddQuicktag」の設定と使い方は理解できたでしょうか。このプラグインを応用すると、先ほどと同じように、うつけこんな吹き出しが表現できたり、こんなボタンが設置できたり注意を喚起したり補足を伝えたりサイト運営していくにあたっては決して手を抜いてはいけない「ユーザーの読みやすさ」を劇的にアップさせることができます。それがボタンひとつで表現できるようになります。重要なのはもちろん記事の内容ですが、その記事をより見やすく、より伝わりやすくサポートしてあげることは、なにをとってもユーザーの為です。サイト運営は、ユーザーユーザーユーザーです。ユーザー目線で記事を書き、ユーザー目線のデザインで、ユーザー目線のサイトを快適に育てていける環境を作る。その一歩一歩が、アクセスや収入に必ず繋がってきます。この記事で解説した機能をより簡単に視覚的に使用できるテーマも存在します。MONEY」この「AddQuicktag」は、本当に便利なプラグインです。作業効率のアップはもちろんユーザーの読みやすさを最大限サポートしてくれるプラグインに応用することが可能です。MONEY」です、時間を有効活用できる準備を今のうちにしておきましょう。初級編(初期設定~テーマ選択)簡単WEB制作プラグインワードプレスこの記事が気に入ったらいいねしよう!最新記事をお届けします。「新しいスマホビュー時代をつくろう」というのをコンセプトに、スマホでの見やすさ、操作しやすさにとことんこだわりました。PlusでWordPressに目次を追加RECOMMENDこちらの記事も人気です。