2024年4月以降のブロックエディターが対象になります。WordPress6.4.3~
デモサイト(非公開)のテーマはLightningG3です。
テーマが違っても、団体が違っても、このWordPressのマニュアルは有効です。
(一部例外があるかもしれません)

このマニュアルページを印刷したい方のために(上下成り行きPDFもこの中にあります)

ペーパーレス時代、とはいってもパソコンの操作の練習をするためには、横に紙面教材がないと、どうにも・・・という方もいらっしゃるでしょう。そこで、このページを印刷する方法を紹介します。WEB学園(お名前ドットコム)の解説が参考になります。

ブラウザ(クローム)の印刷設定

★の指定(ポートレートと100)をすると、A4版紙面で、左右のレイアウトはまずまずの収まりになります。ただし、上下関係はページごとに「見出し」がトップには配置されず、成り行きになります。

@media printで印刷用に整えるのが本来なのでしょうが、「印刷時の改行を制御する」はすぐにもできそうです。

h2 {
      break-before: page;
    }

「通常の表示時には見た目に変化はありません」。クロームで印刷プレビューすると、「H2見出し」の前で改行され、「見出し」が紙面ページの頭に揃いました。しかし、改行しない成り行きの21ページが25ページになりまして、多くとも4枚は余白が極端に広いものに・・・それも調整しないといけませんねm(_ _)m

動画の画像は非表示で印刷されません。動画に表紙が追加してあるとそれは表示され印刷されるようです。

上下なりゆきPDF(上の指定のほか「余白を10mm」とか微調整してPDF化したものです)
※なお、「ファイル」ブロックで編集するとこのような表示が可能です。

03/15 プラグインRTOCによる「目次」は今後の課題

管理画面にログイン

https://団体サイトのURL/wp-admin

団体HPのURLに「wp-admin」がついたURL

ed001
  • 表示されたユーザー名・パスワードの入力欄に必要な情報を入力します。
  • 「ログイン状態を保存する」のチェックはお好でどうぞ
  • 「ログイン」ボタンをクリックします。
「ログイン状態を保存する」とは

チェックを入れると、しばらくはログインした状態が維持されます。毎回ログインしなくても管理画面が開きます。 デフォルトでは、ログイン状態を保存する期間は14日間 です。メリハリをつけたい方はチェックなしでどうぞ。

ダッシュボード

  • 管理画面、入力画面とも呼びます。ログインすると次の画面「ダッシュボード」が開きます。
  • 「◆◆の会」デモサイトでは、「概要」だけを表示しています。通常は、ほかに「アクティビティ」など5つほど並びます。
ed002
  • 上の横に長い部分を「ツールバー」と呼びます。緑色のロックアイコンはこのデモサイトが非公開であることを示しています。右端に「ログイン」している方の名前が表示されます。ログアウトするとき、ここにマウスをのせます。
  • 図のダッシュボードにはボックスがひとつだけですが、「表示オプション▼」内に数個のボックスのリストがあり、チェックを入れるとダッシュボードに表示されます。
  • 左側の編集者用管理メニューは原則6つになります。団体HPの規模により7~10のメニューが並ぶ場合もあります。
「ダッシュボード」余談

WordPressのダッシュボードの名前は、車のダッシュボードから来ているそうです。
自動車のダッシュボードとは、前席に位置する内装部全体を指しています。

ked001

投稿の新規追加

  • 左側管理メニューの「ダッシュボード」の下の「投稿」にマウスをのせると右側に追加メニューが表示されます。その中の「新規投稿を追加」をクリックします。
  • なお、「投稿一覧」をクリックすると右のように表示されます。同じ「新規投稿を追加」ボタンがあります。
ed003-2
  • 次の画面が開きます。
  • デフォルトは「フルスクリーンモード」です。
  • 管理メニューを表示しておきたい場合は「オプション」で「フルスクリーンモード」を中止することもできます。お好みで選択してください。

フルスクリーンモード

ed004

管理メニューを表示

ed005
  • 下図のようにパネルが表示されないときは「設定」をクリックすると、上左図のようにパネルが表示されます。
ed006

以下、「フルスクリーンモード」の画面で説明を進めます。

編集画面の構成

WordPressのバージョン、使っているテーマ、管理者の設定によって、ボタンの形状や並びなどが変わることがあります。

ed007
  • 編集画面は4つのエリアがあります。

③ ブロック挿入、元に戻すなどのエリア
「ブロック挿入ツール」、「ツール」、「元に戻す・やり直す」、「ドキュメント概観」のボタンがあります。
「ドキュメント概観」はひつつのページのブロック数が多い場合に活用します。

④ 下書き・プレビュー・公開・設定などのエリア
公開前は「下書き保存」、「プレビュー」、「公開」、「設定」、「オプション」のボタンが並びます。
公開後は「プレビュー」、「投稿を表示」「公開」、「設定」、「オプション」のボタンが並びます。

① ページタイトル・本文入力エリア
ページタイトルや本文を入力します。文章や画像や表などを入力・追加していきます。

