【Cocoon2020】簡単サイト型ホームページの作り方CSS,HTML不使用

パソコン画面 ワードプレスCocoon

エディタはGutenberg、テーマはCocoon

グーテンベルグエディタ、テーマはCocoonを使用しての記事になります。

ワードプレスにお引越しを考えていらっしゃる方はエックスサーバー 経由がおすすめですよ。 アップロードが簡単です!

サイト型(ホームページ風)とは例えばこんな感じ

私のブログのトップページは下のようになっています。

しずくログトップページ

実際の様子はこちらでご確認ください。 (変更している場合もあります。)

ワードプレス・旭川情報etc.しずくログトップ
shiizuku(しずく)ブログトップページへようこそ!2020年版Wordpressコクーンの各種設定方法やお気に入り商品のレビュー、旭川観光情報などを詳し~く発信しています。

このようなサイト型、ホームページ風のページをHTMLもCSSも使うことなく作りました。というより、Cocoonのテーマのおかげで作ることができた、と言うべきですね。(ページ中で見出しを使っているのですが、その部分はCSSコードでカスタマイズしています。)

サイト型ではなくデフォルトだと

トップページを作らない場合だと、新着記事一覧が表示されて下の画像のようなページがトップにくると思います。

ワードプレスCocoonデフォルトのトップページ

ワードプレスCocoon;トップページの新規作成

ダッシュボード→投稿→新規追加ではなく、ダッシュボード→固定ページ→新規追加で作成します。

トップページの新規作成画面

ワードプレスCocoon;サイト型ページの作り方

下の画像のように3つに分けて上から順に説明していきます。

しずくログトップページ

①Cocoon設定アピールエリア

一番上ので囲った部分は『アピールエリア』といいます。

ダッシュボード→Cocoon設定→Cocoon設定→アピールエリアをクリックします。

Cocoon設定

すると画像や文字を入力できる画面が出てきます。

②Cocoon設定おすすめカード

2番目ので囲った部分は『おすすめカード』で作成できます。

編集場所は①のアピールエリアの次のタグです。(Cocoon設定→おすすめカード)

おすすめカードを設定したのに画像が表示されない時は?

おすすめカードにカテゴリを設定した場合などに起こることがあります。カテゴリに画像を設定する方法は下の記事を参考にしてくださいね。

【Cocoon2020】カテゴリにアイキャッチ画像を設定する方法
普段カテゴリに画像を設定する必要性をそこまで感じないかもしれませんが、サイト型(ホームページ風)のトップページを作る時などに必要になってきます。分かりやすくご説明しています。

③カラム

③のエリアはカラムを2つ作って『新着記事一覧』などのショートコードを利用すれば作ることができます。

③-1カラムの作りかた

Wordpressコクーンの新規作成画面カラム

〇に+のマークを押してブロックを追加します。Cocoonレイアウト→2カラム、3カラム(どちらでもお好きなほう)を選んでください。

すると下のようなカラムができます。

トップページの新規作成画面カラム

それぞれの〇+マークを押して、タイトルや新着記事を入れていきます。

③-2カラムにタイトルを入れる

〇+マークをクリックして見出しを選択します。

Wordpressコクーンの新規作成画面

タイトルが入りました。続けて下の〇+マークをクリックして『段落』を選択して上の『ショートコード』から『新着記事一覧』を選びます。(もちろん『人気記事一覧』でもどちらでも構いません。)

ご自分で好きな一覧を作りたい場合の方法は後でご紹介します。

Wordpressコクーンの新規作成画面新着記事一覧

すると下のような状態になります。

Wordpressコクーンの新規作成画面

ここで『プレビュー』ボタンを押すと、

Wordpressコクーンのプレビュー画面

はじめにご紹介した私のブログのサイト型トップページのカラムの1/4ができました!

これを繰り返してご自分の好きな数だけカラムを作っていってください!

新着記事一覧でなくおすすめ記事一覧を作りたいとき

新しくおすすめ記事一覧のリストを作るところから始めていきます。こちらで紹介すると長くなってしまうので1つの記事にまとめました。下の記事を参考に作ってみてください。

Cocoon2020新着記事一覧でなくおすすめ一覧の作り方
新着記事一覧でもなく人気記事一覧でもなく自分で好きな記事を一覧にできるおすすめ記事一覧の作り方をご紹介します。おすすめ記事一覧は、サイト型(ホームページ風)のトップページを作る時などに役立ちます。

サイト型にするためのこの先の設定

固定ページでサイト型トップページを作成したら、下の方法でそのページをホームページに固定します。

【Cocoon2020】特定のページをトップページに固定する方法
おすすめの記事を常にトップに表示したい場合や、ホームページ風(サイト型)のページを作ってトップに固定したい時などの設定方法をご紹介しています。

さいごに

そのほかにもWordpressに関する記事をいくつか書いています。よろしければご覧ください。

ワードプレス・旭川情報etc.しずくログトップ
shiizuku(しずく)ブログトップページへようこそ!2020年版Wordpressコクーンの各種設定方法やお気に入り商品のレビュー、旭川観光情報などを詳し~く発信しています。
【THE THOR(ザ・トール)】 の特徴
  • 圧倒的にSEOに強い
  • おしゃれで美しいデザイナーズサイトが簡単に作れる
  • アクセスUP収益UPを強力に後押しする「集客・収益化支援システム」を搭載
  • ランキングサイト・口コミサイトなどが簡単に作れる など
ブロガー専用WordPressテーマ「OPENCAGE」 の特徴
  • ブロガー向けのシンプルで高機能なテーマ
  • カスタマイズに時間をかける必要がない
  • 全てモバイルファーストでつくられているのでスマホで見た時のデザインが抜群
タイトルとURLをコピーしました