WordPressの必ず使う基本ブロック「段落」「見出し」「カラム」「画像」の4つについて、使用方法とその設定方法までを解説していきます。

最低この4つさえマスターしておけば、普段投稿しているブログ記事も、うんと見やすくなります。

ブロック一覧の確認の仕方

まずは、ブロック一覧を確認していきましょう!

ブロック一覧は左上 から確認、使用することができます。

また、投稿本文の「+」からもブロックの一部を確認、使用することができます。

左上 をクリックして開くと、テキスト、デザイン、メディアなど、項目にわかれてブロック一覧が表示されます。

今回は、上記の中から、「段落」「見出し」「カラム」「画像」を使います。

ちなみにこの記事も、上記の4つのブロックで構成されています。

段落ブロック

テキスト(文字)を入力する際に使用します。一番よく使うブロックです。

段落ブロックを追加

まずは段落ブロックをクリックします。

段落アイコンがないときは、「検索 」してみましょう!

段落は、ワードなどのように文字を打つことができます。

任意の文字を入力してみましょう。

「段落」に背景をつける

文字が入力できたら、さらに編集を加えていきましょう!

青枠の部分に背景をつけてみたいと思います。

青枠のあたりを選択(クリック)し、右上の から、設定画面を開きます。

*すでに「設定」が開いている場合は

①〜③をクリックし、背景の色をつけます。

クリックすると
画面が切り替わる

デフォルトで表示されている色を選択することもできますし、赤枠部分をクリックで画面が切り替わり、色を微調整したり、色相や透明度を変更することができます。

背景に色をつけることができました。

ブロック追加は左、そのブロックを編集したいときは右 と覚えておきましょう。

「段落」の色変更

次は、入力した文字自体の色を変更していきます。

段落全体の色変更

背景と同じ要領で、文字の色も変更できます。

ただ、段落全体の文字色が変わってしまうので、一部の文字色だけを変更したいときは、「ハイライト」を使用します。

一部の文字の色を変える

ハイライト

ブロック全体ではなく、色を変えたいテキスト部分だけを選択します。

(画像は選択している状態です)

からハイライトをクリックし、任意の色を選択します。

文字の一部の色を変更することができました。

見出しブロック

見出しブロックは、一見「段落ブロック」の文字を大きくしたり、背景をつけたりしているだけのように見えるかもしれません。

人間には、上記の表示で見出しだと理解できますが、検索エンジンとしては、ただの文章の一部とみなされてしまいます。

せっかく時間をかけて文章を考え投稿するわけですから、どうせなら検索エンジンにもしっかりと評価してもらえるような構成で投稿したほうが良いので、ぜひ意識して使って見てください。

ブロック一覧から「見出し」を選択、任意の文字を入力します。

見出しブロックも、設定からスタイルを変更できます。

*テーマによって変更できるスタイルが違います。

変更できるスタイルが少ない場合は、段落ブロックと同じように、その下の「色」で背景をつけることもできます。

カラムブロック

カラムとは??

カラムは、ただブロックを積み重ねていくのではなくて、横並びに配置したい時に使用します。

あまり聞きなれない言葉ですが、表でいうと「列」のようなものです。

1カラム、2カラム・・は1列、2列のレイアウトになっている、ということです。

こちらは画像の比較ですが、縦に並んでいるよりも、横並びの方が比較しやすくなっていのるがわかります。

このように、画像を比較して説明したい場合などは、「2カラム」の方が見やすいレイアウトになる、ということですね!

では実際に使ってみましょう。

カラムブロックを選択

ブロック一覧から、カラムブロックを選択します。

左右の比率パターンを選択することができます。

ここでは、50/50を選択します。

カラムは、「カラムブロック」だけでは成立しません。

カラムの中に、さらに任意のブロックを入れていきます。

カラムブロックも設定をいろいろ変更できて便利なのですが、中身の要素(ブロック)がないとイメージしにくいので、先に「画像ブロック」の説明に移ります。

このまま続きを見たい方は下のボタンをクリックしてください。

画像ブロック

画像ブロックを選択

ブロック追加の要領で、カラムの中に画像ブロックを追加します。

「アップロード」はPCファイルが開き、
「メディアライブラリ」はすでにWordPressに入っている画像から選択できます。

メディアライブラリから、任意の画像を選択します。

ファイル名で「検索」もできます。

左のカラムに画像を追加することができました。

画像のスタイルを変更する

またはから、画像スタイルを変更することができます。

*テーマによって変更できるスタイルが違います。

ここでは、「フォトフレーム」を選択しました。

左右どちらにも、画像を追加することができました。

Point

画像は、あらかじめサイズ(比率)を合わせておくことをオススメします。

