【Cocoon】カテゴリーをボックスメニュー化する方法【WordPress】

ブログ

こんにちは~!かもめです。

このサイトを見つけてくださってありがとうございます。
ここでは、日々のレクリエーションを何にしようか悩んでいる介護士さんへ、ヒントになるようなレクネタを紹介しています。
また、かもめがレクを実際に行った時の様子や反省点なども紹介しています。

今回は、かもめの運営しているこのブログで分かりにくかった操作の仕方を紹介しようと思います。

それは ”カテゴリーをサイドバーにボックスメニューとして表示する方法” です。

あ、興味ないやという人はバックしてもらってOK。
今回はごめんなさい。

それでは、ワードプレスの機能に興味ある方は、一緒に参りましょう。

スポンサーリンク

ボックスメニューとは?

このブログにも取り入れているます。実際に見てもらうのが一番わかり易いと思いますので、少し上にスクロールしてもらいましょう。
見えましたでしょうか?ボックスメニューとは、

右側のサイドバーの一番上にある、各カテゴリーに飛べるようになっている部分 

のことです。

このブログでは「メニュー」というタイトルを付けて、カテゴリーにとべるようにしています。
ちょっとアイコンが大きいので、かなり存在感を感じるかもしれません💦

ボックスメニューの作り方

手順を追って一つ一つ紹介しようと思います。 手順は以下のようになります。

  1. 新しいメニューをつくる
  2. メニュー内容を決めて保存する
  3. おすすめカードをウィジェットの設定する
  4. 表示を確認する
  5. アイキャッチを設定する

この様な流れになります。

ちなみに今回は、WordPressの 「Cocoon」 というテーマを利用している人向けです。
Cocoonは無料のテーマながら、いろいろな機能が揃っていて使いやすいですよ!

新しいメニューをつくる

はじめに 「外観」 → 「メニュー」を選択して開きます。

次に、 「新しいメニューを作成しましょう」 というリンクが貼ってあるので、クリックします。

メニュー名を入力して、「メニューを作成」とあるボタンをクリックします。

これで新しいメニューが出来ました。

メニュー内容を決めて保存する

「編集するメニューを選択;」に、先程つくったメニュー名が表示されていると思います。

同じ画面の左下にある「メニュー項目を追加」というところから、ボックスメニューにしたい項目を選択します。今回は例としてカテゴリーをボックスメニューにしようと思います。

「カテゴリー」と書いてあるプルタブをクリックして、ボックスメニューにしたい項目にチェックを付けていきます。

最後に 「メニューに追加」 をクリック。

右の 「メニュー構造」 に先程選択した項目が表示されました。

一つ一つの項目にプルダウン出来るようになっていますが、今回は変更せずにこのままで行きます。
そのまま、「メニューを保存」 をクリックします。

おすすめカードとして作成したメニューをウィジェットに設定する

「外観」→「ウィジェット」を選択して開きます。

「利用できるウィジェット」 から 「[C]おすすめカード」 を選択して、表示させたい場所を選びます。「ウィジェットを追加」 ボタンを押して確定させます。
今回は 「サイドバー」を選択します。

「サイドバー」 に 「[C]おすすめカード」 が表示されました。

表示された 「[C]おすすめカード」 をクリックすると、表示の仕方を選択できる画面が出てきます。
「タイトル」 → ボックスメニューのはじめにつける名前です。
「メニュー名」 → 先程作成したメニューを選択します。
「表示スタイル」 → カテゴリーのタイトルを表示するか?どの位置に表示するか?等を選択できます。
「余白を有効にする」 → ボックスメニューの間に余白を入れるようになります。

以上を決定して、「完了」 をクリックします。

これで、ブログのサイドバーにボックスメニューが出来ています。

実際にブログに行って出来上がりを確認しましょう。

*尚サイドバーの中で、ボックスメニューの場所を変えるには、「[C]おすすめカード」 を表示させたい位置にドラッグ・アンド・ドロップします。

アイキャッチを設定する

既にカテゴリーにアイキャッチを付けている人はここで終了です。
アイキャッチがまだという人も、ここまで来たら後ひと踏ん張りです。

「投稿」 → 「カテゴリー」 を選択します。

「カテゴリー」のページに飛んだら、ボックスメニューの中に入れたカテゴリーの近くにカーソルを当て、「編集」をクリックします。

カテゴリーの編集画面の下の方に 「アイキャッチ」 という場所があるので、「選択」をクリックします。

「画像を選択してください。」という画面になるので、アイコンとして使いたい画像を選択します。

右側の欄に、選択した画像が表示されたら、右下にある「画像の選択」をクリックします。

「アイキャッチ」に画像が表示されていたら成功です。一番下の「更新」をクリックします。

これで完成です!

最後に

画像が多くてサイトが重かったらすみません。
今度は画像圧縮技術を学んで、紹介してみようと思います。

色々デザインを変えることは楽しいですね!

内容そっちのけでこだわってしまいたくなります💦

でも、苦労して出来るようになったことが、誰かの役に立てたらなぁと、思います。

さあ、新しいことへレッツトライ!

コメント

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