ブロックインサーターって、どんな事ができるの?
今まで、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.