MENU
さとしん
WordPressが好きで毎日触って勉強しています。ブロックエディタに出会ってから本当にWordPressが楽しくなりました。WordPressやブロックエディタに馴染めず困っている人の役にたてたら嬉しいなぁと思いながら、このサイトを運営しています!

SWELLのカスタム書式機能が楽しい!設定方法と使い方も紹介!

SWELLのカスタム書式機能が楽しい!設定方法と使い方も紹介!

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

とても便利な機能で、文字装飾にオリジナリティを出すことができます。

さとしん

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

目次

SWELLのカスタム書式機能とは?オリジナルの文字装飾が設定できる

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

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

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

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

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

SWELLのカスタム書式機能

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

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

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

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

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

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

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

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

カスタム書式の設定方法

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

STEP
WordPress管理画面→「SWELL設定」→「エディター設定」をクリック
カスタム書式の設定方法-1
STEP
エディター設定の中の「カスタム書式」をクリック
カスタム書式の設定方法-2
STEP
「カスタム書式 – 1」か「カスタム書式 – 2」に表示名を入力

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

カスタム書式の設定方法-3
STEP
「カスタム書式用CSS」にお好みのCSSを記述し「保存」をクリック

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

カスタム書式の設定方法-4
さとしん

とっても簡単ですね…!

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

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

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

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

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

補足

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

エディター側

ブロックエディターのエディター側

記事を書くための画面

フロント側

ブロックエディターのフロント側

読者が実際に見る画面

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

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

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

STEP
装飾したい箇所を選択し、ブロックツールバーの「SWELL装飾」をクリック
カスタム書式の使い方-1
STEP
設定したカスタム書式をクリック
カスタム書式の使い方-2

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

さとしん

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

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

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

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

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

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

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

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

さとしん

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

点線

文字の下に点線
.swl-format-1 {
	text-decoration: red dotted underline;
}

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

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

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

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

破線

文字の下に破線
.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を記述するだけで、手軽にお好みの装飾を設定することができるので、とても便利で楽しい機能だと感じています。

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

まだ当サイトではカスタム書式機能を設定していませんが、今後たくさん活用していきたいと思います。

適度に文字を装飾して、見やすい記事を作っていきましょう。

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


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

SWELL

SWELLのレビュー記事はこちら↓↓

>>SWELLのブロックエディターは使い心地が最高でした【WordPressテーマレビュー】

SWELLの基本的な設定や使い方はこちら↓↓

>>WordPressテーマ『SWELL』の使い方や設定で困ったときの情報まとめ!

SWELLでトップページをカスタマイズする方法↓↓

>>【SWELL】トップページをおしゃれなサイト型にカスタマイズする!

SWELLで作られたサイト集↓↓

>>WordPressテーマ『SWELL』を使った素敵なサイト、ブログを集めました!!

SWELLのカスタム書式機能が楽しい!設定方法と使い方も紹介!

この記事が気に入ったら
いいね または フォローしてね!

よかったらシェアしてね!

この記事を書いた人

WordPressが好きで毎日触って勉強しています。ブロックエディタが好きです!WordPressやブロックエディタに馴染めず困っている人の役にたてたら嬉しいなぁと思いながら、このサイトを運営しています!

目次
閉じる