(WordPress超初心者向け)3日で簡単ブログサイトを作成しよう(環境編)(1日目)【Cocoon】

ブログ
スポンサーリンク

WordPressを始めて2週間が過ぎました。

先人たちのブログを参考に、お薦めのサーバーを借りWordPressをインストールするまではすんなりできましたが、次は何をしたら良いのやら…。

幸いWordPressのノウハウはネットに溢れているけれど、言葉を知らないのでどんなキーワードで検索したら良いかも分かりません…。

それらしい言葉で検索したものの、結果がたくさんでてきて、読んでみると知りたい事とはちょっと違ったり…。

そんな繰り返しで2週間が過ぎましたが、先人達の知恵をお借りしながら何とかそれっぽい形になってきので忘れないうちにメモしておきます。振り返ってみれば、3日間で十分できる内容です。

まずは以下の手順で作成してみると、何となく言葉や仕組が分かってきます。言葉
が分かればもっと詳しい事を検索できるようになりますよね。まだまだですが、徐々にカッコいいサイトにしていければいいな、と思っています。先人の皆様に感謝です。

スポンサーリンク

完成イメージ

よくあるこんな外観のブログページを作成します。

完成後イメージ

環境構築

サーバはConoHa WING、テーマはCocoonにしました。

これでまず投稿できる環境を構築します。

サーバー「ConoHa WING」を契約しWordPressをインストール

ヒトデさんの「hitodeblog」のおススメ通りConoHa WINGにしました。ConoHa WINGは自動バックアップが標準装備で、リストアも無料というのがいいですね。

WordPress(ワードプレス)ブログの始め方を超わかりやすく解説!【初心者でもOK!】|hitodeblog
【真似するだけで誰でも出来る!】WordPress(ワードプレス)ブログの始め方を。50枚以上の画像と図解、そして動画を使ってとにかくわかりやすく伝えます。2020年6月27日。情報、画像を最新の物に更新しました。難しいイメージのWordPressですが、きちんと手順通りにやっていけば簡単にブログを始められます。

無料ブログにするかどうかで悩みましたが、挫折することを恐れて無料で始めるくらいなら、最初は有償で半年頑張ってみてダメだったら安い所に引っ越せばよい、と考えることにしました。

無料テーマ「Cocoon」をインストール

何といっても無料ですし、機能的に十分です。たくさんの人が使っているので情報も探しやすいです。

CocoonではGoogle AdSenseの審査申請時に必要なHTMLの修正や、AdSense合格後の広告表示する際のHTML修正なども予め考慮されており、設定に必要な切り口が用意されています。サイトのHTMLを直接修正する必要がありません。

設定できる事が多すぎて戸惑うかもしれませんが、普通にサイトを運用する分にはそれほど設定を変更することはありません。

Cocoonテーマをインストールする方法
WordPressにCocoon親テーマと子テーマをインストールして利用するおすすめのインストール方法です。

プラグインのインストール

以下の8個を追加しました。

①Jetpack by WordPress.com … 簡単にページビュー数を把握できます。

Jetpack by WordPress.comの設定&使い方|ひつじアフィリエイト
みなさん、アクセス状況の把握とかってどうやっていますか? グーグルアナリティクス(GA)で確認してもいいんですけれど、G

②EWWW Image Optimizer … 写真の位置情報を消してくれます。

【WordPress】絶対に入れよう!写真の個人情報削除プラグイン
どうも、タカフです。 WordPressをインストールして、さて記事を書こう・さて画像をUPしよう となった時に絶対に気をつけなければいけないのが、Exif情報という名の個人情報はUPする画像から絶対に削除した上でUPし ...

 
③BackWPup … ConoHa WING にもバックアップ機能はありますが、念のため。

