Twitterはこちら instagramはコチラ

「おすすめカードウィジェット」Cocoonでサイドバーにもカスタマイズ

Cocoon設定_おすすめカード_サイドバーウィジェット設定 Cocoon

 

前回はヘッダーに設置する「おすすめカード」の設定の記事を紹介しました。

▼ 前回の記事はこちら ▼

無料テーマCocoonの「おすすめカード」設置でクリック率アップを狙おう!

 

▽ 今回はこちらの設定です ▽

Cocoon設定_おすすめカード_サイドバーウィジェット説明

\\\ ドォーーーーーン ///

サイドバーのおすすめカードの設置です

 

おすすめカード」はヘッダーのみの設定かと思いきやサイドバーにも設置できるウィジェットが追加されていました

Cocoonは無料テーマなのになかなかやりますね!

ひろくま
ひろくま

無料なのに優秀すぎます・・・

 

▼ こちらの記事で今回説明するのは ▼
  • おすすめカードウィジェットの説明(サイドバー設置)

 

▼ 設定手順は以下の通りとなっています ▼

設定手順
  1. メニューを新規作成する
  2. 画像を準備する
  3. カテゴリー・タグなどに画像を設定
  4. サイドバーにウィジェットを設置する。

前回メニューの作成が済んでいる方ならすぐに設置できます。

おそらく2,3分もあれば設定完了します

メニューの作成などの準備まで完了している方は

こちらから「ウィジェット設置」の手順へジャンプしてください。

 

前回の「おすすめカード」の設置方法を見ていない方はこちらの記事から見ていただくとわかりやすいです。

 

まだ無料テーマCocoon(コクーン)を入れていない方はこちらの記事が参考になります。

 

メニューの新規作成「おすすめカード用」

まずメニューの新規作成からです。

▼▼ Cocoon公式推奨 ▼▼

  1. 公式ではカードの設定4つまでが推奨となっています

 

メニュー作成はヘッダーのグローバルメニューの作り方と同じ手順なので

▼▼ こちらの記事を参考にしてください ▼▼

メニューバー作成⇒Cocoonでおしゃれなレイアウト変更

 

画像の準備「おすすめカード用」

画像はサイトテーマ・カテゴリーに合った画像をさがして準備しておきましょう。

 

カテゴリー・タグに画像設定

おすすめカードに使用したいカテゴリー・タグなどに画像を設定します。

手順はこちらの前回の記事で確認できます。

「カテゴリー・タグ」に画像設定

次からサイドバーウィジェットの設定手順です。

サイドバーにウィジェットを設置する

WordPress(ワードプレス)管理画面より以下の手順で

サイドバーウィジェットの設置します。

 

▼▼ サイドバーウィジェット設置手順 ▼▼

  1. 外観 ➡ カスタマイズ選択 ▽
  2. ウィジェットを選択 ▽
  3. サイドバー選択 ▽
  4. 「+ウィジェットを追加」
  5. [C]おすすめカード選択
  6. おすすめカードの設定
  7. プレビューの確認(モバイルも)
  8. 「公開」する

外観 ➡ カスタマイズ選択 ▽

設定Cocoon設定_おすすめカード_サイドバーウィジェット_外観_カスタマイズ

▲ 外観よりカスタマイズをクリック ▲

 

ウィジェットを選択 ▽

設定Cocoon設定_おすすめカード_サイドバーウィジェット_ウィジェット選択

▲ ウィジェットを選択します ▲

サイドバー選択 ▽

Cocoon設定_おすすめカード_サイドバーウィジェット_サイドバー選択

▲ サイドバーを選択します ▲

 

「+ウィジェットを追加」

Cocoon設定_おすすめカード_サイドバーウィジェット_+ウィジェットを追加をクリック

▲ 「+ウィジェットを追加」をクリックしましょう ▲

 

[C]おすすめカード選択

Cocoon設定_おすすめカード_サイドバーウィジェット_おすすめカード選択する

▲ [C]おすすめカードを選択します ▲

おすすめカードの設定

▽ こちらではおすすめカードの設定をします ▽

  1. タイトル:(任意)
  2. メニュー名:おすすめカード用のメニュー
  3. 表示スタイル:4つからお好きなスタイル選択

Cocoon設定_おすすめカード_サイドバーウィジェット_おすすめカードの設定をする

▲ こちらでおすすめカードを設定します ▲

 

タイトル

タイトルは入力してもしなくてもOKです。

 

メニュー名

Cocoon設定_おすすめカード_サイドバーウィジェット_メニュー名_おすすめカード選択

▲ メニュー名はご自身で準備したおすすめカード用のメニューを選択 ▲

 

こちらの記事ではあらかじめ準備した「おすすめカード」のメニューを選択しています。

 

