トップページの作成方法と非表示カスタマイズ【Cocoon】

スポンサーリンク

Webサイトを作り始めて3〜4ヶ月くらい経過した頃にトップページを作りたいと思うようになりました。

でも固定ページって何?なにがどう変わるの?そもそも自分にできるの?初心者としてはかなりハードルの高いチャレンジです。今となっては偉そうに記事を書いていますが、当時はリアルに混乱して作り始めるまでに1~2か月は掛かったと思います。

希望を持った皆さんがこのステップで諦めない為にこの記事を作成しました。作成後も定期的に内容をチェックして何度も更新を続けています。まず、絶対に作らなければならないという事は全くありませんので、あまり固執しない事をお勧めします。他にもやるべきカスタマイズはたくさんあります。コーヒーや紅茶とかタピオカとか、好きなドリンクを飲みながら流し読みしてください。

作成のポイント

特別なスキルは必要ありません。固定ページをトップページに設定するという作業は本当に簡単です。

設置はとても簡単

固定ページを新規作成 → その固定ページをWordPressの「表示設定」で「ホームページ」に設定する

固定ページを使う理由

固定ページはカテゴリーやタグに属さないページで、それ以外は投稿ページと一緒です(私が知る限り)。投稿ページをトップページに設定する事も可能です。

固定ページの使用例
  • トップページ
  • プライバシーポリシー
  • このサイトについて
  • 著作権について
  • リンクについて

固定ページ作成方法

固定ページを作成してトップページに設定する手順です。固定ページの内容(中身)は投稿ページを作る時みたいに、一旦は適当な文章や画像を入れてください。最初からPVが多い方を除いては「PV少ないしどうせ誰も見ない」と思って進めましょう。

固定ページ作成の流れ

作成の流れ
  1. ダッシュボード
  2. 固定ページ
  3. 新規追加
  4. 中身を適当に作る
  5. 保存
固定ページの新規追加

タイトルとパーマリンクについて

私の場合はタイトル・パーマリンク共に「home」にしました。一般的だし覚えやすいと思うので、迷ったならそうしておきましょう。※既に home という名称を使っている場合は他の名前で

ホームページに設定する

WordPress の設定
  1. ダッシュボード
  2. 設定
  3. 表示設定

「固定ページ」にチェックを入れ「ホームページ」で先程作ったhomeを選択して保存。

表示設定で固定ページを選択

設定後にトップページを見てみると、先程作った固定ページ(home)がいつもの投稿ページみたいに表示されていると思います。

サイト全体が変わってしまうのか?と不安がありましたが、ヘッダー・フッター・サイドバーなどは設定前と変わらずに表示されています。

トップページの中身を作る

設計図

ここからが本番です。未完成のページをトップに置いておくのも何だか嫌ですが、最初はほとんどユーザーアクセスも無いと思うのであまり気にしないでください。少しずつリニューアルしていきましょう。

完成イメージを描く

自分に出来るかどうかは考えず完成イメージを紙に描いてみます。※この時代なので別に紙じゃなくても良いです

1人でアイデアを出すのも限界がありますので、色々なサイトを参考にしながら「全体」「部分的」「雰囲気」「フォント」「カラー」など真似していくのが良いですね。

とりあえずやってみる

とりあえず簡単そうだと思った箇所から作ってみましょう。私の場合は適当な画像をいくつか並べて、その上下か左右にタイトルや説明文を添えようと思っていました。

ブロックエディターのメディアと文章が使えそうだったのですが、私のスキルではどうしても画像にリンクが貼れず。。でもカラムテーブルを使えば実現できそうだと知りました。

この様に、チャレンジする過程で少しずつ知識やスキルが身についてくるので、そういった面でも重要度も必要性も高いトップページのカスタマイズはスタートに最適だと思います。※最初否定してましたけど

画像作成アプリ「Canva」

Canvaは無料の画像作成アプリ。私みたいな素人でもオシャレなそれっぽい画像を簡単に作ることができます。Googleアカウントで登録できるので、アイキャッチ画像の作成などにオススメです。

非表示カスタマイズ

トップページ感を出すために以下の項目は非表示にしました。以降のコードはCocoonに限定されるもの含まれているのでご注意下さい。

非表示にする部分
  • ページタイトル
  • 投稿日と更新日
  • SNSシェアとフォロー

ページタイトル非表示

#post-2242
.entry-title {
  display: none;
}

※ページID(上記の場合”2242”)はページごとに数値が異なります

ページIDの確認方法

投稿・固定ページ一覧で確認したいページのタイトルにマウスカーソルを合わせると、ブラウザの下部にページID[〜post=◯◯◯◯]が表示されます。※スマホの場合はタイトルのリンクを長押し

投稿日と更新日を非表示

.page-id-2242 .date-tags {
  display: none;
}

タイトルの下に投稿日と更新日を表示する設定にしていますが、トップページのみ非表示にしました。ページIDは前項と同様です。

SNSシェア・フォロー 非表示

.page .sns-share,
.page .sns-follow {
  display: none;
}

特定ページのみ非表示もできますが、今回は固定ページ全てで非表示にしました。

Comment

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