
こんにちは、のじはた(@nojihata_com)です!
今回の記事ではWordPressテーマSANGOの、オリジナル機能カスタム書式機能の使い方を解説します。
カスタム書式機能は編集画面で、自分が使いたい装飾を自由に追加することができる機能です。
イメージ

使い方

初めに編集画面の上部ツールバーの右上にある、SANGOボタンを押します。
続いて、SANGO Settingsにあるカスタム書式を開きます。
新しく作るので+カスタム書式を作成を押します。

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

- 名前(わかりやすいもの)
- クラス名(.「ドット」は不要)
- リンクにするかどうか
- CSSを記述
保存を押せばツールバーに設定した装飾が追加されます。通常の装飾と同じように簡単に使えるようになります。

設定例
カスタム書式を設定したり、CSSを書くのが難しい方もいらっしゃるかと思いますので、カスタマイズ例を用意しました。
蛍光ペン(黄色フル)
蛍光ペンを文字の全背景につけてみました。

名前 | 蛍光ペン(黄色フル) |
クラス名 | keiko_yellow_full |
.keiko_yellow_full {
background: rgba(255, 252, 107, 0.69) 50%;
}

赤文字
赤文字です。

名前 | 赤文字 |
クラス名 | moji-red |
.moji-red {
color: #ec0004;
}

メリット(インライン)
メリットの丸を文章の前につけます。テーブルの中で使うといい感じです!
リストバージョンはSANGO Landで配布しています。

名前 | メリット |
クラス名 | merit-inline |
.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 |
.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 |
.custom-bold {
font-weight: bold;
}

下線(破線タイプ)
文字の下に点線を追加します

名前 | 下点線 |
クラス名 | border-dashed |
.border-dashed {
border-bottom: 1px dashed #e0e0e0;
padding: 1px 1px 2px;
}

折り返し禁止
指定した部分の文章の折り返しを禁止します。
名前 | 折り返し禁止 |
クラス名 | p-nowrap |
.p-nowrap {
white-space: nowrap;
}

まとめ
今回はSANGOのカスタム書式機能の使い方を解説しました。
一度設定してしまえば何度でも使いまわせますのでぜひ活用してください。
今回はここまで。
( 。•ᴗ• )੭⁾⁾
ご質問・相談など
その他
SANGO FUNはWordPressテーマSANGOの魅力、使い方やカスタマイズを解説するサイトです。
この記事がお役に立ちましたら、ぜひほかのSANGOユーザーさんにも広めて頂けるととてもうれしいです。
Twitterでの拡散やフォローをお待ちしています!
めっちゃおすすめ