② ページ設定・ブロックの設定エリア
ページの設定やブロックの設定をするエリアです。「投稿」ではこのページの属性を指定します。「ブロック」では編集中のブロックの種類ごとに専用の設定項目が表示されます。

投稿一覧を表示
「W」=「投稿一覧を表示」をクリックすると、次の図の「アラート」が表示されます。
既存の記事を更新して「更新」をクリックしないで「ページを離れる」と「行った更新が保存されない」のでご注意ください。

ed008

投稿記事の編集1(タイトルと文章)

  • タイトルと段落(文章)を入力します。
ed009
  • 次に「ブロックを選択するには「/」を入力」を単純にクリックして、「段落」ブロックでテキストを入力します。
  • ちなみに、表示に従って半角の「/」を入力してEnterを押すと次のようなポップアップメニューが表示されます。ブロックを選択しないと「/」が残ります。この仕組みは、お好みで利用してください。
ed010
  • 「段落」ブロックでは、2つの改行のやり方「Shift+Enter」と「Enter」を確認しましょう。
ed011
  • デフォルトでは、上の図のように、入力しているそばにメニュー(ツール)が表示されます。
  • これがじゃまになると感じた方は、次の図のように「オプション」で「トップツールバー」にチェックを入れてください。ツールがいつでもトップに表示されるようになります。
ed012

投稿記事の下書き保存と再編集

  • ここまで入力したら「下書き保存」をしましょう。
  • 「下書き保存」をクリックすると、一瞬「保存しました」と表示されます。
  • 操作ミスなど万一のトラブルで編集途中の記事が消滅してしまう場合に備え、記事の作成時はこまめに下書き保存をするようにしてください。
ed013
  • 「投稿一覧を表示」の「W」ボタンをクリックします。「保存しました」ので「アラート」は出ません。
  • 「投稿一覧」で「タイトル」にマウスをのせるとサブメニューが表示されます。この「編集」ボタンをクリックして再度編集画面を表示します。
ed014

投稿記事の編集2(画像ブロック)

  • 次は「段落」ブロック以外のブロックを使って編集します。
  • ブロックはたくさんあります。
    各ブロックの詳細は別ページ(マニュアルその2)で紹介できればと・・・
  • ここでは「画像」ブロックの使い方を説明します。
  • ブロックの選択追加方法は複数あります。(「インサーター」と呼ばれます)
    ここでは、とりあえずよく使う
    「ブロック挿入ツール」と「ブロックを追加」と「ブロック間のツール」を紹介
  • をクリックするとブロックの一覧が表示されます。
  • ブロックの名前を検索欄に入力して表示することができます。

ブロック挿入ツール

ed015

ブロックを追加

ed016
  • ブロックとブロックの間にマウスをのせると青い十字のインサーターが表示されます
ed016-1
  • 「画像」ブロックを選択します。
  • 「アップロード」「メディアライブラリ」「URLから挿入」というボタンとリンクが表示されます。
  • ここでは「アップロード」と「メディアライブラリ」をそれぞれお試ししてみてください。
  • なお、このマニュアルデモサイトでは、画像をアップロードすると自動的に最大サイズ1920px(ウェブ最適化のサイズ)になるようプラグインImsanityを使っています。
ed017
  • 「メディアライブラリ」ボタンをクリックすると、アップロード済みの画像が一覧表示されるので、使いたい画像をクリック。
  • 右下の「選択」ボタンをクリックすると画像ブロックを追加した部分に選択した画像が挿入されます。
  • デスクトップから本文内にドラッグ&ドロップもできます。

メディアライブラリーから

ed019

デスクトップからドラッグ&ドロップ

ed018
  • 画像のサイズや位置などはツールやパネルのブロックで編集します。
ed20
  • 画像をマウスで編集する様子
ed020.webm(Reelia - Screen Recorder & Editorで作成)

投稿記事の編集3(PDF→ファイルブロック)

標準では「画像」と同じように「メディア」にアップロードします。少し前までは「アップロードしたPDFのURLをコピーして本文にペースとしてリンクで開く」ようにしていましたが、ブロックエディターが使えるようになった現在、「ファイル」ブロックを使います。PDF、エクセル、ワードなどをアップロードできます。ただ、後述にありますがスマホなどではPDF本体が表示されないという難点があります。

デフォルトでは「インライン埋め込みを表示」なので、上図のようになります。が、注: ほとんどのスマートフォンやタブレットのブラウザーは埋め込み PDF を表示しませんので、「ファイルブロック」を使う場合は「インライン埋め込みを表示」しないほうが良いでしょう。

「ファイルブロック」の右パネルメニューを確認する動画です。

「インライン埋め込みを表示」の場合


スマホでは非表示になります。このQRコードで確認

「ファイルの名前+ボタン」の場合

ファイルの名前は本文入力画面で変更できます。「ファイルの名前」をクリックすると「新しいタブでPDFが開きます」「ダウンロードボタン」をクリックすると「直接ダウンロード」になります。

ちなみに、入力画面の右パネルには「ダウンロードボタン」の背景色を指定するメニューがありませんので、ノーコードで変更することはできません。

