WordPress 段落ブロックの使い方 改行・行間・装飾 等

WordPress

【WordPress段落ブロックの使い方】改行/行間/装飾の仕方を解説

「段落ブロック」はわかりやすく、見やすくまとめられた文章のかたまりで、一番使われているブロックです。

今回は段落ブロックの使い方を詳しくご紹介します。
 

【WordPress段落ブロック】 文章入力・改行・使い方(動画解説版)


 

(※)本記事では、WordPress5.6、無料テーマLightningを利用した環境で説明しています。
 


 

(関連記事)ブロックエディターの使い方について

本記事では、カラムブロックの使い方に絞って説明していますが、エディターの使い方全体を勉強したい方は「【徹底解説】WordPressブロックエディターの使い方」を合わせてご参照ください。

 

段落ブロックの基本的な使い方

段落ブロックの追加方法

まずは段落ブロックを追加してみましょう。「+」ボタンから「段落」を選択して挿入することができます。あるいは、通常エディター末尾でEnterボタンを押下することで新しい段落ブロックが追加されます。

段落ブロックの追加
 

■段落ブロックの追加


 
 

改行の仕方:Enterによる改行とSHIFT+Enterによある改行の違い

Enterボタンを押すと新しい段落ブロックとして改行されます(行間が大きくあきます)。一方、Shift+Enterボタンを押下すると、同じ段落のまま改行されます(行間が大きく開きません)。
 
Shift + EnterとEnterの改行の違い
 

■Shift+Enterによる改行と、Enterによる改行の違い


 

■コードエディターでみると、Enterで改行→別の段落ブロックになっており、Shift+Enterで改行→<br>タグを挿入して改行(同段落ブロック内で改行)になっていることがわかります。
Shift + EnterとEnterの改行の違い

(※)段落はHTMLで記載すると<p>になります。段落内での改行は<br>を利用します。
(例)<p>テキストテキストテキストテキストテキスト</p>
 

上部ツールバーと右メニューバーの設定項目

段落ブロックでは、上部ツールバーで行揃えや文字装飾・リンクなど設定可能で、右メニューバーでは段落ブロック全体の文字の大きさ・行の高さ文字色など設定可能です。
段落ブロックの設定でできること

 

ここからは、装飾の仕方については詳しく説明してきます。

 

上部ツールバーから段落ブロックを装飾する

上部ツールバーでは行揃えや、選択した文字部分の装飾やリンクなどが設定できます。
段落ブロック>上部メニューバーでできること
 

テキストの配置(左揃え・中央揃え・右揃え)を変更する

「テキストの配置を変更」をクリックすると、段落ブロック内にあるテキストの配置を左寄せ、中央寄せ、右寄せに変更できます。

何もしなかったら、デフォルトのままになりますので、必要に応じて設定しましょう。
段落ブロック テキスト揃えの設定
 

■テキスト中央揃えの例
テキスト中央揃えの例
 

■テキスト右揃えの例
テキスト右揃えの例
 

選択した文字を太文字にする

テキストを選択した状態で、「B」のアイコンをクリックすると、選択したテキストが太文字になります。
 
選択した文字を太文字にする
 

ショートカットキーを利用して太文字にすることもできます。文字を選択して、windowsなら「Ctrl + b」、Macなら「Command + b」でも太文字になります。

 

選択した文字をイタリック(斜体)にする

ブロック内でテキストをドラッグしてして選び、「I」のアイコンをクリックすると、テキストがイタリックに変わります。
 
選択した文字をイタリック(斜体)にする
 

「Ctrl + i 」で同じようにイタリックに変換することができます。

 

ショートカットキーを覚えよう

ブロックエディターを開き、右上の詳細アイコン>ショートカットキーを選択すると、ブロックエディター で利用できるショートカットキーの一覧を確認することができます。
ブロックエディター ショートカットキー

 

選択した文字に取り消し線をつける

取り消したいテキストをドラッグして選んで、メニューから「取り消し線を選ぶと、選択した部分に取り消し線が設定できます。

選択した文字に取り消し線をつける
 

■取り消し線
取り消し線の例
 

選択した文字に色(カラー)を設定する

選択した部分に文字色を設定すると、指定した部分に文字色を設定することができます。目立たせることができます。

選択した文字に色(カラー)を設定する
 
色を選択します。
色を選択
 
なお、カスタムカラーをクリックすると、スライダーや「16進数での色指定」で独自の色を設定できます。
カスタムカラー
 

選択した文字にリンクを挿入・設定する

リンクを挿入する場合、文字列をドラッグして選択して、リンクのボタンをクリックします。
リンクの設定
 

リンク先のURLをコピーして、ペーストします。
リンクの設定
 

