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

cocoonのトップページ作成とカスタマイズ

Webサイトを作り始めてしばらくするとトップページを作りたくなるのですが、作成方法をネットで調べてみても初心者としては分からない事だらけで全然進みません・・

そんな私の実体験をベースにして事前に知っておきたかった事・分かりにくいポイントをシンプルに纏めてみました。※Cocoon / WordPress

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

固定ページとは

固定ページはカテゴリーやタグに属さないページで、要するに投稿一覧やカテゴリーページに表示されないという特性があります。その他は投稿ページと特に変わりはありません。(たぶん)

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

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

固定ページ作成方法

設定は簡単
  1. 固定ページを新規作成
  2. タイトルやパーマリンクを決める
  3. 「ホームページ」に設定する

固定ページの内容(中身)の作り方は投稿ページと同じです。

固定ページを新規作成

中身は後で作りこむとして、適当な文章や画像でも入れといて保存します。まずは雰囲気を掴みましょう。

固定ページの新規追加

タイトルとパーマリンク

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

ホームページに設定する

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

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

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

ヘッダーやサイドバーも変わる?

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

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

トップページの中身の作り方

設計図

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

完成イメージを描く

自分に出来るかどうかは一旦置いといて完成イメージを決めます

好きなサイトやオシャレな雑誌のレイアウト等を参考にしながら「サイト全体」「ワンポイント」「雰囲気」「フォント」「カラーバランス」などを決めていきます。紙に描いてみるのも良いですね。

簡単なデザインからスタート!

まずは自分に出来そうな部分から作ってみましょう。トップページに関してはカラムの使用がオススメです。カラムは何かと便利ですので↓作り方の記事を参考にしてください。

難しい部分から始めてしまうと難しくて分からない → 全然進まない&カスタマイズコードもぐちゃぐちゃやる気無くなるなどデメリットもあるので、少しずつ勉強しながら簡単な部分を進めていくのがベターだと思います。

画像作成アプリ「Canva」

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

非表示カスタマイズ

トップページ感を出す為にページタイトルや日付などを非表示にしました。

非表示にしてトップページ感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をコピーしました