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

ブログ

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

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

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

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

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

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

完成イメージ

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

完成後イメージ

環境構築

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

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

ヒトデさんの「hitodeblog」のおススメ通りConoHa WINGにしました。1年近く経ちますが、これで良かったと思います。ConoHa WINGは自動バックアップが標準装備で、リストアも無料というのがいいですね。

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

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

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

何といっても無料ですし、機能的に十分です。たくさんの人が使っているので情報も探しやすいです。久川和人さんの「Hisagawa Offical Blog」が分かり易かったですが、ConoHa WINGでもCocoonを提供しているので、コントロールパネルからもインストールできます。

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

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

【図解で簡単!】WordPressテーマ『Cocoon』のインストール方法 | 元うつ病エンジニアが教える!取り柄がなくてもできるあなたの得意を見つけてブログで好きなことを仕事にする方法
こんにちは、久川和人です。 WordPressのインストール、初期設定が終わったら、WordPressテーマをインストールします。 WordPressテーマは、有料のもの・無料のものがたくさんあり選ぶだけでも大変。そこで僕がおすすめするのは、無料で高機能、そして使い勝手の良い『Coccon(コクーン)』というWordP...

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

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

 ①AddQuicktag
 ②TablePress
 ③Contact Form 7
 ④Jetpack by WordPress.com
 ⑤EWWW Image Optimizer
 ⑥Autoptimize

【2020年版】WordPressのおすすめプラグイン10選|ひつじアフィリエイト
WordPressプラグインとは、WordPressの機能拡張ができる便利ツールのことです。 実はWordPressだけ
※紹介されていたが使わなかったプラグイン
・Rich Table of Contents … Cocoonに機能あり
・Rinker … Amazonアソシエイトのアカウントが必要。保留。
・WP Super Cache … レスポンスは悪くないので様子見。
・Speech bubble … Cocoonに機能あり
・Lazy Load … 「使用中の WordPress バージョンで未検証」だったため
 代わりに後述の"a3 Lazy Loadを使用"

 
 ⑦BackWPup
 ⑧Edit Author Slug
 ⑨SiteGuard WP Plugin
 ⑩Google XML Sitemaps

WordPressでブログを始めたら最初にやるべき6つのこと。
必要最低限のプラグインを調べるのが非常に面倒だったので、次の新ブログを立ち上げる時のための覚え書きです。 各項目について、説明が丁寧で参考になるサイトを掲載しているので、設定の詳細はそちらをご覧ください。 スポンサーリン ...
※「Edit Author Slug」のAuthor Base設定は意味が良くわからなかった
 ので変更していません

SiteGuard WP Plugin に関しては後に分かったことを以下のページに書きましたので併せて参照してください。

 
 ⑪Akismet

 バズ部のサイトを参考にしました。

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

 ⑫a3 Lazy Load

 manaさんの「ゆるり。と」を参考にしました。

サイトを高速化してくれるWPプラグイン「a3 Lazy Load」の設定方法|ゆるり。と
RINKERというプラグインを使って商品紹介をする際、画面に表示されるボタンの大きさがおかしくなるという不具合が発生し、

外観変更

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

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

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

“おっさんの楽しみ探し”としました。

あっぴさんの「ニートから始める趣味具ログ講座」を参考にしました。

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

ヘッダー画像を表示

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

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

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

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

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

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

ワードプレス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

メタ情報の非表示

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

さっぱりさんの「さがはに!」を参考にしました。

【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をコピーしました