Warning: Undefined array key "file" in /home/zyunpe/zyunpe.xsrv.jp/public_html/wp-includes/media.php on line 1768
まったく難しいことをせずに無料のワードプレステーマ『Cocoon』でサイト型トップページを作る方法を説明します！
シンプルな『Cocoon』をちょっとオシャレにカスタマイズさせましょう。
まずCocoon設定をしましょう！
スキン設定
「スキン」機能は便利ですが、色々とデフォルトで設定をされているのですが、そのためうまくいかないケースがあります
今回はスキンは設定せずにシンプルに徹したいと思います
スキン一覧→🔘「なし」
全体
・キーカラー
サイトキーカラー→真っ白を選択 「#ffffff」
サイトキーテキストカラー→黒より少しだけグレー寄りの色 「#2b2b2b」
・サイトフォント
文字サイズ→18px or 16pxに（サイトの年齢層によります）
文字色→ 「#2b2b2b」（ややグレー寄りの黒）
・サイト背景色→真っ白 「#ffffff」
→「変更をまとめて保存」
これで全体の設定はできました！
ヘッダーの設定
サイトの上の部分の設定をしましょう
左上にロゴ
右側に文字（グローバルメニュー）
・ヘッダーレイアウト→トップメニュー（右寄せ）
・ヘッダーロゴ →【画像】（シンプルなロゴが良いです）
ヘッダーロゴの簡単な作り方
CANVAで「ロゴ」と検索
→シンプルなものを選ぶ（モノクロ・背景白）→細長にする
（Mac ：コマンド➕シフト➕４＝スクショをとる）
・グローバルナビメニュー幅→✅メニュー幅をテキストに合わせる
アピールエリアの作成
・アピールエリアの表示→「フロントページのみで表示」
・エリア画像→【画像を選択】（メインのイメージ画像）
・テキストエリアの表示 →✅「テキストメッセージを表示」外す
・高さの設定 ３００〜８００位？に調節する
カルーセル
アピールエリアの大きい画像の下にスライダーを作ると見栄えが良くなります
→ポイントはアイキャッチ画像をオシャレにすること！
・カルーセルの表示→「フロントページのみで表示」
・表示内容 人気記事✅ or カテゴリーを選択
・最大表示数→１２
フッター
下の部分を整えていきましょう！
・フッター色
フッター背景色→「黒系（not 真っ黒）」
フッター文字色→真っ白
・フッター表示タイプ →「メニュー＆クレジット（中央揃え）」
固定ページでトップページを作る
最新記事が並ぶブログ型ではなく、オシャレなサイト型にするメインの設定です！
新規で固定ページを追加
タイトル→「TOP」
このページがトップページになります
・ロゴを出して
・✔️尊着記事はこちら
・✔️人気記事ランキング
・✔️おすすめジャンルはこちら（カテゴリー分けして）
・✔️著者プロフィール
・✔️お問い合わせ
画像【サイト名】（中央揃え）
「新着情報」を設定
✅新着記事はこちら
（太字 ２２px 中央揃え）
➕ボタン 「新着情報」
右 基本設定 キャプション（〇〇の新着情報はこちら）数の調整
➕ 「ボタン」新着記事一覧はこちら （中・円形・光らせる）↓
区切り→ドット 余白 ３
「人気記事ランキング」を設置
✅人気記事ランキング
（太字 ２２px 中央揃え）
➕ 「人気記事」を選択
右 「大きなサムネイル表示」 or 大きなサムネイルタイトルを重ねる
⭕️記事タイトルを太字 ⭕️横並び表示 ⭕️ランキング番号表示
表示記事数 ５
区切り→ドット 余白 ３
カテゴリーで表示
✅おすすめジャンル
（太字 ２２px 中央揃え）
➕ 「カラム（50/50）」
左側
段落（ブログ) 中央揃え・太文字・改行
画像
ブログ
コンサル
右側
段落（コンサル） 中央揃え・太文字・改行
〇〇.com/category/blog/
→選択して カテゴリーのURLを画像に貼り付ける
区切り→ドット 余白 ３
上記の「カテゴリー」をいくつか作成してもOK
著者プロフィールを設置
著者プロフィールを入れる場合はCANVAで作成
CANVAから「自己紹介」で検索（無料）
テンプレートから作成↓
「お問い合わせ」の作成
➕ウイジェット→Contact Form ペースト
固定ページをトップページに設置する方法
それではこの固定ページをいよいよサイトの「トップページ」に設置していきましょう！
設定→表示設定
・ホームページの表示→固定ページ→ホームページ→「TOP」に変更します
固定ページを1カラムに
現在2カラムでサイドバーが出ています。
見栄えが良くないのでこちらを１カラムにしていきましょう
固定ページを表示→サイドバー→「ページ設定」→「１カラム（広い）」
ブログ全体を整える
SNSの表示や、日付、名前などが出ているのでこの辺りを消してスッキリ見栄え良くしていきましょう
SNS表示を消す
固定ページのSNSシェアボタンを消します
Cocoon設定→SNSシェア→トップシェアボタンの表示→「固定ページ」→✅外す
ボトムシェアボタン→「固定ページ」→✅外す
SNSフォローを消す
フォローボタンも消していきましょう
Cocoon設定→SNSフォロー→フォローボタンの表示→✅外す→保存
タイトル（TOP）や日付、著書を消す
ここだけちょっと面倒に思う人がいるかもしれません
外観→テーマエディタ（警告は気にしない）→Cocoon Child→スタイルシート
※スタイルシート：Cocoonのデザインを決めている場所です
→小テーマのスタイルを書く
/必要ならばここんコードを書く/
の下 改行して↓
:::::::::::::::::::::以下をコピペ:::::::::::::::
/*全てをまとめて非表示*/
.home.page .entry-title,
.home.page .date-tags,
.home.page .author-info{
display: none;
}
::::::::::::::::::::::::::::::::::::::::ファイル更新
・タイトル
・日付
・著者・・・を消します
これでかなりスッキリしました！
「最新記事一覧はこちら」のボタンの設定
・まず固定ページを作ります
固定ページ→新規追加→タイトルに「新着記事一覧」（あとは書かなくてOK）
※パーマリンク設定例：〇〇.com/news/
ここまでできるとまた「設定」に戻って、
・表示設定を変更します
設定→表示設定→ホームページの設定→固定ページ→投稿ページ「新着記事一覧」
・最後に固定ページ→「TOP」ページに戻って
「最新記事の一覧はこちら」のボタンのURLを設定します
〇〇.com/news/→「新着記事一覧はこちら」のボタンに設定
以上でひととおりオシャレはサイト型トップページが完成です！
さらに追求したい場合は有料のワードプレステーマ「SWELL」を使ってブラッシュアップしていきましょう！
SWELLの詳細はこちらの公式サイトから
17,600円の買い切り型で複数のブログに使えてオシャレです
↓↓↓
>>WordPressテーマ「SWELL」
