【WordPress編集のルール・サンプル・コード一覧】

「テキストの装飾」の活用法

大切な用語や要点
→■あか文字(大切な用語や要点)

大切なポイント(要素・要因・意見など)
→■くろ太字(大切なポイント)

重要なポイント(要素・要因・意見など)
→■黄マーカー(重要なポイント)

ポジティブなポイント(要素・要因・意見など)
→■赤マーカー(ポジティブなポイント)

ネガティブなポイント(要素・要因・意見など)
→■あお文字(ネガティブなポイント)

「MEMO」の活用法

MEMO
ここに文章
  • 用語の解説補足などがあるときに使う


MEMOのコード
 

[memo title="MEMO"]ここに文章[/memo]




「注意」の活用法

注意
ここに文章
  • 注意事項注意するべきことがあるときに使う


注意のコード
 

[alert title="注意"]ここに文章[/alert]




「ここにタイトル①」の活用法

ここにタイトル①
文章
  • チェックポイント
  • この項目でのまとめとして(項目での後尾で)
    ”ここにタイトル”部分は内容にマッチしたタイトルを入れてください。


ここにタイトル①のコード
 

[box class="box29" title="ここにタイトル"]文章[/box]




「ここにタイトル②」の活用法

ここにタイトル②

  1. ああああああ
  2. いいいいいい
  3. うううううう
  4. ええええええ
  5. おおおおおお
  • この項目でのポイントとして(項目での冒頭で)
    ”ここにタイトル”部分は内容にマッチしたタイトルを入れてください。


ここにタイトル②のコード
 

[box class="box32" title="ここにタイトル②"]
 

[list class="ol-circle li-accentbdr acc-bc-before"]
<ol>
<li>ああああああ</li>
<li>いいいいいい</li>
<li>うううううう</li>
<li>ええええええ</li>
<li>おおおおおお</li>
</ol>
[/list][/box]




「フロー・手順」の活用法


  • STEP.1
    タイトル1
    中身1

  • STEP.2
    タイトル2
    中身2

  • STEP.3
    タイトル3
    中身3

  • STEP.4
    タイトル4
    中身4

  • STEP.5
    タイトル5
    中身5

  • ステップやフロー手順の説明があるときに使う
    ”フロー・手順”部分は内容にマッチしたタイトルを入れてください。


フロー・手順のコード
 

[timeline]
[tl label='STEP.1' title='タイトル1'] 中身1 [/tl]
[tl label='STEP.2' title='タイトル2'] 中身2 [/tl]
[tl label='STEP.3' title='タイトル3'] 中身3 [/tl]
[tl label='STEP.4' title='タイトル4'] 中身4 [/tl]
[tl label='STEP.5' title='タイトル5'] 中身5 [/tl]
[/timeline]




「○○アプリの評価」の活用法

○○アプリの評価

会員数
(3.5)

運用会社の信頼度
(4.0)

年齢層の偏り
(5.0)

口コミ・評判
(2.0)

費用面
(1.5)

総合評価
(4.5)

総評に対するコメント

ここに文章


 
  • 本アプリに対する評価を必ずお願いします
    ”○○アプリ”部分はアプリ名を入れてください。


○○アプリの評価のコード
 

[rate title="○○アプリの評価"]
[value 3.5]会員数[/value]
[value 4]運用会社の信頼度[/value]
[value 5]年齢層の偏り[/value]
[value 2]口コミ・評判[/value]
[value 1.5]費用面[/value]
[value 4.5 end]総合評価[/value]
総評に対するまとめ

ここに文章

[/rate]




「吹き出し」の活用法

太郎

ここに文章

ここに文章

花子

  • 会話風に見せる
  • アドバイス
  • ○○の声
  • ユーザーの悩みや疑問
など



吹き出しのコード
 

[say name="太郎" img="画像のURL"]ここに文章[/say]
 

[say name="花子" img="画像のURL" from="right"]ここに文章[/say]




「画像の上に文字」の活用法

「画像上にのせる文字」

  • その項目のタイトル
  • その項目の内容を表す名詞・名目・キャッチ―
など



画像の上に文字のコード
 

[texton img="画像のURL" title="画像上にのせる文字"]




「Q&A」の活用法

??????

ああああああ


  • Q&A形式があるときに使う


Q&Aのコード
 

<p class=”hh hhq”style=”color: #3366ff;”>質問</p>
<p class=”hh hha”>回答</p>





「特徴まとめ(最後)」の活用法

アプリ名の特徴まとめ

魅力(メリット・強み)
  • ○○○○
  • ○○○○
  • ○○○○
  • ○○○○
マイナス要因(デメリット)
  • ○○○○
  • ○○○○
  • ○○○○
  • まとめの最後に、総合的に見た特徴をわかりやすくまとめて紹介するときに使う


Q&Aのコード
 

[box class="box30" title="アプリ名の特徴まとめ"]
<strong><span class=”red”>魅力(メリット・強み)</span></strong>
<ul>
<li>○○○○</li>
<li>○○○○</li>
<li>○○○○</li>
<li>○○○○</li>
</ul>
<strong><span style=”color: #3366ff;”>マイナス要因(デメリット)</span></strong>
<ul>
<li>○○○○</li>
<li>○○○○</li>
<li>○○○○</li>
</ul>

[/box]

ここまでです。

 

薄い水色背景+上下線


グレイ囲み


薄い水色背景


二重囲み


薄い水色背景+点線囲み


オレンジ色背景+横線


赤の背景+上線+赤文字


ミントカラー+上線


影+ネイビー上線


水色背景+立体