新エディターの使い方が分からない！
今回はWordPressの基本操作を確認しましょう。
いざブログを始めて苦労するのはWordPressのエディター操作ではありませんか。
デザインで個性を出そうと思っても、最初は困難の連続ですよね。
今回は初心者ブロガーさんに最低限やって欲しい基本操作をご紹介。
ご自分のサイトに取り入れるかの判断はお任せします。
装飾ルールを決めておくと作業効率も上がるのでおすすめ。
わたしは基本装飾を行った方が読者へスムーズに伝わると思っています。
さっそくブログ初心者向けてグーテンベルグの使い方を解説します。
※Cocoonテーマで作成しているため、画像資料は全てCocoon画面なのでご注意ください。
- ワードプレス新エディターの基本操作
- 初心者におすすめ基本操作
記事の信頼性は以下の通りです。
- WEBライターとして新規サイトの立ち上げ経験あり
- WordPressで日々サイト構築の注文を受ける
ステップ①：ワードプレスの基本操作をチェック
初歩の基本操作からスタートします。
ご存知の方は次のステップへどうぞ。
記事の新規作成
- 左側のサイドメニューにある「投稿」→「新規記事」をクリックします
タイトルの入力方法
- 赤枠にタイトルを入力します
- ALL in One SEO Packのタイトルも入力します
※一番下へスクロールしてください。
ワードプレスでおすすめプラグインの１つ。
SEO向けのサイトマップを自動生成してくれます。
※詳細は別記事で語りますね。
見出しの作り方
ブロガーさんによると思いますが、わたしは先に見出しを入力します。
Word形式で下書きを作成し、一気にワードプレスへ入力するタイプなので。
おこ丸の作成シナリオ例は以下の通りです。
＜タイトル＞〇〇
＜リード文＞
▼H2：大見出し
●H3：中見出し
・H4：小見出し
▼H2：大見出し
●H3：中見出し
・H4：小見出し
▼H2：大見出し
●H3：中見出し
・H4：小見出し
▼H2：まとめ
テーマやスキン設定によって、見出しの仕上がりは変わります！
仕上がりの設定や変更方法は別の記事で詳しく語りますね。
H2：大見出し→必ず入力する
- ブロックの左の「＋」→「一般ブロック」→「見出し」と選択します
- プルダウンして「H2」を選択します
大見出しは目次に表示されるので必ず入力します！
読者に興味を持ってもらえるような分かりやすいキャッチを心がけましょう。
H3：中見出し→ほぼ入力する
- ブロックの左の「＋」→「一般ブロック」→「見出し」と選択します
- プルダウンして「H3」を選択します
H2大見出しの後に続く見出しのこと。
わりと中見出しが最小単位の文章になることが多いと思います。
H4：小見出し→必要に応じて入力する
ブロックの左の「＋」→→「一般ブロック」「見出し」→「H4」と選択します
H3中見出しの後に続く見出しのこと。
操作手順や特徴ポイントなど、中見出しの内容を細分化するときに使用します。
本文の入力方法
- ブロックの左の「＋」→「一般ブロック」→「段落」と選択します
スマホやパソコン画面で読むことを意識して入力しましょう。
結論を短文で書き、2~3文で改行を心がけると良いと思います。
詳しくはライティング基礎講座①を読んでください。
画像の設定方法
- ブロックの左の「＋」→「一般ブロック」→「画像」と選択します
画像の選択方法は2つあり、違いは以下の通りです。
初心者ブロガーだと初めての画像はアップロードと覚えておけば問題ないと思います。
- アップロード：パソコン本体に保存した画像を設定できる
- メディアライブラリ：ワードプレスに保存済み画像を設定できる
アイキャッチ画像の設定方法
アイキャッチ画像はブログ記事の顔です。
設定タイミングはいつでも良いですが、公開する前にアイキャッチ画像を設定します。
右側のサイドメニューにある「アイキャッチ画像を設定」をクリックします。
画像の設定と同じ流れで、対象画像を選択してください。
アイキャッチ画像の重要性を知っておく
アイキャッチ画像の必要性を語ります。
言葉だけだと分かりにくいので、それぞれの表示例をご覧ください。
- ブログの表示例
- サイドメニューの表示例
- Twitterで表示されるページ例
ステップ②：ワードプレスの装飾方法をチェック
新エディターの使い方に慣れたところで、次のステップに挑戦しましょう。
リスト表示の仕方
- ブロックの左の「＋」→「一般ブロック」→「リスト」と選択します
表の挿入方法
- ブロックの左の「＋」→「フォーマット」→「表」と選択します
文字の色・太さの変更方法
- ツールバーの「Aマーク」から文字色と太さを変更できます
- 対象範囲をマウスで選択し、ツールバーの「B」をクリック
太文字に編集できます。
外部リンクの設定方法
対象範囲をマウスで選択し、ツールバーのリンクマークをクリックします
サイト名やサービス名を選択するのがおすすめ。
外部リンクとは自身のサイト以外のページをリンクすること。
公式サイトやブロガー仲間のサイトなどですね。
内部リンクの設定方法【Cocoonの場合】
- ブロックの左の「＋」→「段落」→「内部リンクのURL」を入力します
Cocoonテーマですと内部リンクがアイキャッチ画像付きで紹介OK！
カンタンに見栄えのする内部リンクを挿入できますよ。
内部リンクとは自身のサイトで公開中のページをリンクすること。
関連ページを紹介することで、サイト内の周遊率が高まります。
基本的な装飾ルールを決めると作業効率が上がる
入力スタイルを決めておくと作業スピードがアップします。
ご自分でよく書く内容を想像してルールを決めると良いでしょう。
ブロックを活用して見やすいレイアウトに【Cocoonの場合】
テーマによって簡単にプロっぽく装飾できます。
今回はCocoonテーマのやり方をご紹介。
リストや参考サイトなどを入力するときは、ブロックで装飾すると見やすいです。
おすすめのパターンは以下の通りです。
- 【冒頭】記事で解決できること
- 【本文】強調したい解説
- 【紹介】参考サイトのリンク
- 【最後】まとめのリスト
カラー装飾は過度にやり過ぎない
文字色は黒・赤・青の最大３色まで！
ブロックの枠や背景は、サイト全体イメージに合わせるのが良いと思います。
色とりどりだと読者としては何が重要か混乱してしまう原因に。
読みやすい記事のために、過度の装飾は控えておきましょう。
初心者ブロガー向けで記事の装飾ルール５選をまとめてあります。
Axia Clipのルールをカンタンにご紹介
試行錯誤しているのですが、わたしは以下のルールで記事を作成しています。
サイトの基本カラーは３色
プロフィールのグラデーションを中心に色味を合わせています。
それぞれの色味によって印象が変わるので、サイトのイメージを表現する１つですね。
- 【キーカラ―】オレンジ：親しみやすさ
- 【サブカラー】イエロー：知性、好奇心
- 【アクセント】ピンク ：優しさ
Cocoonのブロック活用例
記事の装飾はご自分のセンスとコンセプトで決めて良いと思います。
「どうして良いか分からないよ？」といった方向けにAxia Clipの活用例をご紹介。
わたしの基本ルールを活用して、自分スタイルを探してみてはいかがでしょうか。
冒頭のスタイル→見出しボックス使用
「プラスマーク」→「Cocoon汎用ブロック」→「見出しBOX」呼び出しています。
「大学帽アイコン」で統一。
リスト表示→ラベルボックス使用
「プラスマーク」→「Cocoon汎用ブロック」→「ラベルボックス」で設定。
ブロックの枠色やアイコンをルール化し、視覚的な情報を増やしています。
最後のまとめ→見出しボックス使用
「プラスマーク」→「Cocoon汎用ブロック」→「見出しBOX」呼び出しています。
まとめは「星アイコン」で設定。
まとめ：グーテンベルクで快適なブログライフを送ろう
今回はワードプレスの新エディターの使い方を紹介しました。
「新エディターは難しい」、「クラシックエディターで耐えています」といったブロガーさんのお話を聞きます。
わたしは両方とも使ったことがありますが、新エディター「グーテンベルク」は直感的に操作できるので気に入っています。
デザインにこだわるとデザイン沼に落ちるので、まずはブログを積み上げることに集中しましょうね。
- グーテンベルクは直感操作
- 基本的な装飾ルールを決めよう
- 初心者はデザイン沼に落ちない
- いろいろ操作して自分スタイルを決める
装飾の凝りすぎに注意です！
まずは７割の仕上がりで公開しましょう。
コメント