SWELLのカスタム書式と書式セット機能で楽しく執筆の効率をUP！設定方法と使い方も紹介！

2023年5月31日

さとしん

当ページのリンクには広告が含まれています。

URLをコピーしました！

この記事では、WordPressテーマ『SWELL』のカスタム書式機能について紹介していきます。

カスタム書式機能は、マーカー+太字や赤文字＋太字など文字装飾の組み合わせを事前に設定しておくことができたり、自分でCSSを記述することでオリジナルの文字装飾を設定することができる機能です。

記事執筆の時短に繋がったり、文字装飾にオリジナリティを出すことができるのでとても便利で重宝する機能です。

さとしん

ぜひ活用してみてください…！

SWELLのカスタム書式機能とは？オリジナルの文字装飾や装飾の組み合わせを設定できる

カスタム書式機能では、大きく2つの機能を設定することができます。

カスタム書式の設定
カスタム書式セットの設定

それぞれ紹介していきます。

カスタム書式の設定

カスタム書式機能は、2021/5/14リリースのVer 2.3.8で新たに追加された機能です。

SWELL

【SWELL – ver. 2.3.8 アップデート情報】 | WordPressテーマ SWELL 主なアップデート内容「カスタム書式」機能を追加しました。その他、微調整や不具合修正など。LPページでも「SWELLボタンブロック」のクリック計測が利用可能になりました…

CSSを使ってオリジナルな文字装飾を設定することができます。

文字装飾というのはマーカー線などのようなイメージです。

例えば、以下の様な装飾を自由に設定することができます。

オレンジのマーカーはSWELLのデフォルト機能、赤の装飾がカスタム書式で追加した装飾です。

このカスタム書式機能は、SWELLの開発者了さんがSWELLと並行して開発しているArkheというテーマの有料プラグイン、Arkhe Blocks Proで先行して実装されていました。

>>Arkhe Blocks Pro 1.7.0 をリリースしました

CSSで自由に装飾を設定できて、楽しく便利な機能だったので、当サイトでも愛用しているSWELLにも実装されたのはとても嬉しいです。

カスタム書式は、Arkhe Blocks Proでは3パターン、SWELLでは2パターン設定することができます。

カスタム書式セットの設定

カスタム書式セット機能は、2021/10/30リリースのVer2.5.4で追加された機能です。

SWELL

【SWELL – ver. 2.5.4 アップデート情報】 | WordPressテーマ SWELL 主なアップデート内容好きな書式の組み合わせを「書式セット」として登録して一括で呼び出せるようになりました。その他、細かい調整や修正など。書式の「折り返し禁止」…

マーカーと太字など、良く使う文字装飾の組み合わせを事前に作っておき、記事内で簡単に装飾を設定できます。

さとしん

執筆の時短に繋がる超素敵な機能です…！

カスタム書式セットはCSSの知識は不要なので、多くのSWELLユーザーさんにとってかなり重宝する機能だと思います。

カスタム書式セット機能の便利な使い方

まずはCSSが不要なカスタム書式セット機能について紹介していきます。

書式セット機能は本当に便利なので、ぜひ活用することをおすすめします。

マーカーと太字を組み合わせて使う方も多いと思いますが、そのような方は書式セット機能で事前に登録しておくことでかなり執筆時間の短縮につながると思います。

僕も実際に使ってみたので、カスタム書式セット機能について紹介していきます。

書式セット機能の登録方法と使い方

書式セットの登録方法と記事内での使い方は公式のマニュアルを確認してください。

SWELL

「書式セット」を登録して複数のテキスト装飾を同時に呼び出す方法 | WordPressテーマ SWELL SWELL ver.2.5.4にて、「書式セット」の登録が可能になりました。この記事では、その使い方を解説していきます。書式セットの登録方法 SWELL設定→「カスタム書式」タブの…

基本的には、以下の画面でお好みの文字装飾の組み合わせを設定するだけなので簡単です。

WordPress管理画面→「SWELL設定」→「エディター設定」→「カスタム書式」

さとしん

プレビューも表示されるので直感的に設定できると思います…！

記事内で使うときは、装飾したい文字を選択してブロックツールバーの「」アイコンのSWELL装飾から、書式セット1、書式セット2をクリックするだけでOKです。

書式セット機能の便利だなと感じた点

良く使う書式を事前に設定できるだけでかなり便利な機能で本当にありがたいのですが、了さんのツイートを拝見して更におどろきました。

これ、「複数の書式を組み合わせたようなCSSが当たる書式」じゃなくて、ちゃんと「複数の書式が適用される」機能になってるのがめっちゃ便利なポイントです🙆‍♂️

複数の組み合わせを一括で適用してからどれか1つをオフにしたり、マーカーの色だけさらに変えたり、とかができます…！ https://t.co/Vy8sCewECG
— 了🌊SWELL開発者 (@ddryo_loos) October 30, 2021

複数組み合わせた書式の中で、特定の書式のみを個別に変更することができます。

例えば、オレンジマーカーと太字の書式をセットしていた場合に、

マーカーの色だけ変える
マーカーや太字をオフする

といった形で、それぞれの装飾だけを個別に変更することができます。

赤色の太字を設定した場合も、以下のように個別の設定ができます。

文字色だけ変える
太字をオフにしたり斜体に変える

こんな感じ↓↓

さとしん

これはすごく便利なのでぜひ覚えておくと良いと思います…！

