『初心者向け』グーテンテンベルク（JIN）の解説と使用方法
- グーテンベルク（byJIN）に興味のある方
- テーマJINを使用してブロック エディターを習いたい方
- グーテンベルグへの移行前に試したい方
グーテンベルクの概要
グーテンベルクとは、ブロックを組み合わせることで、記事を作っていきます。一つの文章の区切りをブロックと言います。
文章中で段落を付けると別のブロックになります。画像やグラフもブロック単位で作られます。
別れたブロックは、グループ化する事もできます。データ（文章、画像、ブラフなど）の移動もブロック毎におこないます。
移動範囲には、制限がありますので、遠く離れたブロックへの移動はコピペを使いましょう。
補足
WordPressで使用する『グーテンベルク』と『ブロック エディター』は同じものです。『クラッシック エディター』との切替が出来るエディターです。今回の説明記事ではグーテンベルクという文言に統一して書いています。
グーテンベルク：活版印刷技術を発明したヨハネス・グーテンベルクに敬意を評して名前を付けたエディターネームです。
グーテンベルク『ツールバー』の説明
下記画像がグーテンベルクの初期画面です。
、今回の記事では『ツールバー』に統一して表記します。
『ツールバー』に入っているアイコンは場面によって入れ替わります。使用中のアイコンが表示されたり、表示される順番も変わります。
下記『ツールバー』は初期画面の右端に表示されています。記事の全体の動きを掌ります。
下書き保存とは、文字通り下書きを保存するものですが、公開後のデーターも保存できます。プレビュー、公開は文字通り書いた記事の確認と公開です。
文字入力（文章入力）を始めると下記『ツールバー』に替わります。中央より右側が足されたアイコンです。
画像を扱うと下記画面に替わります。文字用アイコンから画像用アイコンに変わります。
ツールバー内のアイコン 簡易説明
ツールバー内アイコンの詳細説明
下記ツールバーは、文章を書く時に使うアイコン集です。①から順に説明します。
- 『白抜きWマーク』はサイトを離れる時に使います。保存されていない場合、未保存を知らせてくれます。
- 『白抜き+マーク』は右サイドバーを表示します。サイドバー内のアイコンをクリックすることでブロック内にそれぞれを追加することが出来ます。
- 鉛筆マークは、編集や選択の切り替えを行います。
- 左曲矢印は戻る。右曲矢印は進める。ことができます。
- ⓘは、文字数、単語数、見出し数、段落数、ブロック数を表示します。
- 三本線は、アウトラインを表します。
文章の作成方法
文中をクリックすることにより文章を書くことが出来ます。新たな文章を書く場合や段落を
変えて書く場合に左記の黒アイコンが現れます。
このアイコンをクリックすることで見出しや段落などのアイコンが表示されます。
文章や画像に良く使うアイコン6種類が表示され、アイコン一覧も表示できます。
『ツールバー』右側にある『歯車マーク』をクリックして置くことでブロック用のサイドバーが表示されます。（ホント設定、色設定、テキスト設定が出来ます）
タイトルと文章又は文章と画像の間にスペースを入れることが良くありますが、+マークアイコンをクリックしてスペーサーを選んでスペーサーを入れることが出来ます。
スペーサーアイコンをクリックするとブルーの枠が現れ、スペースを確保してくれます。スペースの幅は下辺の線をドラックして上下すると大きさを変えることが出来ます。（この画像がスペーサーよる画像です）
画像の表示方法
画像を表示する方法を説明します。
左記の『白抜き+マーク』をクリックして画像アイコンを選ぶと下記のような画面が現れます。『アップロード』『画像を選択』『URLから挿入』から選べます。通常は『アップロード』又は『メディアライブラリー』より選びます。
画像の入力方法：『アップロード』はパソコン内にある画像を張り付けることが出来ます。『メディアライブラリー』ワードプレス内の保管場所から選んで画像を貼り付けます。以下はそれぞれのサイトより選んだ画像を貼り付けます。
画像の加工は、右のサイドバー内で画像の加工ができます。（画像のあるブロックを選んでおいて最上部にある歯車マークをクリックすると加工用アイコンが現れます。）
スタイルやサイズなどが変更できます。またサイズは画像の端を移動させて変更することもできます。
文中の『+ボタン』は使用頻度の高いアイコン又は（今まで使用したアイコン）が表示されます。
文章用ツールバー（文字入力用アイコン集）
上記ツールバー上にある①『ꟼ』文字をクリックしたとき現れるリストです。順に説明します。
- ②の上下マークはブロックを上下に移動させます。
- ③のマークは『テキスト左寄せ』『テキスト中央寄せ』『テキスト右寄せ』をすることが出来ます。
- ④のBマークは太文字にします。（最初に太文字マークをクリックして置いて文字を入力する方法と書き終わった文章を太文字にする方法があります）
- ⑤の/マークは斜め文字（イタリック）にします。
- ⑥のマークにリンクを貼ることが出来ます。
- ⑦は新たなアイコン一覧が表示されます。
- ⑧詳細設定が表示されます。
- ㋐設定を非表示 Ctrl+Shift+,
- ㋑コピー（文章や画像など全てがコピーする）
- ㋒複製（文章や画像など全てがコピーする）Ctrl+Shift+D
- ㋓前に挿入（現在選ばれているブロックの前に挿入する）Ctrl+Alt+T
- ㋔後に挿入（現在選ばれているブロックの後に挿入する）Ctrl+Alt+Y
- ㋕移動
- ㋖HTMLとして編集
- ㋗再利用ブロックに追加
- ㋘ブロックを削除 Shift+Alt+Z
『ꟼ』マークをクリックしたとき現れるリストです。順に説明します。
⑨見出し作成
見出しを作成する場合：リストの最上部『見出し』をクリックすると下記のようなH1～H6（見出し1～見出し6）が表示されます。これを選択することで見出しが出来ます。
| H1 | H2 | H3 | H4 | H5 | H6 |
⑩グループ作成
次に『グループ』について：別々のブロックを1つのブロックにまとめます。別々のブロックを選んで（アクティブにして）おいてグループアイコンをクリックします。
下記のようなグループが出来ます。
| 私が国家公務員時代に住んだことのある東海北陸地区は下記の5都市です。
・愛知県名古屋市 何処の都市も特徴があり良い都市です。 |
⑪カラム作成
次に『カラム』について：『カラム』には2つの作成方法があります。1つは上記の⑪をクリックしてください。
すると画面の右端（サイドバー）に下記のようなボタンが現れます。カラムと書いたボタンを右にスライドすることによってカラム数を設定できます。
もう一つは、文章内に表示される『+ボタン』内にカラムボタンがあります。そこの『カラム』をクリックすると下記のような選択画面が現れます。
文中の『+ボタン』は使用頻度の高いアイコン又は（今まで使用したアイコン）が表示されます。
上記表のカラムの数を選択することで下記のようなカラムが作成できます。下方（愛知県、岐阜県、三重県）は実際の使用例です。
カラムを消去方法
消去したいカラムの上下左右の線の近くで、マウスが矢印の形状（手の形状ではない）でクリックすると赤枠のようにカラムを四角で囲んだ状態となります。これで①→②で消去できます。（又はDel、Back spaceでも消去可能です）
⑫『リスト』作成方法
リストボタンを押すことでリスト化することが出来ます。リスト化したい文章全てを選択（アクティブに）して、リストアイコンをクリックします。
- 愛知県名古屋市
- 岐阜県美濃市
- 三重県津市
- 静岡県沼津市
- 石川県金沢市
並べる文章は、ポッチ（・・・・・）と数字（①②③④⑤）にすることができます。
⑭引用を作成
“引用マークをクリックすることで引用表示されます。下記のように“マークで始まりと終わりが表示されます。また画面の色も変化します。
引用とは
［名］(スル)人の言葉や文章を、自分の話や文の中に引いて用いること。
Weblio辞書より
⑮整形済みテキスト
整形済みブロックには段落ブロックやソースコードブロックと似ている点がたくさんあります。整形ブロックはこの2つを統合したものと考えてください。
WordPress.com
⑯プルクオート
下記のような表示になります。『デフォルト』と『単色』があります。プルクオートとは引用と同じような使い方をしますが、引用より少し強い言い方をしたい場合に使います。
⑦のアイコンをクリックすると、下記のようなリストが現れます。①から⑩まで説明します。
①インラインコード
インラインコードとは、プログラミング言語において、サブルーチンを呼び出すためのコードの代わりに、直接コード内に記述された、サブルーチンの内容のことである。
ZDNet Japanより
③マーカー１、④マーカー２の設定
マーカー１とマーカー２とは 文字の下に色付きの線を入れることで、強調する線を言います。線の色や太さを独自で選ぶことが出来ます。マーカーは2種類、太さは3種類あります。
※現時点ではマーカーの太さの変更はグーテンベルクではできません。クラシックエディターに戻って設定する必要があります。
クラシックエディターでの設定方法
『ダッシュボード』→『外観』→『カスタマイズ』→『記事のデザイン設定』より細い、普通、太いより選べます。（途中で設定を変更すると以前に書いた記事の設定も変わります）
⑤上付き、⑥下付き設定方法
99ｍTc⇒99ｍTc，H2O⇒H20，X2⇒X2
上記の文字が上付きと下付きです。例として99mTc（テクネチウム）を使用します。上付き文字にしたい99ｍを選択（アクティブに）して上付きアイコンをクリックすることによって上付き文字が出来ます。下付き文字も同様にします。
⑦下線の設定方法
下線を入れたい文言を書き、その部分を選択（アクティブに）して、『下線』ボタンをクリックすることで下線を入れることが出来ます。
静岡県沼津市
⑨取り消し線作成方法
取り消し線を付けたい部分を選択（アクティブに）して、『取り消し線』ボタンをクリックすると下記のような取消文が出来ます。
静岡県美濃市熱田区
⑩文字色
文章を書いたのち、文字色を変更したい文字を選択（アクティブに）して『文字色』ボタンと色を決めてクリックします。
愛知県名古屋市熱田区
ツールバー内の『∨』（リッチなテキスト制御）をクリックして下部にある『A 文字色』をクリックすると下記の選択画面が現れます。
色部分をクリックすることで、文字色を変更できます。好みの色がない場合は、カスタムカラーをクリックして、好みの色を選ぶことが出来ます。
画像用アイコンの説明
下記が画像用『ツールバー』です。画像を扱うと下記のツールバーが現れます。
各アイコンの説明を行います。
- ①カラム、グループ、スライドショーなど(①の画像アイコンと上記で説明した+ボタン内の画像アイコンは同じ形をしていますが機能は違います）
- ②画像の上下移動
- ③右寄せ、中央寄せ、左寄せ
- ④リンクを編集
- ⑤切り抜き
- ⑥置換
- ⑦詳細設定
①のアイコンをクリックしてすると画像の下のリストが現れます。
⑪と⑩のカラムとグループは上記（説明済み）と同じ機能です。
- ⑪はスライドショウ—
- ⑫はカバー
- ⑬はファイル
- ⑭はタイルキャラリー
- ⑮はギャラリー
- ⑯はメディアと文章
- ⑰は貼り付け画像のスタイル
ブロックの追加について
『ツールバー』にあるアイコンや文中にあるアイコンをクリックするとブロックの追加が出来ます。文章、画像に関係なくブロック一覧が現れます。
左記アイコンをクリックするとアイコン一覧が表示されます。最上部に検索窓が設置されていますが、スクロールして探すことが出来ます。
左記アイコンは、文中に表示されます。（文章の記載途中では表示されず、段落を変更する場合などに表示されます）
このアイコンをクリックすると文章ブロック、画像ブロックに関係なく良く使用されるアイコン6種類が表示されます。
アイコンには、多くのものがあり、良く使用するアイコンから時々使用するアイコンまでいろいろありますが、頻繁に使用するアイコンは頻用一覧に登録されます。
（6種類のみの頻用一覧であるため使用しないと頻用一覧から消えてしまいます）
下記画面がJINの固有のブロックです。
JINクラッシック エディターで使用しているアイコンが並んでいます。グーテンベルクで使用出来るボックスやボタンなどの数は少なく11種類です。
最後に
テーマJIN(ジン)はグーテンベルグに対応しているテーマですが、JINクラッシック エディターにはまだまだ及びません。
しかし多く機能を有しているため、早々に記載の習慣を付ける必要があります。
どのテーマでもグーテンベルグをベースに作成されているので、使用方法は多くの共通点があります。
一つのテーマを勉強すれば、多くのテーマのグーテンベルグが使用できます。
あわせて読みたい2題
放射線の専門家（診療放射線技師、第一種放射線取扱主任者、作業環境測定士）として放射線関係の記事（医療を含む）の投稿とブログ（サーバー取得、WP、JINなどの設定）を初心者の私が備忘録として今から始める超初心者（特に定年を迎えた方）に伝えたい。