カラムブロックの補足

カラムブロックの設定方法

カラムブロックの選択の仕方

WordPressは、クリックの位置によって選択される箇所が微妙に変わるので、どこを選択しているのか分かりづらい場合があり、選択位置によって出てくるツールも違ってくるので、慣れるまでは操作のしづらさを感じると思います。

ここで1つワンポイントアドバイス!

以下の画像を参考に選択すると、比較的操作しやすくなります。

カラム全体を選択したいときは、
左右どちらかのカラムを選択>その上にでてくるツールのをクリック!

これで、親ブロックであるカラム全体を選択することができます。

その後、右の設定からカラム全体の背景などを変更できます。

カラムの比率を変える

先ほど50/50の比率を選択しましたが、こちらは後から変更することもできます。

左右どちらかのカラムを選択>設定から
カラム設定→幅→%へ変更し、任意の数値を入力します。

左カラムを30%へ変更しました。

右は「段落ブロック」に置き換え、文字を入力→
70%に変更しました。

カラムの入れ替え

左右のカラムを入れ替えたいときは、どちらかのカラムをクリックし、 で移動できます。

もちろん右から左への入れ替えも可能です。

カラムのレイアウトを揃える

デフォルトでは画像と文字が上揃えになりますが、カラム全体を選択し、中横揃え、下揃えにすることもできます。

ここでは中央揃えにします。

画像と文字が、中横揃えになりました。

カラムを増やす

設定のカラムのカーソルを左右に動かすことで、後からカラム数を増やすこともできます。

Point

上の画像のように、「モバイルでは縦に並べる」をONにしておくと、スマホで見た時は縦表示にすることができます。

このように、ブロック1つでも、いろんな設定を加えることができます。

テーマの違いは大きく関係してきますが、ブロックをデフォルト使用するだけでなく、「設定」でデザインを色々と変更できます。

ウェブロードではLightningテーマの有料版を使用しています。

対応プラグインでブロック自体を増やすこともできますし、設定でできることも豊富です。Lightning有料版をお考えの方は、以下より購入・ダウンロードできます。

Vektor Passport(アップデート期間1年) | Vektor WordPress Solutions

商品の詳しい説明はこちら 別途複数年ライセンス版もご用意しています。3年ライセンス5年ライセンスVK Blocks Pro、Lightning G3 Pro Unit および Lightning Pro(旧製品…

投稿者プロフィール

Asuka
Asuka
元銀行員。退行後手に職をつけたい気持ちからと元々興味があったWeb制作の道へ。
訓練校でHTMLやCSS、デザインについて半年間学び、その後デザイン会社で2年程度の実務経験を積む。
日々の業務を通して、お客様自身で日々更新・運用できる生きたサイトを作成できるWordPressの需要を感じ、2024年7月より株式会社ウェブロードに入社。
技術やデザイン、知識を磨きながらお客様視点での制作・運用を行っている。

お問合せフォームはこちら

弊社サービスをご検討いただきありがとうございます。
相見積もりや社内検討用など、概算お見積りのPDFが必要な場合はこちらでご入力・出力できます。

お見積りのご依頼・打ち合わせはZOOM/GoogleMeet/お電話等、オンラインでも対応可能です。全国からお問い合わせを受付けています。
2営業日を過ぎても弊社からの連絡がない場合はメールが届いていませんので、大変お手数をお掛けしますが、下記メールアドレスにご連絡ください。

    お問い合わせの前に下記、ご確認をお願いいたします。

    任意貴社サイトURL

    必須弊社を何で知りましたか

    必須お問い合わせ項目

    必須制作費のご予算はどれくらいですか?

    企画・設計、デザイン、画像・文章の作成、サイト内検索システムの導入等、
    ヒアリングを元にご予算やご希望に応じたお見積りをご提案させて頂きます。
    弊社制作費の費用感につきましてはこちらの記事をご参照ください。

    必須制作目的はどうお考えですか?(複数選択可)

    どこに力を抜きどこに力を入れるのか、
    ご予算とご要望の中から最適なご提案をさせていただきます。

    必須どのような機能が必要ですか?(複数選択可)

    SSL(https://~)対応、ブログ機能、スマホ対応(レスポンシブ)、
    ログイン等セキュリティ対策、ページタグSEOの最適化は標準搭載。

    必須どのような作り方がご希望でしょうか?(複数選択可)

    WordPressでの構築になりますので、お客様のご要望に比較的柔軟にお応えすることが可能です。
    企画ご提案する前に参考にさせていただく項目です。

    必須お問い合わせ内容を教えてください

    必須お名前

    必須フリガナ

    必須メールアドレス

    必須貴社名

    任意電話番号(ハイフン無し・半角数字)