(WordPress超初心者向け)3日で簡単ブログサイトを作成しよう(投稿編)(2日目)【Gutenberg】

ブログ
ぱんはげ

外枠(外観やサイトの設定)ができてしまえば後は投稿です。最低限知っておけば良いことと、私自身もこれから使って行こうかな、と思う機能をメモしておきます。

これだけ知っておけば投稿できます

文章の入力

タイトル、文章、見出し

投稿画面に「タイトルを追加」や「文章を入力、または/でブロックを選択」と表示されているので、促されるままに文章を書きます。見出しにしたい行には、テキストのすぐ上に表示されるメニューアイコン から「見出し」を選べはOK。「見出し」は目次になります。

画像

画像は画像編集ソフトで選択した範囲をコピー&ペーストすれば貼れますし、エクスプローラー等から画像のファイルをドラッグ&ドロップしても貼れます。(いちいちメディアライブラリへアップロードしなくても裏でやってくれています。直観的!)

リンク

リンクさせたい文字を選択して「リンク」メニューを選べばURLの入力を促されます。選択した文字が他サイトとのリンクになります。

入力中の文章の保存

右上の「下書き保存」メニューを選択すれば保存されます。「プレビュー」を選択すればWebブラウザで表示したイメージを参照できます。

投稿(文章の公開)

右サイドメニューの「文書」-「アイキャッチ画像」を選択します

WordPressがアイキャッチ画像を使ってそれっぽく整形してホームページに表示してくれるので、ぱっと見よく見るブログサイトになります。

右サイドメニューの「文書」-「パーマリンク」の「URLスラッグ」を入力します

公開時のURLになるので、投稿する内容を表す英単語等にします。
ちなみにこのページは”howtoedit”としました。

右サイドメニューの「文書」-「カテゴリー」を入力します

内容に合うカテゴリーがなければ「新規カテゴリーを追加」で追加します。ちなみにこのページは”ブログ”としました。

公開前の最終チェックをします

右サイドメニューの「文書」-「公開状態」を「非公開」として右上の「更新」メニューを選択します。

管理者でログインした端末にのみ公開されるので、PC以外のスマホやタブレットなどで、実際のURLを入力してどのように表示されているか確認できます。

公開します

右サイドメニューの「文書」-「公開状態」を「公開」にします

これで投稿できました。投稿のデザインはサッパリしていますが、無料ブログサイトの域には十分達していると思います。あとは内容で勝負ですよね!?面白い内容でどんどん投稿してください。

でもせっかくWordPressを使っているんだから、もう少し凝ったデザインも取り入れたいですよね。以下には、私が覚えたこと、これから使ってみようかな、と思っている機能をメモします。

ちょっとだけレベルアップした投稿ができます

以下は私もまだ覚えたばかり、これから使ってみようと思う機能です。ちなみに、今のWordPressの投稿画面(エディター)はGutenbergと言うそうで、以下の機能はいずれもGutenberg前提で記載しています。

以前の旧エディターはTinyMCE(Classic Editor)と言うそうで、ネットにはたくさんの情報がありますが、最初に見たときは「自分のと違う」と混乱しました。

何も指定しないと「一般ブロック」の「段落」

投稿画面をクリックするとカーソルが出てきて文字を入力できます。この文字が入力されている部分は「一般ブロック」の「段落」と呼ばれます。まさにこの文章は「一般ブロック」の「段落」に書いています。

リターンキーを押すと改行されますが、随分行間が空きますよね?これはリターンキーで新たな一般ブロックの「段落」が追加されるからなんです。ブロックが分かれると、間が空くんですね。当初はこれを知らず、行間が空きまくりの投稿をしていました。

