WordPress、無料テーマ「Cocoon」のサイドバー設定方法
2019年2月5日
人気無料テーマ「Cocoon」を利用してブログのサイドバーをカスタマイズします。Cocoonには既存でサイドバー用のパーツを作成するウイジェットが用意されています、これを利用して、驚くほど簡単な操作で「最新記事一覧」や「人気記事一覧」の作成ができます。また、サイドバーに欠かせないプロフィールヤSNSボタンの設定も紹介しています。あなたのブログのサイドバーが生まれ変わります(^▽^)
ブログのサイドバーとは、メイン記事の右側(または左側)に設置する領域のことです。このサイドバーにどんな内容を設定するかはとても重要です。「どんな人がこのブログを運営しているのか」、「ブログの運営目的は何か」、「どんな内容の記事が主なのか」が読者にストレスなく伝わることが大事です。そしてサイドバーはクリックしようと思ってもらえることが第一条件です。
読者にとって関心のある項目が「記事一覧」に並んでいると、別の記事も読んでもらえます。またTwitterやInstagramのリンクがあればあなたのことを知ってもらえるチャンスになります。
どのようなコンテンツ(項目)を置くかは悩むところですが、ブログを構築したばかりの初心者向けに設置して欲しいオススメのコンテンツ(項目)とその設定方法について解説します。
*今回の設定は人気無料テーマ「Cocoon」を利用しています、設定画面は利用するテーマによって異なります。
*無料テーマ「Luxeritas(ルクセリタス)」を利用した設定画面(Luxeritasに特化していない設定もあります。基本部分はその他のテーマを利用の場合でも参考にしていただけます)は以下を参照ください
↓↓↓↓↓↓↓
■WordPress(ワードプレス)のサイドバー設定方法[初心者向け]、SNSフォローと新着記事とウイジェット設定
サイドバーに表示したい項目
サイドバーに設置するべきおすすめの項目は以下です。
- プロフィール
- SNSフォローボタン
- 検索用ウィンドウ
- 最新記事一覧
- 人気記事一覧
- カテゴリー
この他にも「メルマガ登録用のバナー(メルマガフォームへのリンク)」や、「おすすめ企画へのバナー(アフィリエイトしたい商材のLPへのリンク)」などの配置が必要になってきます。
今回はブログを構築したばかりの段階を想定しての設定なので、上記の「基本5項目+SNSフォローボタン」の設定方法を紹介します、今後のビジネスの発展に伴い随時追加していっていただければと思います。
ウィジェット設定
まずウィジェットとは、パソコンのデスクトップやWebページなどで動作する小さなアプリケーションのことです。ウィジェットを利用することであらかじめ用意されている機能を色々組み込むことができます。
ウィジェットには、
・もともとWordPrssのデフォルト機能として含まれているもの
・プラグインで追加するもの
・テーマ(サンプルで使用しているのは*無料テーマ「Cocoon」)に付随しているもの
等があります。
利用できるウィジェットは「利用できるウィジェット一覧」の画面で確認できます。
ウィジェット設定画面
ダシュボードの左メニューで、[外観]>>[ウィジェット]をクリックします。
ウィジェットの一覧画面がでます、内容は使用するテーマによって異なります。
*無料テーマ「Cocoon」のウィジェット画面です。
*デフォルト=初期設定の状態
現状(変更前のデフォルト)のブログのサイドバーの表示です。
不要な項目の削除
まず、今回表示をしないことにする項目を非表示(削除します)
表示しない項目は
■アーカイブ
■メタ情報
です。
メタ情報の削除
「メタ情報」は本体の機能とは別の付加的な機能にあたる項目です。ここには、ダッシュボード(管理画面)を表示するための「ログイン」画面の表示などがありますが、読者は利用しないので一覧から削除します。
*ログイン画面はブラウザのお気に入りに登録しておきましょう。
①メタ情報の右端にある▼をクリックすると▲(上むき三角)になります。
②内容が表示されるので[削除]をクリックします。
メタ情報が削除されました。
アーカイブの削除
アーカイブは月ごとの記事をまとめて表示してくれる機能です。
*自分がブログを探す際には利用する可能性はありますが、読者側の立場ではほぼ利用しません。いつからブログ記事を書いているかを知らせることはできますが、ビジネスとしてブログを運営する上でアピールポイントとしてのメリットは少ないと思われます。りんごの個人的な意見ですが、削除したほうがよいと思います。
*個人的な考えもあるかと思います、表示or非表示の判断は自身で決めてください。必要であればまた表示できます。
メタ情報と同じ操作で、「アーカイブ」を削除します、
追加するウィジェット
追加するウイジェットは以下です
■プロフィール
■SNSフォロー
■新着記事 (*最近の投稿と入れ替えます)
■人気記事
プロフィール
設定方法は以下の記事でご紹介しています。
↓↓↓↓↓↓↓
■WordPress、[Cocoon]サイドバーに「プロフィール」と「SNSフォロー」をウィジェットで簡単に設定
SNSフォロー
***上記と同じ記事に記載しています。***
↓↓↓↓↓↓↓
■WordPress、[Cocoon]サイドバーに「プロフィール」と「SNSフォロー」をウィジェットで簡単に設定
新着記事
新着記事一覧を追加します。
ウィジェット一覧から「[C]新着記事」をクリックします。
*[C]と先頭に付いているのはテーマ「Cocoon」専用に用意されたウイジェットです。
*ウイジェットは、利用するテーマにより異なります。
開いたウィンドウから表示位置を選択します、
デフォルトで[サイドバー]が選ばれています、このまま[ウイジェットを追加]をクリックします。
ウイジェット一蘭に追加され、詳細を確認します。
そのままで問題なければ「完了」をクリックします。
*内容を変更した場合は[保存]をクリックします。
元々設置されていた[最近の投稿] は新着記事と同じ項目なので削除します。
ブログの表示状態を確認します。
サムネイルも設定された新着記事一覧が表示されています。
人気記事
人気記事一覧とは、読者による閲覧数を計測して、閲覧数の多い記事を一覧表示してくれる機能です。
Cocoonには人気記事一覧も簡単な設定で設置できるウィジェットが用意されています。
ウイジェット一覧から「[C]人気記事」をクリックします。
開いたウィンドウから表示位置を選択します、
デフォルトで[サイドバー]が選ばれています、このまま[ウイジェットを追加]をクリックします。
「人気記事」の項目がサイドバー一覧に追加され、詳細設定の内容が表示されます。内容を確認して[完了] をクリックします。
*基本デフォルトのままでOKです
*表示モードや表示数が設定できます
*集計期間は直近の30日間に設定されています(その他の期間設定もできます、おススメは30日間です)
*内容を変更した場合は[保存]をクリックします
<参照>モバイル設定の内容は以下のまま、特に変更しなくても大丈夫です
ブログの表示状態を確認します。
新着記事一覧と同様にサムネイルが設定された一覧が表示されています。
*人気記事一覧は設定後、表示されるまでに数日かかる場合があります
サイドバー項目の並び順変更
設定したサイドバーは、好みの順番に並べることができます。
サイドバーの設定画面で、移動したい項目の領域をドラッグし、移動したい位置に持って行きます。ドラッグ後に「保存」や「更新作業」は不要です、即座に反映されています。
実際のブログ表示を確認しながら、位置調整をしてください。
以下が、順番を入れ替え完了後の位置です。
*プロフィールやSNSの項目も設定完了した状態です。
*プロフィールは最上位がお勧めです。
いかがですが、サイドバーがあっという間に華やかになりましたね(^^)
サンプルサイトはこちら
↓↓↓↓↓↓↓
https://applired.xsrv.jp/cocoon/
サンプル画面では、表示形式をデフォルトに設定していますが、その他の設定も実際に表示して試してみることをおススメします。
では、ひきつづきもうひと頑張りという方は以下をどうぞ!
↓↓↓↓↓↓↓
■WordPress、[Cocoon]サイドバーに「プロフィール」と「SNSフォロー」をウィジェットで簡単に設定
SNSフォローボタン設置したいけど、
そもそもSNS(TwitterやFacebook )をもってないよ〜という方は以下で順番に作成方法をご案内しています。
↓↓↓↓↓↓↓
SNS活用 https://applired.net/sns/
りんごからのお知らせ
こんにちは、Ringoです。岡山県真庭市というところで、非常勤のデザイン講師をしながら、ブログやメルマガを利用したネットビジネスをご紹介しています。
このブログと連携して「ゆとりのシニアライフを実現させる」をテーマにメルマガを配信、シニア&初心者向けにネットビジネスの魅力と取り組み方をお伝えしています。噛み砕いた解説がわかりやすいと好評です(^^)
経済的にも心にも「ゆとり」をもたらす収入をゲットしませんか!
そんなあなたは必見ですよ
SNSやネット活用の実践講座を交えた実りいっぱいの無料メルマガです。
お申し込みはこちらのボタンをクリック、是非この機会に(^o^)ノ゙
↓↓↓↓↓↓↓↓↓↓
よろしければ、この記事やブログに関する 感想・聞いてみたいこと・要望などなどお聞かせください。内容と関係ない雑談も大歓迎です(^^)
↓↓↓↓↓↓↓お気軽にo(^-^)o♪
yoko_takano@appli.redまたは お問合せ
りんごからのお知らせ
こんにちは、Ringoです。岡山県真庭市というところで非常勤のデザイン講師をしながら、ブログやメルマガを利用したネットビジネスをご紹介しています。
このブログでは、老後の「ゆとり」を生む資金作りのノウハウを配信しています。
今だけ無料で『資金づくりの種類や手法をわかりやすくまとめたレポート』をお渡し、無料で受け取りたい!ということであれば、今すぐ「りんごのメルマガ」にご登録ください。
登録後、特典の受け取り方法をご案内するメールをお送りいたします。
*特典を受け取った後にメルマガを解除いただいても構いません。
*解除に対しての手数料もかかりません。
ただ、メールを読み続けていただくと、シニアライフに嬉しい「お小遣い」を獲得できるノウハウを紹介。無理なくコツコツと老後の資金を増やしていくためのお得な情報をお届けします。
SNSやネット活用の実践講座を交えた実りいっぱいの無料メルマガです。
お申し込みはこちらのボタンをクリック、是非この機会に(^o^)ノ゙
↓↓↓↓↓↓↓↓↓↓
よろしければ、この記事やブログに関する 感想・聞いてみたいこと・要望などなどお聞かせください。内容と関係ない雑談も大歓迎です(^^)
↓↓↓↓↓↓↓お気軽にo(^-^)o♪
yoko_takano@appli.redまたは
お問合せ
スポンサーリンク
関連記事
WordPress(ワードプレス)のサイドバー設定方法[初心者向け]、SNSフォローと新着記事とウイジェット設定
ブログのサイドバーとは、メイン記事の右側(または左側)に設置する領域のことです。 ...
WordPressの無料テーマルクセリタス (Luxeritas)の「見出し」デザインをカスタマイズ、投稿記事の見出し
Wordpressの無料テーマルクセリタス (Luxeritas)で見出しのデザ ...
WordPress、[Cocoon]サイドバーに「プロフィール」と「SNSフォロー」をウィジェットで簡単に設定
Worepressの無料人気テーマ「Cocoon」には、色々な便利ウィジェットが ...
WordPressの無料テーマルクセリタス (Luxeritas)のCTA、記事下にリボン付きのお知らせを追加
ルクセリタス (Luxeritas)の記事下に、お知らせを挿入。ちょっとおしゃれ ...
WordPressとはなにをするもの?Webページの作成とアップロードをわかりやすく解説[初心者向]
WordPressとは?よく聞くけど、「一体なんなのか?なにをするものなのか?何 ...
広告
ディスカッション
コメント一覧
大変参考になりました。
最初の設定の時に混乱していたのが重なってこんがらがっていましたが、すっきり整理出来ました!
ありがとうございます!!
じょーじさん、コメントありがとうございます。
お役にたててとっても嬉しいです(^^)
はじめまして。
ウィジットのサイドバーの設定はスマホには反映されないのでしょうか?
PCでは設定した通りに表示されるのですが、スマホで人気記事が表示されません。。
スマホで記事の下部に人気記事を2カラムで表示させたいのですが、もしやり方がわかるようでしたら教えて頂けたら嬉しいです。
突然のコメント申し訳ありません。よろしくお願い致します。
コメントありがとうございます、現在東京出張中の為、回答しばしお待ちください^ – ^
りんごです。岡山へ帰りましたすみません回答遅くなりました。
■サイドバー表示の件
さらにすみません非表示となる原因がいまのところ思い当たりません。
お問い合わせの状況ですが、ブログ記事用に作成しているサンプルページでは不具合なく表示がされています。こちらを参照ください、https://applired.xsrv.jp/cocoon/
*モバイルではサイドバーはボタンをクリックすると表示されます
念のため、モバイル設定のタブのキャプチャーを人気記事の設定方法の下に追加しておきました。参照ください。
P.s.表示されないのは、人気記事だけですか?その他のサイドバーは表示はできていますか?詳細がわかればお知らせください。
■記事下への表示の件
人気記事のウイジェット作成時に、表示位置を「投稿本文下」等を選んで「追加」をすると記事下に表示されます、残念ならがウイジェットの設定では2カラムにするオプションはないので、希望どうりにするためにはCSSを変更する必要があります。Cocoonのカスタマイズ記事を探してみてください。
こちらのサイトのようにモバイルページのサイドバーのカスタマイズができたらと思っているのですが記事にしていただくことはできないでしょうか?
こちらのサイトだとサイドバーが左から出てきて閉じると右に隠れていくイメージになっているのですが、その方法を教えて欲しいです。
色々と調べてみたもののモバイルページのサイドバーのカスタマイズは見出しの変更くらいで上記のようなカスタマイズ記事が見当たらなかったのでコメントさせていただきました。
よろしくお願いします。
伊藤さま、お問い合わせありがとうございます。
サイドバーの件ですが、実はこの機能はテーマLuxeritas(ルクセリタス)に元々設定してあるスクリプトで、カスタマイズ等はしていません。ちょっと調べてみます。
【追記】
探してみましたが、これはというスクリプトは見つかりませんでした。すみませんm(_ _ )m。
回答にはならないかもしれませんが、ルクセリタスを使うのが一番手取り早いようです(^^)、引き続き捜索はしてみますので、お勧めの方法が見つかれば記事にしますね。