他テーマにも、太字＋文字色や太字＋マーカーを同時に設定できる機能がありますが、組み合わせの一部の装飾を変えたい場合は、一度書式をクリアして別の書式を設定する必要があることが多かったと思います。

みにしん

何度もこの操作をするのは地味に手間がかかる…。

このような細かい操作の積み重ねが記事執筆の短縮に繋がってくるなと感じます。

カスタム書式セット機能は、これぞ痒い所に手が届くといったような機能なのでぜひ活用してみてください。

カスタム書式の設定方法と使い方

続いては、カスタム書式の設定方法と使い方を説明していきます。

実際の設定した例や記述したCSSは記事後半の「カスタム書式を実際に設定してみた」で紹介します。

CSSを書く必要はありますが、それ以外の設定はとても簡単です。

カスタム書式の設定方法

まずは設定方法の一連の流れを紹介します。

STEP

WordPress管理画面→「SWELL設定」→「エディター設定」をクリック

STEP

エディター設定の中の「カスタム書式」をクリック

STEP

「カスタム書式 – 1」か「カスタム書式 – 2」に表示名を入力

波線、点線など、どんな装飾か分かりやすい名称にしておくと良いと思います。

STEP

「カスタム書式用CSS」にお好みのCSSを記述し「保存」をクリック

クラス名は「swl-format-1」、「swl-format-2」で固定です。

さとしん

とっても簡単ですね…！

2点ほど、注意点と補足を書いておきます。

表示名を入力しないと使用することができない
エディター側とフロント側どちらにもCSSが読み込まれる

せっかく、CSSを書いてオリジナルの装飾を作成しても「表示名」が未入力の状態だと、実際の記事で使用することができません。

忘れずに表示名は設定しておきましょう。

それから、カスタム書式で書いたCSSはエディター側とフロント側どちらにも読み込まれます。

補足

エディター側とフロント側について簡単に説明すると以下のとおりです。

エディター側

記事を書くための画面

フロント側

読者が実際に見る画面

つまり、記事を書く画面と読者が見る画面で、装飾の見た目が同じになると理解しておくと良いかと思います。

設定したカスタム書式の使い方

設定したカスタム書式の使い方はとても簡単です。通常のマーカー線などと同じ様に使うことができます。

STEP

装飾したい箇所を選択し、ブロックツールバーの「SWELL装飾」をクリック

STEP

設定したカスタム書式をクリック

この流れで、記事内のお好きな箇所にオリジナルの装飾をすることができます。

さとしん

使い方もとても簡単ですね…！

カスタム書式を実際に設定してみた

実際に何個かカスタム書式を設定してみたのでご紹介します。

工夫とアイディア次第で、アクセントになったり、読みやすい記事になりそうです。

また、SWELLを使った他のユーザーやサイトと記事の雰囲気が似てしまうこともありますが、このカスタム書式でオリジナリティを出すことで、差別化にも繋がるかもしれません。

今回は、以下の装飾を設定してみました。

点線
破線
波線
文字の上にドット
文字の上に点
文字間隔を広げる

CSSを記載しますが、ご使用は自己責任でお願いします。

さとしん

おかしなCSSを書いていたらごめんなさい…！

点線

.swl-format-1 {
	text-decoration: red dotted underline;
}

色を変えたい場合は、redのところにお好きなカラーコードを入力してください。

例えば以下の様に入力できます。

.swl-format-1 {
	text-decoration: #ff0000 dotted underline;
}

カラーコードの一覧は以下のサイトなどで調べてみましょう。

原色大辞典

WEB色見本原色大辞典 – HTMLカラーコード色の名前とカラーコードが一目でわかるWEB色見本

破線

.swl-format-1 {
	text-decoration: red dashed underline;
}

色を変えたい場合は、redのところにお好きなカラーコードを入力してください。

波線

.swl-format-1 {
	text-decoration: red wavy underline;
}

色を変えたい場合は、redのところにお好きなカラーコードを入力してください。

文字の上にドット

.swl-format-1 {
	text-emphasis: filled dot red;
	-webkit-text-emphasis: filled dot red;
}

色を変えたい場合は、redのところにお好きなカラーコードを入力してください。

文字の上に点

.swl-format-1 {
	text-emphasis: filled sesame red;
	-webkit-text-emphasis: filled sesame red;
}

色を変えたい場合は、redのところにお好きなカラーコードを入力してください。

文字間隔を広げる

.swl-format-1 {
	letter-spacing: 1.5em;
}

間隔を調整したい場合は、emの数字を変えてみてください。

カスタム書式機能をうまく活用して見やすい記事を作りましょう！

今回は、SWELLのVer 2.3.8で新たに追加された「カスタム書式」機能についてご紹介しました。

自分でCSSを記述するだけで、手軽にお好みの装飾を設定することができるので、とても便利で楽しい機能だと感じています。

また、同じテーマを使っていると、どうしても装飾が似てきてしまうので、オリジナリティを出す意味でも活用できると感じました。

また、Ver2.5.4で追加された「書式セット機能」では、マーカー＋太字など良く使う文字装飾の組み合わせを事前に設定しておくことができます。

事前に設定しておくことで確実に記事執筆の効率化に繋がるはずです。ぜひ活用してみてください。

最後まで読んでいただきありがとうございました。

SWELL公式サイトはこちらからどうぞ…！

SWELL公式サイトへ

SWELLブロックエディターの関連記事

WordPress本体とSWELLのブロックエディター機能を使いこなすためのSWELL記事の書き方ガイド↓↓