賢威にAddQuicktagを追加して、より便利活用する!

賢威とAddQuicktag
Pocket

私が使っているWordPressのテンプレートは賢威です。

最初は、シリウスを使っていましたが、賢威を知ってからは、賢威をずっと使っています。

 

といってもシリウスが良くないとは決して言えません。

でも、WordPressのプラグインのように、いろんな装飾が出来ないのが、シリウス離れになった理由ですね。

 

それに、シリウスは、デザインが、ほぼ同じなので、シリウスで作ったサイトだとすぐにバレてしまいます。

しかも、「シリウス=アフィリエイト」と言うイメージがありますよね。

 

それだったら、プラグインの追加で、いろんなデザインができる・・・つまり、読者にとって、分かりやすいコンテンツが出来上がるというメリットに惹かれて、賢威を使うようになったのです。

 

賢威もシリウス同様に有料のテンプレートですが、それだけの価値があります。

その、賢威については、以前の私のブログ「サイト作成ツールは賢威がお勧め」をご覧になってくださいね。

賢威の詳細バナー

それで、今回のテーマは「賢威+AddQuicktag」です。

つまり、賢威にAddQuicktagというプラグインを追加することで、見栄えのいい装飾が簡単にできてしまうという内容です。

 

しかも、時短になって訪問者を飽きさせないブログが出来上がります。

ということで、タイトルは「賢威にAddQuicktagを追加して、より便利活用する!」ということで進めてゆきたいと思います。

今回の記事で得られるものは?

賢威など、WordPressの記事装飾を簡単に出来て、時間短縮にもなるカスタマイズ方法を知ることが出来る

 

装飾タグって何?

PCに疲れた女性

まず、ブログやサイトは、訪問者に分かりやすくインパクトのあるものでなければ、記事を読んでいただけないと思います。

 

あなたも経験あると思いますが、文字がぎっしりと詰まっているブログ・・

最初は読みますが、読みづらいので「もういいや」ということで、記事の途中で画面を閉じてしまうこと・・

 

これって、ありますよね。

これを防ぐために、読みやすくします、

 

つまり、改行したり、重要なところは文字を大きくしてマーカーを入れたり、囲み枠を作って一口メモのような予備知識を入れたり・・・

 

これらは、装飾タグを使うことで変化させることが出来るのです。

つまり、文字、画像、段落、配置などは装飾タグで変化させます。

 

文字だったら、大きさや太さ、カラーなどインパクトのある装飾を施します。

例えば、文字を赤くしたいのであれば、

Shift+Enter<font color=”red”>赤色</font>

または・・・

<font color=”#ff0000″>赤色</font>

 

というタグをテキストモードに書き込みます。

そうすると、「赤色」に変化します。

 

また、文字だけではなく、見出しや囲み枠などもタグを使います。

ブルーの囲み枠

上記のような囲み枠を作って、中に文字を入れようとすると・・

タグは、下記のようになります。

<div style=”background: #e0ffff; padding: 10px; border: 2px solid #afeeee;”>ブルーの囲み枠</div>

 

このような、HTMLタグのことは、ご存知だと思いますが、タグ打ち作業って結構大変ですよね。

これを、もっと簡単にできればスムーズに記事を作ることができるのですが・・・

そこで、賢威は、すでに装飾タグが用意されているのです。

 

賢威には装飾タグが備わっている

まず、賢威には、標準で装飾タグ(スタイル)が備わっています。

例えば、アイコンを呼び出すタグや、フローチャートを表示させることができます。

 

ただ、投稿画面のテキストモードにタグを打たなければならないのです。

例えば、虫眼鏡のアイコンを表示させるには・・

 

<p class=”icon-search”>虫眼鏡(文字)</p>

 

このようなタグを入れなきゃ表示してくれないのです。

賢威7に含まれている主な装飾タグ(スタイルガイド)

賢威の装飾タグにはお問い合わせバナーがあります。

賢威のお問い合わせタググリーンのお問い合せタグ

