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

Webサイトを作り始めて3〜4ヶ月目くらいにトップページを作りたい!と思う様になりました。しかし、いざネットで作り方を調べてみたら簡単そうで難しい・・分からない事だらけで全然進みませんでした。

初心者の私が特に悩んだのは以下の4つ。

最初におさえておきたいポイント
  • 固定ページって何?
  • ヘッダーやサイドバーも変わるの?
  • そもそも初心者が1人で作れるの?
  • タイトルや投稿日を非表示にしたい

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

スポンサーリンク

固定ページとは

固定ページはカテゴリーやタグに属さないので、投稿一覧やカテゴリーページには表示されません。例えばこの様なページに使います。

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

実は投稿ページをトップページにする事も可能ですので、固定ページとは何か?についてあまり深く考え過ぎない方が良いです。

固定ページ作成方法

固定ページの内容(中身)の作り方は投稿ページと同じです。とりあえずは適当な文章や画像を入れて保存します。

作成の流れ
  1. ダッシュボード → 固定ページ → 新規追加
  2. 適当な文章や画像を入れて保存

固定ページ → 新規追加

固定ページの新規追加

タイトルとパーマリンク

私の場合はタイトル・パーマリンク共に「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をコピーしました