JOURNAL

KAMATANI GRAPHIC DESIGN

3.WordPressの基礎と基本について ブロックツールバー

WordPressの基礎と基本について ブロックツールバー

「ブロックエディター 」なら、HTMLの知識がなくても、Webページでよく使用する書式が簡単に設定、変更できます。文章や画像を入力したら、後からブロックごとにスタイルを変更できます。

https://kamatanidesign.com/wordpress/340/

エディターの基本的な使用方法

ブロック単位で上下に移動させる

一番左にある、上下のマークのボタンでブロックを1つ上、または1つ下へと入れ替えることもできます。

これがブロック単位で構成されている便利な点ですので、覚えておいてください。

ブロックツールバーで編集する

ブロックをクリックすると、左上に色んなアイコンが出てくるのがわかります。他の章でも見たことあるものが「ブロックツールバー」です。指定するブロックの書式変更、文字列などを変更できます。

ブロックスタイルの変更

ブロックツールバーの左端をクリックすると

サブメニューが表示されて、

「見出し」「リスト」「引用」「グループ」「整形済みテキスト」「詩」などに、ブロックスタイルを切り替えることができます。

スタイル説明HTMLタグ
見出し文字サイズを大きくする<h2> <h3> <h4>など
リスト順番がないリスト、番号付きリストを表示する<ul> <li>
<ol> <li>
引用引用、、転載文であることを示す。
通常の本文と段落を区別する時に使用することもある。
<blockquote>
整形済みテキストあらかじめ字下げや改行などの整形が完了している段落を、
等幅フォントでそのまま表示する。
<pre>
詩形式的には「整形済み」と同じ。スタイルシートを使って、
文字サイズを大きく表示している。
<pre>
段落段落を表現する一般的な書式。前後に1行分の改行が実行される。<p>
はじめての最新WordPress入門より

文字位置の変更

ブロックの横幅内での位置(左寄せ、中央寄せ、右寄せ)を設定します。

書式HTMLタグ例
左寄せ<p style=”text-align: left”>
中央寄せ<p style=”text-align: center”>
右寄せ<p style=”text-align: right”>
はじめての最新WordPress入門より

文字スタイルの変更

書式HTMLタグ例
大文字<strong>
斜体<em>
リンク<a href=”WebページのURL”>
はじめての最新WordPress入門より

まとめ

HTMLの知識がなくても、ブロックツールバーのアイコンなどで視覚的にも書式変更時にも、とてもわかりやすいのが特徴です。

他にも色々ありますが、WordPressの基礎と基本についての1章〜4章を見れば、大体のことはできるようになったも同然です。

次はWoerPressでいよいよ、ブログのサイトをもっと見やすく形作って行く作業を説明していきます。

BACK TO JOURNAL