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

のじはた

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

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

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

イメージ

[広告]CSSの勉強におすすめ

この記事のもくじ

使い方
設定例
まとめ

目次へ

使い方

初めに編集画面の上部ツールバーの右上にある、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;
}

[広告]CSSの勉強におすすめ

まとめ

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

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

今回はここまで。

( ｡•ᴗ• )੭⁾⁾

ご質問・相談など

SANGO公式フォーラム

当サイトの記事の誤り等、当サイト固有の問題を除き、テーマに関するすべての質問は公式のSANGOフォーラムへお願いいたします！

SANGOフォーラムで質問

その他

SANGO FUNはWordPressテーマSANGOの魅力、使い方やカスタマイズを解説するサイトです。

この記事がお役に立ちましたら、ぜひほかのSANGOユーザーさんにも広めて頂けるととてもうれしいです。

Twitterでの拡散やフォローをお待ちしています！

めっちゃおすすめ