リンクを新しいタブで開きたい時は、新しいタブを開くをオンにします。
リンクの設定>新しいタブの設定
 

ブロックの種類を変更する

「段落」ブロックを選ぶとツールバーが出てくるので、段落ブロックを別の種類に変更できます。

「段落」ブロックから変更できるのは「見出し」「リスト」「引用」「グループ」「整形済みテキスト」「詩」などがあります。
ブロックの種類変更
 

(補足)選択した文字をインラインコード化する

段落内で指定したいテキストを選択して、インラインコードをクリックするとcodeタグを設定できます。
インラインコードの挿入
※CODEタグは、囲んだ部分がプログラムのソースコードであることを意味づけるタグです。
 

インラインコードの挿入
 

基本的に利用シーンはあまりないかもしれません。

 

(補足)インライン画像に挿入する

段落内のテキスト中にカーソルを合わせてインライン画像を選択すると、文中に画像を設定できます。
インライン画像の挿入
 

挿入する画像を選ぶ画面が出るので、ファイルを選択から挿入したい画像を選択します。カーソルを合わせていた部分が画像として挿入できました。
段落ブロックの設定
 

右メニューバーで設定できること

右メニューバーでは、段落ブロック全体の文字の大きさ・行の高さ文字色など設定可能です。
段落ブロック>右メニューバーでできること
 

タイポグラフィ

タイポグラフィ設定では、段落ブロックの文字の大きさや行の高さを変更することができます。
段落ブロック>タイポグラフィーの設定
 

■文字の大きさの設定


 

■行の高さの設定(※同じ段落での文章の行の高さが変更できます)


 

テキスト設定

テキスト設定では、ドロップギャップ設定という項目から先頭の文字を大きく設定することができます。
ドロップギャップ設定
 

色設定(背景色・文字色)

色設定では、段落のブロックに入力したテキストの文字色や背景色を設定できます。
 

文字色では段落ブロックに入力したテキストの色、背景色では段落ブロックの背景の色を変更することができ、カスタムカラーでは独自の色を設定できます。
色設定
 

■段落ブロックでの色と背景色の設定

前述で説明した上部ツールバーでの色設定と違って、ここでは段落ブロック(文字全体)の色指定になります。

 

高度な設定

高度な設定では段落のブロックにCSSクラス名を指定できます。
高度な設定
 

高度な設定から段落ブロックに任意のクラス名を設定して、追加CSSなどで指定のクラス名のある段落ブロックだけ装飾するといったことが可能です。
 

まとめ

まとめです。今回はWordPressのブロックエディターで文章を入力する際に利用する段落ブロックの使い方を説明しました。

自分で触ってみないことにはなかなかわからないことも多いと思いますので、興味がある方はたくさん触ってみて覚えてください。

 

今回は以上になります。最後までご覧いただきありがとうございました。
 

 

弊社は、自分でホームページを作ることを推奨しています。「業者に任せたけど、更新ができない」「本で独学は時間がかかりすぎる・・」そんなお悩みの方も多いのではないでしょうか。

個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。

詳細はこちら

YouTubeチャンネル開設しました!

WEBST8 YouTube Channel 開設
最大月間50万PVの当ブログをベースに、Youtube動画配信にてWordPress、ホームページ作成、ブログのことについてお役立ち情報を随時配信していきます。

ご興味ある方はぜひチャンネル登録をしていただけますと幸いです。


 

『自分で作る選択を』
自分でホームページ作成・Web集客したいホームページ作成スクール・教室

自分でホームページ作成・Web集客したいホームページ作成スクール・教室 WEBST8

おすすめ記事3選

【WordPressの始め方総まとめ】ワードプレスブログの作り方9STEP

WordPressの始め方総まとめ

WordPress(ワードプレス)でブログを始めようと思った時に、サーバー・ドメインの手続きなどわからないことだらけで困っているというお悩みをお持ちの方も多いのではないでしょうか。本記事では、WordPressでブログやアフィリエイトを始めたい初心者を対象にWordPressの始め方をご紹介していきます。

【WordPressホームページの作り方総まとめ 12STEPで解説】

WordPressでホームページを自作しようと思った際に、「ドメイン?サーバー?たくさん調べることがあって何から手をつけたら良いのかわからない」というかたも多いのではないでしょうか。この記事ではWordPress初心者の方を対象にWordPressでホームページを作る方法をご紹介していきます。

【2020年版WordPress(ワードプレス)の使い方総まとめ】

今回は、これからWordPress(ワードプレス)を使ってホームページまたはブログサイトを作りたい初心者の方向けに、WordPressの導入から使い方までまとめて説明していきます。 (※)WordPress5.0から実装された最新のブロックエディター(グーテンベルグエディター)にも対応しています。

-WordPress
-, ,