キャリカク岡山

ブロックインサーターを使ってみる

2026年09月09日 / キャリカク岡山事業所

ブロックインサーターって、どんな事ができるの?

今まで、HTMLやCSSなど、

初心者の方には、

ちょっと取っ付きにくい感じがすると思います。

でも、WordPressには、

それらの細かいことを知らなくても、

簡単に記事を書くことが出来る方法があります。

それが、ブロックインサーターを使用することです。

(編集画面左上の「青色の四角の中に白色の+が書かれているものです。)


画面左上などに表示される

青色の四角の中の「+」ボタンをクリックすると、

さまざまなブロックを追加できます。

この「+」ボタンから開く一覧を、

ブロックインサーターと呼びます。

ブロックインサーターには

たくさんの機能がありますが、

最初から全部覚える必要はありません。

基本的な操作手順は、

+をクリック →

使いたいブロックを選ぶ →

表示された入力欄に記述したり、ボタン押して機能を選択


上記の流れで操作できますので

かなり、簡単に記事作成が出来ると思います。


(ちなみに、使いたいブロックをクリックすると、
ビジュアルエディター上に青色枠が出現します。
この中に記述したり、必要なボタンをクリックして、
必要な事を記述したりしていきますが、
この青色枠は編集時だけ表示されるもので、
実際の表示画面には出てきませんので、ご安心願います。)


一つ注意していただきたいのは、

段落ブロックなどで、記述しながら改行したい時、

Enterキーを押してしまうと、

段落入力が終了してしまいます。

この場合、改行したいときは、

「Shift+Enter」を押すことによって、

同じ段落ブロック内で改行することが出来ます。

機能は用途ごとに分けられているので、

ここでは各パートを

アコーディオン形式でまとめて

見ていきます。

見たい項目の見出しをクリックすると、

内容を開いたり閉じたりできます。


文章を書くときに使うブロックが中心です。通常の記事作成では、このグループを使う機会が多くなります。

  • ・段落 …… 普通の文章を書くためのブロックです。
  • ・見出し …… 記事の内容を区切る見出しを作ります。
  • ・リスト(箇条書き) …… 箇条書きや番号付きの一覧を作ります。
  • ・引用 …… 他の文章や発言などを引用するときに使います。
  • ・コード …… HTMLやCSS、プログラムコードなどを表示します。
  • ・詳細 …… 必要なときだけ内容を開いて表示する折りたたみ形式のブロックです。
  • ・数式 …… 数式を表示したいときに使います。
  • ・整形済みテキスト …… 改行や空白を入力した形に近い状態で表示します。
  • ・プルクオート …… 文章の一部や印象的な言葉を大きく目立たせたいときに使います。
  • ・テーブル …… 行と列を使った表を作ります。
  • ・詩 …… 改行を残したまま文章を表示したい場合などに使います。
  • ・クラシック・エディター …… 以前のWordPressエディターに近い操作方法で編集できます。
  • ・ハイライティング・コードブロック …… コードを色分けして、見やすく表示するためのブロックです。

画像・音声・動画などを記事に入れるためのブロックがまとめられています。

  • ・画像 …… 画像を1枚表示します。
  • ・ギャラリー …… 複数の画像をまとめて並べて表示します。
  • ・音声 …… 音声ファイルをページ内で再生できるようにします。
  • ・カバー …… 画像や動画の上に文字などを重ねて表示できます。
  • ・ファイル …… PDFなどのファイルを掲載したり、ダウンロードできるようにします。
  • ・メディアとテキスト …… 画像などのメディアと文章を並べて配置します。
  • ・プレイリスト …… 複数の音声や動画をまとめて表示します。
  • ・動画 …… 動画ファイルをページ内で再生できるようにします。
  • ・アイコン …… 記号やマークなどのアイコンを表示します。