表示スタイル

4種類から表示スタイルを選びます。

表示スタイル
  • 画像のみ
  • 中央白文字
  • 中央ラベル
  • 下段 黒背景
選び方
  • タイトル付き
  • 文字なしの場合
  • 上記に同じ
  • 上記に同じ

 

画像のみ

 

Cocoon設定_おすすめカード_サイドバーウィジェット_表示スタイル_画像のみ

▲ 画像のみはこちら ▲

 

画像にタイトルを付けてあるカードなら「画像のみ」でOKです。

 

 

画像文字中央に白文字タイトル

 

Cocoon設定_おすすめカード_サイドバーウィジェット_表示スタイル_画像中央に白文字タイトル

▲ 画像の中央に白文字でタイトルが表示されます ▲

現時点ではタイトルの色選択はありません。今後色が変更できる仕様になるかもしれませんね。

カードにカーソルを合わせると

 

Cocoon設定_おすすめカード_サイドバーウィジェット_表示スタイル_文字が消える

▲ タイトルが消えます ▲(以下2つも同様の動作)

 

画像中央にラベルでタイトル

 

Cocoon設定_おすすめカード_サイドバーウィジェット_表示スタイル_画像中央にラベルでタイトル

▲ 黒文字に白背景の表示タイトルの設定です▲

 

画像下段を黒背景にしタイトルを重ねる

Cocoon設定_おすすめカード_サイドバーウィジェット_表示スタイル_画像下段を黒背景にしタイトルを重ねる

▲ 薄い黒背景に白文字タイトルが下段に表示 ▲

 

画像のみはタイトル付き画像のみ選択して

文字なしの画像のみの場合は以下の3つをお好みで選択します。

手っ取り早くおすすめカードを作りたい方はタイトル付きを選択したほうがよいでしょう

 

おすすめカードウイジェットの配置設定

Cocoon設定_おすすめカード_サイドバーウィジェット_好きな位置に移動する

▲ おすすめカードを任意でお好きな配置にドラッグして移動しましょう ▲

 

プレビューで「おすすめカード」確認

Cocoon設定_おすすめカード_サイドバーウィジェットプレビュー確認

▲ 設定しながらプレビューで確認しましょう ▲

 

モバイルのプレビュー

Cocoon設定_おすすめカード_サイドバーウィジェット_モバイルプレビュー

▲ あわせてモバイルの画面のプレビューも確認してみます ▲

 

PCからモバイル表示を見る場合
  • ▽▼▽ ワードプレス管理画面より ▽▼▽
  • ▼ 外観
  • ▽ カスタマイズ
  • ▼ モバイルアイコン選択

 

モバイルアイコンとは

▽カスタマイズ画面の左下にあります ▽

Cocoon設定_おすすめカード_モバイルアイコン

▲ こちらのアイコンをクリックするとモバイル表示がPCからでも可能です ▲

 

 

「公開」を選択する

 

Cocoon設定_おすすめカード_サイドバーウィジェット_公開をクリックする

▲ プレビューで確認し問題ないようでしたらすべての設定が完了したら「公開」選択しましょう

 

他のウィジェットエリアにも使用可能

今回はサイドバーウィジェットに「おすすめカード」を設置する設定ですが

その他のウィジェットエリアにも設置できますので実際に設置してみて色々試してみてください。

 

まとめ:おすすめカードがウィジェット追加でさらに便利に

  1. メニューの新規作成「おすすめカード用」
  2. 画像の準備「おすすめカード用」
  3. カテゴリー・タグに画像設定
    1. サイドバーにウィジェットを設置する
      1. 外観 ➡ カスタマイズ選択 ▽
      2. ウィジェットを選択 ▽
      3. サイドバー選択 ▽
      4. 「+ ウィジェットを追加」
      5. [C] おすすめカード選択
      6. おすすめカードの設定
      7. タイトル
      8. メニュー名
      9. 表示スタイル
      10. 画像のみ
      11. 画像文字中央に白文字タイトル
      12. カードにカーソルを合わせると
      13. 画像中央にラベルでタイトル
      14. 画像下段を黒背景にしタイトルを重ねる
      15. おすすめカードウイジェットの配置設定
      16. プレビューで「おすすめカード」確認
      17. モバイルのプレビュー
      18. モバイルアイコンとは
      19. 「公開」する
    2. 他のウィジェットエリアにも使用可能
  4. まとめ:おすすめカードはウィジェット追加で便利に

 

▽ まとめ ▽
  • かんたんに設置できる
  • ウィジェットなので色々な所に配置可能
  • メニュー4つまでが推奨
  • ヘッダー以外に設置したい方はおすすめ

▼ 前回のおすすめカードの記事はこちら ▼

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