記事を作るときによく使っている装飾を、毎回調べるのは面倒なので…
ここに残していきたい（リスト化していきたい）と思います。
リスト化する内容は、テキストボックスに枠を付けたり・ボタンやマーカーを付けたりなど、記事を作る上で主要な要素ばかりにする予定です。
テキストボックスに枠を付けたい
注意事項やポイントなどを書きたいときに使える装飾です。
良く使用しているものは、以下になります。
うまく反映できたときの見え方｜枠が付くver
書き方の例｜枠が付くver
枠が付くverの場合は、以下です。
ここに説明文が入ります。 タイトルここに説明文が入ります。 タイトルここに説明文が入ります。テキストボックスに背景色を付けたい
うまく反映できたときの見え方｜背景色が付くver
書き方の例｜背景色が付くver
背景色が付くverの場合は、以下です。
MEMOここに説明文が入ります。 注意ここに説明文が入ります。以上、私が良く使っている装飾になりますが、もっと色んな装飾があるので、デザインを確認されたい方は下記からどうぞ。
参考 ボックス・枠を挿入する方法と種類一覧SANGOカスタマイズガイドボタンを設置したい
ボタンを設置したいときに使えます。
うまく反映できたときの見え方１
→ 「0」からサイトを作るって、本当に難しい１の書き方の例
<a class="btn raised main-bc strong" href="リンク先のURL"> → 「0」からサイトを作るって、本当に難しい </a>うまく反映できたときの見え方２
２の書き方の例
その他のボタンデザイン
参考 ボタンの挿入方法と種類一覧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>横長のカードタイプを使って関連記事を表示させたいとき
関連記事を表示させたい時に使えるパーツです。
画像を登録していると、とても素敵に仕上がります。
うまく反映できたときの見え方
書き方の例
他のサイト＆URLを紹介したいときに使うパーツ
他のサイトへのリンクを設置するときによく使うパーツです。
カワイイので愛用しています。さすがSANGOさんですね。
うまく反映できたときの見え方
参考 記事タイトルサイト名書き方の例
参考
記事タイトルサイト名
アコーディオンを設置したいとき
FAQや辞書を作ろうと思った時などに使いました。
うまく反映できたときの見え方
書き方の例
A：ここに答えを入力します。手順や流れ・STEPなどを設置したいとき
手順や流れ・STEPを設置したい時に使いました。
※タイムラインや沿革などでも使えそうです。
うまく反映できたときの見え方
書き方の例
STEP.1タイトル1説明文1が入ります。STEP.2タイトル2説明文2が入ります。STEP.3タイトル3が入ります。とりあえずショートコードをまとめて知りたいとき
よく使うショートコードは上記へまとめましたが、その他にも使う頻度が高い「SANGOのショートコード」には、以下などがあります。知りたい方は以下よりアクセスしてご確認ください。
- カードタイプの関連記事を出力
- 他サイトへのリンクを出力
- 横並び2列、3列
- YouTube埋め込みをレスポンシブにする
サイトのデザインやレイアウトを変えたい場合
記事に使えるノウハウではなく、サイトの大枠（デザインやレイアウトなど）を変えたい場合のノウハウは、以下へまとめています。興味のある方は、こちらも併せて確認してみると良いかもです。
