Ver1.3.1をリリースしました(11/22)

ボックス・枠を挿入する方法と種類一覧

SANGOのボックス種類一覧

SANGOには30種類以上のボックスがあらかじめ用意されています。どれもショートコードを使って挿入ができるため、HTMLとCSSの知識は必要ありません。ここでは記事内にボックスを挿入する方法をまとめておきます。

NEWver1.3のアップデートによりビジュアルエディタの[スタイル]から一部のボックスを挿入できるようになりました。詳しい使い方はこの記事の後半で解説しています。

メモ(補足説明の使い方)

MEMO
このように補足メモを記事内に簡単に挿入することができます。

↑このボックスを挿入したい場合、投稿画面のエディタ内の好きな位置に、以下のショートコードを記載します。title="MEMO"の部分は好きな文字に変えることができます(例:title="補足")。

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

注意書きの使い方

注意
このように注意書きをすることもできます。

注意書きのボックスを挿入したい位置には以下のショートコードを記載します。title="注意"の部分は好きな文字列に変えることができます。

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

その他のボックスの使い方

上の2つ以外にも30個以上のボックスが用意されています。一覧で紹介していくので、気に入ったものがあればどんどん使ってみてください。なお、紹介するボックスのショートコードは次のような形になります。

[box class="ボックス名"]ここに文章[/box]

box1

SANGOなら…
あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。

[box class="box1"]ここに文章[/box]

box2

SANGOなら…
あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。

[box class="box2"]ここに文章[/box]

box3

SANGOなら…
あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。

[box class="box3"]ここに文章[/box]

box4

SANGOなら…
あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。

[box class="box4"]ここに文章[/box]

box5

SANGOなら…
あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。

[box class="box5"]ここに文章[/box]

box6

SANGOなら…
あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。

[box class="box6"]ここに文章[/box]

box7

SANGOなら…
あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。

[box class="box7"]ここに文章[/box]

box8

SANGOなら…
あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。

[box class="box8"]ここに文章[/box]

box9

SANGOなら…
あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。

[box class="box9"]ここに文章[/box]

box10

SANGOなら…
あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。

[box class="box10"]ここに文章[/box]

box11

SANGOなら…
あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。

[box class="box11"]ここに文章[/box]

box12

SANGOなら…
あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。

[box class="box12"]ここに文章[/box]

box13

SANGOなら…
あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。

[box class="box13"]ここに文章[/box]

box14

SANGOなら…
あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。

[box class="box14"]ここに文章[/box]

box15

SANGOなら…
あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。

[box class="box15"]ここに文章[/box]

box16

SANGOなら…
あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。

[box class="box16"]ここに文章[/box]

box17

SANGOなら…
あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。

[box class="box17"]ここに文章[/box]

box18

SANGOなら…
あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。

[box class="box18"]ここに文章[/box]

box19

SANGOなら…
あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。

[box class="box19"]ここに文章[/box]

box20

SANGOなら…
あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。

[box class="box20"]ここに文章[/box]

box21

SANGOなら…
あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。

[box class="box21"]ここに文章[/box]

box22

SANGOなら…
あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。

[box class="box22"]ここに文章[/box]

box23

SANGOなら…
あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。

[box class="box23"]ここに文章[/box]

box24

SANGOなら…
あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。

[box class="box24"]ここに文章[/box]

box25

SANGOなら…
あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。

[box class="box25"]ここに文章[/box]

box26

ここにタイトル

SANGOなら…
あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。

[box class="box26" title="タイトル"]文章[/box]

box27

ここにタイトル

SANGOなら…
あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。

[box class="box27" title="タイトル"]文章[/box]

box28

ここにタイトル

SANGOなら…
あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。

[box class="box28" title="タイトル"]文章[/box]

box29

ここにタイトル

SANGOなら…
あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。

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

box30

ここにタイトル

SANGOなら…
あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。

[box class="box30" title="タイトル"]文章[/box]

box31

ここにタイトル
SANGOなら…
あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。
[box class="box31" title="タイトル"]文章[/box]

box32

ここにタイトル
SANGOなら…
あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。
[box class="box32" title="タイトル"]文章[/box]

box33

ここにタイトル
SANGOなら…
あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。
[box class="box33" title="タイトル"]文章[/box]

箇条書きと組み合わせるとこんな表現も

ボックスと合わせて箇条書きを使用することで、以下のような表現をすることもできます。

SANGOへようこそ!
  1. SANGOとは…
  2. 大胆で使いやすいWordPressテーマです。
  3. さぁ、早速始めましょう

これはボックスのショートコードの中に、円形の番号付きの箇条書きを入れることで実現しています。

[box class="box32" title="SANGOへようこそ!"]
[list class="ol-circle li-accentbdr acc-bc-before"]
   <ol>
     <li>SANGOとは…</li>
     <li>大胆で使いやすいWordPressテーマです。</li>
     <li>さぁ、早速始めましょう</li>
   </ol>
 [/list]
[/box]

このようにSANGOを使いこなせば、様々な表現をすることができます。とはいえ、いきなり複雑なショートコードを書くのも大変かと思います。使い方に慣れてきてから色々と手を出すのが良いでしょう。なお、箇条書きのショートコードはこちらの記事で紹介しています。

SANGOの箇条書き種類一覧
記事に様々なスタイルの箇条書きを挿入する

NEWビジュアルエディタのドロップダウンからボックスを挿入する方法

ver1.3のアップデートより、一部のボックスを[スタイル]のドロップダウンから挿入することもできるようになりました。

使い方は簡単。ボックスを挿入したい位置で[スタイル]⇒[ボックス]を開き、使いたいボックス種類を選ぶだけ(先頭の番号は、さきほどのbox◯の数字と対応しています)。

ボックスをスタイルから挿入

ボックスを挿入すると、ビジュアルエディタ上で再現されます。この中にテキストや箇条書きを入れることができます。

注意1
「補足説明(memo)」「注意書き(alert)」「box26〜box32」のタイトル付きのボックスはスタイルから挿入することはできません。ショートコードを使って頂くようお願いします。
注意2
箇条書きはボックス挿入後に作成するようにしましょう(作成済みの箇条書きを後からボックスで囲むことはできません)。

コメントを残す

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