BackWPUpで確実にWordPressのバックアップを取る方法
あらゆるリスクに備えてデータのバックアップは不可欠だ。バックアップさえできていれば万が一データが消えてしまっても、また復元できるからだ。次の2つを叶えるバックアップができればかなり心強いだろう。 定期的に自動でバックアッ

④Edit Author Slug … WPのアカウント名がバレないようにします。

Edit Author Slugプラグインの使い方(投稿者アーカイブで表示されるユーザー名(Author Slug)を変更)
Edit Author Slug プラグインは投稿者アーカイブに表示される「Author Slug」の値を別の値に変更できるプラグインです。セキュリティ上の理由から WordPress のユーザー名は外部に分からないようにしておくことが望ましいですが、ユーザー名から自動で作成される「Author Slug」の値が投稿者...

⑤SiteGuard WP Plugin … 外部の者がログイン画面に辿り着けないようにします。


⑥Akismet … スパムコメントを防ぎます。

【スパム対策】Akismetの最新の設定方法を紹介
WordPressを運営してある程度のページビューに達すると、必ず増えてくるのがスパムコメントだ。1日に20、30と頻繁に来ることも珍しくない。 そんな時、スパムコメントを1つ1つ削除していては時間がもったいない。 この

⑦Google XML Sitemaps

Google XML Sitemapsの設定方法
ここでは、WordPressのプラグイン「Google XML Sitemaps」を使って簡単にサイトマップを作る方法を解説しています。コンテンツをしっかり検索エンジンに認識してもらうために、ベストな設定方法をご紹介します。

⑧Rinker  … 商品リンクを作成します。

※紹介されていたが使わなかったプラグイン
・Autoptimize … Cocoonに機能あり(高速化)
・AddQuicktag  … 使わない
・TablePress  … WPに機能あり
・Contact Form 7 … Cocoonに機能あり
・Rich Table of Contents … Cocoonに機能あり
・WP Super Cache … レスポンスは悪くないので様子見。
・Speech bubble … Cocoonに機能あり
・Lazy Load、a3 Lazy Load … Cocoonに機能あり(高速化)

外観変更

最初はこんなサイトが表示されます。プロフィール欄もメニューもないシンプルな外観です。

以下を変更していきます。

キャッチフレーズ(Just another WordPress site)を変更

キャッチフレーズの変更

サイトのサブタイトルは”おっさんの楽しみ探し”としました。

どの設定を変更するのかは、あっぴさんの「ニートから始める趣味具ログ講座」を参考にしました。

ワードプレス初心者向け、Just another WordPress siteを消す設定法
どうも、あっぴです!   ワードプレスをインストールをすると、ブログタイトルの下に「Just another WordPress site」と表示されるよね。   この「Just another WordPress si ...

ヘッダー画像を表示

ヘッダ画像の変更

絵本にチャレンジした時の絵を使ってみました。

ルルさんのサイトを参考にしました。

WordPressの「Cocoon」ヘッダー画像、ロゴサイズなどの設定方法。
WordPressの「Cocoon」ヘッダー画像、ロゴサイズなどの設定方法。

フッターにロゴ画像を表示

hふフッタ画像の変更

ぱんはげメモのロゴを作って表示しました。

ままんさんの「笑顔につつまれて」を参考にしました。

ワードプレスCocoonのフッター設定とフッターロゴ画像を解説
ワードプレス無料テーマ コクーンのCocoon設定の中にある「フッター」の設定は、ワードプレス初心者でも簡単に設定できて便利です。TOPページのイメージチェンジも、Cocoon設定内のプレビューで確認できるので、サイトの気分転換や季節ごとの

“ホーム”メニューの表示

ホームメニューの追加

最初に表示されるホームページに戻る「ホーム」メニューを追加しました。

shufublogを参考にしました。

【WordPress】メニューにホームへのリンク(ホームボタン)を作成する方法
今回は、ワードプレスのメニューにホームへのリンク(ホームボタン)を作成する方法について紹介します。すごく簡単に作成することができますよ!それでは早速いってみよう!【WordPress】メニューにホームリンクを作成する方法まず初めにWordP