<p><a href=”#” class=”btn btn-green”><span>お問い合わせ</span></a></p>

 

オレンジのお問い合せタグ

<p><a href=”#” class=”btn btn-orange”><span>お問い合わせ</span></a></p>

装飾お問い合わせタグ2

ブルーのお問い合せタグ

<p><a href=”#” class=”btn btn-blue”><span>お問い合わせ</span></a></p>

 

レッドのお問い合せタグ

<p><a href=”#” class=”btn btn-red”><span>お問い合わせ</span></a></p>

 


そして、アイコンも用意されています。

icontagポイント <p class=”icon-point-l”>ポイント</p>
 icinrag注意 <p class=”icon-caution-l”>注意</p>
<p class=”icon-search-l”>虫眼鏡</p>
icontagNEW <p class=”icon-new-l”>NEW</p>
icontag初心者 <p class=”icon-wakaba-l”>初心者</p>
icontag別ウィンドウ <p class=”icon-blank-l”>別ウインドウ</p>
icontagzip <p class=”icon-zip-l”>ZIP</p>
icontagメール <p class=”icon-mail-l”>メール</p>
icontagショッピングカート <p class=”icon-cart-l”>ショッピングカート</p>
iconタグホーム <p class=”icon-home-l”>ホーム</p>

引用先:賢威のサポートページ

 

また、賢威7から共通コンテンツが導入されました。

共通コンテンツはテキストモード内に共通して使う文言などを入れておくと、ショートコードが作成され、テキストモードにボタンが追加されます。

 

ビジュアルモードとテキストモード

 

これは便利だと思ったのですが、残念なことにビジュアルモードでは操作出来ません。

 

これって、ちょっと面倒くさいですね。

そこで、AddQuicktagというプラグインを賢威にインストールします。

 

そうすると、賢威のテキストモードはもちろん、ビジュアルモードでもプルダウンメニューが表示されます。

あとは、文字を選択してクリックするだけです。

 

クイックタグの操作

 

これはとっても便利だし、賢威初心者にとって、ビジュアルモードの方が分かりやすいので、重宝すると思います。

 

今回は賢威にAddQuicktagというプラグインを入れると超便利になるという内容ですが、賢威以外の、ワープレスであれば、賢威同様に使えます。

 

ただ、他のWordPressでは、賢威独自の装飾タグが入っていないですね。

でも、AddQuicktagをインストールして、装飾タグはこのブログの最後におすすめのタグを記載しておきますので、コピーして使っていただければと思います。

 

では、AddQuicktagのインストール手順から説明しますね。

 

AddQuicktagのインストール

まず、AddQuicktagをインストールします。

賢威でのAddQuicktag新規設定

WordPress(賢威)のダッシュボードの左のメニューの、①プラグインをプレスして、②新規追加をクリックします。

 

AddQuicktagのインストール画面

 

そうすると、上記画面になるので、①のキーワード枠に「AddQuicktag」を打ち込みます。

そして、表示された、②の今すぐインストールをクリックします。

 

有効化ボタン

 

そうすると、インストールが完了するので、有効化ボタンを押します。

 

そして、次に装飾タグを登録します。

 

装飾タグを登録する

登録設定ボタンの場所

 

先程の有効化ボタンをクリックすると、上記のような画面に変わります。

そして、次にAddQuicktagの設定をクリックします。

 

AddQuicktagの設定

タグを登録するページ

 

設定をクリックすると、このような設定画面になります。

ここで、タグを追加します。

では、まず、先程のブルーの囲み枠を登録してます。

 

ブルーの囲み枠

 

タグは下記でしたね。

<div style=”background: #e0ffff; padding: 10px; border: 2px solid #afeeee;”>

ブルーの囲み枠</div>

 

 

開始タグと終了タグ

タグの役割位置

 

AddQuicktagでは、開始タグと終了タグを記入します。

それで、開始タグは(上記画像)・・

<div style=”background: #e0ffff; padding: 10px; border: 2px solid #afeeee;”>

で、

