ADD QUICK TAGの早見表です。
記事作成にお役立てください。

賢威リンクカード

賢威リンクカードを使うと、表示の高速化になります。
QuickTagsのプルダウンから『賢威リンクカード』を選びます。

「賢威リンクカード」プルダウンをクリックすると転写されるTAG 

[keni-linkcard url=”★”]

 ★の部分にカードを表示したいURLを入れてください。
(※このままコピーしないでください[]が全角のため、ショートコードになりません。)

表示例

賢威のリンクカードの見え方は、スマホではこのような感じになります。
(PCでは横長になります。)

カスタム方法

賢威リンクカードのショートコードは以下の組み立てになっています。
必要に応じて、カードの中身を書き換えることが出来ます。

『★』の部分には必要な情報を入れてください。

[keni-linkcard url=”★1” src=”★2” title=”★3” description=”★4” target=”_blank”]

★2 src=”サムネイル画像のパス”
★3 title=”リンク先ページのタイトル”
★4 description=”ディスクリプション部分を変更”
target=”_blank”

※現在、target=”_blank”は脆弱性の為使わないほうが良い、とされています。
※このままコピーしないでください[]が全角のため、ショートコードになりません。

ふきだし

プルダウンから選ぶだけで写真と吹き出しがセットされます。吹き出しの中身だけ書き込めばOK。
吹き出しのフォントサイズはデフォルトが14pxです。

吹き出し(笹田丸・左・白)

ササダ
写真が左に配置、吹き出しは白抜きです

吹き出し(笹田丸・左・青)

ササダ
吹き出し部分が青緑になります

吹き出し(笹田丸・左・グレー)

ササダ
吹き出し部分がグレーになります

吹き出し(ササパンダ丸・左・白)

ササパンダ
ささささささ

吹き出し(ササパンダ丸・左・青)

ササパンダ
ささささささ

吹き出し(ササパンダ丸・左・グレー)

ササパンダ
ささささささ

吹き出し(炎のパンダ丸・左・白)

ササパンダ
ささささささ

吹き出し(炎のパンダ丸・左・青)

ササパンダ
ささささささ

吹き出し(炎のパンダ丸・左・グレー)

ササパンダ
ささささささ

右左の変え方

 

ササパンダ
キャラクターを右側に配置したい場合の方法です。
デフォルトは左にセットしています。
①エディタをテキストに変えます。

②該当吹き出しの『chat_l』→『chat_r』に変えます。

吹き出しで書き込まれるのは

<div class=”chat_l chat_style03″>
<div class=”talker”><b><img class=”circle” alt=”ササパンダ” src=”https://hiroshi-sasada.com/wp-content/uploads/2017/05/panda_boss-e1495967413235.jpg” />
(ここに名前を書くとキャラの下に名前が表示されます)</b></div>
<div class=”bubble_wrap”>
<div class=”bubble”>
<div class=”bubble_in”>(ここに台詞を書きます)</div>
</div>
</div>
</div>

右に配置(1行目のLをRに変える)

<div class=”chat_r chat_style03″>
<div class=”talker”><b><img class=”circle” alt=”ササパンダ” src=”https://hiroshi-sasada.com/wp-content/uploads/2017/05/panda_boss-e1495967413235.jpg” />
</b></div>
<div class=”bubble_wrap”>
<div class=”bubble”>
<div class=”bubble_in”>ささささささ</div>
</div>
</div>
</div>

引用エリア

このように表示されますので必要な部分を書き換えてください。(過去記事の修正を随時行っています)

ここに引用文が入ります。ここに引用文が入ります。ここに引用文が入ります。ここに引用文が入ります。ここに引用文が入ります。
ここに引用文が入ります。ここに引用文が入ります。ここに引用文が入ります。ここに引用文が入ります。ここに引用文が入ります。
ここに引用文が入ります。ここに引用文が入ります。ここに引用文が入ります。ここに引用文が入ります。ここに引用文が入ります。
ここに引用文が入ります。ここに引用文が入ります。

ステップ図

簡単なステップ図が使えます。

ステップ図(縦)

  1. ステップ1のテキストが入ります。
  2. ステップ2のテキストが入ります。
  3. ステップ3のテキストが入ります。
  4. ステップ4のテキストが入ります。

ステップ図(横)※スマホは縦表示に切り替わります

  1. ステップ1が入ります
  2. ステップ2が入ります
  3. ステップ3が入ります
  4. ステップ4が入ります

ステップを増やす・減らす

エディタをテキストに切り替え、『<li class=”step”>ステップ4のテキストが入ります。</li>』この部分をコピーして直下に貼り付けるとステップが増えます。

減らすときは1行消します。

ADD QUICK TAGに入れていませんが、便利なコード

枠線(ラベルなし)

タイトル付きのボックスはエディタ内にあるので、タイトルのない枠線をここにおいておきます。
枠線の種類はたくさんありますが、全てをADD QUICK TAGに入れると煩わしいからです。
(シンプルな黒枠のみ入れてあります。)

使い方
使いたいコードをコピーして、テキストエディタに貼り付けて使います。

◇枠とバックに装飾があるタイプ

テキストが入ります。

<div class=”box_style box_style01″>
<div class=”box_inner”>
<p>テキストが入ります。</p>
</div>
</div>

 

テキストが入ります。

<div class=”box_style box_style02″>
<div class=”box_inner”>
<p>テキストが入ります。</p>
</div>
</div>

テキストが入ります。

<div class=”box_style box_style03″>
<p>テキストが入ります。</p>
</div>

テキストが入ります。

<div class=”box_style box_style04″>
<p>テキストが入ります。</p>
</div>

テキストが入ります。

<div class=”box_style box_style05″>
<p>テキストが入ります。</p>
</div>

テキストが入ります。

<div class=”box_style box_style06″>
<p>テキストが入ります。</p>
</div>
◇シンプルな枠(それぞれ枠内にコードが有ります)

下から2番めの黒枠のボックスのみADD QUICK TAGに入っています。(シンプル黒枠)

<div class=”p10 bdr”>テキストが入ります。</div>
<div class=”p10 bdr_red”>テキストが入ります。</div>
<div class=”p10 bdr_blue”>テキストが入ります。</div>
<div class=”p10 bdr_green”>テキストが入ります。</div>
<div class=”p10 bdr_yellow”>テキストが入ります。</div>
<div class=”p10 bdr_navy”>テキストが入ります。</div>
<div class=”p10 bdr_orange”>テキストが入ります。</div>
<div class=”p10 bdr_pink”>テキストが入ります。</div>
<div class=”p10 bdr_lime”>テキストが入ります。</div>
<div class=”p10 bdr_aqua”>テキストが入ります。</div>
<div class=”p10 bdr_black”>テキストが入ります。</div>
<div class=”p10 bdr_gray”>テキストが入ります。</div>
以上です。使いやすそうなものがあればまた追加します。