WordPress ブログ

WordPressでのブログ作成を初心者向けに1から10まで全部説明する。投稿編【インターンブログ#3】

はじめに

「WordPressってやることが多くて意外と難しいな…」このように感じて、ブログを立ち上げて、考えを発信したり、アフェリエイトで稼いでみるということをあきらめてしまった人、まさに今そのような状況に陥っている人はたくさんいらっしゃるんじゃないでしょうか?

まさに僕もその一人で、たくさん情報があふれている中からやるべきことを見つけるということにおっくうに感じていました…

そこで、この記事さえ見れば投稿を1つ完了させるという、大事な節目まで達成することができる。
そんな初心者に優しい記事を作成しようと考えて作成したのがこちらの記事です!

こちらの記事は2つの記事にまたがっており、前回はブログのホームページを完成させるまでのブログの土台作りの方法を伝え、今回は投稿を行うまでに必要な様々な細かいことについて伝えていきたいと思います。


↓↓ 前回の記事はこちら ↓↓

それでは、前回の記事を完成させた方はお疲れ様でした!!
もちろん今回の記事だけを見るという方も大歓迎です!

それでは、今回の記事の詳細について話していきましょう。

今回伝える内容は、投稿を作成する際に最初に躓いてしまうポイント、知っておくと便利なサイト、ブログを見やすくするためのプラグイン、CEO対策(Google Analytics, Google Console)についてです!

それでは、頑張りましょう!🔥

投稿を完了させる

投稿一覧の表示の崩れを修正する

それでは、まずはメニューバーから投稿一覧を開いてください。


すると、投稿がすでにいくつか配置されていると思います。
これは、元から登録されていた投稿なので、不要であれば削除してください。

ここで、前回の記事からCocoonを導入して下さった方は、おそらく縦に表示が崩れてしまっているのではないかと思います。

これはExcelと同じように考えるとわかりやすいかもしれないのですが、表示できる範囲に対して要素が多すぎて入り切っていない状態になってしまっているからです。
このままでは見づらいので、下の画像の赤く囲われた右上の表示オプションを押し、必要ないと思うカラムはチェックを外してみてください。

これで投稿一覧がすっきり見えるようになりましたね。

それでは、投稿の隣の新規追加のボタンから記事を作成していきましょう!

と、いっても僕は記事の内容までは口出しできないので、ここからは読者の皆さんの好みになります!
おそらく投稿はかなり直感的に操作できると思うので、ここでは私からのポイントとして、改行の仕方フリー画像を探すのに便利なサイトについてのみ紹介したいと思います。

改行の仕方

Enterを押して改行をしようとしてみてください。

たしかに改行っぽくはできたのですが、新しくブロックが生成されてしまったのではないでしょうか。

これは少しめんどくさいですよね💦
ブロックを生成せずにブロック内で改行を行うためのコマンドは、Shiftキー+Enterキーです!!

これはパソコン版Lineで改行しようとすると送信してしまう。という際にも使える技なので、是非覚えておいてください!

おすすめフリー画像まとめサイト

投稿をする中で、意外と時間を食ってしまうのが「フリー画像探し」です。

がっつりお金をかけるつもりで、フリーにこだわっていないぜ!! という方は有料サイトを見ていただけるとよいと思うのですが、おそらくほとんどの方は無料で済ませたいと思っているはずです。

しかし、先ほども述べたようにフリー画像探しは早く済ませたいのに、あまりしっくりくる画像を見つけることができずに、時間をつぶしてしまいがちです…

↑↑これもフリー画像で愛用しているブラウン(適当)の画像です↑↑

そこでおすすめしたいのがこちらの「O-DAN」という海外のサイトです!!!

https://o-dan.net/ja/

海外のサイトというと、英語で検索しないといけないんじゃないの…?
と思われる方もたくさんいらっしゃると思うのですが、こちらのサイトは日本語検索に対応しています!!

こちらでは、たくさんの海外のフリー画像まとめサイトをさらにまとめていて、おそらく探したいフリー画像も短い時間で見つけられるのではないかと思います。
ACサイトの様に、1日の間の取得制限もありませんので気軽に使ってみてください!!

それでは、投稿内容に満足したら、右上の「公開する」ボタンから公開してみましょう!
「公開する」を押すだけではだめで、公開するを押してから「公開」ボタンを押すことで初めて公開が完了します!注意してくださいね!

