【コピペ OK】WordPress の標準機能だけで記事の表現力を劇的にアップさせるテキスト装飾テクニック9選

「自分のブログ記事、なんだか見た目が単調だな…」 「もっと読者の目を引くような、魅力的なデザインにできないかな？」

そんなお悩みをお持ちではありませんか？

実は、WordPressに標準で搭載されている「Gutenberg（ブロックエディタ）」の機能を少し使うだけで、あなたの記事は見違えるほど分かりやすく、そして美しくなります。特別なプラグインや難しい専門知識は必要ありません。ほとんどがクリック操作だけで完結します。

この記事では、あなたの記事をプロ並みの見栄えにグレードアップさせる、今すぐ使える9つのテキスト装-飾テクニックを、動画の内容に沿って詳しく解説します。また、YouTubeでも、公開しています。

⬇️後編はこちら⬇️
https://www.youtube.com/watch?v=ilTNuXU_cjM

1. インラインコード：コマンドやコードをスッキリ見せる

プログラムのコードや、特定のファイル名、短いコマンドなどを記事中に表示させたい時に便利なのが「インラインコード」です。この機能を使うと、他のテキストとは区別されたスタイルで表示されるため、読者がコード部分を認識しやすくなります。

操作方法

1. コードとして表示したいテキストを選択します。
2. ツールバーの「∨」アイコンをクリックし、「インラインコード」を選択します。

これだけで、選択した部分がインラインコードとして表示されます。

【応用】CSSでデザインをカスタマイズ

デフォルトの表示でも十分ですが、少しCSSを追加することで、より見やすくカスタマイズできます。

1. WordPressの管理画面から「外観」→「エディター」に進みます。
2. 「スタイル」を選択し、縦三点リーダー（︙）から「追加CSS」をクリックします。
3. 以下のCSSコードをコピーして貼り付け、保存します。

code {
    background-color: #eee;
    border-radius: 3px;
    padding: 0 3px;
}

サイトを再読み込みすると、インラインコードに背景色や余白が適用され、より見やすくなっているはずです。

2. インライン画像：文章中に小さなアイコンを挿入

文章の途中に、絵文字のように小さなアイコンや画像を差し込みたい時に使います。文章の流れを妨げずに、視覚的なアクセントを加えることができます。

操作方法

1. 画像を挿入したい場所で、ツールバーの「∨」アイコンから「インライン画像」を選択します。
2. メディアライブラリから使用したい画像を選び、「選択」ボタンを押します。
3. 挿入された画像をクリックし、表示される幅の数値を調整します（例：16px）。

これで、テキストと同じ行に小さな画像を表示させることができました。

3. キーボード入力：ショートカットキーを分かりやすく

Ctrl + C のように、キーボードのショートカット操作を説明する際に便利なのが「キーボード入力」です。キーボードのキーのようなデザインで表示され、読者に操作方法を直感的に伝えられます。

操作方法

1. ショートカットキーとして表示したいテキストを選択します。
2. ツールバーの「∨」アイコンから「キーボード入力」を選択します。

こちらもCSSでデザインを調整すると、さらに見やすくなります。「追加CSS」に以下のコードを追記してみてください。

kbd {
    background-color: #eee;
    border: 1px solid #b4b4b4;
    border-radius: 3px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 2px 0 0 rgba(255, 255, 255, 0.7) inset;
    color: #333;
    display: inline-block;
    font-size: 0.85em;
    font-weight: 700;
    line-height: 1;
    padding: 2px 4px;
    white-space: nowrap;
}

4. ハイライト：蛍光ペンのように文字を強調

特に読者に注目してほしいキーワードや重要な一文を強調したい場合に「ハイライト」を使いましょう。テキストの文字色と背景色を自由に変更できます。

操作方法

1. 強調したいテキストを選択します。
2. ツールバーの「∨」アイコンから「ハイライト」を選択します。
3. 「テキスト」と「背景」のタブを切り替え、好きな色を選択します。テーマで定義されている色のほか、カラーパレットから自由に色を選ぶことも可能です。

5. & 6. 上付き・下付き：数式や化学式もきれいに表現

x2 や H_2O のような、数式や化学式で使われる小さな文字も簡単に表現できます。

操作方法

1. 上付きまたは下付きにしたい文字を選択します。
2. ツールバーの「∨」アイコンから「上付き」または「下付き」を選択します。

7. 取り消し線：情報の訂正や変更履歴に

古くなった情報を訂正したり、変更前の内容を残しつつ新しい情報を追記したりする場合に「取り消し線」が役立ちます。

操作方法

1. 取り消し線を引きたいテキストを選択します。
2. ツールバーの「∨」アイコンから「打ち消し線」を選択します。

8. 脚注：スマートな補足情報の追加

本文の流れを止めずに、専門用語の解説や補足情報を加えたい時に便利なのが「脚注」です。

操作方法

1. 脚注を追加したい単語の直後にカーソルを置くか、単語を選択します。
2. ツールバーの「∨」アイコンから「脚注」を選択します。
3. 自動的に本文の末尾に脚注エリアが作成されるので、そこに補足説明を記入します。

記事上では、番号が振られ、クリックするとページ下部の脚注にジャンプするようになります。読者の可読性を損なわずに、詳細な情報を提供できる優れた機能です。

9. 言語：文字の方向を指定（特殊なケース）

アラビア語のように、通常とは逆の「右から左」へ記述する言語を表示させるための機能です。日本語のブログではほとんど使用する機会はありませんが、このような機能もあると覚えておくと良いでしょう。

操作方法

1. 対象のテキストを選択します。
2. ツールバーの「∨」アイコンから「言語」を選択します。
3. テキストの方向を「右から左」に設定すると、文字の並び順が逆になります。

まとめ

いかがでしたでしょうか？ 今回は、WordPressのブロックエディタに標準で備わっている、表現力を高める9つのテキスト装飾テクニックをご紹介しました。

• インラインコード
• インライン画像
• キーボード入力
• ハイライト
• 上付き
• 下付き
• 取り消し線
• 脚注
• 言語

これらの機能を使いこなすことで、あなたの記事は格段に読みやすく、そして読者の理解を助ける魅力的なコンテンツに生まれ変わります。ぜひ、次の記事作成から活用してみてください。