MENU
ぐちこ
パソコン不慣れでもブログをはじめた看護師歴30年以上の50代。
適応障害の経験もあり、仕事や人間関係には慎重に対応しています。老後の生活に不安あり投資信託開始、FP3級取得。リフレッシュは韓国旅行。
40代50代の看護師が無料で好条件の非公開求人を見つけて転職に成功する方法

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

  • URLをコピーしました!

サイト型トップページにチャレンジしたけど、うまくできなかった・・・

新着記事・人気記事しか表示されていないトップページにカテゴリーを表示させたい!

トップページをオシャレにしたい!

なんてお悩みありませんか?

この記事はこんな方におススメ
  • せっかく買ったSWELLでサイト型トップページにチャレンジしたけど、うまくいかなかった方
  • 固定ページで作成するサイト型トップページの作り方をあきらめた方
  • ブログのトップページにカテゴリーを表示したい

サイト型トップページを作るには、固定ページを作成する高度なテクニックを紹介する記事がたくさんありますよね。

初心者さんには、ちょっとハードルが高い。

普段使っていないブロックをいくつも作って仕上げなくてはならないし、知識も必要、根気も必要。

ぐちこ

私も丸一日チャレンジしたけど、あきらめました・・・

その中で見つけた方法がこれ!

カスタマイズのピックアップバナーでカテゴリー表示を作る

\こんな感じに仕上がります/

スマホトップページ
スマホで見るとこんな感じ
パソコンのトップページ
パソコンで見るとこんな感じ

この記事では、トップページのメインビジュアル下にある、ピックアップバナーにカテゴリーを設置する方法をご紹介していきます。

この記事は初心者さん向けに、以下の内容について説明しています。

  • Canvaを使って、カテゴリーのアイキャッチ画像を作る
  • WordPressで新しい「メニュー」を作成
  • カスタマイズでカテゴリーをトップページに表示させる

この記事が目指すあなたの姿

検索で来てくれた読者さんがホームに戻った時、興味のあるカテゴリーに来てくれる⇒PVアップ

SWELLカスタマイズが少しわかり、ちょっと嬉しい、ワクワクできるブログ継続力アップ

自分のサイトがもっと好きになる⇒継続は力なり

自己紹介
  • 看護師歴30年以上、現在介護老人保健施設に勤務して4年目
  • パソコン不慣れな50代半ば
  • Web知識も当然持っていません!
  • 2022年9月からWordPressでブログにチャレンジ
  • 韓国旅行で現実逃避することでストレス発散

詳しいプロフィールはこちらから

ぐちこ

早速紹介していきます

目次
スポンサーリンク

Canvaを使ってカテゴリーのアイキャッチ画像を作る

もちろん、他の画像でも大丈夫です。
その画像を、WordPressメディアライブラリーにアップロードしておきましょう。

「作り方を知っているよ」ってかたは、次の【ピックアップバナーのメニュー追加】へどうぞ

STEP
Canvaへアカウント登録

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

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

Canvaを使って写真加工する
STEP
好きな写真やグラフィック画像でアイキャッチ画像を作る

アイキャッチ画像作成

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

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

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

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

STEP
WordPressメディアライブラリーに追加する

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

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

WordPressピックアップバナーのメニュー追加

ピックアップバナーのメニューを作る

ぐちこ

ここが一番ややこしいです。一つ一つやっていきましょう!

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

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

メニュー構造編集
メニュー構造設定画面
  1. 編集するメニューを選択>先ほど作成したピックアップバナーを選択
  2. メニュー名とメニュー設定「ピックアップバナー」を確認
  3. カテゴリー>使いたいカテゴリーを選択
  4. カテゴリー(やタブ)>メニューに追加をクリック
  5. メニューを保存をクリック
STEP
メニュー構造に画像を登録

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

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

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

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

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

カスタマイズでピックアップバナーを設定する

ピックアップバナーの設定
カスタマイズ画面

外観>カスタマイズ>トップページ>ピックアップバナーを選択

以下のことが、カスタマイズで設定可能です。

  • バナーレイアウト(PC);パソコンでの見え方
    • 固定幅4列
    • 固定幅3列
    • 固定幅2列
    • フレックス(横一列)
  • バナーレイアウト(SP);モバイルでの見え方
    • 固定幅2列
    • 固定幅1列
    • スライド(横スクロール)
  • バナーのタイトルデザイン
    • 表示しない⇒画像にカテゴリー名入れている人はコレ
    • 左上に表示
    • 右下に表示
    • 中央(シンプル)
    • 中央(ボタン風)
    • 下にワイド表示
  • バナー画像を少し暗く
    • する/しない

カスタマイズ画面一番下にある表示方法を、パソコンやモバイル・スマホで確認しながらあなたのサイトにぴったりなものを見つけましょう。

ぐちこ

固定ページを使わなくても、ここまでできた!
SWELLは初心者さんに、手厚く優しいテーマと感じます。

お疲れさまでした
お疲れさまでした!

\ここまで出来たら、次にこんなチャレンジしてみませんか?/

まとめ

ブログの玄関口トップページにカテゴリーを表示する方法の一つとして、カスタマイズのピックアップバナーを使う方法について紹介しました。

  1. Canvaでアイキャッチ画像を作り、メディアライブラリーにアップロードする
  2. WordPressピックアップバナーのメニューを新規作成する
  3. カスタマイズでピックアップバナーを設定する

固定ページを使ってもっと作り込んだおしゃれなトップページも憧れますが、一番は読者さんがあなたのサイトを自由にみて回れるようなトップページです。

この方法なら、パソコン不慣れな私が出来たように、あなたにも必ずできます

記事を見ながらぜひチャレンジして、読者さんもあなた自身もウキウキするトップページを作りましょう。

最後まで読んでくださりありがとうございます。

昨日よりちょっと前へを目指して。

今日はこの辺で、さようなら。

ランキング参加してます。応援お願いします。

ブログ村でフォローする

ぐちこびより - にほんブログ村
スポンサーリンク
よかったらシェアしてね!
  • URLをコピーしました!

コメント

コメントする

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

目次