終了タグは・・

</div>

になります。

 

AddQuicktagタグの登録手順

 

登録手順

 

AddQuicktagのタグ登録は①から⑥までです。

①:投稿画面で表示される名前です。

②:開始タグをコピペします。

③:終了タグもコピペします。

④:ビジュアルモードでの表示される順番です。

⑤:すべてのページに於いて使うのでチェックを入れます。

⑥:登録を保存します。

 

 

登録保存が完了すると、投稿画面に戻ります。

 

投稿お画面にquicktagsが追加されたところ

 

そうすると、ビジュアルモードでは、quicktagsが追加されますので、▲をクリックすると、登録した「ブルーの囲み枠」が表示されます。

 

テキストモードでは「ブルー囲み枠」というボタンが追加されています。

では、次に実際、ブルー囲み枠に文章を入れましょう。

 

操作は簡単です。

文章を選択して、Quicktagsの「ブルーの囲み枠を」クリックするだけです。

 

うまく完成したところ

はい、一瞬にブルーの枠が出来上がりました。

どうですか?

簡単でしょう。

 

もちろん、AddQuicktagは追加出来るのでいろんなスタイルの装飾タグをストックすることが出来ます。

そして、言葉やリンクタグも登録出来ます。

 

例えば、ブログの最初の言葉が決まっているのであれば、その言葉を登録したり、記事の最後にメルマガ登録の案内など、登録しておけば便利ですね。

 

言葉(定型文)を登録する

では、次に言葉を登録してみます。

追加で言語を登録する画面

 

言葉の登録は②の開始タグに文章を入れるだけです。

文章の場合は、終了タグはそのまま空白にします。

あとは、先程の説明と同じになります。

 

文章が表示されたところ

 

文章の場合は、始める場所にカーソルを移動して、① → ②へクリックするだけです。

賢威など、WordPressにインストールして登録するだけで、超便利になるということです。

 

しかも、訪問者にとって、分かりやすいので好まれること間違いないと思います。

では、次に装飾タグのおすすめを紹介しますね。

 

私が選んだ囲み枠

囲み枠の枠線ブルー

開始タグ

<div style=”background:#f8f8ff; padding:10px; border:1px solid #b0e0e6; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px;”>

 

終了タグ

</div>

 


囲み枠のピンク

開始タグ

<div style=”background:#fff0f5; padding:10px; border:2px dotted #ffb6c1;”>

 

終了タグ

</div>

 


 

囲み枠のイエロー

開始タグ

<div style=”background:#fffaf0; padding:10px; border:3px double #ffa500;”>

 

終了タグ

</div>

 


 

囲み枠の黒点線

開始タグ

<div style=”padding: 10px; border-radius: 10px; border: 2px dotted #4753a2;”>

 

終了タグ

</div>

 


囲み枠のピンクグラデーション

開始タグ