ページの配置や見た目を整えるときに使うブロックが中心です。

  • ・アコーディオン …… 内容を開いたり閉じたりして表示できます。この記事でも使用している機能です。
  • ・ボタン …… リンクなどをボタンの形で目立たせて表示します。
  • ・カラム …… ページを複数の列に分けて配置します。
  • ・グループ …… 複数のブロックをひとまとめにして扱います。
  • ・横並び …… 複数のブロックを横方向に並べます。
  • ・縦積み …… 複数のブロックを縦方向にまとめます。
  • ・グリッド …… 複数の内容を格子状に並べます。
  • ・続き …… 投稿一覧などで「続きを読む」位置を指定します。
  • ・ページ区切り …… 1つの記事を複数のページに分けます。
  • ・区切り …… 横線などを入れて、内容を区切ります。
  • ・スペーサー …… ブロック同士の間に余白を作ります。
  • ・タブ …… タブを切り替えて複数の内容を表示します。

記事やサイトを補助するための情報や機能を表示するブロックがまとめられています。

  • ・アーカイブ …… 過去の投稿を月別などで一覧表示します。
  • ・カレンダー …… 投稿の日付などをカレンダー形式で表示します。
  • ・ターム一覧 …… カテゴリーやタグなどの分類情報を一覧表示します。
  • ・カテゴリー一覧 …… サイト内のカテゴリーを一覧で表示します。
  • ・カスタムHTML …… HTMLを直接記述して表示します。
  • ・最新のコメント …… 最近投稿されたコメントを表示します。
  • ・最新の投稿 …… 最近公開した記事を一覧表示します。
  • ・固定ページリスト …… 固定ページを一覧表示します。
  • ・RSS …… RSSフィードの情報を表示します。
  • ・検索 …… サイト内検索の入力欄を表示します。
  • ・ショートコード …… WordPressやプラグインで用意されたショートコードを実行します。
  • ・ソーシャルアイコン …… SNSなどへのリンクをアイコンで表示します。
  • ・タグクラウド …… タグを一覧表示し、使用状況などに応じて大きさを変えて表示します。

サイト全体や投稿の情報を表示するときに使うブロックです。テーマ編集やテンプレート作成で使うものも多く、少し上級者向けの機能も含まれています。

  • ・ナビゲーション …… サイトのメニューを表示します。
  • ・サイトロゴ …… サイトのロゴ画像を表示します。
  • ・サイトのタイトル …… サイト名を表示します。
  • ・サイトのキャッチフレーズ …… サイトに設定されているキャッチフレーズを表示します。
  • ・クエリーループ …… 条件に合った投稿などを繰り返し一覧表示します。
  • ・アバター …… 投稿者などのプロフィール画像を表示します。
  • ・タイトル …… 投稿やページのタイトルを表示します。
  • ・抜粋 …… 投稿の抜粋文を表示します。
  • ・投稿のアイキャッチ画像 …… 投稿に設定されたアイキャッチ画像を表示します。
  • ・作者名 …… 投稿者の名前を表示します。
  • ・コメント数 …… コメントの件数を表示します。
  • ・コメントリンク …… コメント欄へのリンクを表示します。
  • ・日付 …… 日付情報を表示します。
  • ・投稿日 …… 投稿が公開された日付を表示します。
  • ・変更日 …… 投稿が更新された日付を表示します。
  • ・カテゴリー …… 投稿に設定されているカテゴリーを表示します。
  • ・タグ …… 投稿に設定されているタグを表示します。
  • ・前の投稿 …… 前の記事へのリンクを表示します。
  • ・次の投稿 …… 次の記事へのリンクを表示します。
  • ・所要時間 …… 記事を読むための目安時間を表示します。
  • ・単語数 …… 投稿に含まれる単語数などの情報を表示します。
  • ・続きを読む …… 続きを読むためのリンクを表示します。
  • ・コメント …… 投稿のコメントに関する内容を表示します。
  • ・投稿コメントフォーム …… コメントを書き込むためのフォームを表示します。
  • ・ログイン/ログアウト …… ログインまたはログアウト用のリンクを表示します。
  • ・ターム数 …… カテゴリーやタグなどに属する項目数を表示します。
  • ・アーカイブタイトル …… アーカイブページのタイトルを表示します。
  • ・検索結果のタイトル …… 検索結果ページのタイトルを表示します。
  • ・投稿タイプラベル …… 投稿・固定ページなど、投稿タイプに関する名前を表示します。
  • ・作成者のプロフィール情報 …… 投稿者のプロフィール情報を表示します。
  • ・パンくずリスト …… 現在のページがサイト内のどこにあるのかを道順のように表示します。

