[Cocoon2021]簡単サイト型ホームページの作り方CSS,HTML不使用WordPress

エディタはグーテンベルグ、テーマはCocoon

ワードプレスのGutenberg(グーテンベルグ)エディタ、テーマはCocoonを使用しての記事になります。 ワードプレスもバージョンアップして表示様式なども日に日に変わっているので、この記事は2021年1月に加筆修正しています。

簡単サイト型ホームページの例

私のブログのトップページは下のようになっています。 (現在は変更しています。)

このようなサイト型、ホームページ風のページをHTMLもCSSも使うことなく作りました。というより、Cocoonのテーマのおかげで作ることができた、と言うべきですね。

ホームページやサイト型ではなくデフォルトだと

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

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

簡単サイト型ホームページの作り方;トップページの新規作成

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

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

簡単サイト型ホームページの作り方

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

[簡単サイト型ホームページ作り方①]Cocoon設定アピールエリア

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

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

Cocoon設定

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

[サイト型ホームページ作り方②]Cocoon設定おすすめカード

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

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

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

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

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

[サイト型ホームページ作り方③]カラム

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

[簡単サイト型ホームページ作り方③-1]カラムの作りかた

記事作成画面の左上ののマーク、もしくは右のマークをクリックして“カラム”を探します。

見つからない場合は上の画像の【すべて表示】をクリックするか、【ブロックの検索】に“カラム”といれて検索します。

カラムが出てきます。今回は一番左の“2カラム”をクリックします。

すると下のようなカラムが表示されます。

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

[簡単サイト型ホームページ作り方③-2]カラムにタイトルを入れる

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

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

タイトルが入りました。続けて下のマークをクリックして『段落』を選択。なんでも良いので1文字入力すると上にメニューが出てくるのでその中の『ショートコード</>』から『新着記事一覧』を選びます。(もちろん『人気記事一覧』でもどちらでも構いません。)

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

Wordpressコクーン投稿編集画面

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

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

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

Wordpressコクーン新規投稿画面

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

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

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

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

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

サイト型ホームページにするためのこの先の設定

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

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

さいごに

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

ワードプレスCocoon
WordpressのCocoonテーマでグーテンベルグエディタを使用しての記事の書き方や設定方法をご紹介しています。その他サイト型トップページ作成方法、Cocoon設定一覧など。できるだけ簡単に設定できる方法をご紹介しています。分かりやすい説明を心がけています。

【アフィリエイトを始めようかと思っていらっしゃるかた】

アクセストレード パートナーサイト募集

2021年4月16日までアクセストレードに新規会員登録で200円プレゼントのキャンペーンが行われています。

先着3,000名、4月16日までに審査を通過して承認される必要があるので登録をお考えの方はお早めに。

アクセストレード

耳寄り情報

エックスサーバーを使いながらドメインは『お名前.com』や『ムームードメイン』などを利用しているというかたへ

ドメインをエックスドメイン に変更すればエックスサーバーと一元管理できてとっても楽です。

Xサーバー、Xドメインの管理画面です。サーバーとドメインが同じ画面で管理できてすっきりします。ミニマリストさんにもおすすめです。

エックスサーバー、エックスドメイン管理画面

◆エックスドメインただいまキャンペーン中

2021年3月31日までの期間限定で.jp .com .net他8種類ドメインの移管料金が利用料込みでなんと1年間110円(税込み)になるキャンペーン中です。

出典:エックスドメイン
詳しくはこちら→エックスドメイン

◆エックスサーバー以外のサーバーを利用しているというかたへ

エックスサーバー では、2021年4月1日(18:00)まで

“ドメイン永久無料&初期費用0円キャンペーン”を実施中です。

なんとエックスサーバーでアカウントを取るとドメインが1つ無料でもらえます。そしてそのドメインはエックスサーバーと契約している限りずっと無料で使っていいというのです。

ドメインの移管でもこのキャンペーンの対象となるのでこの機会にサーバーとドメインをXサーバーで統一してみてはいかがでしょうか?初回10日間は無料でお試しできます。

わたしはキャンペーンの少し前にXサーバーにドメイン移管をしてしまいました…。みなさんはこの機会をお見逃しなく!

\エックスサーバーキャンペーン中/

さらに上を行くWordpressのテーマはこちら↓

【THE THOR(ザ・トール)】 の特徴
  • 圧倒的にSEOに強い
  • おしゃれで美しいデザイナーズサイトが簡単に作れる
  • アクセスUP収益UPを強力に後押しする「集客・収益化支援システム」を搭載
  • ランキングサイト・口コミサイトなどが簡単に作れる など
ブロガー専用WordPressテーマ「OPENCAGE」 の特徴
  • ブロガー向けのシンプルで高機能なテーマ
  • カスタマイズに時間をかける必要がない
  • 全てモバイルファーストでつくられているのでスマホで見た時のデザインが抜群

インターネット接続キャッシュバックでお得です↓

タイトルとURLをコピーしました