Gutenbergコンテンツ作成方法

このエントリーをはてなブックマークに追加

ここでは、長期収益を生む独自サイトを構築した後に、必要となりそうな、 「Gutenbergでのコンテンツの作り方」を画面遷移とともにわかりやすく説明します。

※最後に長期収益を生むための王道のSEO対策で、一番大事な点にも少し触れました。

まずは、WordPress5.0で革命的な進化を遂げたエディター(コンテンツ作成ソフト)である「Gutenberg」について説明しましょう。

Gutenbergとは

出典元:Wikipedia

WordPress5.0の新エディターである「Gutenberg」は、600年程前に活版印刷技術を発明したと言われるヨハネス・グーテンベルグにちなんで名づけられており、ブロックという新しい発想により、ブログ等のコンテンツ作成が革命的に簡単になりました。

※WordPress5.0は 2018年12月にリリースされた新バージョンです。

ブロックとは、ホームページを構成する色々なパーツ1つ1つのことで、簡単に順番を変えたり、組み合わせたり、コピーして再利用することができます。

これにより、コンテンツのレイアウト変更や、過去に作ったパーツで新しいページを作ることも、各段に簡単になりました。

ヨハネス・グーテンベルグは、1つ1つの文字盤を組み合わせる活版印刷技術により、紙での印刷物を普及させて世界に大きな影響を与えました。

これと同じように、WordPress5.0(Gutenberg)も、再利用可能なブロックを組み合わせることでWebコンテンツ制作を革命的にスムーズにして、誰もが簡単にサイト構築できる世界を目指しているように私は感じます。

※ただし、既にWordPress4.X.Xで制作が終わっているコンテンツについては、当然ながらブロックという概念がないので、エディターを変えてしまうと今まで細かいカスタマイズをしてきた所が動かなくなる危険がありますので、あくまでこれからサイト構築する事を前提に読んでくださいね。また、新しいブロックは改行扱いになる事も、4.X.X経験者は注意してくださいね。

Gutenbergコンテンツ作成

では、論より証拠、間違ってもいいので新しい世界に踏み出しましょう。

①上のWordPressの画面で、左側メニューの「固定ページ」⇒「新規追加」を選びましょう。

※今回はあくまでブロックの体験なので、皆様の大事なフロントページ等ではなく、他に影響を与えないようにサンプルページを作りますね。

②上の画面のように固定ページを作る画面が出てきます。

「タイトルを追加」と表示されている所になんでもいいのでタイトルらしい文字を入れてください。

※今はコンテンツの中身の確認でなく、最新のページ作成技術を理解するための検証なので、一番大事なのは、迷わないでよいことに迷って時間をロスしないことです。

※自分向けサンプルなので「私がブロガーとなるために」と入れました。

③次に、タイトルの下の行あたりをクリックしてください。

すると、今まで見たこともないような、+に〇をつけたブロックボタンが出てきました。

④では、この+に〇をつけたボタンを押してみましょう。

すると、ブロックボタンの下に幾つかのボタンが出てきました。

ここから制作スピードを上げるために、説明を省いて一本道で簡潔に書きますね。

⑤今回はTマーク(見出し)を選んで、出てきた入力欄に好きな見出しを入れてください。

私は見出しに「1.独自サイトを構築してブログを立ち上げる」と入力しました。

<参考:読み飛ばし可>

 ※上に表示されているH2 H3 H4は見出しの大きさ

 ※Bは太字、Iは斜め、∞が斜めになったようなマークはハイパーリンク

⑥次に、作った見出しブロックの最後文字の後ろで改行してみてください。

またブロックボタンが出てきましたね。この繰り返しです。

⑦今度は直接、文章を入れてみましょう。

※私は「 これは一番大事ですね。詳細は「一本道のアフィリサイト構築」サイトを読んで実践するとして、1時間程度でチャチャっと作っちゃおう。その前に、途中中断が入るのは嫌だから、最初にコーヒーか紅茶を煎れて、トイレにも行っておこうかな。そうそう、ややこしい作業の途中でなると嫌だから携帯電話も切っておこうか・・・ 」と入力しました。

※サンプルなので短くてもOKです。ちなみに、改行するたびに別のブロックとして認識して自動で分裂しますが最初は気にせずに。

ついでに、上の画面のように、重要なところを範囲指定して、上の「B」のマークを押せば、簡単に文字を強調できます。

では、また最終文字の後ろで改行して、次のブロックに行きましょう。

⑧次は画像を入れてみましょう。

 また、ブロックボタンをおして、「画像」を選びましょう。

上の画面まで来たら、「アップロード」を押して、自分のパソコンから何でもいいので画像を選んでください。

※私はTOPページで使ったコーヒーの画像を選びました。

お好みで、上のセンタリングのボタン等を押して、画像を真ん中に持っていくこともできます。

⑨さらに、このコーヒーの画像は最後に再利用したいので、再利用登録しておきましょう。コーヒーの画像ブロックの上段にある「縦の三つの点」を押してください。

すると、また吹き出しの中にやりたいアクションが現れるので、下から2つ目の「再利用ブロックに追加」を押してください。

再利用ブロックには名前を付けられるので、「コーヒーの画像」としました。みなさんはお好きな名前を付けて、右の「保存」を押してください。

