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

Webサイトを作り始めて3〜4ヶ月した頃にトップページを作りたい!と思い始めてネットで作り方を調べまくったのですが、どうしても分からない事がいくつかありました。

分からなくて困った事
  • 固定ページって何?
  • ヘッダーやサイドバーも変わるの?
  • そもそも初心者が1人で作れるの?
  • タイトルや投稿日を非表示にしたい

初心者だからこその実体験をベースにして、トップページの作り方と簡単なカスタマイズ方法を纏めてみました。何か少しでも参考になれば幸いです。

スポンサーリンク

固定ページとは

固定ページはカテゴリーやタグに属さないページで、投稿一覧にも表示されません。ただそれだけです。

投稿ページをトップページにする事も可能ですので、固定ページについては深く考えずサッと流してください。

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

固定ページ作成方法

固定ページの内容(中身)の作り方は投稿ページと同じです。まずは何がどう変わるか確認した方が良いので、とりあえず適当な文章や画像を入れておいてください。

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

固定ページ → 新規追加

固定ページの新規追加

タイトルとパーマリンク

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

ホームページに設定

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

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

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

どこが変わるのか?

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

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

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

設計図

よかったら当サイトのトップページも参考にしてください。

完成イメージを描く

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

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

とりあえずやってみる

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

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

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

画像作成アプリ「Canva」

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

超絶ノープラン対策

全く方向性が決まっていない場合はカラムを使って構成を整えてみましょう。当サイトのトップページもカラム数を2にして画像や文章を入れているだけです。

非表示カスタマイズ

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

非表示にしてトップページ感UP!
  • ページタイトル
  • 投稿日と更新日
  • 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;
}

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

サイドバー非表示

  1. Cocoon設定
  2. 全体

「トップページだけ非表示」「固定ページで非表示」など選択することができます。

Comment

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