【SANGO】カスタム書式機能を使いこなして快適に記事を書く方法 設定例あり

のじはた

こんにちは、のじはた(@nojihata_com)です！

今回の記事ではWordPressテーマSANGOの、オリジナル機能カスタム書式機能の使い方を解説します。

カスタム書式機能は編集画面で、自分が使いたい装飾を自由に追加することができる機能です。

使い方

初めに編集画面の上部ツールバーの右上にある、SANGOボタンを押します。

SANGOボタンがない場合

右上の三点リーダーを押して、SANGO Settingsを押して開きます。

あとから簡単に使えるように星マークを入れておくと便利です。

続いて、SANGO Settingsにあるカスタム書式を開きます。
新しく作るので+カスタム書式を作成を押します。

それぞれ以下の項目を入力しましょう。

保存を押せばツールバーに設定した装飾が追加されます。通常の装飾と同じように簡単に使えるようになります。

設定例

カスタム書式を設定したり、CSSを書くのが難しい方もいらっしゃるかと思いますので、カスタマイズ例を用意しました。

蛍光ペン(黄色フル)

蛍光ペンを文字の全背景につけてみました。

.keiko_yellow_full { background: rgba(255, 252, 107, 0.69) 50%;
}

赤文字

赤文字です。

.moji-red { color: #ec0004;
}

メリット(インライン)

メリットの丸を文章の前につけます。テーブルの中で使うといい感じです！

リストバージョンはSANGO Landで配布しています。

.merit-inline:before { color: #07a825; content: "\f111"; display: inline-block; font-family: "Font Awesome 5 Free"; font-weight: 400; padding-right: 0.3em; text-align: center; width: 1.25em;
}

デメリット(インライン)

デメリットのバツを文章の前につけます。テーブルの中で使うといい感じです！

リストバージョンはSANGO Landで配布しています。

.demerit-inline:before { color: #e66b6a; content: "\f00d"; display: inline-block; font-family: "Font Awesome 5 Free"; font-weight: 900; padding-right: 0.3em; text-align: center; width: 1.25em;
}

Strongタグを使わない太字

Strongタグを使いたくない場合CSSで太文字にすることができます。

.custom-bold { font-weight: bold;
}

下線(破線タイプ)

文字の下に点線を追加します

.border-dashed { border-bottom: 1px dashed #e0e0e0; padding: 1px 1px 2px;
}

折り返し禁止

指定した部分の文章の折り返しを禁止します。

.p-nowrap { white-space: nowrap;
}

まとめ

今回はSANGOのカスタム書式機能の使い方を解説しました。

一度設定してしまえば何度でも使いまわせますのでぜひ活用してください。

今回はここまで。

( ｡•ᴗ• )੭⁾⁾