About the quick tag of the [ha-Basic] theme that makes editing convenient with a text editor

テキストエディタで編集が便利になる【ha-Basic】テーマのクイックタグについて

公開日:2019年5月12日 設定や詳細
Knowledge Base Wordpress ha-Basic テーマ

【ha-Basic】ではいろいろな表現をテキストエディタに限りボタン1つで挿入できるようにしています(これをクイックタグと言います)。

クイックタグとは投稿編集画面の本文上にある、下のようなボタンのことです。
テキストエディタで編集が便利になる【ha-Basic】テーマのクイックタグについて

いろいろなテーマに備わっている効果を参考にしてボタンで簡単に装飾コンテンツを作成できるようにしていますので、ぜひ使ってください。各ボタンでどんな表現ができるのかはページ下部の「クイックタグでの表現サンプル集」をご覧ください。

せっかくだからといっぱいボタンを追加したら、何のコンテンツ装飾用ボタンがどこにあるのかわからない!!本当に見づらい!!ことになってしまいました。

そこで以下のように分類ごとに色分けして使いやすくしてあります。

色分け前はこんな感じです
テキストエディタで編集が便利になる【ha-Basic】テーマのクイックタグについて
これを色などで分けてちょっと見やすくしました。

色分け後がこちら
テキストエディタで編集が便利になる【ha-Basic】テーマのクイックタグについて

これだけのことでずいぶん分かりやすくなったと自画自賛しております(笑)。

この設定をする為参考にさせていただいたページ:

クイックタグでの表現サンプル集

テキストエディタに限り、このように色分けされたクイックタグを使って簡単にいろいろな表現ができるようにしています。
テキストエディタで編集が便利になる【ha-Basic】テーマのクイックタグについて
表示サンプルは以下の通りです。

見出し

「h2見出し」ボタンを使うと↑の「クイックタグでの表現サンプル集」のように表示されます(色は異なります)

「h3見出し」ボタンを使うと下のように表示されます

h3見出し

キーボード表示(カーソル表示)

キーボードのような囲みと影のある文字装飾ができます
※1つ1つの文字をキーボード調にするには文字ごとに囲みます

「キーボード 明」ボタンを使うと下のように表示されます
キーボード 明

「キーボード 暗」ボタンを使うと下のように表示されます
キーボード 暗

囲みリスト

枠線と背景色のあるリストが表示できます

「囲みリスト 緑」ボタンを使うと下のように表示されます

  • リスト1
  • リスト2

「囲みリスト 灰」ボタンを使うと下のように表示されます

  • リスト1
  • リスト2

「囲みリスト 青」ボタンを使うと下のように表示されます

  • リスト1
  • リスト2

「囲みリスト 赤」ボタンを使うと下のように表示されます

  • リスト1
  • リスト2

「囲みリスト 黄」ボタンを使うと下のように表示されます

  • リスト1
  • リスト2

色のついた背景

文章や範囲に枠線と背景色をつけます

「背景 緑」ボタンを使うと下のように表示されます

文章やコンテンツ

「背景 赤」ボタンを使うと下のように表示されます

文章やコンテンツ

「背景 青」ボタンを使うと下のように表示されます

文章やコンテンツ

「背景 黄」ボタンを使うと下のように表示されます

文章やコンテンツ

蛍光ペン

文章に色のついたアンダーラインを引きます

「蛍光ペン赤色」ボタンを使うと下のように表示されます
アンダーラインのある文章

「蛍光ペン青色」ボタンを使うと下のように表示されます
アンダーラインのある文章

「蛍光ペン黄色」ボタンを使うと下のように表示されます
アンダーラインのある文章

リンクボタン(コンバージョンボタン)

リンクボタンが表示できます

リンクボタンA

時々全体が震え、キラッと光るようなエフェクトのあるボタンです

「ボタンA 緑」ボタンを使うと下のように表示されます

「ボタンA 青」ボタンを使うと下のように表示されます

「ボタンA 赤」ボタンを使うと下のように表示されます

「ボタンA 黒」ボタンを使うと下のように表示されます

リンクボタンB

時々矢印部分だけが震え、キラッと光るようなエフェクトのあるボタンです

「ボタンB 緑」ボタンを使うと下のように表示されます

「ボタンB 青」ボタンを使うと下のように表示されます

「ボタンB 赤」ボタンを使うと下のように表示されます

「ボタンB 黒」ボタンを使うと下のように表示されます

リンクボタンC

不規則な動きのあるボタンです

「ボタンC 緑」ボタンを使うと下のように表示されます

「ボタンC 青」ボタンを使うと下のように表示されます

「ボタンC 赤」ボタンを使うと下のように表示されます

「ボタンC 黒」ボタンを使うと下のように表示されます

Youtube動画を本文幅いっぱいに表示

通常Youtubeの埋め込みコードを挿入すると

のように少し小さい感じで表示されます。これを拡大して本文の横幅一杯に表示するための機能を備えています。

実際のイメージはこちらです

しかも遅延して読み込みますのでページ表示の高速化も図れます。

【ha-Basic】ショートコードで簡単に新着記事の一覧が表示できる機能について

【ha-Basic】投稿記事下に自動表示される関連記事について

【ha-Basic】SEO対策関連済みテーマからの切り替えやSEO対策プラグインを使用する場合の確認事項


おまけ この機能を別のテーマへ移植して使いたいときは

クイックタグは大変便利ですが、テーマの変更によって表示できない、表示が変わるものがあります。これはこのテーマだからということではなくすべてのテーマに言えることですので、テーマ変更後も今の表示方法を維持する場合には

  1. クイックタグボタンの移植
  2. 各ボタンで適用されるCSS(デザイン要素)の移植

が必要となります。

ひまあーと(管理人)
  • 記事の作者: ひまあーと(管理人)

  • ☆最後までお読みいただきありがとうございました。記事作者のひまあーとです。
    ☆Wordpressでサイトをカスタマイズしていく上で有用な情報を配信しつつ、「ココナラ」でサイトカスタマイズのお手伝い、不具合の修復、サイト引っ越し代行などをさせていただいております。
    ☆Wordpressネタが多いですが、趣味の「園芸」「卓球」などの情報や日々の出来事などもどんどん増やしていきますのでよろしくお願いいたします。


いつでもご相談・サイトカスタマイズの依頼を受け付けています

Wordpressのカスタマイズ、不具合解消のご相談はすべてココナラのダイレクトメッセージからお受けしております。まずはこちらのバナーからお気軽にお問い合わせください。

※一度もココナラを使ったことがない方はココナラへの無料登録が必要です。こちらから登録後、上のリンクをクリックする、またはココナラトップページから「ひまあーと」を検索してお問い合わせください。


【スポンサーリンク】


記事の拡散にご協力をお願いします

閲覧いただきありがとうございました。役に立つ情報でしたら是非SNSでシェアをお願いします

関連情報