お知らせ:7/7 情報更新!

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

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

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

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

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

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

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

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

書き方の例|枠が付くver

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

  
ここに説明文が入ります。
  
タイトル
ここに説明文が入ります。
  
タイトル
ここに説明文が入ります。

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

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

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

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

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

MEMO
ここに説明文が入ります。
注意
ここに説明文が入ります。

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

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

ボタンを設置したい

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

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

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

1の書き方の例

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

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

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

2の書き方の例

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

その他のボタンデザイン

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

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

センター表示させたいもの(ボタンやテキストなど)を、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」からサイトを作るって、本当に難しい

書き方の例

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

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

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

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

書き方の例

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

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

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

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

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

書き方の例

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

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

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

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

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

書き方の例

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

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

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

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

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

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

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

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA