【Cocoon】サイドバーの基本的な使い方【初心者向け】

Cocoonサイドバーの基本的な使い方Cocoon

本記事では、WordPressテーマCocoonを使用しているあなたにサイドバーの基本的な使い方を詳しく説明していきます。

サイドバーはウィジェットを使って簡単に設定ができますので、自分の好きなように表示させてみてください。

サイドバーの基本はわかるから、カスタマイズの方法がしりたいな

そんなあなたには下の2記事がおすすめです。どうぞご覧ください。

サイドバーの左右表示位置と表示するページ設定

まずはサイドバーをどのページの左右どちらに表示させるかの設定をします。

ワードプレスの管理画面からCocoon設定全体と進んでください。

下の方にスクロールしていくと、サイドバーの位置サイドバーの表示状態の項目があります。

僕は右側表示で、すべてのページに表示するように設定しています

一般的なブログであればサイドバーは右側でたいていどのページにも表示されています。あなたのお好みで設定するようにしましょう。

サイドバー表示内容設定

そしたら、サイドバーの中身をどんなものにするか決めていきます。次はワードプレスの管理画面から外観ウィジェットと進みましょう。

ウィジェット画面の左側の項目が「追加できる内容」で右側の項目が「追加できる場所」です。

いろんなところにいろんなものを置けますね!今回はサイドバーに注目ですよ

表示内容を追加する

サイドバーには何を表示したいか決まっていますか?だいたい新着記事とか、おすすめ記事とか、プロフィールとかが多いですよね。

ウィジェット管理画面の左側からサイドバーに表示させたい項目を見つけてみましょう。みつけたら

  1. 追加したい項目を選択
  2. サイドバーを選択
  3. ウィジェットを追加を選択

これでサイドバーに追加されます。

項目の順番は後で変更できるので、表示したい内容をどんどん追加しましょう

表示内容を削除する

  • 最初に設定されていた内容を消したい
  • 追加する項目を間違えた

そんな理由で内容の削除をしたいときがありますよね。削除は簡単でサイドバーに追加されている項目を選択して、削除ボタンを押すだけ

これでサイドバーから削除されました。

表示内容の順序

で、表示の順番も簡単に変えることができます。

サイドバーのウィジェットエリアに入っている項目をドラッグ&ドロップで上下に動かせばOKです。

上の画像では、カスタムHTMLの項目をつかんで、検索の下にペッとはっ付けています

サイドバーの表示状態

サイドバーの中身を決めて、順番も決められた状態になったでしょうか?僕の設定はこんな感じになりました。

  • カスタムHTML(=ボックスナビ)
  • 検索
  • 新着記事
  • 関連記事
  • アーカイブ
  • プロフィール

サイドバースクロール追従で

  • 目次

それぞれの項目を選択して、詳細を決定していきましょう。

項目名、表示数、表示タイプ、関連、除外などをそれぞれ設定します
  • 内容選択
  • 詳細設定
  • 保存
  • 完了

上記の順番で選択していきましょう。そして、できたのが下の画像のような感じのサイドバー

  • 一番上の広告はCocoon設定広告で制御しています
    • もちろんウィジェットからでもアドセンスやASPからのバナー広告を表示する設定ができます
  • サイドバーの中身はほんの一例です。あなたのお気に入りの内容にしましょう

ボックスナビのやり方や目次追従のやりかたは別記事に詳細を書いています。次の項目をチェックしてみましょう

以上で基本的なサイドバーの説明は終わりです。あなたもぜひお気に入りのサイドバーを設定してみてください。

Cocoon関連記事

本記事以外にもCocoonに関する記事を書いています。そちらもどうぞご覧になってください。

Cocoon歴1ヶ月くらいの人向け

【Cocoon】ボタンの使い方が余裕でわかるようになる【ブロックエディタ】
【Cocoon】スライドショーを設定する方法まとめ
【Cocoon】アイキャッチ画像サイズを統一して揃える設定方法
【Cocoon】アフィリエイト広告の貼り方を始めから丁寧に【解説】
【Cocoon】アドセンス広告の貼り方を始めから丁寧に【解説】
Cocoonスキン一覧まとめ!カスタマイズなしでもおしゃれに決まる
【Cocoonスキン】おすすめ4選!とにかくブログをいい感じにしたい
【Cocoon】固定ページを一覧表示させる方法【ヘッダー/フッターほか】
【Cocoon】記事の書き方!投稿画面の使い方を画像たっぷり丁寧に解説【初心者向け】
【Cocoon】パンくずリストを投稿/カテゴリー/固定の各ページに設置する方法
Cocoonブロック一覧!全機能まとめ【初心者向け】
【Cocoon】お問い合わせフォームの設置方法を初心者向けに画像たっぷりで説明する
【Cocoon】目次が表示されない⁉作り方完全解説
【Cocoon】投稿画面ツールバー機能一覧|文字色・ルビほか【初心者向け】
【Cocoon】サイドバーの基本的な使い方【初心者向け】
【Cocoon】吹き出しの基本的な使い方/右に変更など【初心者向け】

Cocoon歴半年くらいの人向け

【Cocoon】ショートコードの使い方!便利さをマジで知ってもらいたい
【Cocoon】Twitter(ツイッター)埋め込みは秒でできる
【Cocoon】テーブル/表を作成する方法を丁寧に解説(ブロックエディタ)
【Cocoon】行間と段落の間隔を調整する方法【初心者向け】細部にこだわろう
【Cocoon】トップページがボタン1つでサイト型にできるようになった【衝撃】
【Cocoon】カスタマイズまとめ!初心者でもわかりやすく解説
【Cocoon】リスト(箇条書き)をボックスに入れる超簡単な方法【カスタマイズ不要】
【Cocoon】ブログカードの基本的な使い方【初心者向け】
【Cocoon】サイドバーで目次をスクロール追従させる方法【初心者向け】

Cocoon歴がもっと長い人向け

【Cocoon】サイドバーカスタマイズ!カテゴリーのボックスメニューは意外と難しくない
【Cocoon】ブログカードカスタマイズ「続きを読む」を入れる/タイトルのみにする!
【Cocoon】目次カスタマイズ‼見やすくシンプルおしゃれにしよう【CSSコピペでOK】
【Cocoon】スマホ表示簡単カスタマイズ‼ハンバーガーメニューを固定追従させる

コメント

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