<div style=”background-image:linear-gradient(#ffd6ea,#ffe0ef,#ffeff7,#ffe0ef,#ffd6ea);background-color:#ffffff; padding:10px; width: auto;margin-right:6px; border-radius: 10px;border: 1px solid #ffcce5; box-shadow: 2px 2px 4px #dcdcdc;”>

 

終了タグ

</div>

 


 

囲み枠の枠2重ブルー

開始タグ

<div style=”padding: 10px; border-radius: 10px; border: 5px double#a1d8e2;”>

 

終了タグ

</div>

 

ワッペン風囲み枠

開始タグ

<div style=”width:400px;”><div class=”l-border l-p-t l-p-r l-p-b l-p-l” style=”margin:10px 5px;padding:15px;word-break:break-all;color:#333;box-shadow:1px 1px 2px rgba(0,0,0,0.3);background:url(https://stat.ameba.jp/user_images/20141029/18/wazameba/41/e4/p/o0300030013113018919.png);border-radius:10px;”><div style=”background:rgba(255,255,255,0.85);padding:5px;border-radius:5px;”><div style=”border:2px dashed #d9d9b5;border-radius:5px;padding:10px”>★</div></div></div></div>

 

終了タグ

</div>

タイトル付き囲み枠

開始タグ

<div class=”l-border l-p-t l-p-r l-p-b l-p-l” style=”padding: 0; margin: 15px auto; width: auto; max-width: 600px; color: #333; background: #fff; border: 1px solid #ccc; border-top: 3px solid #008800; box-shadow: 4px 4px 8px #ddd;”>

<div style=”padding: 6px 9px; background: #f7f7f7; border-bottom: 1px dotted #ccc;”><span style=”font-weight: bold;”>タイトルを入れる</span></div>

<div style=”padding: 15px;”>文章を入れる</div>

 

終了タグ

</div>

 

以上で、おすすめの装飾タグを紹介しました。

それから、賢威にご興味のある方は下記公式サイトをご覧くださいね。

賢威の詳細バナー

そして、私から購入して頂くと独自特典をお付けします。

↓独自特典の詳細は下記です。

独自特典

 

最後に、おすすめの装飾タグは下記から引用させていただきました。

https://ameblo.jp/keiko-design/entry-12156351678.html

https://sakurainorie.com/ameblo-waku/

https://bloom-web.com/ameblo-freame/

http://ameblo-customize.com/kakomi-rinen/

 


buku2では、下記、無料レポートをDLすることが出来ます。

そのレポートの内容は、レアキーワードを見つける方法です。

詳しくは、下記バナーをクリックして、詳細をご覧いただき、宜しければ、DLをお願いします。

無料レポート詳細バナー

メルマガってどんな情報を配信してくれるの?は下記をクリック↓

メルマガリストページ 今回の記事内容をご覧頂いて、まあ、退屈な記事では無いと思われたら、下記ブログランキングの応援クリックをお願いします。

Pocket

“賢威にAddQuicktagを追加して、より便利活用する!” への6件のフィードバック

  1. dragonhorse より:

    こんにちは。

    dragonhorseです。
    ブログランキング応援クリックさせていただきました。

    そして、装飾タグについての記事どうもありがとうございました。
    今後の参考になりました。
    また、訪問させていただきます。

    • buku2 より:

      dragonhorse 様

      こんにちは、buku2です。

      ブログランキングの応援、ありがとうございます。
      それで、装飾タグの件ですね。

      これは、最初に何点かタグを登録するだけなので、
      便利で時短になるので、いいですよ。

      それでは、また、宜しくお願いいたします。

  2. 山ピコ より:

    こんにちは!!

    権威は、プラグインを追加することができるんですね!
    それで、より独自デザインにできるのはいいですね。

    プラグインの方法までの説明、とてもわかりやすかったです(*´꒳`*)

    • buku2 より:

      山ピコ 様

      コメントありがとうございます、buku2です。

      賢威はWordPressのテンプレートなので、
      いろんな、プラグインを実装することが出来ます。

      そして、「わかりやすかった」というお褒めの言葉、そう言っていただければ、
      元気が出てきました。

      ありがとうございます。
      また、宜しくお願いいたします。

  3. ないこ より:

    buku2さん、こんにちわ!やはり賢威がいちばんおすすめなのですね!囲みの説明が丁寧にしてあり、とてもよくわかりました。いつも良い情報をありがとうございます!

    • buku2 より:

      ないこ 様

      コメントありがとうございます、buku2です。

      賢威ですね・・
      現時点では、いちばん良いと思います。

      特に、賢威を購入すると、フォーラム(SNS)に参加出来る点が、
      いいですね。

      フォーラムは、分からないことを質問したり、Q&Aを見てSEOのことや、
      WordPressのことなど、勉強出来ます。

      また、フォーラムは、初心者フォーラムや、WordPressフォーラム、SEOフォーラムなど、
      ジャンル別に分かれているので、Q&Aを見るだけで多くのことが理解出来ます。

      賢威をお持ちでないのであれば、おすすめですね。

      それでは、また、お立ち寄りくださいね。

      宜しくお願いいたします。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です