記事の詳細

ビジュアルエディタが意外と手間

普通のビジュアルエディタだけだと、色々要素を設定するのが手間だし、順番によっては思ったように色がつかなかったり、意外と簡単じゃないこともあります。

「ボタンをポチポチ、色をつけて、リンクをはって、あれ色が違う…」という方を見て、
classを用意して設定してあげれば、簡単にレイアウトが整えられるのに大変そうだなぁ…と思うことがありまして、
そんなことができるプラグイン「AddQuicktag」のご紹介です。

最初に少し設定が必要ですが、それが済めばかなり簡単に扱えるようになります。

インストール・設定方法

インストール方法

AddQuicktag1
管理画面の [ プラグイン ] -> [ 新規追加 ] から「AddQuicktag」を検索、今すぐインストールをします。
(WordPress 4.5.3で使用しましたが、正式には対応していないようなのでご注意ください)
WordPress.org プラグインページからもダウンロードできます。

インストールはこれで終わり。簡単ですね。

簡単タグの設定方法

AddQuicktag2
[ 設定 ] -> [ AddQuicktag ] から設定を行えます。
ここからAddQuicktagプラグインの重要ポイントとなる、新しいタグを設定できます。
上段は、テストで入力してみたもので、登録が完了するとこのように並んでいきます。

新しく追加したい時は、下段のように空欄が用意されているので、ここに入力していきます。
下記の4つだけ設定すれば、すぐに使えるようになります。
・ボタン名:投稿画面のプルダウンに表示されるので、分かりやすい名前が良いですね
・開始タグ:挿入箇所の始めに追加されます。
・終了タグ:挿入箇所の最後に追加されます。
・右側のチェック:ここでチェックを入れたページにプルダウンが表示されます。
 赤い枠で囲ってあるチェックを入れると、その左側全てがチェックされるので楽です。

設定したタグを使って、投稿してみる

AddQuicktag3
設定を行うと、投稿ページなどにプルダウンが追加されます。
実際に設定したい時は、テキストを選択してから、プルダウンを選択すると、選択したテキストの前後にHTMLが足されます。
何もないところで選択しても足されますが、見た目上分からないスタイルの場合は編集しにくいので、テキストを選択してからの方が分かりやすいです。

AddQuicktag4
今回は、最初から投稿のタイトル用として設定されていた「entry-title」を使ってみました。
「文字を大きく、下に空間をあける」というものです。
下に空間をあけるのも、ビジュアルエディタだと改行や段落を入れるくらいしかできないので、微妙な空間を開けたい時に便利です。

今回はすでにある、目についたclassを試しに使用しただけですが、独自に用意したclassを使用したり、直接styleを書き込むという使い方もできるので、cssが分かる方が用意して、分からない方が投稿をするという場面で特に有効に働くプラグインでした。
分かる方がいない、もうちょっと調整したいなど、何かありましたらお気軽にお問合せください。

その他の便利な使い方

AddQuicktag5
「Remove Core Quicktag buttons」では、標準で用意されている、タグボタンを非表示にすることができるので、「まったく使わない」というときは非表示にしてみましょう。

AddQuicktag6
「Enhanced Code Quicktag buttons」では、テキストエディタに、preタグとHTMLのエンコードとデコードができるボタンが追加されるので、タグをそのまま表示させたい場合などに便利です。

AddQuicktag7
HTMLを長く書けるので、開始タグに普通にコンテンツを書き込むだけで、ボタン1つで定型文を追加できるようになります。
ただ、テキストとして入るので、後で一括変更したい、ということはできませんが、例えば、基本は同じで少し書き加えるだけ、という時には便利に使えるのではないでしょうか。

今回はすでにある、目についたclassを試しに使用しただけですが、独自に用意したclassを使用したり、直接styleを書き込むという使い方もできるので、cssが分かる方が用意して、分からない方が投稿をするという場面で特に有効に働くプラグインでした。
全てのページに共通で使いたい、もうちょっと違う機能が良いな、という場合など、お気軽にお問合せください。

気になることや困ったことがある方は

今回ご紹介のプラグインでは、こんなことも出来ます。気になることや困ったことがある方は、お気軽にお問合せください。

ホームページ制作・改善・販促のお問い合わせは、浜松市中区のGeoDesignへ

お問い合わせはこちら

お問合せフォーム

GeoDesignのできること

GeoDesignサービス

ウェブマーケティング成功事例

 
お名前(姓)
e-mail(必須)

マーケティングのヒントや、ウェブサイトを運営するために必要な情報を不定期でお届けしています。
あなたのウェブサイトを一歩進めるためにご活用ください。

株式会社GeoDesign(ジオデザイン)エントランス

〒430-0929
静岡県浜松市中区中央2ー4ー22
サザンビル(駐車場あり)

サービス対象地域

東京都23区
名古屋市,豊橋市
静岡県西部
浜松市中区,浜松市南区,浜松市東区,浜松市西区,浜松市北区,浜松市浜北区,浜松市天竜区,磐田市,袋井市,掛川市,菊川市,島田市,藤枝市,湖西市
ホームページ制作に関するお問い合わせ

ホームページの活用、集客に関するお問合せ

お問合せ Geoレターを受け取る Twitter Facebook