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

ブログ

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

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

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

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

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

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

完成イメージ

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

完成後イメージ

環境構築

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

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

ヒトデさんの「hitodeblog」を見ておススメされた通りConoHa WINGで進めました。今の時点でこれで良かったと思います。3日目でも触れていますが、ConoHa WINGは自動バックアップが標準装備で、リストアも無料というのがいいですね。

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

(参考)WordPress(ワードプレス)ブログの始め方を超わかりやすく解説!【初心者でもOK!】

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

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

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

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

(参考)【図解で簡単!】WordPressテーマ『Cocoon』のインストール方法

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

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

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

 ①~⑥はひつじさんの「ひつじアフィリエイト」を参考に追加しました。
(参考)【2020年版】WordPressのおすすめプラグイン10選

※紹介されていたが使わなかったプラグイン
・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設定は意味が良くわからなかった
 ので変更していません

 
 ⑪Akismet

 バズ部のサイトを参考にしました。
(参考)【スパム対策】Akismetの最新の設定方法を紹介

 ⑫a3 Lazy Load

 manaさんの「ゆるり。と」を参考にしました。
(参考)サイトを高速化してくれるWPプラグイン「a3 Lazy Load」の設定方法

外観変更

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

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

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

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

あっぴさんの「ニートから始める趣味具ログ講座」を参考にしました。
(参考)ワードプレス初心者向け、Just another WordPress siteを消す設定法

ヘッダー画像を表示

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

Annaさんの「こもりのもり」を参考にしました。
(参考)【Cocoon ヘッダー画像サイズを調整】ヘッダー画像が拡大表示される問題を解決

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

panmemoのロゴを作って表示しました。

ままんさんの「笑顔につつまれて」を参考にしました。
(参考)ワードプレスCocoonのフッター設定とフッターロゴ画像を解説

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

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

shufublogを参考にしました。
(参考)【WordPress】メニューにホームへのリンク(ホームボタン)を作成する方法

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

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

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

プロフィール欄の追加

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

ゆんつさんの「こんぷれ」を参考にしました。
(参考)Cocoonでプロフィール欄を作成しよう!

メタ情報の非表示

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

さっぱりさんの「さがはに!」を参考にしました。
(参考)【WordPress】消えない!?メタ情報の削除方法【Cocoon】

人気記事の追加

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

人気記事の追加

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

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

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

やなぎはらめいさんの「なぎちゃんねる」を参考にしました。
(参考)【cocoon】新着記事一覧を2列表示させる方法【ワードプレス】

Cocoonスキンの変更

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

「クマブログ」を参考にしました。
(参考)Cocoonならスキンを設定して簡単に素敵なレイアウトに変更しましょう!!【WordPress】

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

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

はしばさんの「あなたの”好き”を仕事にするブログ」を参考にしました。
(参考)サイトアイコンの作り方|wordpressファビコンを無料作成する方法とは?




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

おっさんの描いた絵本です。息抜きにどうぞ。

ありんこアリサのだいぼうけん

コメント

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