Twitterはこちら instagramはコチラ

Costom Sidebars サイドだけでは勿体ない!メインでも活用すべし!

Costom Sidebars アイキャッチ blog
スポンサーリンク

WordPressのプラグイン「Costom Sidebars(カスタムサイドバーズ」ってご存知でしょうか?

 

ひろくま
ひろくま

Costom Sidebarsとはカテゴリー別にサイドバーの表記を変えることができるプラグインです

 

せつやくま
せつやくま

パソコンの記事では「パソコン関連」のサイドバーを。ブログ関連の記事では「ブログ関連」のサイドバーが別々に作れるよ!

プラグインの名称が「Costom Sidebars」だけあってサイドバーに特化したプラグインかとお思いかと思いますが、メイン記事の欄にも活用することが出来ます。

 

▼ こんな悩みの方に発信します

    • Costom Sidebarsをうまく使いこなせてない
    • サイドバー以外にも使えるなら知っておきたい

 

▼ 今回の記事では

  • サイドではなくメイン記事の欄で使う方法を解説します
  • メイン記事でのウェジット画面のかんたんな作り方を解説

 

「Costom Sidebars」のプラグインを使ったことがない方は以下の記事でわかりやすく解説していますので参考にどうぞ。

ひろくま
ひろくま

▼ ウィジェットエリアをカテゴリー別に変更「Custom Sidebars」使い方・設定方法

こちらの記事ではCostom Sidebarsのプラグインが入っている前提での解説です。上記の記事でプラグインの入れ方を解説しています。参考にしてみてください。

スポンサーリンク
▶ PayPay モール

▼ Achargeでは ★PC本体 + 4画面モニター セット★などデイトレ・クリエイター向けPC 販売中!

サイドではなくメイン記事の欄で使う方法

こちら赤枠内の画像はCostom Sidebarsのウィジェット内のバナーです。

Costom Sidebars 見本

次にこの上記のようにメイン記事にウィジェットを埋め込む作り方を解説します。

このウィジェットとWordPress無料テーマCocoonのツールを使用して作成しています。

 

▼ 実際に使うツール

    • 3カラムのみ

 

カラムとは文字などを3列に分けられるツールで、以下のようなイメージです。

3カラム(左)の列

▼ 見本

グローバールメニューにお洒落なアイコンをサクッとつけよう!

 

3カラム(中)の列

▼ 見本

「初心者ブログ向け」初めにWordPressのテーマを決めよう【Cocoon】

3カラム(右)の列

▼ 見本

サイトのヘッダーグローバルメニュー色・幅の設定【Cocoon設定】

 

3カラムを使うことにより上記画像のような並びのウイジェットを作成することも可能に。バナーは自作で580×160 pxのサイズで作成したもの。

▼ スマホから見た画面

Costom Sidebars スマホ画面 プレビュー

スマホのような画面に収まりきらない場合は自動で縦に並ぶ仕組み。

作成した記事をPCからスマホのプレビューを確認する方法はこちら。または以下の記事で解説。

 

▼ こちらにWordpressの無料テーマCocoonの使い方のリンク貼っておきます。まだCocoonのテーマを使ったことない方は参考にしてみてください。

メイン記事でのウェジット画面のかんたんな作り方

ここからはメイン記事にCostom Sidebarsを使って掲載する手順です。

▼ まずは先ほどの見本画像の作り方を解説します。

○ 作成手順はこちら

    1. 見出しを入力(任意)
    2. 3カラムを選択
    3. バナーを貼り付け
    4. リンク挿入
    5. テキストをコピー
    6. 新しいサイドバーを作成
    7. テキストを選択 ➡ もしくはドラッグ&ドロップ
    8. 保存する

作成する場所は、新規の記事の欄を使用します。いつでも編集できるように下書き保存しておいたほうが便利です。サイドバー用やメイン掲載用などわかりやすい名前をつけておきましょう。

 

見出しを入力(任意)

まずは見出しを入力。(見出し3以降で)

見出しは任意です。必要ない場合はなくてもOK。

3カラムを選択

次に3カラムを選択します。3カラムは以下の画像の場所にあります。

costom sidebars 3カラムを選択する

 

 

▶ 3カラムを選択すると以下のような画像の表示になります。

coatom sidebars 3カラムを選択する02

 

 

 

 

バナーを貼り付け

3カラムにそれぞれバナーなどを貼り付けます。

 

▼ バナーを貼り付け

coatom sidebars バナーを貼り付け

 

 

リンク挿入

各バナーにリンクを挿入します。

▼ リンクを選択

coatom sidebars リンクを挿入

 

バナーのリンクを挿入する

▶ リンクを挿入

coatom sidebars リンクを挿入02

 

テキストをコピー

テキストに切り替えコピーします。

▶ テキストをコピー

coatom sidebars テキストをコピー

 

新しいサイドバーを作成

ウィジェットを開き新規でサイドバーを作る手順です。

 

▶ 外観 ➡ ウィジェットを選択します。

coatom sidebars ウィジェットを作成 外観からウィジェットを選択

 

 

赤枠の「Create a new sidebar」をクリックして新規のサイドバーを作成します。

 

▶ Create a new sidebarをクリック

coatom sidebars ウィジェットを開いてcreate new sidebarを選択

 

▼ ココでは名前を記入します。カテゴリー名などわかりやすい名前にしておきましょう。

 

▶ カテゴリー名などを記入

coatom sidebars ウィジェット 名前を入力

 

 

テキストを選択 ➡ もしくはドラッグ&ドロップ

▶ テキストのウィジェットを追加する

▼ 次にテキストのウィジェットの右の赤枠をクリック

costom sidebars ウィジェット画面 テキスト選択

先ほど作成したウィジェットを選択。ココでは「みほん」を選択します

テキストウィジェットはドラッグ&ドロップでも選択可能です(ココでは省略)

 

▶ 「 ウィジェットを追加 」をクリックする

costom sidebars ウィジェットを追加
最後にウィジェットを追加をクリック。みほんの中にウィジェットが追加されます。

 

保存する

▶ テキストに貼り付け保存する

追加したテキストウィジェットにあらかじめ作成しておいた3カラムのテキストバナーのテキストデータを貼り付けます。

costom sidebars ウィジェット テキストに貼り付けて保存する

テキストデータを貼り付けたら保存を忘れずに!

 

ウィジェットの設定はここまでです。

 

次から作成したウィジェット使いたい記事に設定する手順の解説をします。

 

▶ 作成したウィジェットを使いたい記事に設定する手順

ここまでできたらあとは設定するだけなのでかんたんです。記事の色々な場所にウィジェットが追加できるので色々試してみましょう。

ひろくま
ひろくま

参考程度にメインで使うであろう場所を3つほど掲載場所の解説します。

せつやくま
せつやくま

大体ウイジェットの掲載場所は3カ所くらいで固定されちゃいます

▶ 貼り付ける掲載場所(参考)

    • 投稿SNSボタン下
    • コンテンツ下部
    • 投稿本文下

 

Costom Sidebarsに使いたいウィジェットを選択

▶ 投稿SNSボタン下

まずは「投稿SNSボタン下」にウィジェットを追加する手順から

投稿画面のサイドバーにあるSidebarsに投稿SNSボタン下の項目があるのでクリックします。

costom sidebars サイドバーの投稿snsボタン下に追加

 

ここではウィジェットで新規作成した「みほん」を選択します

costom sidebars サイドバーの投稿snsボタン下にみほん追加

 

投稿SNSボタン下 プレビュー画面

▶ 投稿SNSボタン下にウィジェットを設定すると以下の画面位置にウィジェットが表示されます

costom sidebars サイドバーの投稿snsボタン下 プレビュー画面

こちらは記事の最後にあるSNSボタンの下に掲載されます

この場所は比較的最後まで記事を読んでくれたかたには目につく位置かと思うので実際によく使用しています。

 

▶ コンテンツ下部

2つ目は「コンテンツ下部」への掲載設定手順

costom sidebars サイドバーコンテンツ下部にみほん追加

コンテンツ下部を選択し、作成したウィジェット選択。(ここでは「みほん」を選択)

 

 

コンテンツ下部のプレビュー画面

 

コンテンツ下部を選択すると以下の位置にウィジェットが配置されます

costom sidebars サイドバーコンテンツ下部おプレビュー画面

フッターの真上に配置されるのが「コンテンツ下部」です

 

投稿本文下

3つ目は「投稿本文下」の設定解説

costom sidebars 投稿本文下にみほん追加

投稿本文下を選択し、作成したウィジェット選択。(ココでも「みほん」を選択)

 

 

投稿本文下 プレビュー画面

投稿本文下を設定すると以下の位置に表示

costom sidebars 投稿本文下プレビュー画面

投稿snsボタン下の少し上の位置にウィジェットが表示されます。

 

上記の3つのウィジェットエリアを活用してカテゴリ別に掲載してみましょう。

 

まとめ

 

カテゴリー別にウィジェットを作成すると収益にも繋がる可能性が上がりますので、個別にウィジェット作成してみましょう。結果は必ず付いてくるものです。

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