ブログを始めたい!アフィリエイトを始めたい!

ワードプレスでブログを開設するのに何が必要なのか?

詳しくはこちら

Cocoonサイト型トップページの作成手順2

Cocoonカスタマイズ

こんにちは、ハナです。

今回は、 Cocoonサイト型トップページの作成手順2ということで、ハナが以前作成していたページを参考に書いてみたいと思います。

こちらを読む前に、Cocoonサイト型トップページの作成手順1をご覧ください。

トップページ用固定ページ設定の変更

ページ右側文書下で広告や目次の非表示設定ができます。
また、トップページのタイプも設定できます。

トップページ用固定ページ内容作成

いよいよトップページの内容を作成していきます。

ハナの作成したトップページでは、新着情報、カテゴリー別に記事表示させていました。
こちらの表示方法を書きたいと思います。

新着情報表示

ブロックの追加で段落を選び、ショートコードをクリックすると挿入できる一覧が表示されます。

その中の新着記事一覧をクリックします。

赤枠の中の数字は表示させる件数です。お好きな数を設定してください。

count=”5″ ・・・・ アイテムの表示数
type=”default” ・・・通常のリスト表示
cats=”all” ・・・・・全てのカテゴリを表示
children=”0″ ・・・  子カテゴリーは含めない
post_type=”post” ・  表示する投稿タイプ、 postは投稿ページ pageは固定ページ 。

上記のようにデフォルトでは設定設定されていますが、ここも好きなようにカスタマイズできます。
詳しくは公式サイトに書かれています。
色々カスタマイズするのも楽しいかと思います。

Cocoonでは、ショートコードを用いて新着記事一覧を表示することが可能です。

Cocoon公式サイト

見出し作成

「ナビカード」によりカテゴリー記事表示を作成する前に、見出しを作成します。

カテゴリーを横に2つ表示させたいので、2カラムにします。
ブロックの追加  ⇒ レイアウト要素   ⇒  カラムをクリックします。

このように表示が変わります、真ん中にあるブロックの追加をクリックします。

次に、見出しをクリックします。

ここで見出しの種類を選びます。
今回はトップページのみで使用するh2ということで、ブロック下の高度な設定の追加cssクラスに任意のクラス名を付けてカスタマイズします。
クラス名に「top」を追加しました。

子テーマのstyle.cssに下記のようにCSSを書き込みました。

/*トップページh2装飾*/
h2.top {
background-color: #ffffff;
border: none;
padding: 0;
}

h2.top {
color: #333; /*文字の色を変更*/
padding: .5em 0;
margin-top: 40px;
border-top: 3px solid #F7CDDA; /*線の色を変更*/
border-bottom: 3px solid #F7CDDA; /*線の色を変更*/
}

このように見出しが出来ました!

「ナビカード」ショートコードの使い方

次に、カテゴリー別に記事表示させるカスタマイズについて書きます。

ナビカードを使用して作成しています。

以前こちらのページで説明した、WordPressでのメニュー作成を参考に表示させたいグループのメニューを作成してください。

ブロックの追加で段落を選び、ショートコードをクリックすると挿入できる一覧が表示されます。

その中のナビカード一覧をクリックします。
このようにショートコードが挿入されました。
メニュー名の所を、先ほど作成したメニューの名前を入力します。

type=”default” ・・・・ 通常のリスト
bold=”0″ ・・・・・・ 記事タイトルを太字にするかどうかです。(1が太文字)
arrow=”0″ ・・・・・  カードに矢印を表示するかどうかです。 (1がやじるしを表示する)

上記のようにデフォルトでは設定設定されていますが、ここも好きなようにカスタマイズできます。
詳しくは公式サイトに書かれています。
色々カスタマイズするのも楽しいかと思います。

Cocoonの本文中や、サイドバー等に「自分の表示させたいリンク」をカード形式で表示できるナビカードショートコードを実装しました。

Cocoon公式サイト

ボタン作成

「新着記事一覧」などのボタンを作成します。
ブロックの追加 ⇒ Cocoonブロック ⇒  ボタンをクリックします。

ボタンの箇所に「新着記事一覧」 など文字を入力します。

右側ブロックのボタンで、リンク先、リンクの開き方、ボタンのサイズ、光るボタンなど色々設定できます。

ハナの以前のトップページの作成手順でした。
近いうちに、トップページを変更しようと思います。
また、その手順なども書きたいと思います。お楽しみに!