SWELL 文字の装飾機能を効果的に使って魅力的なブログを作ろう

WordPressテーマ「swell」で、あなたのウェブサイトをもっと魅力的に！初心者でもOK！本文では、テキスト装飾機能を使って、読者に情報をわかりやすく伝える方法を解説します。

SWELLテキスト装飾とは

Swellは、見出し、吹き出し、ボックス装飾、アイコン、ボタンなど、豊富なテキスト装飾機能を搭載したWordPressテーマです。これらの機能を活用することで、ブログ記事をより読みやすく、魅力的にすることができます。

今回、右サイドにある吹き出し、ボックス装飾は省略しました。次回の記事で執筆するつもりです。

Swell テキスト装飾の主な特徴

SWELL のテキスト装飾機能を使いこなす

swell には、ブログ記事の見栄えを向上させるための様々なテキスト装飾機能が用意されています。これらの機能を使いこなすことで、ブログ記事にメリハリをつけ、より読者の目を引くことができるでしょう。テキスト装飾機能を巧みに使いこなすことで、読者にとって魅力的で印象に残る、SEO にも強いブログ記事を書くことができるのです。ぜひこの機能を活用して、自分のブログを格上げしていきましょう。

装飾機能の解説

それぞれの機能について解説します。

ページ最上部に示す「テキスト装飾ツール」一覧

左端①から⑯まであります。

調べたい項目があれば、クリックしてください。すぐアクセスできます。

①　ブロックの切り換え

見出しブロック、リストブロック、引用ブロックに変換する。

②　上下に移動

ブロックを上下に移動させることができる。

③　テキストの配置

テキストの配置を左寄せ、中央寄せ、右寄せの３段階に変更できます。

④　デバイスコントロール

デバイスコントロールではスマホとPCのみに表示させることを選択できます。

⑤　ブロック下の余白量　

余白を変更する方法はブロックメニューバーから変更する方法と右サイドメニューで変更する方法の2パターンあります。使いやすい方法を選択してください。

⑥　太字

テキストを太字にします。クリックすると白抜きに変わります。

⑦　イタリック　　

テキストをイタリックにする。

⑧　リンク　

リンクを設定することができます。

⑨　さらに表示　　

項目をクリックすると、そこにすぐアクセスできます。

インラインコード

SWELLでは、コードタグを簡単にできるインラインコードという機能を備えています。
ブロックエディターでは標準機能としてインラインコードの装飾機能があり、SWELLはその他にFILE・DIRのアイコン付きコードタグを２種類用意しています。

インライン画像

インライン画像は文章の途中に画像を挿入する機能です。

キーボード入力

SWELLはデフォルトではこの機能を使えません。少しカスタマイズする必要があります。

カスタマイズ方法は２つありますが、下のSWELのカスタム書式を使う方法を採用します。

この再トライを番外編として、特集します。（少し長くなるので）

下のテキストをクリックすれば、番外編にアクセスします。

「SWELLのカスタマイズ書式にキーボード風文字のCSSを使う」番外編

ハイライト

ハイライトでは文章内の特定テキストの色を変更したり背景色を付けたりすることができます。

例

特定テキストの色を変更したり背景色を付けたりすることができます。

上付き

例

「上付き」は、^{この様になります。}

下付き

例

「下付き」は_{この様になります。}

打ち消し線

例

「打ち消し線」はこの様になります。

脚注

WordPressのテーマSWELLで文章内に脚注をつける方法。

選択したテキストに脚注番号がリンク付きで付与され、コンテンツ下部に脚注ブロックが自動的に配置されます。

⑩SWELL装飾

項目をクリックすれば、その詳細にアクセスできます。

書式クリア

装飾・書式を全てクリアにする方法。

例文

コード（DIR）・コード（FILE）

アイコン付きのコードタグです。

注釈

SWELLでは薄く小さく表示されます。

例

この文の中に注釈を入れます。

インラインボタン

文章内に下のようなボタンを表示することができます。具体的な設定方法を解説します。

例

この文章の中にボタンを挿入。

キーボード風

この項目は私がカスタマイズして設定したため、皆さんのSWELL装飾ではありません。

この設定手順は番外編で解説しているので、興味のある方は尋ねてください。

以下のテキストをクリックすれば、アクセスできます。

「SWELLのカスタマイズ書式にキーボード風文字のCSSを使う」番外編

書式セット

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

便利な機能なので、積極的に使用しましょう。

⑪アイコン

文章内などにアイコンを表示させることができます。

使用できるアイコンがとても豊富です。

例

⑫ショートコード

SWELLで用意されているショートコードを解説します。

記事内広告ーad

記事の間に表示させる広告を簡単に呼び出せるようにするショートコード、

評価スター – review_stars

５段階評価をスターアイコンで分かりやすく表示できる機能です。以下のような書式です。

[review_stars 評価の点数]

例

⑬フォントサイズ

フォントサイズの変更が可能でXS～XLまで設定可能です。

例

フォントサイズ(xs)

フォントサイズ(s)

フォントサイズ(L)

フォントサイズ(XL)

⑭テキスト色

その名の通り、テキスト色をつけます。文字が見やすくなり、記事が鮮明になります。

例

テキスト色

テキスト色

テキスト色

テキスト色

⑮背景色

これも記事に変化をつけます。

例

背景色

背景色

背景色

背景色

⑯マーカー

文字列の下にマーカーを簡単に表示することができます。

例

マーカー

マーカー

マーカー

オプション

オプションの項目ではブロックをコピーや削除といったその他の機能があります。私がよく利用するのは「グループ化」です。

SWELLのカスタム書式にキーボード風文字のCSSを追加する

SWELLのカスタム書式にCSSを追加して「キーボード書式」にする。

この「SWELのカスタム書式」のCSSは、以下のサイトから引用しました。」

登録したカスタム書式を使う

カスタム書式にCSSを登録したら、次は実際にカスタム書式を使って確認します。

まとめ

本記事では、swellテーマを用いたテキストの装飾方法について詳細に解説してきました。視覚的に魅力的で読みやすいコンテンツを作るためには、適切な装飾が不可欠です。まず重要なのは、強調効果を狙った太字や斜体の利用です。これにより、読者の視線を特定のキーワードやフレーズに引きつけることができます。また、リストや箇条書きを使うことで、情報を整理しやすく、理解しやすい形で提供することが可能です。

加えて、カラーテキストは感情や重要性を強調するうえで非常に効果的です。ただし多用しすぎると逆効果になるため、適度な使用が求められます。背景色の設定も、節や章ごとにトーンを分けることで、読み手にとってわかりやすくなります。最後に、適切な行間や余白を設けることにより、全体のバランスを取ることが大切です。これにより、文章が詰まりすぎた印象を与えず、読みやすさが向上します。

swellの様々な装飾機能を駆使することで、誰でも簡単にプロフェッショナルな記事を作成できます。今後のコンテンツ制作において、これらのポイントを参考に、さらに魅力的なブログ記事を作り上げてください。