外部サービスの動画・音声・投稿などを、WordPressの記事内へ表示するためのブロックです。

埋め込み系のブロックは数が多いですが、基本的には「対応するサービスのURLを指定して、その内容を記事内に表示する」という使い方になります。

  • ・埋め込み …… 対応している外部サービスのURLなどを使って内容を埋め込みます。
  • ・X 埋め込み …… Xの投稿を埋め込みます。
  • ・YouTube 埋め込み …… YouTube動画を埋め込みます。
  • ・WordPress 埋め込み …… 対応するWordPressサイトの記事などを埋め込みます。
  • ・SoundCloud 埋め込み …… SoundCloudの音声を埋め込みます。
  • ・Spotify 埋め込み …… Spotifyの音楽や音声コンテンツを埋め込みます。
  • ・Flickr 埋め込み …… Flickrのコンテンツを埋め込みます。
  • ・Vimeo 埋め込み …… Vimeoの動画を埋め込みます。
  • ・Animoto 埋め込み …… Animotoのコンテンツを埋め込みます。
  • ・Cloudup 埋め込み …… Cloudupのコンテンツを埋め込みます。
  • ・Crowdsignal 埋め込み …… Crowdsignalのアンケートなどを埋め込みます。
  • ・Dailymotion 埋め込み …… Dailymotionの動画を埋め込みます。
  • ・Imgur 埋め込み …… Imgurの画像などを埋め込みます。
  • ・Kickstarter 埋め込み …… Kickstarterのプロジェクトを埋め込みます。
  • ・Mixcloud 埋め込み …… Mixcloudの音声コンテンツを埋め込みます。
  • ・Pocket Casts 埋め込み …… Pocket Castsのコンテンツを埋め込みます。
  • ・Reddit 埋め込み …… Redditの投稿を埋め込みます。
  • ・ReverbNation 埋め込み …… ReverbNationの音楽コンテンツなどを埋め込みます。
  • ・Scribd 埋め込み …… Scribdの文書などを埋め込みます。
  • ・SmugMug 埋め込み …… SmugMugの画像などを埋め込みます。
  • ・Speaker Deck 埋め込み …… Speaker Deckのプレゼン資料を埋め込みます。
  • ・TikTok 埋め込み …… TikTokの動画を埋め込みます。
  • ・TED 埋め込み …… TEDの動画などを埋め込みます。
  • ・Tumblr 埋め込み …… Tumblrの投稿を埋め込みます。
  • ・WordPress.tv 埋め込み …… WordPress.tvの動画などを埋め込みます。
  • ・Amazon Kindle 埋め込み …… Amazon Kindle関連の対応コンテンツを埋め込みます。
  • ・Pinterest 埋め込み …… Pinterestのピンなどを埋め込みます。
  • ・Wolfram 埋め込み …… Wolframの対応コンテンツを埋め込みます。
  • ・Bluesky 埋め込み …… Blueskyの投稿を埋め込みます。

最初から全部覚えなくても大丈夫です

ここまで見ると、「こんなにたくさんあるの?」と思うかもしれません。

でも、最初から全部覚える必要はありません。

  • ・段落
  • ・見出し
  • ・リスト
  • ・画像
  • ・テーブル
  • ・ボタン
  • ・区切り
  • ・スペーサー

