WordPressを始めて2週間が過ぎました。
先人たちのブログを参考に、お薦めのサーバーを借りWordPressをインストールするまではすんなりできましたが、次は何をしたら良いのやら…。
幸いWordPressのノウハウはネットに溢れているけれど、言葉を知らないのでどんなキーワードで検索したら良いかも分かりません…。
それらしい言葉で検索したものの、結果がたくさんでてきて、読んでみると知りたい事とはちょっと違ったり…。
そんな繰り返しで2週間が過ぎましたが、先人達の知恵をお借りしながら何とかそれっぽい形になってきので忘れないうちにメモしておきます。振り返ってみれば、3日間で十分できる内容です。
まずは以下の手順で作成してみると、何となく言葉や仕組が分かってきます。言葉
が分かればもっと詳しい事を検索できるようになりますよね。まだまだですが、徐々にカッコいいサイトにしていければいいな、と思っています。先人の皆様に感謝です。
完成イメージ
よくあるこんな外観のブログページを作成します。
![](https://www.panhage.com/wp-content/uploads/2020/06/d4a655cf263336c3145f28ccc8f22c5f-475x1024.jpg)
環境構築
サーバはConoHa WING、テーマはCocoonにしました。
これでまず投稿できる環境を構築します。
サーバー「ConoHa WING」を契約しWordPressをインストール
ヒトデさんの「hitodeblog」のおススメ通りConoHa WINGにしました。ConoHa WINGは自動バックアップが標準装備で、リストアも無料というのがいいですね。
![](https://hitodeblog.com/wp-content/uploads/2018/04/6796a17b0e38b903f9051c66900683cc.png)
無料ブログにするかどうかで悩みましたが、挫折することを恐れて無料で始めるくらいなら、最初は有償で半年頑張ってみてダメだったら安い所に引っ越せばよい、と考えることにしました。
無料テーマ「Cocoon」をインストール
何といっても無料ですし、機能的に十分です。たくさんの人が使っているので情報も探しやすいです。
CocoonではGoogle AdSenseの審査申請時に必要なHTMLの修正や、AdSense合格後の広告表示する際のHTML修正なども予め考慮されており、設定に必要な切り口が用意されています。サイトのHTMLを直接修正する必要がありません。
設定できる事が多すぎて戸惑うかもしれませんが、普通にサイトを運用する分にはそれほど設定を変更することはありません。
![](https://wp-cocoon.com/wp-content/uploads/2018/03/Cocoon.jpg)
![](https://wp-cocoon.com/wp-content/uploads/2018/03/Cocoon.jpg)
![](https://wp-cocoon.com/wp-content/uploads/2018/03/Cocoon.jpg)
![](https://i0.wp.com/wp-cocoon.com/wp-content/uploads/2018/03/Cocoon.jpg?resize=160%2C90&ssl=1)
プラグインのインストール
以下の8個を追加しました。
①Jetpack by WordPress.com … 簡単にページビュー数を把握できます。
![](https://hituji-affiliate.com/wp-content/uploads/2017/03/スクリーンショット-2017-03-12-16.51.41.jpg)
![](https://hituji-affiliate.com/wp-content/uploads/2017/03/スクリーンショット-2017-03-12-16.51.41.jpg)
![](https://hituji-affiliate.com/wp-content/uploads/2017/03/スクリーンショット-2017-03-12-16.51.41.jpg)
![](https://i0.wp.com/hituji-affiliate.com/wp-content/uploads/2017/03/スクリーンショット-2017-03-12-16.51.41.jpg?resize=160%2C90&ssl=1)
②EWWW Image Optimizer … 写真の位置情報を消してくれます。
![](https://kahoo.blog/wordpress/wp-content/uploads/2018/08/20180819.png)
![](https://kahoo.blog/wordpress/wp-content/uploads/2018/08/20180819.png)
![](https://kahoo.blog/wordpress/wp-content/uploads/2018/08/20180819.png)
![](https://i0.wp.com/kahoo.blog/wordpress/wp-content/uploads/2018/08/20180819.png?resize=160%2C90&ssl=1)
③BackWPup … ConoHa WING にもバックアップ機能はありますが、念のため。
![](https://lucy.ne.jp/bazubu/wp-content/uploads/2021/09/4a7f6be0ea58371e8f36558612839ded.png)
![](https://lucy.ne.jp/bazubu/wp-content/uploads/2021/09/4a7f6be0ea58371e8f36558612839ded.png)
![](https://lucy.ne.jp/bazubu/wp-content/uploads/2021/09/4a7f6be0ea58371e8f36558612839ded.png)
![](https://i0.wp.com/lucy.ne.jp/bazubu/wp-content/uploads/2021/09/4a7f6be0ea58371e8f36558612839ded.png?resize=160%2C90&ssl=1)
④Edit Author Slug … WPのアカウント名がバレないようにします。
![](https://www.javadrive.jp/wordpress/plugin-list/img/p23-0.png)
![](https://www.javadrive.jp/wordpress/plugin-list/img/p23-0.png)
![](https://www.javadrive.jp/wordpress/plugin-list/img/p23-0.png)
![](https://i0.wp.com/www.javadrive.jp/wordpress/plugin-list/img/p23-0.png?resize=160%2C90&ssl=1)
⑤SiteGuard WP Plugin … 外部の者がログイン画面に辿り着けないようにします。
⑥Akismet … スパムコメントを防ぎます。
![](https://lucy.ne.jp/bazubu/wp-content/uploads/2014/11/20160510-130.jpg)
![](https://lucy.ne.jp/bazubu/wp-content/uploads/2014/11/20160510-130.jpg)
![](https://lucy.ne.jp/bazubu/wp-content/uploads/2014/11/20160510-130.jpg)
![](https://i0.wp.com/lucy.ne.jp/bazubu/wp-content/uploads/2014/11/20160510-130.jpg?resize=160%2C90&ssl=1)
⑦Google XML Sitemaps
![](https://lucy.ne.jp/bazubu/wp-content/uploads/2015/02/20160510-139.jpg)
![](https://lucy.ne.jp/bazubu/wp-content/uploads/2015/02/20160510-139.jpg)
![](https://lucy.ne.jp/bazubu/wp-content/uploads/2015/02/20160510-139.jpg)
![](https://i0.wp.com/lucy.ne.jp/bazubu/wp-content/uploads/2015/02/20160510-139.jpg?resize=160%2C90&ssl=1)
⑧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に機能あり(高速化)
外観変更
最初はこんなサイトが表示されます。プロフィール欄もメニューもないシンプルな外観です。
![](https://www.panhage.com/wp-content/uploads/2020/05/dafa86f829073b92e143eb6d78a1edf1-893x1024.jpg)
![](https://i0.wp.com/www.panhage.com/wp-content/uploads/2020/05/dafa86f829073b92e143eb6d78a1edf1.jpg?resize=893%2C1024&ssl=1)
以下を変更していきます。
キャッチフレーズ(Just another WordPress site)を変更
![](https://www.panhage.com/wp-content/uploads/2021/07/60f8f57f73b39525bad0073ddd23d215.jpg)
![](https://i0.wp.com/www.panhage.com/wp-content/uploads/2021/07/60f8f57f73b39525bad0073ddd23d215.jpg?resize=730%2C138&ssl=1)
サイトのサブタイトルは”おっさんの楽しみ探し”としました。
どの設定を変更するのかは、あっぴさんの「ニートから始める趣味具ログ講座」を参考にしました。
![](https://appiblog.net/wp-content/uploads/2018/01/Just-another-WordPress-siteの消し方.jpg)
![](https://appiblog.net/wp-content/uploads/2018/01/Just-another-WordPress-siteの消し方.jpg)
![](https://appiblog.net/wp-content/uploads/2018/01/Just-another-WordPress-siteの消し方.jpg)
![](https://i0.wp.com/appiblog.net/wp-content/uploads/2018/01/Just-another-WordPress-siteの消し方.jpg?resize=160%2C90&ssl=1)
ヘッダー画像を表示
![](https://www.panhage.com/wp-content/uploads/2021/07/f886841877bd1535065c0965a479b15b-1024x181.jpg)
![](https://i0.wp.com/www.panhage.com/wp-content/uploads/2021/07/f886841877bd1535065c0965a479b15b.jpg?resize=1024%2C181&ssl=1)
絵本にチャレンジした時の絵を使ってみました。
ルルさんのサイトを参考にしました。
![](https://i0.wp.com/app1st.com/wp-content/uploads/2019/08/startup-849804_1920.jpg?fit=1920%2C1371&ssl=1)
![](https://i0.wp.com/app1st.com/wp-content/uploads/2019/08/startup-849804_1920.jpg?fit=1920%2C1371&ssl=1)
![](https://i0.wp.com/app1st.com/wp-content/uploads/2019/08/startup-849804_1920.jpg?fit=1920%2C1371&ssl=1)
![](https://i0.wp.com/app1st.com/wp-content/uploads/2019/08/startup-849804_1920.jpg?fit=1920%2C1371&ssl=1)
フッターにロゴ画像を表示
![](https://www.panhage.com/wp-content/uploads/2021/07/97456bec59cb2a73280397cf79aaefa8-1024x140.jpg)
![](https://i0.wp.com/www.panhage.com/wp-content/uploads/2021/07/97456bec59cb2a73280397cf79aaefa8.jpg?resize=840%2C114&ssl=1)
ぱんはげメモのロゴを作って表示しました。
ままんさんの「笑顔につつまれて」を参考にしました。
![](https://i0.wp.com/egaoni-tsutsumarete.com/wp-content/uploads/2020/03/Hooder-settings.TOP_.png?fit=1280%2C720&ssl=1)
![](https://i0.wp.com/egaoni-tsutsumarete.com/wp-content/uploads/2020/03/Hooder-settings.TOP_.png?fit=1280%2C720&ssl=1)
![](https://i0.wp.com/egaoni-tsutsumarete.com/wp-content/uploads/2020/03/Hooder-settings.TOP_.png?fit=1280%2C720&ssl=1)
![](https://i0.wp.com/egaoni-tsutsumarete.com/wp-content/uploads/2020/03/Hooder-settings.TOP_.png?fit=1280%2C720&ssl=1)
“ホーム”メニューの表示
![](https://www.panhage.com/wp-content/uploads/2021/07/0bb87bfa2694cfea5fe704b37a4be13d.jpg)
![](https://i0.wp.com/www.panhage.com/wp-content/uploads/2021/07/0bb87bfa2694cfea5fe704b37a4be13d.jpg?resize=965%2C365&ssl=1)
最初に表示されるホームページに戻る「ホーム」メニューを追加しました。
shufublogを参考にしました。
![](https://shufublog.com/wordpress/wp-content/uploads/2017/11/menu-home-eye.png)
![](https://shufublog.com/wordpress/wp-content/uploads/2017/11/menu-home-eye.png)
![](https://shufublog.com/wordpress/wp-content/uploads/2017/11/menu-home-eye.png)
![](https://i0.wp.com/shufublog.com/wordpress/wp-content/uploads/2017/11/menu-home-eye.png?resize=160%2C90&ssl=1)
固定ページ(プロフィール)の作成とメニュー表示
![](https://www.panhage.com/wp-content/uploads/2021/07/f4378da25550706334ccf234a167563a.jpg)
![](https://i0.wp.com/www.panhage.com/wp-content/uploads/2021/07/f4378da25550706334ccf234a167563a.jpg?resize=965%2C365&ssl=1)
「固定ページ」にサンプルとしてあった”Sample Page”を編集しプロフィールのページにしました。もちろん新規に作成しても良いです。
パーマリンク:URL スラッグを初期値”sample-page”から”profile”に変更し、アイキャッチ画像を追加しました。
さっかさんの「ふるりーむ」を参考にしました。
(参考)コクーンで固定ページを書いたのに出てこない時の設定方法
プロフィール欄の追加
プロフィール欄を作成し、「プロフィールページURL」に前項で作成したプロフィールページのURL(https://www.panhage.com/profile/)を設定しリンクしました。
ゆんつさんの「こんぷれ」を参考にしました。
![](https://konpure.com/wp-content/uploads/2019/01/prof.jpg)
![](https://konpure.com/wp-content/uploads/2019/01/prof.jpg)
![](https://konpure.com/wp-content/uploads/2019/01/prof.jpg)
![](https://i0.wp.com/konpure.com/wp-content/uploads/2019/01/prof.jpg?resize=160%2C90&ssl=1)
メタ情報の非表示
![](https://www.panhage.com/wp-content/uploads/2021/07/37e8ce0455b02679de08870f68c41b5a.jpg)
![](https://i0.wp.com/www.panhage.com/wp-content/uploads/2021/07/37e8ce0455b02679de08870f68c41b5a.jpg?resize=583%2C494&ssl=1)
必要ないので消しました。
「NO_RULES」を参考にしました。
![](https://i0.wp.com/www.panhage.com/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif?resize=160%2C90)
人気記事の追加
プロフィール欄やメタ情報と同様、サイドバーの設定なので、「外観」-「ウィジット」-「[C]人気記事」を選択し、「サイドバー」(もしくは「サイドバースクロール追従」)にチェックを付ければ表示されます。
![](https://www.panhage.com/wp-content/uploads/2020/06/c65506559110564fca512f73915f843f-972x1024.jpg)
![](https://i0.wp.com/www.panhage.com/wp-content/uploads/2020/06/c65506559110564fca512f73915f843f.jpg?resize=972%2C1024&ssl=1)
なお、標準設定だとサイドバーには「最近の投稿」が表示される設定になっていますが、文字タイトルしか表示されずちょっと寂しいので、私は「[C]新着記事」を表示するように変更しています。[C]はCocoonが提供しているウィジットなんですね。
新着記事(ホームページ)の2列表示
投稿部分を2列にしてみました。
やなぎはらめいさんの「なぎちゃんねる」を参考にしました。
![](https://i0.wp.com/www.panhage.com/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif?resize=160%2C90)
Cocoonスキンの変更
“Bizarre-food(グリーンソバ)” を使用しました。
「クマブログ」を参考にしました。
![](https://kumasuke1216.com/wp-content/uploads/2019/08/easter-2168521_640.jpg)
![](https://kumasuke1216.com/wp-content/uploads/2019/08/easter-2168521_640.jpg)
![](https://kumasuke1216.com/wp-content/uploads/2019/08/easter-2168521_640.jpg)
![](https://i0.wp.com/kumasuke1216.com/wp-content/uploads/2019/08/easter-2168521_640.jpg?resize=160%2C90&ssl=1)
サイトアイコン(ファビコン)の表示
![](https://www.panhage.com/wp-content/uploads/2021/07/7754dc029f0619a581d9857d9d0e3ead.jpg)
![](https://i0.wp.com/www.panhage.com/wp-content/uploads/2021/07/7754dc029f0619a581d9857d9d0e3ead.jpg?resize=708%2C213&ssl=1)
忘れがちですね。青い太陽のアイコンにしました。
はしばさんの「あなたの”好き”を仕事にするブログ」を参考にしました。
![](https://i0.wp.com/www.panhage.com/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif?resize=160%2C90)
これでだいたいの外枠はできました。
大事なのは中身ですよね。投稿の仕方について覚えた事は次回報告します。
コメント