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

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

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

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

HTMLもCSSも使わずに作ったサイト型ホームページの例を2つご紹介します。

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

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

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

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

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

私が運営しているもう1つのサイトのトップページです。

こちらは個別の記事ではなく、画像とボタンにリンクを張っているタイプです。

実際のページはこちらから⇒kodomo no GPS

例2のタイプは例1が分かればできるので、まずは例1のページの作り方についてご説明していきます。

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

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

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

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

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

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

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

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

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

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

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

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

簡単サイト型ホームページ 作り方 Cocoon設定

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Wordpressコクーン投稿編集画面

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

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

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

Wordpressコクーン新規投稿画面

[簡単サイト型ホームページ作り方③-3]ボタンの作り方

上の画像のおすすめ記事はどのように作るかというと、

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

こちらの画像のように、“おすすめ記事”と書いた部分を選択して出てきたメニューから【バッジ】を選ぶことで作ることができます。

[簡単サイト型ホームページ作り方③-4]リンクボタンの作り方

最後に

の作り方です。実際に上のボタンは当サイトのWordpressのカテゴリーにリンクさせています。

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

まず【cocoonブロック】から【ボタン】を選びます。すると

と表示されるので“ボタン”を好きな文字に変えます。

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

そして記事作成画面右側に表示されている【ブロック】でリンク先のURLなどを入力していきます。

こちらの【ブロック】を見ていただけると分かりますが、ボタンは丸くしたり、光らせたりすることもできます。

※【文書】や【ブロック】タブが表示されていないときは、上の画像右上の歯車マークを押すと出てきます。

[簡単サイト型ホームページ作り方]完成

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

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

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

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

はじめにご紹介したこちらのホームページの作り方は以下の記事にまとめました。

HTMLもCSSも使わないサイト型ホームページ2ワードプレスCocoonで簡単
HTMLもCSSも使わずにボタンのクリックのみで作ることができるサイト型のホームページのご紹介です。

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

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

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

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

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

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

さいごに

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

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

WordPressでアフィリエイトはじめませんか?

私が実際に登録しているASP(アフィリエイトプロバイダー)です。どれも登録料は無料です。

長期間使わなくても成果が出なくても特にペナルティーなどはありませんし、無料の初心者向けオンラインセミナーが開催されているASPもあります。登録しておいて損はないです。

A8.net

会員数、広告主数ともに最大規模を誇るアフィリエイトサービス。登録しておいて間違いはないです。私もA8.netから収益が出ています。

公式ページにはほんの少しですがA8.netで提携できる広告主や、A8.netで収益を上げている方からのメッセージが載っています。

詳しくは公式サイトでご確認ください⇒A8.net

バリューコマース

バリューコマースでは。ネットでよく見かける以下のような複数のアフィリエイトリンクを同時に表示させることができるパーツも作ることができます。

MyLinkBox(マイリンクボックス)という名前です。私はこのマイリンクボックスをよく使っています。収益も出ています。

実際にバリューコマースのマイリンクボックスを使って作ったリンクです↓



以下は実際にマイリンクボックスを使って書いた記事になります。参考にしてみてください。

2021年しゃべる地球儀おすすめ9選比較.レビューや口コミ,購入時のポイントも
しゃべる地球儀はたくさんあります。メーカー、価格、サイズ、情報量などそれぞれに特徴があるのでまとめました。最適な商品を選ぶお手伝いができればと思います。

公式ページではバリューコマースで提携できる50社ほどの広告主を見ることができます。

詳しくはバリューコマース公式サイト⇒https://www.valuecommerce.ne.jp/info/register.html

もしもアフィリエイト

もしもアフィリエイトでも上のバリューコマースのような商品紹介パーツを作ることができます。

実際にもしもアフィリエイトのMyLinkBoxを使って作っています↓

参考記事

カエレバみたいな複数の広告主のアフィリエイトリンクを同時に表示するには?
カエレバのように複数の広告主のアフィリエイトリンクを同時に表示するにはどのサイトのどの機能を使ったらよいのかカエレバ以外に2つご紹介しています。

もしもアフィリエイトのトップページにある“もしもアフィリエイトの教育サービス”では、有名ブロガーさん達のアフィリエイト講座やノウハウ集を読むことができます。

もしもアフィリエイト公式サイト⇒https://af.moshimo.com/

アクセストレード

アフィリエイトのアクセストレード

報酬が税込1,000円から振り込んでもらえるのが良いところです。振り込み手数料も無料です。上の3つのプロバイダーに無い広告もたくさんあります。

アクセストレードのトップページでは広告数や人気の広告主を見ることができるほか、アフィリエイトの始め方の記事を読むことができます。

公式サイトはこちらです⇒https://www.accesstrade.ne.jp

afb(アフィビー)

カンファレンスバナー

アフィビーは最低支払金額が777円で、777円を超えると手数料無しで登録口座に振り込んでくれます。いくつか広告を使わせてもらっています。

何回かセミナーに参加しましたが、スタッフの方の対応も良くて好感の持てるASPです。

afbの公式サイトはこちらです⇒https://www.afi-b.com/
ワードプレスCocoon
osaifullをフォローする
おさいフル
タイトルとURLをコピーしました