記事作成時に使える便利なクイックタグを追加しました。

最新バージョンへのアップデート方法は、以下の記事をご覧ください。

[2017.04.13]追加機能の紹介

2017-04-13-update-01

便利なクイックタグを追加

プラグイン無しで使えるクイックタグが追加されました。

【タグを閉じる】から後ろがHealerで追加された独自タグです。

記事作成画面の上に表示されるボタンをクリックすることで、すでにデザインされた見出しやボックス、表などを使用することができます。

タグ名を見ていただければ使い方はおおよそ理解できると思いますので、ここではクイックタグで表現できるデザインを紹介します。

黄マーカー

文章の一部が黄色になります。

赤マーカー

文章の一部が赤色になります。

センター寄せ

文章がセンターに寄ります

料金表

施術内容 値段
基本施術 50分 3,000円
全身施術 80分 5,000円

この場合はこのように記述しています。

<table class="price">
<tbody>
<tr class="title">
<th>施術内容</th>
<td>値段</td>
</tr>
<tr>
<th>基本施術 50分</th>
<td>3,000円</td>
</tr>
<tr>
<th>全身施術 80分</th>
<td>5,000円</td>
</tr>
</tbody>
</table>

黄色ボックス

黄色のボックスで囲みます

薄赤ボックス

薄赤のボックスで囲みます

グレーボックス

グレーのボックスで囲みます

外部リンク

liの中にリンクタグを入れてください。

<ul class="links-external"><li><a href="#">外部のリンクを紹介するデザインです</a></li></ul>

内部リンク

こちらは自店サイトのほかのページを紹介するときに使います。

<ul class="links-self"><li><a href="#">内部のリンクを紹介するデザインです</a></li></ul>

右下に自店名を表示するには、子テーマのCSSに以下のように指定してください。

.links-self:after {
    content: "自店名";
}

順序のあるリスト

  • 1番目にやること
  • 2番目にやること
  • 3番目にやること
<div class="orderedlist list2">
<ul>
<li class="list2-count">1番目にやること</li>
<li class="list2-count">2番目にやること</li>
<li class="list2-count">3番目にやること</li>
</ul>
</div>

順序のないリスト

  • 腕のストレッチ方法
  • 足のストレッチ方法
  • 首のストレッチ方法
<div class="unorderedlist list1">
<ul>
<li>腕のストレッチ方法</li>
<li>足のストレッチ方法</li>
<li>首のストレッチ方法</li>
</ul>
</div>

補足事項

ポイントや覚えておいてほしいこと

質問

QandAコーナーなどに

下で紹介している会話風ふきだしと一緒に使うと面白いかもしれません。

注意書き

注意してほしいこと

日付用定義リスト

2017年4月13日
ストレッチ講習会
<dl class="date">
<dt><span>2017年4月13日</span></dt>
<dd><div>ストレッチ講習会</div></dd>
</dl>

テーブル風定義リスト

腹筋
1セット20回×2
背筋
1セット20回×2
<dl class="tablelike">
<dt><span>腹筋</span></dt>
<dd><div>1セット20回×2</div></dd>
<dt><span>背筋</span></dt>
<dd><div>1セット20回×2</div></dd>
</dl>

よくある質問用リスト

QandAのコーナーなどでお使いください。

質問1
答え1
質問2
答え2
質問3
答え3
<dl class="faq">
	<dt>質問1</dt>
	<dd>答え1</dd>
	<dt>質問2</dt>
	<dd>答え2</dd>
	<dt>質問3</dt>
	<dd>答え3</dd>
</dl>

YouTube

YouTube動画を貼り付ける際には[YouTube]タグで囲うようにしてください。囲わないとスマホ閲覧時に横にはみ出してしまいます。

<div class="youtube scrollFade"><iframe width="640" height="360" src="https://www.youtube.com/embed/oaaj4nsixJY" frameborder="0" allowfullscreen></iframe></div>

会話吹き出し

会話吹き出しを使うには、まず「Healer管理」から画像と名前の設定をおこなってください。

2017-04-13-update-02

ショートコードで文章を挟むことで、番号に応じた画像と名前で吹き出しが表現されます。

2017-04-13-update-03

ヤマカワ
会話吹き出しがワンクリックで表現できます

サトウ
お客さんとの会話を表現するときなどに便利です

スズキ
会話吹き出しは3つまで設定できます

テキストばかりの記事より、かわいい吹き出しを入れることで読みやすく親しみやすい記事も作りやすくなります。

是非有効活用してみてください。

以上、Ver.2.17.04.13のアップデート内容となります。

最新バージョンへのアップデート方法は、以下の記事をご覧ください。

  • 解説を読んでも理解できないという方は追加料金でサイト構築代行をいたします。お問い合わせページよりご連絡ください。

    目安の料金は以下の通りです。

    内容 料金
    サイト構築 50,000円~

    料金はご相談に応じます。

  • [Ver.2.17.04.13]記事作成に便利なクイックタグの追加
    この記事はいかがでしたでしょうか。
    是非Healerの最新ニュース情報を、
    いいねしてチェックしてください!