では、ブロックを分けずにどうやって改行するのか?
SHIFT + 改行(SHIFTキーを押しながらリターンキー
です。

一般ブロックの「段落」にも様々なメニューアイコンが表示されるので、「文字」アイコンで青太字を指定したり、赤色マーカーを選んだり、バッジを選んだり、などができます。

文字の大きさは右サイドメニューの「ブロック」-「テキスト設定」の「プリセットサイズ」で設定します。ブロック全体のサイズが変わります。この文章には「大」を指定しています。

ワープロソフトのように文中の一部の文字だけサイズ変更するにはプラグインやCSSの変更が必要なようです。あまり使わないので、覚えた時にメモします。

「段落」以外のブロックは、画面左上もしくは場面内に表示される「⊕」アイコンを押すことで指定できます。たくさんあるのでスクロールして探してください。

以下に一般ブロック「段落」以外の、使えそうなコンテンツをメモしていきます。

(一般ブロック)画像

前述の「これだけ知っておけば投稿できます」ではコピー&ペーストで簡単に貼り付けられることを書きました。が、これだけでは画像をクリックやタップしても何も反応しません。

画像ブロックのメニューアイコンにある「リンクを挿入」で「メディアファイル」を選んでおくと、画像をタップするとオリジナルの画像が表示されるようになります。よく見かける動きですよね。

もちろん、リンクにURLを設定すると画像をタップした時にそのURLに飛びます。

以下の画像はリンクに「メディアファイル」を指定しています。

タップするとオリジナルの画像が開きます

(レイアウト要素)タイルギャラリー

「画像」と同じように使えます。複数画像を掲載する時にいいですね。リンク先は右側のサイドメニュー「ブロック」-「タイルギャラリー設定」の-「リンク先」に指定します。”メディアファイル”と設定すると、facebookのようなイメージになります。

(フォーマット)整形済みテキスト

整形済みテキストはブラウザの幅を狭めてもレイアウトが崩れません。横スクロールして改行位置が保たれます。

(この枠内が整形済テキストです。改行位置が維持されてレイアウトが崩れません。) 
 ※紹介されていたが使わなかったプラグイン
 ・Rich Table of Contents … Cocoonに機能あり
 ・Rinker … Amazonアソシエイトのアカウントが必要。保留。
 ・WP Super Cache … レスポンスは悪くないので様子見。
 ・Speech bubble … Cocoonに機能あり
 ・Lazy Load … 「使用中の WordPress バージョンで未検証」
  だったため代わりに後述の”a3 Lazy Loadを使用”

(Cocoonブロック)タブボックス、他

この文章は(Cocoonブロック)タブボックスに書いています。

右サイドメニュー「ブロック」-「スタイル設定」の「ラベル」を選択します。既定値は「チェック」になっていてタブに「CHECK」と表示されます。

このタブボックスの「ラベル」は「メモ」を選択しました。

ぱんはげ
ぱんはげ

Cocoonブロックには他にも「吹き出し」、「白抜きボックス」、「付箋風ボックス」など、使えそうなブロックがたくさんあるので試してみてね。ちなみにこれは「吹き出し」ブロック。簡単に使えたよ。

だるま犬
だるま犬

「吹き出し」ブロックには右サイドメニュー「ブロック」-「スタイル設定」に「人物位置」を指定できるのさ。ぼくは”右”を指定しているよ。

(レイアウト要素)メディアと文章

これは何でしょう?

(レイアウト要素)「メディアと文章」ブロックを使っています。

畑だよ

「リンクを挿入」で”メディアファイル”を指定しています。

文中への画像の差し込み(Inline image)

一般ブロックの「段落」に探していた機能がありました。文中に画像を差し込む「Inline image」です。「よりリッチなテキスト制御」メニューに隠れていました。

段落に書いた文章中に画像を差し込みたい場合、「Inline Image」メニューを選べばこのように文中に画像を差し込むことができます。が差し込んだ画像です。※「見出し」に画像を差し込んでも表示されないようです。

操作を説明する文章を書くときに使いますよね。特に文字でどう表現して良いか分からないメニューとかに。アイコンってどう表現するのが正解なんでしょう。Pの反対みたいなアイコン?

見出しへのリンク(アンカーリンク)

前述の「リンク」では他サイトへリンクする方法を紹介しました。もちろん、自サイトの他ページのURLを指定すれば他ページにもリンクできます。でも、これだとリンク先の先頭が必ず表示されますよね。でも、ページ内の特定の位置にリンクさせたいことってありませんか?見出しに目印(アンカー)を埋め込むことで、アンカーにリンクすることができるんです。

アンカーの設定手順

①アンカーを埋め込みたい見出しにカーソルを当てると、右サイドメニュー「ブロック」-「高度な設定」に「HTMLアンカー」という欄が表示される。

②「HTMLアンカー」に任意の文字を設定する。

ちなみに前述に「リンク」見出しには”a01”という任意の文字(アンカー)を埋め込んでいます。

アンカーリンク設定手順(同一ページ)

③リンクさせたい文字を選択し、”リンク”アイコンを選択すると、リンク先の入力を促されるので、”#”を先頭に付けアンカー文字列を指定する。”a01″というアンカーにリンクさせたい場合は”#a01″と指定する。

ちなみに、この「リンク」には”#a01″と指定しています。(””は不要です。)

アンカーリンク設定手順(他ページ)

④リンクさせたい他ページの見出しに①②の手順でアンカーを設定しておく。

ちなみにpanhage.com内の「非UEFIレガシーBIOSマザーボードにGTX1070Tiを付けてみた」(https://www.panhage.com/gtx1070ti/)の「構成」という見出しには”a01″というアンカーを設定しています。

⑤リンクさせたい文字を選択し、”リンク”アイコンを選択すると、リンク先の入力を促されるので、他ページのURL+”#”を先頭にしたアンカー文字列を指定する。

説明が分かりにくいですね。具体的に、https://www.panhage.com/gtx1070ti/というページにある”a01″というアンカーにリンクさせたい場合は、https://www.panhage.com/gtx1070ti/#a01と指定します。

ちなみに、この「構成」リンクにはhttps://www.panhage.com/gtx1070ti/#a01と指定しています。

埋め込み

埋め込みにある「埋め込み」を選択し、リンクしたいURLを埋め込むと、リンク先のタイトルとアイキャッチ画像を使ってオシャレにリンクを表示してくれます。

埋め込み
ありんこアリサのだいぼうけん

Youtube動画の埋め込みにも使います。

目的のYoutube動画の「共有」を選択して表示されるURLを埋め込みブロックに埋め込めば、動画のリンクができあがります。

『Horizon Zero Dawn』 ゲーム紹介ビデオ

SEOを意識したタイトル、見出しを選定しよう

当初は「SEOと言っても結局は見てくれる人に役に立つ記事を書けば良いのだ」位の理解しかありませんでした。そしてそれ以上特に勉強することもなく思うがままに記事を投稿していました。

しばらくはそれで満足していたのですが、ある程度記事が増え、見てもらえる記事、全く見てもらえない記事が分かれてくると、否が応でもSEOを意識する事になります。

読んでもらえない記事は、そもそもGoogleの検索にヒットしません。それを知ったときは結構ショックでした。検索にヒットしない、ということはほぼ見られる可能性は0に等しい、ということです。

私はそれに気付いてからリライトしたりタイトルや見出しを変更したりしてみましたが、一度クロールされインデックスされた記事は再クロールをリクエストしてもそう簡単に書き変わらない様です。できれば、最初からタイトルや見出しはSEOを意識して決めた方が良さそうです。

タイトル、見出しに検索キーワードを含める

タイトルを決める際は検索されるであろうキーワードを意識して決めていましたが、見出しは自分の好きな様に決めていました。しかし、見出しにもキーワードをなるべく含めるのが良い様です。

当記事を投稿した時はそんな知識が無かったため、全くその様な構成になっていませんが、いずれ見出しを見直そうと思います。

ユーザーの疑問に過不足なく応える

タイトルや見出しを凝りに凝って、ユーザを引き付けられたとして、内容がそれに応えられていないと、結局ユーザはガッカリして離れていきます。

それをSEOがどう検知し反映するのかは不明ですが、いずれ検索順に反映されるのだと思います。

私は記事の投稿数を増やす事を焦るあまり、内容の伴わない記事が増えていた気がします。後になって内容を見直し、薄っぺらい記事には追記したりしていますが、なるべく投稿前に「読み手に満足してもらえる記事か?」を意識してチェックした方が良いと思います。

参考にしたサイト

私は上記2点について意識しする様にしていますが、まだ他にもSEO対策としてやるべき事はある様です。分かり易く解説していたサイトを紹介しますので、参考にしてください。

(参考)SEOライティングの基礎と知っておくべき13のポイント

高度なテクニックは徐々に覚えよう

いかがだったでしょうか。これだけ使えればまずまず凝った投稿はできそうですよね?更にこったデザインはたくさんの先人の方々が分かりやすく手順を公開してくれているので、徐々に覚えていこうと思います。

これで外枠も中身も作れるようになりました。でも、せっかく作ったんだからたくさんの人に見てもらえたら嬉しいですよね?そのためにはまずGoogleに見つけてもらい、検索した時にヒットしなければなりません。実際、この「ぱんメモ」もまだほとんど見てもらえてないです…。

見てもらうために何をしなければいけないのか?については次の機会に報告します

(3日目)SEO・バックアップリストア編

  

 

コメント

タイトルとURLをコピーしました