サイドバーにコンテンツを追加する方法

シェアする

  • このエントリーをはてなブックマークに追加

サイドバーにコンテンツを追加する方法

トレンドアフィリエイトの実践において、
独自ドメインでサイトを構築する場合は、
無料ブログの時と違ってお金も手間もかかっている分、
サイトが圏外に飛ばされたときのダメージは大きいです。

なのでサイトが圏外に飛ばされないように、
あらかじめ出来ることはしておく方が良いでしょう。

具体的にどんな対策をとっていくのかですが、
以前にも記事で書きましたが「滞在時間」を伸ばすという方法です。

記事自体に動画や画像を使用し
滞在時間を伸ばすのももちろん必要ですが、
今回ご紹介する方法は、
サイト自体にあるものを追加することで、
訪問者さんの滞在時間を伸ばす方法になります。

何をするのかといいますと、
サイドバーに興味を引きそうなコンテンツを追加します。

下記のサンプルブログをご覧ください。

*何度か質問をいただいたので一応書いておきますが、
僕はAKB48のことはほとんど知りません。
下記サイトはAKBが好きな人に試しに作ってもらったサイトです。

clip_image002

こちらの右サイドバーの「人気動画ランキング」のように、
サイドバーに面白そうなコンテンツを作っていくわけです。

このようなコンテンツをサイドバーに置くことによって、
サイトに訪れたユーザーさんが興味を持ち、
記事や動画を見てくれることによって、
大幅にサイトの滞在時間が伸ばせます。

僕の経験上、このようなコンテンツをサイトに作ったあと、
作らなかった場合の約2倍も滞在時間を伸ばすことに成功しました。

なのでぜひとも取り入れるようにしましょう。

では具体的な方法について解説していきます。

今回はワードプレスで説明していきますが、
無料ブログでもやり方はほとんど変わらないので
参考になるかと思います。

サイドバーにコンテンツを追加する方法

サイドバーにコンテンツを追加するには、
ワードプレスのダッシュボードから「外観」⇒「ウィジェット」を選択します。

その後「利用できるウィジェット」の項目にある「テキスト」を、
ドラッグ&ドロップで「サイドバー1」もしくは「サイドバー2」などの、
自分がコンテンツを追加したい場所に追加します。

clip_image004

追加すると下記のように「テキスト」を編集できるようになりますので、
用途に合わせて編集していきます。

clip_image005

「ここにコンテンツを入れていく」という部分を編集することで、
サイドバーにコンテンツを表示させることができるようになります。

では実際に、サンプルの「AKB48追っかけ隊」のサイトを見ながら、
どういう風になっているのかについて解説していきます。

下記の部分が「テキスト」を使用し作成したものです。

clip_image007

この「人気動画ランキング」の部分が、先ほどの「タイトル」の部分になります。

それから下の「王冠マーク」「画像」「ヘビロテ再現してみた」などの文章は、すべて先ほどの「コンテンツを入れていく」という部分に記入することで表示されるようになっています。

    

こんな風になっております。

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

clip_image008

こうやって見せると、

「なんじゃこりゃ~」

ってなる人もいるかもしれませんが
実は簡単なHTMLタグを少し使用しただけです。

さて、先ほどの例をもうちょっと詳しくみていきましょう。

下記の画像をご覧ください。

ランキングの1位の部分ですが、
分かりやすいように色分けしてみました。

clip_image010

王冠部分が青、メインの画像部分が黄色、下の文字部分が緑です。

これをウィジェットでも同じように色分けすると、こんな感じです。

clip_image012

赤枠部分がランキングの1位部分全体で、青が王冠マーク、
黄色がメインの画像部分、緑が文字部分になっております。

ちなみに<br />というのは改行するタグになっています。

王冠マークや、メインの画像のように、画像を使用する場合は、
あらかじめワードプレスに画像を取り込んでおかないといけません。

画像を取り込む方法は、
ダッシュボードから「メディア」⇒「新規追加」で行えます。

画像をアップロードすると、「ライブラリ」に表示され、
アップロードした画像を選択すると下記のように表示されますので、
アップロードした画像を使用する場合は、
赤枠部分で囲んだ部分をコピーして使用します。

(この赤枠部分が画像URLになります)

clip_image014

画像を使用する際には、画像を表示させるタグを入力しないといけません。

画像を表示させるタグは

<img src=”画像URL”>

となります。

この画像URL部分に、先ほどの画像URLを貼り付けると、
画像が表示されるようになります。

では、もう一度さきほどの画像を見てみましょう。

clip_image015

王冠部分は

<img src=”http://akb48fanblog.com/wp-content/uploads/2012/06/ran1.png“>

となってますね。

この黄色のマーカーの部分が画像URLになります。

このようにして、ウィジェットの「テキスト」に入力していくことで、
コンテンツをサイドバーに表示させることができるのです。

HTMLに慣れてない最初のうちは、少し難しいかもしれませんが、
やっているうちに慣れていきますので、必ず実践してください。

HTMLタグはネットで検索したらすぐ出てきます。

例えば画像を表示させるタグが知りたかったら
「画像 タグ」などで検索すればOKです。

さて、ここまで画像と文章で
出来るだけ分かりやすく説明してきましたが、
やはり実際に作業をしているところを見ていただいた方が、
より理解しやすいと思ったので、動画を作成してあります。

今までの説明を読んだうえで動画を見ていただければ、
おそらく完璧に理解できると思います。

ということで、動画をご覧ください。

どうです? 動画は見ていただいたでしょうか?

サイドバーの人気ランキングは、
サイトの訪問者さんを飽きさせないように、
定期的に入れ替えるようにしてください。

では、今回は以上です!

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>