メモ書きに使っていたX（旧Twitter）の仕様変更を機にWordPressに移行しました。
そんなWordPress（Cocoon）初心者による成長記録メモです。（2026年7月〜）
ドメイン・レンタルサーバー契約
漠然と「WordPressをやってみよう！」と思い立ち無料で利用できる「WordPress.org」などを検討するもイマイチ魅力を感じません。
そこで本格的に利用できる無料レンタルサーバーを検討し、無料を謳う「シンフリーサーバー」を発見しました。しかも広告表示もなしと素晴らしいサービス。早速アカウントを作成し作業に取り掛かろうとした矢先に罠がありました。
「現在、無料プランでは移転以外のお申し込みを受け付けておりません」
「先に言ってよ！」という言葉しかない。トップページにもアカウント作成時にも「新規受付停止中」という説明はなかったように思います。アカウント作成で個人情報だけ吸い取られました。非常に残念。
次に検討したのが「スターレンタルサーバー」。こちらは同じ系列の「スタードメイン」でドメインを取得するとサーバーを無料レンタルできる特典があります。ドメインは持っていても損はないと判断し「スタードメイン」に決めました。
- スタードメイン契約
- 「.com」980円（1年間）更新2,047円
- 特典で無料レンタルサーバー利用可能（ディスク容量5GB）
WordPress（Cocoon）運用
WordPress自動インストール機能により特に詰まることもなくインストール完了。ドメイン割り当ても同じサービス会社なのでスムーズでした。
テーマは「Cocoon」を選択しました。こちらも自動インストール対応かつメジャーなテーマということで、トラブル発生時にネットで調べて自己解決するにはベストな選択肢だと思います。
Cocoon設定
ここからはCocoonの設定で初心者が気になったことを時系列順に記録しています。
トップページに固定ページを表示させる
ブログ形式の投稿記事がずらずらっと並ぶタイプは更新頻度やコンテンツが多いなら良いと思いますが、昔ながらのホームページのように使いたいので固定ページに切り替えました。
- 割り当て用の「固定ページ」を2つ作る
- ダッシュボード→設定→表示設定→ホームページの表示
- 「固定ページ」の項目を選択して「ホームページ」「投稿ページ」に作成した固定ページを割り当てる
固定ページの投稿日、更新日、投稿者名を非表示にする
トップページを固定ページに切り替えたものの投稿日や投稿者名が表示され違和感を感じました。Cocoonの子テーマに追加CSSでカスタマイズすることで非表示にできました。
- ダッシュボード→外観→テーマ→Cocoon Child→カスタマイズ→追加CSS
/*固定ページの投稿日、更新日、投稿者名を非表示にする*/
.page .date-tags,
.page .author-info {
display: none;
}
サイト全体のヘッダーを非表示にする
ヘッダーと呼ばれるサイト名などが表示される一番上の部分に違和感を感じたので取り払うことにしました。
- ダッシュボード→外観→テーマ→Cocoon Child→カスタマイズ→追加CSS
/* サイト全体のヘッダーを非表示にする */
#header {
display: none;
}
スマホ向けWordPressアプリ（Jetpack）導入
自分の場合、WordPressの全ての作業をiPhoneから管理しています。ブラウザ（Safari）から編集していたのですが、まともに操作できなかったり、編集中のブロックが無反応になり操作不能になることも。
我慢の限界を感じたのでiOSアプリ（Jetpack）を導入しました。JetpackはレンタルサーバータイプのWordPressにも対応していて、テーマ独自の編集などは出来ませんが文章を入力する用途では非常に快適です。
フッターにプライバシーポリシーを載せる
Webサイトの下の方に「プライバシーポリシー」を載せたいと思い、まずは文章を考えました。が、初心者に思い付くはずもなく適当にひな形を検索し丸写し。プライバシーポリシー専用の固定ページを作成したら準備完了です。
- ダッシュボード→外観→メニュー
- 新しくメニューを作成（フッターメニュー）
- フッターメニューに固定ページを追加
同じ要領で「当サイトについて」「お問い合わせ」も追加しました。
ヘッダーモバイルボタンの項目を入れ替える
スマホからアクセスするとスクロールに追従する形でメニューバーが現れます。デフォルトで下部に表示されるフッターモバイルボタンの他に、上部のヘッダーモバイルボタンも「Cocoon設定」→「モバイル」の項目から追加できます。追加してみたもののデフォルトでのボタン配置に違和感を感じたので入れ替えてみました。
- ダッシュボード→外観→メニュー
- 新しくメニューを作成（ヘッダーモバイルボタン）
- カスタムリンクに「URLコマンド」を入力することでボタン配置をカスタマイズ可能
#menu（スライドインメニューの開閉）
#sidebar（サイドバーの展開）
#search（検索窓の展開）
#top（ページトップへ戻る）
#logo（ロゴ画像配置）
#share（シェアボタンの展開）
#follow（フォローボタンの展開）
#toc（目次へ移動）
タイトルロゴ（#logo）は画像を載せずにテキストだけで表現したい場合は「リンク文字列」にサイト名を入力することで表現可能です。
iPhoneでデスクトップ表示にする方法
ブラウザ（Safariなど）の機能で「デスクトップ用Webサイトを表示」にしてもCocoonはレスポンシブデザインなためかモバイル表示のまま変化がありません。
そこで、ブラウザの拡大表示設定を50%にして横持ちすることで、ようやくPCと同じ表示にすることができました。
これによりモバイル表示だけでデザインしていた弊害で、デスクトップ表示がおかしくなっていたのを発見。修正作業に追われることに。初心者が下手にCSSを弄って失敗するパターンを再現してしまいました。
管理者ツールバーを非表示にする
WordPressにログインした状態で「サイトを表示」にすると上下に表示される黒帯のツールバー。コンテンツに被さりタップ（クリック）できない場面があり正直邪魔でした。必要性も感じないので非表示にしました。
- ダッシュボード→ユーザー→プロフィール→ツールバー
- ダッシュボード→Cocoon設定→管理者画面→管理者パネルの表示
上部はWordPressツールバー、下部はCocoonツールバーが表示されていました。
コメント
WordPress（Cocoon）初心者による成長記録メモです。進展があれば追記していきます。