おめでとうございます!🎉これでついにあなたの投稿はネットに公開されました!

完成した投稿を見てみましょう。WordPressホームページに戻り、左上の「参加サイト」から、自分が作成したサイトを選択し、サイトを表示を押すと自分が作成したサイトを見ることができます!

しかし、カラムを三列に設定した方は投稿した画像のサイズがバラバラで、気に食わない…という方もいらっしゃるのではないでしょうか?

そのような方はプラグインの力を借りましょう!

プラグインについて

今回紹介するプラグインは、記事を見やすくするためにここで紹介する1つと、のちに紹介するもう1つのプラグインだけに絞ります!

これから今回紹介できなかった便利なプラグインのおすすめなど、WordPressを使っていくうえで便利な情報も発信していきたいと思いますので、もし興味ある方はこれからもお願いします笑

そもそもプラグインって何?

おそらくプラグインっていきなり何?と思った方も少なくないかと思われますので、簡単に説明させていただきます。

プラグインとは、便利だけど個人で実装するにはめんどくさいし、難しい。そんな機能を簡単に多くの人が使うことができるという機能です!

そもそも、WordPressはPHPという言語を用いて運営されています。
HTMLやCSS(サイトを表示するには必須の言語です)だけではじっそうできないような動的な機能を持っているのはこのPHPのおかげです。

そして、PHPで作成されているため基本プラグインのような、拡張機能はPHPで書かれます。
僕たちのようなPHPなんか触ったことがない… という人たちには拡張機能を実装するのは難しいですよね。

そこで、PHPを使える人たちが便利な機能を実装して、PHPを使えない人を助けてくれる便利な機能がプラグインというわけです!

プロの善意に感謝ですね…
また、有料のものもありますが、ほとんどの基本的なプラグインは無料で使うことができるので、心配はいりません!

Regenerate Thumbnailsの導入方法

先ほど言ったように、サイトを作成する際にホームページの画像のサイズは揃っていたほうが見やすさが格段にアップします!

そこで用いるのが「Regenerate Thumbnails」というプラグインです!
これは投稿したサムネイルを同じ大きさにして再生成してくれるという、便利なプラグインです!

この導入方法は前回紹介したCocoonマニュアルの迷宮の中から見つけ出してきたので、こちらの記事を是非参考にしてください!

https://wp-cocoon.com/regenerate-thumbnails/

どうでしょうか? サムネイルが整いましたか?
これで一旦ブログ本体については設定完了です!
それでは、ブラウザから自分が設定したブログ名を検索して、ブラウザから見てみましょう!!

……
…あれ、見つからない……

ブラウンもこの様子だ…

実は、ネットにあげればなんでもブラウザから見ることができる!というのは間違いなのです。
それでは次にブラウザの仕組みと、ブラウザに表示される方法について話していきたいと思います!

ブラウザの仕組みを知り、自分のサイトを表示させる!

ブラウザの仕組みについて

それでは、ブラウザの仕組みについて学びましょう。
僕は以前ブログを書こうと思ったのですが、ブログがブラウザに表示されないというこの事態に気付いてから、やる気を失ってしまったものの一人です…💦

それでは、いったいブラウザに表示されるにはどうしたらよいのでしょうか。

実は、先ほど申し上げたようにネットにあげられているURLすべてがブラウザに登録されているわけではないのです!
まさにあなたのサイトが(もしかしたら一部の人は登録されているかもしれませんが)、現在そういった状況に陥っているというわけです。

これはブラウザが用いている「クローラー」について知る必要があります。今回はわかりやすく簡単に説明します。

クローラーとは名前の通り「這うもの」で、グーグルに登録されているリンクを次から次へと動き回って、もしグーグルに登録されていないサイトを見つけたら登録するという動作を行います。
なので、たとえばサイトAが新しく投稿Bを公開すると、サイトAにクローラーが回っていた時に、サイトAにつなげれている投稿Bのリンクにクローラーが回って、そこで初めて新しい投稿Bがブラウザに表示されるようになるというわけです!

なので、あなたのサイトが現在つながれていないのは、あなたの投稿につながったリンクが1つもなく、クローラーが回ってこなくて、グーグルに登録されていない。空なのです!!