⑨では、次は復習編として、今までの作業をもう一度、違う内容で繰り返して、「見出し」「文章」「画像」のセットを作ってみてください。

※やり方を忘れたら、スクロールで戻ればOKです。

※私がつくった記事は手順説明に不要なので最後に紹介しますね。

⑩ここまで特に難しくなくページができたと思いますが、これからがWordPress5.0(Gutenberg)の本領発揮です。象徴的な技を2つ紹介しましょう。

⑪まず1つ目は、先ほど保存したブロックの再利用です。

・最終行で改行して新しいブロックボタン(+に〇を付けたボタン)を押して出た吹き出しを一番下までスクロールして、「再利用可能」を押す。

ここで、前に作ったブロックの名前を選ぶことで、簡単に前のブロックの複製を挿入することができます。

※私は最後にもう一度、コーヒーの画像を挿入して、「お疲れさまでした。私。」と文字を入力しました。

このブロックが強力な点は、単なるコピーではなく、コピー元を編集すると、コピーを貼った所がすべて同じように勝手に訂正してくれる点です。

⑫もう1つの技は、作ったブロックの位置を自由に上下させることで、簡単にレイアウトを変更できる点です。

試しに、動かしたいブロックにマウスカーソルを当てると、ブロックの左側に上下に動かすバーが出てきます。

上の矢印「∧」を押せば選択しているブロックが1つ上のブロックと入れ替わり、下の矢印「∨」を押せば1つ下のブロックと入れ替わります。

これはすぐに試せるので、上にあげたり下げたりして直感的なレイアウト変更のイメージを持ってください。

ちなみに、今回のサンプルページは以下の通りです。(読み飛ばし可)

サンプルで作ったページ

※ここでは、基本操作の習得というより、WordPress5.0の世界の体感が目的なので、他の詳細な機能の説明は他の数ある機能説明サイトに譲ることにしましょう。

基本的なSEO対策の心得

アフィリエイトサイトも構築し、Gutenbergコンテンツの作り方も少しわかったので、SEO(検索エンジン最適化)対策にも少しだけ触れておきます。

※これを本格的にするには膨大な時間と根気、運、費用がかかり、深みにはまると、本業のブログコンテンツメンテナンスより時間がかかってしまいます。

詳細は後述しますが、大事な点だけ書いておくと・・・

①閲覧者の事を考えてベストを尽くすことが一番大事。

※これは大手のグーグル等も一番大事な事として公開しているようです。

・タイトルが内容と合っているか等、閲覧者に誤解を与えていないか。

・目次やサイトマップで全コンテンツに2クリック以内で行けるなど、見易さは問題ないか。

②有益なコンテンツの掲載

 これはもう、あなたのセンスに全てを賭けるしかありません。

③閲覧スピードの速さ(見やすいと感じる要素の1つ)

 ・超高速ヘテムルサーバを導入したことでかなり高評価でしょう。

 ・利用する画像は視認性が保たれていれば、できるだけ軽くしましょう。

④各種の設定の不備の解消

 ・独自サイト構築の自動化により、人が作るより不備は少ない。

⑤サイトとしての信頼性

 ・独自ドメインの取得(しかも.com)による社会的信頼性の認定

 ・利用しているレンタルサーバ、独自ドメイン発行会社が大手会社

  ※やはり大手は些細な項目もきめ細やかな対応が期待できます。

  (例)WHOIS情報の適正公開、SSL化、サイトの継続性など


上記の③④⑤は構築の段階である程度対応を図ったので、①②を継続して改善していくことが大切ですね。

専門的には、Google Analytics等の分析ツールで自分のサイトの弱みを把握して、日々改善に努めていくことになると思います。

ただし、検索エンジンの仕様も日々変わるので、いたちごっこのように、細かいテクニックで改善するよりは、自分のサイトの閲覧者の気持ちになって本気で少しでも不備がないか考え抜いて継続的に改善し続けることが一番大事かなと私は思っています。

SEOの詳細は以下のページにまとめていますので、Gutenbergで作ったコンテンツ(WEBページ)が10ページを超えてきた頃、ページ制作の気分転換に作ったコンテンツが検索エンジンにどのように評価されているか遊びがてら覗いてください。

SEOの考え方(必読)

概要だけですが、Gutenbergコンテンツ制作とSEOについても説明しましたので、まずはあなたが作りたいページを作りたいように作ってみましょう。

興味は全てのスキル・能力を超えます。

まずは、あらゆる制約を取り除き、ページを作る楽しさをしっかり感じてください。

※サイトを構築し始める色々な方と話をしましたが、やはりサイトを継続して作って成功する方は、「興味を持って楽しんで取り組む」という共通点があります。


そして、ある程度ページ制作するリズムがついてきたら、以下のページでプラグインという追加プログラムを使って、機能改善を図ったり、

Gutenbergの初期設定プラグイン

サイトの外観を好きなデザインに変えてみたり、

Gutenbergで動作する外観テーマ

各ページのタイトルを閲覧されやすいように変更してみましょう。

Gutenbergのタイトル設定


投稿者:

よしくん

楽観主義者で明るく前向きな性格。挑戦するのが好きで、WordPress 5.0も、早くからに取り入れました。(^-^)

コメントを残す