固定ページ(プロフィール)の作成とメニュー表示

プロフィール追加

 「固定ページ」にサンプルとしてあった”Sample Page”を編集しプロフィールのページにしました。もちろん新規に作成しても良いです。
 パーマリンク:URL スラッグを初期値”sample-page”から”profile”に変更し、アイキャッチ画像を追加しました。

さっかさんの「ふるりーむ」を参考にしました。
(参考)コクーンで固定ページを書いたのに出てこない時の設定方法

プロフィール欄の追加

プロフィール欄を作成し、「プロフィールページURL」に前項で作成したプロフィールページのURL(https://www.panhage.com/profile/)を設定しリンクしました。

ゆんつさんの「こんぷれ」を参考にしました。

Cocoonでプロフィール欄を作成しよう!
こんにちは、ゆんつです。ブログにつきものなのがプロフィール欄。PCで色んなブログを巡っていると、画面の右上とか左上にイラスト又は顔写真と簡単な自己紹介が書かれているプロフィール欄をよく見かけます。WordPressの無料テーマ「Cocoon

メタ情報の非表示

メタ情報の削除

必要ないので消しました。

「NO_RULES」を参考にしました。

WordPress・Cocoon メタ情報を非表示にする理由と設定
WordPressのCocoonなどでメタ情報を非表示にする理由を知りたいですか?本記事ではメタ情報が表示されている問題点、メタ情報を非表示にする設定を詳しく案内しています。デザインやセキュリティに悩む方はこの記事が参考になります。

人気記事の追加

プロフィール欄やメタ情報と同様、サイドバーの設定なので、「外観」-「ウィジット」-「[C]人気記事」を選択し、「サイドバー」(もしくは「サイドバースクロール追従」)にチェックを付ければ表示されます。

人気記事の追加

なお、標準設定だとサイドバーには「最近の投稿」が表示される設定になっていますが、文字タイトルしか表示されずちょっと寂しいので、私は「[C]新着記事」を表示するように変更しています。[C]はCocoonが提供しているウィジットなんですね。

新着記事(ホームページ)の2列表示

投稿部分を2列にしてみました。

やなぎはらめいさんの「なぎちゃんねる」を参考にしました。

【cocoon】新着記事一覧を2列表示させる方法【ワードプレス】
cocoonのカスタマイズについての記事です。今回はタイトルの通り新着記事一覧ページの新着記事を2列に並べる方法についての解説です。下記画像のような新着記事一覧ページを作ります。デモサイトはここをクリックして表示ワードプレスのフリーテーマ「

Cocoonスキンの変更

“Bizarre-food(グリーンソバ)” を使用しました。

「クマブログ」を参考にしました。

Cocoonならスキンを設定して簡単に素敵なレイアウトに変更しましょう!!【WordPress】
本記事では、WordPressのテーマでCocoonを利用している方向けに、無料でブログをカラフルで素敵な見た目にする方法をご紹介します。 スキンの設定をするだけでとっても簡単なのに、素敵な見た目になりますので是非確認してみてくださいね♪

サイトアイコン(ファビコン)の表示

ファビコンの設定

忘れがちですね。青い太陽のアイコンにしました。

はしばさんの「あなたの”好き”を仕事にするブログ」を参考にしました。

サイトアイコンの作り方|wordpressファビコンを無料作成する方法とは? | Sewing designer & Photostylist
インターネットサイトを見てみると、サイトのタブのところに小さな画像が付いているのを気付いていらっしゃったでしょうか。サイト(ホームページ)などの名前の左側についている小さなマークのような画像は、『ファビコン』とか『サイトアイコン』と言われています。

これでだいたいの外枠はできました。
大事なのは中身ですよね。投稿の仕方について覚えた事は次回報告します。

(2日目)投稿編

コメント

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