定期的に更新中!

SANGO|記事投稿でよく使う装飾・タグリスト

SANGO|記事投稿でよく使う装飾リスト

記事を作るときによく使っている装飾を、毎回調べるのは面倒なので…
ここに残していきたい(リスト化していきたい)と思います。

リスト化する内容は、テキストボックスに枠を付けたり・ボタンやマーカーを付けたりなど、記事を作る上で主要な要素ばかりにする予定です。

テキストボックスに枠を付けたい

注意事項やポイントなどを書きたいときに使える装飾です。
良く使用しているものは、以下になります。

うまく反映できたときの見え方|枠が付くver

box2の場合。
タイトル
box26の場合。ここに説明文が入ります。
タイトル
box27の場合。ここに説明文が入ります。

書き方の例|枠が付くver

枠が付くverの場合は、以下です。

[box class="box2"]ここに説明文が入ります。[/box]
[box class="box26" title="タイトル"]ここに説明文が入ります。[/box]
[box class="box27" title="タイトル"]ここに説明文が入ります。[/box]

テキストボックスに背景色を付けたい

うまく反映できたときの見え方|背景色が付くver

MEMO
ショートタグがmemoの場合。
注意
ショートタグがalertの場合。

書き方の例|背景色が付くver

背景色が付くverの場合は、以下です。

[memo title="MEMO"]ここに説明文が入ります。[/memo]
[alert title="注意"]ここに説明文が入ります。[/alert]

以上、私が良く使っている装飾になりますが、もっと色んな装飾があるので、デザインを確認されたい方は下記からどうぞ。

参考 ボックス・枠を挿入する方法と種類一覧SANGOカスタマイズガイド

ボタンを設置したい

ボタンを設置したいときに使えます。

うまく反映できたときの見え方1

→ 「0」からサイトを作るって、本当に難しい

1の書き方の例

<a class="btn raised main-bc strong" href="リンク先のURL"> → 「0」からサイトを作るって、本当に難しい </a>

うまく反映できたときの見え方2

→ ボタンデザイン – ver2 です

2の書き方の例

[btn href="リンク先のURL" class="grad3"]→ ボタンデザイン - ver2 です[/btn]

その他のボタンデザイン

参考 ボタンの挿入方法と種類一覧SANGOカスタマイズガイド

対象物をセンター表示にしたいとき

センター表示させたいもの(ボタンやテキストなど)を、centerタグで挟むと、対象物のセンター表示が可能です。

うまく反映できたときの見え方

こんな感じで、センターにすることができるよ~!

書き方の例

[center] センターにしたいもの [/center]

ページ内リンクを設置したいとき

ページ内の別の場所へとばしたい時に使用するタグです。

書き方の例

下記の「koko」の部分には、あなたの好きな半角英数でOKです。
今回はタイトルに飛ばしたいので<h2>にidを付けていますが、<p>タグや<span>タグでもOKです。

<h2 id="koko">とばしたい場所のタイトルや見出し部分にidを付けます。</h2>
<a href="#koko">テキストリンクやボタンになる場所。ここをクリックすると、とばしたい場所へ移動させることができます。</a>

マーカー風のアンダーラインを引きたいとき

重要なテキストを、強調させたり・目立たせたいときに使えるタグです。

うまく反映できたときの見え方

こんな感じで、大事なテキストの下部にだけ、ラインを引くことができるよ~

手順

まずは、テキストを入力。
その後に、「HTMLとして編集」をクリックし、下記のclassタグを入力。

<span class="〇〇〇〇〇">センターにしたいもの</span>

〇〇〇〇〇 の部分に、下記のいずれかのカラーを入力すると、選んだ色のマーカー風アンダーラインを引くことができます。

  • 赤:keiko_red
  • 黄:keiko_yellow
  • 青:keiko_blue
  • 緑:keiko_green

書き方の例

<span class="keiko_yellow">センターにしたいもの </span>

横長のカードタイプを使って関連記事を表示させたいとき

関連記事を表示させたい時に使えるパーツです。
画像を登録していると、とても素敵に仕上がります。

うまく反映できたときの見え方

「0」からサイトを作るって本当に難しい 「0」からサイトを作るって、本当に難しい

書き方の例

[card2 id="投稿ID"]

他のサイト&URLを紹介したいときに使うパーツ

他のサイトへのリンクを設置するときによく使うパーツです。
カワイイので愛用しています。さすがSANGOさんですね。

うまく反映できたときの見え方

参考 記事タイトルサイト名

書き方の例

[sanko href="リンクURL" title="記事タイトル" site="サイト名" target="_blank"]

アコーディオンを設置したいとき

FAQや辞書を作ろうと思った時などに使いました。

うまく反映できたときの見え方

 A:ここに答えを入力します。

書き方の例

[open title='Q:ここに質問を入力します。']A:ここに答えを入力します。[/open]

手順や流れ・STEPなどを設置したいとき

手順や流れ・STEPを設置したい時に使いました。
※タイムラインや沿革などでも使えそうです。

うまく反映できたときの見え方

STEP.1
タイトル1
説明文1が入ります。
STEP.2
タイトル2
説明文2が入ります。
STEP.3
タイトル3
が入ります。

書き方の例

[timeline][tl label='STEP.1' title='タイトル1']説明文1が入ります。[/tl][tl label='STEP.2' title='タイトル2']説明文2が入ります。[/tl][tl label='STEP.3' title='タイトル3']が入ります。[/tl][/timeline]

とりあえずショートコードをまとめて知りたいとき

よく使うショートコードは上記へまとめましたが、その他にも使う頻度が高い「SANGOのショートコード」には、以下などがあります。知りたい方は以下よりアクセスしてご確認ください。

  • カードタイプの関連記事を出力
  • 他サイトへのリンクを出力
  • 横並び2列、3列
  • YouTube埋め込みをレスポンシブにする
参考 SANGOのショートコード一覧SANGOカスタマイズガイド

サイトのデザインやレイアウトを変えたい場合

記事に使えるノウハウではなく、サイトの大枠(デザインやレイアウトなど)を変えたい場合のノウハウは、以下へまとめています。興味のある方は、こちらも併せて確認してみると良いかもです。

SANGO|サイトを作る時に変更したい箇所 SANGO|サイトを作るときに最低限変更したい箇所

コメントを残す

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

CAPTCHA