つまり、あなたはいま「ネットの孤島」状態なのです。このままぼっとしていても誰からも気づかれることはありません。自分からクローラーにアピールしに行きましょう!

そうです。クローラーにさえ気づいてもらえると、リンクはつながれていなくともブラウザーに登録することができるので、頑張ってアピールすることが必要なのです。

そして、それを可能にするのが「Google Console」です!

Google Consoleについて

こちらに登録したサイトにはクローラーが少し巡回してくれるようになり、リンクがどこにもつながれていなくても、ブラウザーに登録して多くの人に見てもらえるようになります。

Google Consoleの導入方法はこれまたCocoonマニュアルの迷宮から見つけ出してきましたので、こちらを参考にしてみてください!

https://wp-cocoon.com/google-search-console/

大事なのは、クロウラーは結構忙しいので登録したらすぐに反映されるわけではないということです。気楽に待ちましょう!

Google Analyticsについて


そして、その間に「Google Analytics」を登録してみましょう!

Google Analyticsって何?と思った方に軽く説明をします。

Google Analyticsとは、その名のとおり、サイトの分析ツールです。
具体的には、誰が、どうやって、いつ、何を見ているのかということを知り、それに合わせたサイト運営を可能にするためのツールです!

このようにデータに合わせた対応は、サイト運営のみならず今後の活動全般に生かすことができるので、是非積極的に取り組んでみてください!

これまた、Cocoonマニュアル迷宮から導入方法を持ってきましたので、参考にしてください

https://wp-cocoon.com/google-analytics/

「Google XML Sitemaps」プラグインの導入方法について

どうでしょうか。Google Consoleに登録したのに全くサイトに登録されないー!という方がいらっしゃいませんか。

僕もそうで、一部の記事が読み込まれなかったりしました。

これはクロウラーが自分のサイトに探しに来てくれても、記事をうまく見つけられていないというのが大きな原因となっていると思います。

これを回避するためにもちいるのプラグインが「Google XML Sitemaps」です。
今回も説明をわかりやすくして、導入方法は他の分かりやすいサイトさんに丸投げさせていただきます。笑

XML Sitemapとは、まずサイトマップというものについて知る必要があります。
人がサイトを見た時、いったいどの記事がどのページに乗っているのかが端的に記されたページがあるとわかりやすいですね?

それがHTMLサイトマップというものです。HTMLという人間が見るのに適した形式でサイトの大まかな地図を表しています。

しかし、これが「クローラー」に分かりやすいかというと別の話になります。HTMLは人間様ですので、クローラー用にわかりやすいサイトマップを作成してクローラーをうまく導いてやる必要があります。
でも、サイトマップを作成するのってめんどくさいです…
しかも一つ追加するために更新したりするのも面倒ですね。

しかし、面倒なことは誰かが改善してくれている!の精神でプラグインを見てみましょう。
そこで「Google XML Sitemaps」を発見しました。
これを用いると、おそらくクローラーが回りやすくなってほとんどのページがしっかり登録されるようになると思います。

というわけで、導入しましょう!今回はこちらのサイトです!

https://saku-taro.com/google-xml-sitemaps/

これを登録したら、またしばらく待ってブラウザに登録されていないかチェックしてみましょう。
登録されていたらもうあなたはもう立派なブロガーです!!
これからどんどんブログを作っていきましょう!

お気にの画像で締めくくります笑

さいごに

どうでしょうか?ブログを作成することはできましたでしょうか。

今回の記事では、やるべきことはもちろん、
今後サイトを運営していくために必要な知識を分かりやすく説明するということを念頭において書いてみました。

1回目の記事から見てくださった方は本当にありがとうございます
そして今回の記事を通して無事にブログをブラウザに登録できたという方もおめでとうございます!!

これからこちらのサイトでは、WordPressの便利な技術について記事を書いたり、現在主に取り組んでいる機械学習、Python,Djangoについて述べていったりする予定です!
もしこれから調べていてInternnectブログを発見した際にはぜひちょろっと寄ってみてくださいね笑

それでは、ここまでありがとうございました!
快適なWordPressライフを!🏴

-WordPress, ブログ
-, ,

Copyright© Internect Engineering Blog , 2020 All Rights Reserved Powered by AFFINGER5.