【WordPress】文字に装飾を加えて見やすくしよう。

今回は、文字に色を付けたりハイライトを加える方法をまとめます。

簡単な装飾を加える。

太字で強調する。

太字で単語などを強調するのは簡単です。

ブロックエディタの「B」のボタンを押せばOKです。

書いている途中に表示されていますね。BはBoldの頭文字で太字を意味します。

こんなふうに文字を選択した状態でBボタンを押しましょう。

見出しにしても太字になりますが、これはやめてください。見出しは文章の構造を表すもので、見た目の変更に使うものではありません。

詳しく言うと、文章の構造と内容を書くものがHTMLです。HTMLファイルのみを読むと、タイトルも見出しも文章も同じサイズ同じフォントで表示されます。

ChromeなどのブラウザでHTMLファイルを読むと「勝手に」太字にするのです。SafariやFirefoxも勝手に太字にしてくれますが、それぞれのブラウザでは初期設定が異なるので見た目は統一されません。

見た目を制御するのがCSSです。CSSは色を変えたり、フォントサイズの調整を行います。

GoogleはHTMLでしっかりとした文章構造になっているかも見て、優良なサイトかどうかを判断しています。そのため見た目を変えるために、文字を見出しに設定する（HTML側をいじる）のは悪手です。見た目を変えるにはCSSをいじってください。

文字を斜体にする。

あまり使わないかもしれませんが、文字を斜体にすることもできます。

斜体にするときは、Iボタンを押せばOKです。

文字に色を付ける。

今度はサイドメニューからの変更です。

文字を書いていると、右側にメニューが表示されるはずです。

表示されていない場合は、歯車のマークを押しましょう。

ここで「テキストの色」を選択すればOKです。

マーカーでハイライトを加える。

こちらもサイドメニューから選びます。

ハイライトしたい文字を選択しつつ、「整形」の「A」ボタンを押してください。選択したところに蛍光ペンのようにマーカーが引かれます。

その他

他にもリンク、上付き文字、下付き文字、訂正線なども近くのボタンから入力することができます。

色々触って試してみましょう。

プログラムのコードを表示する。

ブロック表示とインライン表示がありますが、これは段落全体をコードにするか、文章中の一部分だけをコードにするかの違いです。

コードをインライン表示する。

これもサイドメニューの機能です。

<>（不等号、アングルブラケット）のボタンでOK。

例えば文章中に「これはコードだよ」と言いたい箇所を強調するために使います。

「まずはimportからはじめましょう」という文章などが例です。

他にもショートカットキーを紹介するときにも有効です。「command + p で文章をコピーしたら、command + v で貼り付けです」などと書けば非常にわかりやすいですよね。

段落全体をコードとして表示する。

こちらはこれまでより少し複雑です。

ブロック右の+ボタンを押せば、よく使う項目が並びます。実はここでスクロールすると下にいきます。

今までこの部分は隠れていたのですね。

「フォーマット」の「<>」ボタンを押すと、コードのブロックを挿入できます。

これですね。押すと段落全体がコード記入モードになり、フォントも変わります。

# コード入力ブロックに書いてみました。
# どうでしょう。こんな感じに見えます。
import pandas as pd

ソースコードを見せたいときに便利です。

表を挿入する。

これもブロック要素です。

フォーマット → 表 です。すると何行何列の表を作るのかを聞かれます。

これはあとから変更できます。大体の値を入れて「表を作成」です。

表の行数や列数を変更するには、表を選択してツールバーをクリックします。

ここから行数や列数を変更したり、中央揃えにもできます。

リストの挿入。

• リストを挿入したいときは
• ブロック要素のうち
• 「一般」なかにあります。

その他

このようなブロック要素はたくさんあります。Youtubeを埋め込んだり、Twitterを埋め込んだりもできます。

今回はコード表示のみを紹介しましたが、他にも色々あるので自分で書きながら見てみましょう。

他にも役立ちそうなTipsを紹介

ブロックの挿入

文章を書いてEnterを押せば、改行とともに新しいブロックに移行します。

しかしすでにあるブロックの中に、書き足したいときにはどうすれば良いでしょうか。

実は、赤い点線で囲んだ部分にマウスカーソルを持ってくると、「+」ボタンが表示されます。

長方形の上辺に持ってこれば上側に「+」、下辺なら下側に「+」が現れます。挿入したい方を選んでクリックすればOKです。

他にもショートカットキーでも可能です。被挿入ブロックを選択して、command + option + T で上側に挿入できます。

Windowsの場合はショートカットが異なるので、確認してみてください。

ブロックの移動

ブロックの左側にあるボタンでブロックを移動させることができます。真ん中の「…」ボタンをドラッグ（押しっぱなしで引っ張る）すると任意の場所に移動させることができます。

ブロックの変更

あとからブロックの種類を変更することも可能です。

メニューの左端にカーソルを持っていくと、矢印に変化します。段落ブロックは見出しへと変化させることができます。

あらゆるブロックに変化させることはできません。そのブロックの内容に矛盾のない変化ができるだけです。

以上です。今回はWordPressの簡単な文字修飾について説明しました。

自分で使ってみると、自分がよく使うメニューがわかってくると思います。はじめは積極的に使って、自分のスタイルを見極めていきましょう。