今回は、Cocoonのトップ画面を変更させる方法についてご紹介します。
フォーマットを使用したり、いろいろありますが現在は固定ページを活用し作成しました。
作業時間は、バナーも含めて1時間程度でできました。
トップページを見た方にはだいぶ見やすくなったと思います。
今回は、トップページをカスタマイズしたい方向けに、固定ページでトップページ（ホーム）を作る方法についてご紹介します。
利用したWordpressのテーマ
過去同様の方法で、トップページをSANGOと今回のCocoonで作りました。
WordPressのテーマによって多少の差はありますが、ほぼ同じです。
上位記事の表示をさせる方法などで、Cocoonは標準機能だと出来る事が限定されてました…が、標準機能の範囲で頑張りました><
作成手順
cocoonで作ってますが、他のテーマもほぼ同じ方法で作成可能です。
（過去、SANGOで作成した実績あり）
サイトのレイアウトを考える
最初からPC画面上でレイアウトを考えると悩んでしまうことも…><
なにをどんな順番で並べるかあらかじめ手書きでイメージを持っておくと安心です＾＾
…と言いつつ、レイアウトで個性を出し過ぎると読者にとって読みにくくなります><
まずは、イメージと言いつつ参考のサイトを再現する形で進めていくのがBetter
固定ページを新規作成
「固定ページ」＞「新規固定ページを追加」から、固定ページを作成します。
一部背景に色を付けたい場合
＋(ブロックを追加)＞カラム
分割内容に併せて設定、今回は1カラムを使用しています。
背景の色などを設定
新着記事を並べる場合
＋(ブロックを追加)＞新着記事
※ない場合は、「新着」というワードで検索して探してください。
※Wordpressのテーマにより、ワードが異なります。
SANGOの場合は「記事一覧」ブロックの設定から「表示順」項目「日付順(降順)」を選んでください。
人気記事を並べる場合
ほぼやっていることは、新着記事と同じです。
＋(ブロックを追加)＞人気記事
※ない場合は、「人気」というワードで検索して探してください。
※Wordpressのテーマにより、ワードが異なります。
SANGOの場合は「記事一覧」ブロックの設定から「表示順」項目「人気順(降順)」を選んでください。
バナーを付ける場合
Canvaなどで、希望のサイズのバナーを作ります。
バナー例 1220px x 330px
※私のブログでトップ画面に使用しているバナーは、Cocoon、SANGOともに1220px x 330pxで作成。幅は1220pxがちょうどフィットしますが、高さは自由に変えても◎
バナーをドラックアンドドロップで固定ページで貼り付けます。
（＋(ブロックを追加)＞画像 でも可能）
その後、リンクさせたい記事のURLを画像に付けます。
固定ページの設定手順
固定ページが出来上がったら、いよいよ設定へ！
WordPressの管理画面から「設定」＞「表示設定」
※他にも設定で「Cocoon設定」「SANGO設定」とかありますが、「設定」とのみ記載されているものを選択！
ホームページの表示を「最新の投稿」から「固定ページ（以下で選択）」ホームページのタブを作っていた固定ページで選択。
→最後「変更を保存」をクリックして完了です。
おつかれさまでしたーーーー！！
余談｜ウィジットを調整
今回、ホームページの話をしましたが画面右側にあるウィジェットと呼ばれるエリアは別途編集が可能です。
WordPressの管理画面から「外観」＞「ウィジェット」で項目を並べ替えて編集してみてくださいね＾＾
最後チェックも忘れずに！
PCで作業していると気付かないのですが、スマホで見たり、PCでも拡大表示を変えるとバランスが悪くなったりするので、確認を―＾＾
特に下記は要チェック
・スマホの画面で見づらくないか
・PCの設定ズームを変更して見づらくないか
（PCの設定ズームはCromeを使用している場合右上三点＞ズームで調整できます。）
基本的には、現在ネットを見る方はほぼほぼスマホなので、悩んだ時にはスマホでの見えやすさが良い方を基準に設定します。
まとめ
今回は、Wordpressのホーム画面の編集方法について紹介しました。
実際、テーマごとにスキンと呼ばれる画面を作ってくれていてそこから選択する…というのも一つの手ですが、あまりアフィリエイト用によさそうな画面というのが見当たらず…
自作をする場合には、今回の方法がカンタンにできてオススメです。
参考になれば幸いです！
※情報は執筆時点の内容です。
コメント