この記事では、ブログのトップページをサイト型にカスタマイズするために必要な”固定ページの作成方法”について紹介しています。
WordPressの無料テーマcocoonを使ってブログを運営している方におすすめの記事です。
初心者でもおしゃれなトップページを作ることができるようわかりやすく説明しています。
この記事を書いている人
- メガバンク勤務の30代女性
- 夫と共同でブログを運営中
- ブログ運営、ファッション誌のモニターや記事執筆などの副業で収入を得ている
固定ページの新規作成方法
新規固定ページを作成
WordPressのダッシュボードのなかから、固定ページを選択し、「新規追加」を選びます。
ブログの投稿画面と同じような固定ページの作成画面が立ち上がります。
タイトルや固定ページの設定を行う
ブログを投稿する際と同じように、タイトルや固定ページに関する情報を設定します。
| タイトル | サイトトップなどわかりやすいタイトル名を指定 （CSSでタイトルは非表示にします） |
| URL | 好きなURLを指定 （作成する固定ページをトップページに指定する手順を踏むと、 自動的にURLはサイトメインのURLに変わります。） |
| 広告 | レイアウトが乱れるため広告は除外がおすすめ |
| 更新日 | 削除 |
| 目次 | 非表示 |
| 読む時間 | 非表示 |
固定ページのタイトルや投稿日を非表示にするCSSについて
ページの幅を決める
固定ページの設定項目から、「ページタイプ」を選択します。
サイドバーを表示したければ、デフォルトを選択し、全画面でサイトトップページ表示させたければ1カラム（広い）を選択します。
固定ページを編集しサイトのトップページを作成する
記事を投稿する際と同じように、画像や文字を入力し、サイトトップページを作り上げていきます。
カラムを活用する
カラムのブロックを活用すると、サイトトップページを半分に区切り片側に記事、片側に検索やSNSボタンを設置したようなレイアウトを作成することが可能です。
ショートコードを活用して記事を表示させる
ショートコードを活用すると、新着記事の一覧や人気記事の一覧を自由にレイアウトに組み入れることができます。
ナビカード一覧を利用すれば、自分が表示させたい記事を並べることもできます。
SNSボタンや検索バーを設置しサイト風に整備する
「サイト内検索」や「SNS」のブロックを追加し、サイト風にレイアウトを組み立てます。
ボタン機能を活用しメニューボタンや記事一覧のリンクを作成する
カテゴリーの各テーマボタンや「新着記事一覧を表示」ボタンは、ボタンブロックを活用して作成しています。
例えば、投資信託というボタンであれば、リンク先に、投資信託のカテゴリーURLを登録し、ボタンを押すとリンク先へ飛ぶように設定しています。
プレビュー画面でレイアウトを確認する
配置やスペースなどを微調整してレイアウトを整えていきます。
モバイル端末からの見え方も確認しておきましょう。
PCとモバイル端末でのレイアウト表示を変える場合は、CSSを指定する必要があります。
まとめ
ブロックの種類や使い方さえ理解できていれば、トップページのサイト型へのカスタマイズは、意外と簡単です。
画像や見出し、白抜きボックスなどさまざまなブロックがあるので、それらを駆使し、サイト型レイアウトに近づけていきます。
固定ページの作成が完了すれば、サイト型トップページへのカスタマイズ作業は残りあと少しです。
ここから先の手順は別記事にまとめておりますので、合わせてご覧ください。
最後までご覧いただきありがとうございました。
