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

のじはた
のじはた

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

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

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

イメージ

使い方

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

SANGOボタンがない場合

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

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

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

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

  • 名前(わかりやすいもの)
  • クラス名(.「ドット」は不要)
  • リンクにするかどうか
  • CSSを記述

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

設定例

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

蛍光ペン(黄色フル)

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

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

赤文字

赤文字です。

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

メリット(インライン)

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

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

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

下線(破線タイプ)

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

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

折り返し禁止

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

名前折り返し禁止
クラス名p-nowrap
CSS
.p-nowrap {
    white-space: nowrap;
}
設定例

まとめ

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

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

今回はここまで。

( 。•ᴗ• )੭⁾⁾