【SWELL】固定ページを使わずにトップページにカテゴリーを表示する方法

CanvaはGoogleアカウントなどで登録

まだCanvaで画像を作ったことがない方は、無料でも使える素材がたくさんあるので、この機会に登録しておくと便利です。

アイキャッチ画像作成

詳しい作り方は、以下の記事を参考にしてください。

スマホの写真じゃなくても、Canvaの無料素材で作れます。

あわせて読みたい

スマホの写真を使って、ワードプレスの記事を書こう！ こんにちは、ぐちこです。 ブログ記事は、スマホで撮った写真を使ってより分かりやすく読者さんに伝えたいですよね。 この記事でわかること スマホに保存してある写真を…

• カスタムサイズ1200×630
  • 画像サイズはそろえましょう。
• 画像のみをWordPressメディアに追加でもOK。
  • 後で設定するピックアップバナーでカテゴリー名が表示可能です。
• 画像の上に表示したいカテゴリー名をテキスト入力してもOK

ぐちこ

個人的には、画像の上にテキスト入れた方が目立つ印象あるのでおススメ

WordPressメディアにアップロードする

Canvaで作成したファイルは、パソコンの「ダウンロード」に入っているので、ダッシュボード＞メディア＞ライブラリーにアップロードしておきます。

1. 管理画面下＞外観＞
2. メニューを選択
3. 表示オプションで「カテゴリー（タグで使いたい人はタグも）」と「説明」にチェック
   • 説明にチェックが入っていないと、この後作る（STEP3）画像登録ができませんので注意！
4. 「新しいメニューを作成しましょう」をクリック
   • メニュー構造＞メニュー名に好きな名前を入れる
   • わかりやすくピックアップバナーでOK
5. メニュー設定＞ピックアップバナーにチェックを入れる
   • 上の画像では隠れてますが、メニュー設定のスクロール下にあります。
   • メニューを作成をクリックし保存

新しいメニューの内容を保存する

1. 編集するメニューを選択＞先ほど作成したピックアップバナーを選択
2. メニュー名とメニュー設定「ピックアップバナー」を確認
3. カテゴリー＞使いたいカテゴリーを選択
4. カテゴリー（やタブ）＞メニューに追加をクリック
5. メニューを保存をクリック

それぞれのカテゴリー横の【▼】をクリックすると詳細設定になります。

1. ナビゲーションラベルに表示させたい文字を入力する
   • このナビゲーションラベルを表示する/しないの設定はカスタマイズからできます
2. 説明に画像のURLをはりつける
   • URLはりつけは、ちょっと大変だけど次の説明（STEP4）を見てください。
3. 表示順を決める
   • 「移動」もしくは「ドラッグ」で調整
4. メニューを保存をクリック

STEP3の説明欄に画像のURLをはりつけていきます

1. STEP3の説明欄に「URLをクリップボード」にコピーをして「説明」欄にはりつける
   • メモに書いても良いけど、一文字でも違うと表示されないので、コピーが確実です。
2. この動作をカテゴリーごとに行います
   • 毎回「メニューを保存」を忘れないでね。

まもねこ

ここが乗り越えられたらあと少し！