まずは、このあたりのよく使うブロックから試していけば十分です。

必要になったときに、

ブロックインサーターを開いて
「使えそうなものはないかな?」と

探してみるくらいの感覚で大丈夫
です。


まとめ

ブロックインサーターは、

WordPressでページを作るための

「部品一覧」のようなものです。


「完成コードをそのまま一覧表示して、

各パラメータを横に解説する」

みたいな教材向けの見せ方は、

カスタムHTMLほど自由ではありません。

結論
ブロックインサーターでできるのは主に、

  • ・「メディアとテキスト」
  • ・「カラム」
  • ・「グループ」
  • ・「画像」
  • ・「スペーサー」
  • ・「見出し」
  • ・「段落」

などを選んで、

右側の設定パネルから値を変更するやり方です。

たとえば今回の、


"mediaPosition":"left"
"mediaWidth":40

に近い操作なら、
ブロックインサーターから「メディアとテキスト」を追加して、

  • ・画像を左/右にする
  • ・メディア幅を調整する
  • ・モバイルで積み重ねる
  • ・配置や余白を調整する

といった設定ができます。

ただし、


"mediaId":123

や


"mediaType":"image"

などの内部パラメータを、

ブロックインサーターから

直接文字列として編集するわけではありません。

つまり、

ブロックインサーター
→ GUIで操作して、結果としてWordPressが内部コードを生成する

という感じです。

一方、今回の記事のような、


"mediaPosition":"left"
→ 画像を左に置く

"mediaWidth":40
→ 画像幅を40%にする

この様に設定すると、

画像の横に文章が回り込みます


そして面白いのが、

ブロックインサーターで、入力後

コード・エディターで開いてみると、

どのようにコードが生成されているのかが判ります

「ブロックインサーターで設定すると、

内部ではこんなコードになります」

たとえば、


ブロックインサーターで「メディアとテキスト」を選ぶ
↓
画像を左に設定
↓
内部コードでは "mediaPosition":"left"

ブロック・インサーターを使用してから、

コードエディターを開き、

変換された部分を見るだけでも

かなり勉強になりますよ👍


GUI操作とHTML/ブロックコードがつながるので、
WordPressを「なんとなく触る」状態から一段進めます。

以前のページで、HTMLやCSSについて

できるだけ、わかりやすく書いているので、

ご参照頂けたら幸いです。

・ホームページを表示するには?
・HTMLって、どうやって使うの?
・主なHTMLタグ一覧
・WordPressって、どういうもの?
・WordPressとHTMLの対応は?
・CSSって、なにもの?
・CSSfileの置き場所は?
・サーバーに接続するには、どんなソフトを使うの?

キャリカク岡山:F.K.

月別アーカイブ
2026年10月(73)
2026年9月(51)
2026年8月(39)

CONTACT

お問い合わせ

まずはお近くのキャリカクへご相談ください!まずはお近くのキャリカクへご相談ください!

キャリカクは全国34拠点。その輪はますます広がっています。
まずは最寄りのキャリカクにご相談ください。

キャリカク成瀬が2026年12月オープン予定!

キャリカク栗東が2026年8月オープンしました!

キャリカク本八幡駅前事業所が2026年6月オープンしました!

キャリカク大和八木駅Officeが2026年5月オープンしました!

キャリカク半田が2026年5月オープンしました!

キャリカク大分駅前が2026年5月オープンしました!

キャリカク岡山事業所が2026年3月オープンしました!

キャリカク前橋駅前オフィスが2026年2月オープン!

キャリカク東岡崎駅が2025年12月オープン!

愛知

キャリカク大須観音駅

パソコン初心者でもOK!
伏見駅・大須観音駅どちらからもアクセス良好!

愛知

キャリカク一宮駅前

パソコン仕事
パソコンが並んだオフィスのような空間!

愛知

キャリカク勝川駅オフィス

JR中央本線勝川駅から徒歩3分!

愛知

キャリカク藤が丘駅前事業所