背景色の黒(#32373c)を変えたいときは、CSSを追加することになります。ノーコードからローコードになります。それは、このマニュアルの枠外になります。

「ファイルの名前」だけの場合

「ダウンロードボタン」は、右パネルで非表示に指定できます。リンクテキストは任意に編集できますので、半角英数のファイル名を日本語することも可能です。

プラグインを利用する場合

スマホやタブレットで「PDF」をビジュアルに表示したいときは、プラグインを利用します。

ここではプラグインPDF Embedderを紹介します。ただし、このプラグインでは入力画面には「ショートコード」が表示され、中身を見ることができません。

PDFを画像化したもの
クリックするとPDFが新しいタブで開きます

入力画面でもPDFの中身が一目で確認できるのは、やはり「画像」です。

PDFを画像化して、それもアップロードして、画像のリンク先にPDF本体のURLを指定するという流れになります。

PDFを画像化するには2つの方法があります。

  1. PDF編集オンラインツールを利用(当面はこちらをおすすめ)
  2. 特殊なプラグインを利用(当面保留)

アップロードする「画像」のあつかいについては、団体編集者の画像加工のスキルによりケースバイケースとなります。まずは、管理者と相談してください。

※「基本編」のおまけとして「画像・写真加工相談室」を設けることになりそうです。

投稿記事公開に向けて3つの指定

  • 「URL(パーマリンク)」「カテゴリー」「アイキャッチ画像」は左パネルで指定します。
ed021
  • URL(パーマリンク)」とは記事ごとに設定されるURLの末尾の部分のことです。
  • ★HPによっては、団体編集者のスキルに応じて、管理者が元の「パーマリンク構造」を「?p=123」と自動的に数字になる設定をするときもあります。この場合は次の変更は不要です。管理者と確認してください。
  • 日本語のままだと文字化けしますので半角英数に変更します。
  • デモサイトでは「archives/数字」のスラッグが自動的に入力されるようになっています。
  • 管理者の設定によって上図のグレー枠にある表示になる場合もあります。
  • いずれにしろ、管理者と「パーマリンク」の設定について確認してください。
  • カテゴリー」は表示されるリストから選択します。デフォルトは「未分類」です。
  • 追加や変更については管理者と相談してください。
  • タグ」で分類する方法もあります。ここでは説明していませんが、利用している団体は管理者と確認してください。
  • アイキャッチ画像」は「投稿一覧ページ」に表示されます。「サムネール画像」とも呼ばれます。
  • 「アイキャッチ画像を設定」をクリックして選択します。「代替テキスト」にテキストで「画像の説明」を入れておくと、トラブルで画像が表示されなくなったとき、テキストが代わりになります。
  • 画像サイズは16:9の比率が原則となります。
  • 画像のリサイズや加工については管理者と相談してください。

投稿記事公開前のプレビュー

ed022-0
  • 3つの指定が終わったら、投稿記事ページの見栄えや設定ミスなどをチェックするために「プレビュー」を行いましょう。
  • 「プレビュー」には「ディスクトップ・タブレット・モバイル/新しいタブでプレビュー」の4つあります。
  • 前者の3つは入力画面内で表示されます。スマホ閲覧75%時代ですので、スマホ(モバイル)ではどうか?などもチェックしておくに越したことはありません。
  • 「新しいタブでプレビュー」はヘッダーなども表示された閲覧ページが、入力画面の左に新しいタブとして表示されます。
  • 公開前のプレビューですので、左サイドバーエリアの「最近の投稿」には、このページは表示されていません。

投稿記事公開状態の設定

  • 公開ボタンをクリックします。
  • 「公開してもよいですか?」と表示され3つの設定が並びます。
  • 「公開状態」をクリックすると「表示状態:公開」「公開:今すぐ」「提案:タグを追加」の3項目が表示されます。
  • 「表示状態」には「公開・非公開・パスワード保護」の3つの指定があります。
  • 「公開:今すぐ」には「時刻・日付・カレンダー」があります。
    未来の日時を指定して予約投稿、過去の日時を指定して投稿なども可能です。
ed023
  • 公開した後プレビューしてみましょう。左サイドバーエリアの「最近の投稿」にこのページも表示されました。
ed024

投稿記事の削除

  • 記事を削除をするには「投稿一覧」をクリックして、記事を「ゴミ箱に移動」します。
  • あわせて「クイック編集」も認識しましょう。
ed025-1
  • 削除したい記事のタイトルにマウスをのせるとサブメニューが表示されます。
  • 「ゴミ箱へ移動」をクリックすると、その記事は「ゴミ箱」タブへ移動します。「完全に削除する」をクリックすると本当に削除されます。
  • 復元」もできます。クリックすると「すべて」タブへ移動します。公開していた記事を「ゴミ箱から復元」すると「下書き」状態になりますので「公開」をクリックします。
ed025-2
  • クイック編集」は何かと便利です。いろいろお試しして実感してください。
  • 記事が多くなってくると「一括編集」も便利です。
ed025-3

管理画面からログアウト

  • 編集が終わりましたら必ず「ログアウト」してください。
  • ツールバーの右端の「編集者◆◆の会さん」(ここでは)にマウスをのせると「ログアウト」のメニューが表示されます。
ed026