2024年4月新規オープン!
地下鉄東山線 藤が丘駅から徒歩2分!

愛知

キャリカク平安通

地下鉄名城線 平安通駅から徒歩1分!

愛知

キャリカク中村公園前

「中村公園駅」から徒歩5分の好立地!

愛知

キャリカク東岡崎駅

名鉄東岡崎駅から徒歩7分。あなたの“できる”が輝き出す場所!

愛知

キャリカク半田

名鉄河和線「成岩駅」出口から徒歩約2分!

岐阜

キャリカク岐阜駅オフィス

JR岐阜駅前にオープン!
パソコン作業で楽しくキャリアアップを! 岐阜駅オフィスのマスコット「もち太郎」がお待ちしております!

岐阜

キャリカク大垣オフィス

JR大垣駅から駅近3分の好立地!

三重

キャリカク四日市駅オフィス

近鉄四日市駅から徒歩5分の駅チカ!

三重

キャリカク津駅事業所

2025年2月オープン!
三重県下2事業所目!近鉄「津」駅から徒歩2分の駅チカ事業所です

東京

キャリカク茗荷谷オフィス

2025年12月オープン!茗荷谷(みょうがだに)オフィスです!

東京

キャリカク浅草橋オフィス

JR総武線・都営浅草線「浅草橋駅」から徒歩4分♪都バス「蔵前一丁目」バス停から徒歩1分♪見学随時受付中!!

埼玉

キャリカク北浦和事業所

2025年10月オープン!JR京浜東北線「北浦和駅」から徒歩で2分の好立地

東京

キャリカク成瀬

2026年12月オープン予定!成瀬(なるせ)オフィスです!

静岡

キャリカク浜松駅前オフィス

「ちょっと気になる」その気持ちだけでOK!
パソコン初心者の方も、通所に不安がある方も
大歓迎!!
まずは見学やご相談から、お気軽にどうぞ!

静岡

キャリカク静岡駅

新静岡駅から徒歩で7分

神奈川

キャリカク小田原オフィス

2024年2月オープン 小田原駅から徒歩10分!

神奈川

キャリカク藤沢南口

2025年6月2日オープン!

群馬

キャリカク前橋駅前オフィス

パソコン初心者でもOK!JR前橋駅から徒歩11分

栃木

キャリカク小山駅

2026年7月3日、移転グランドオープン!

宮城

キャリカク古川駅オフィス

東北地方初!
宮城県大崎市に2025年4月オープン!

山梨

キャリカク甲府駅前

2025年9月1日オープン!JR「甲府駅」から徒歩3分

大阪

キャリカク大阪なんば事業所

南海本線なんば駅から徒歩8分

大阪

キャリカクJR茨木駅前

JR茨木駅 徒歩2分!
話しやすさNo.1の事業所!

奈良

キャリカク大和八木駅Office

2026年5月オープン!大和八木駅からスグ

滋賀

キャリカク栗東

2026年8月オープン!

広島

キャリカク広島西

2023年11月オープン!広電草津駅から徒歩8分

広島

キャリカク広島駅オフィス

2024年9月OPEN!JR山陽本線 広島駅から徒歩6分

広島

キャリカク五日市

駅近6分!2025年5月オープン!

岡山

キャリカク岡山

ITスキルを磨ける事業所「キャリカク岡山」岡山駅徒歩2分の好立地にOPEN!

大分

キャリカク大分駅前

【大分駅 徒歩5分】                     ゆっくり自分のペースで。ここから社会と繋がっていく!

株式会社キャリカク

愛知県一宮市大江3丁目12-22 一観ビル1階

TEL:0586-71-3577 FAX:0586-71-3587

\ FOLLOW ME ! /

プライバシーポリシー

©️2024 Kyarikaku Inc, All Rights Reserved.

\ FOLLOW ME ! /

©️Kyarikaku Inc, All Rights Reserved.

見学・お試し体験はコチラ