シーサーブログのサイドバーに人気記事一覧を作る方法

この記事はSeesaaブログの旧システムでも新システムでも対応できます。(画像は旧システム)

今回はシーサーブログのサイドバーに「人気記事一覧」の項目を作ってアピールしたい記事を一覧表示するカスタマイズを解説します。このブログのサイドバーにもあるやつですね。このブログはWordPressですが、シーサーブログでも同じような物が設置できます。

人気記事-2

ちなみに人気記事一覧でなくても同じ方法で自分の好きな「カテゴリー一覧」や「おすすめ記事一覧」という項目に変更する事もできるので非常に自由度が高いです。そのため、この方法を覚えておいて応用してみて下さい。

人気記事一覧設置の方法

シーサーブログの管理画面から「デザイン」⇒「コンテンツ」と進み、サイドバーの好きな位置に「自由形式」を追加します。

アドセンス-2

追加できたら「自由形式」をクリックして表示したいタイトルを付けます。例えば「人気記事TOP10」とか適当に名づけます。そして内容の部分に次の記述を追加。

<!--人気記事一覧-->
<ul>
<li><a href="#" target="_blank">記事1</a></li>
<li><a href="#" target="_blank">記事2</a></li>
<li><a href="#" target="_blank">記事3</a></li>
<li><a href="#" target="_blank">記事4</a></li>
<li><a href="#" target="_blank">記事5</a></li>
</ul>
<!--人気記事一覧終了-->

「#」の文字の所に、ボタンクリック時にジャンプするページのURLを(#を消して)書き込みます。それから「記事1」から「記事5」には、表示するテキスト(タイトル)を記入。一応5つ書いておきましたが同じように「li」と「/li」で囲んで追加してもOK、減らしても大丈夫です。

人気記事-1

ここまでできたら一度下の「保存」をクリックして画面を閉じ、コンテンツ一覧画面に戻るのでもう一度「保存」をクリック(念のため)。

ただ、自由形式のタイトル(名前)の部分はブログに表示されないので、これを表示させるようにカスタマイズすればOK。
Seesaaブログの自由形式のタイトルを表示させる方法

サイドバーに「人気記事一覧」が表示されているはずです。以上サイドバーに人気記事を設置する方法でした。

シーサーブログのサイドバーに人気記事一覧を作る方法”に15件のコメントがあります。

コメントの反映には時間がかかる場合があります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

  1. 田中山

    >しげぞう様
    補足の説明をありがとうございます。気になった項目をピックアップしてコピペしてCSSを編集していたので、仕組みについて理解ができて大変参考になりました。

    なるほど。一から勉強なされてそれをすぐにアウトプットしているので、このサイトはわかりやすいのだと思いました。

    これからもこちらのサイトを参考にさせていただきます。
    私もより良いレイアウトや運営ができるように頑張りたいと思います。

    本当にありがとうございました。

  2. しげぞう 投稿作成者

    >田中山様

    返信ありがとうございます。上手く反映されて良かったです。田中山様のブログの場合はサイドバーの文字の大きさを別に設定されていたので、今回のようなバラバラの大きさになったのだと思われます。通常の場合は全体のbody要素で本文、それからサイドバー、全体を含むフォントを変更しているので文字の大きさはバラバラにはなりません。但し全部の文字の大きさが統一されるというデメリットがあります。今回の場合はサイドバーに既にフォントサイズを指定されていましたので、サイドバーの要素を揃える必要があったのだと思います。

    私自身HTMLやCSSを勉強したのは最近の事です。まだ一年も経っていません。昨年たまたまホームページを作る依頼があって、それまでまったく知識の無かったホームページを1から作成した事である程度の知識がつきました。人間追い込まれると結構何でもできますね(笑)。その依頼がなければ今頃まだHTMLやCSSもほとんど初心者だったと思います。そこで勉強した内容をこうやって還元できているので非常にありがたい事です。

  3. 田中山

    >しげぞう様

    素早い対応に感謝します。
    アドバイスいただいた通りに変更したところ、うまく表示されました。
    HTMLやCSSをちゃんと勉強していないので、このような基本的な事でお手数かけて申し訳ありません。
    このサイトの説明がわかりやすいため少しずつカスタマイズに対する知識が増えています。
    今はまだコピペですが、少しずつ勉強して自分でもカスタマイズできるようになりたいと思います。

    本当にありがとうございました。

  4. しげぞう 投稿作成者

    >田中山様

    返信ありがとうございます。確認してみましたが、おそらく原因は人気記事だけクラス名が揃っていないためだと思われます。
    これを他のサイドバーの項目と揃えるのであれば自由形式の人気記事の部分を「.side」というクラスで統一する必要があります。対処方法としてはシーサーブログの管理画面⇒デザイン⇒コンテンツと進み、人気記事を設置している「自由形式」をクリックします。

    そして自由形式の「コンテンツHTML編集」をクリックして次のように書き換えて下さい。

    <div class="sidetitle"><% content.title %></div>
    <div class="side">
    <% content.header -%>
    <% content.free.text %>
    <% content.footer -%>
    </div>

    他のサイドバーとクラス名を統一させる事で解決できると思います。一度お試し下さい。

  5. 田中山

    >しげぞう様

    お早い返信ありがとうございます。
    2.の違うブラウザは普段使ってないクロームで試してみましたが
    普段のサファリと同様でした。

    1.に関してはどこを調べたら良いのかもよくわかってないのですが、これからもう少し見直そうと思います。

    ブログは2つあるのですがどちらも同じ症状です。おそらく1.のうまく設置されていない状態なのだとおもいます。

    サイトURLはこちらです。

    よろしくお願いします。

  6. しげぞう 投稿作成者

    >田中山様

    コメントありがとうございます。原因で思いつく事が幾つかありますので書き出してみます。

    1.人気記事一覧だけサイズが変わらないというのはおそらく「人気記事一覧」だけサイドバーに上手く設置できていない事が考えられます。これは単純に人気記事がサイドバーに含まれていないという事ですので、おそらく「/div」の閉じ忘れ等があるかも知れません。

    2.ブラウザのキャッシュが残っているかも知れません。一度別のブラウザで確認して見る事をおすすめします。もし別のブラウザで反映されていれば時間がたてば解決するかもしれません。

    いづれにしても原因を探すのは結構大変ですので、もし良かったらブログのURLを教えていただけたら確認してみます。もちろんコメント公開時にはURLは削除しますのでよろしくお願い致します。

  7. 田中山

    いつも参考にさせていただいています。ありがとうございます。

    こちらの記事を参考に人気記事一覧を作成し、サイドバーに設置しました。

    別の記事を参考にフォントサイズなどを変更しているのですが
    なぜか人気記事一覧だけ適用されません。

    サイドバーのサイズを大きくしようと変更している時に一度適応されました。
    サイドバーのサイズが小さかったから文字が大きくならなかったのかななどと
    楽観的に考え、別の作業を進めているといつからかまた適用されなくなっていました。

    なにか思い当たる節がありましたら返信いただけると幸いです。

    いろいろと検索して調べてはいるのですが、こちらのサイト以上にわかりやすく豊富に情報が載っているサイトが見つかりません。
    そういったこともあり、今回コメントで質問させていただきました。
    どうかお力添えよろしくお願い致します。

  8. しげぞう 投稿作成者

    >nozomi様

    返信ありがとうございます。反映されてよかったです。ちょっとした事でブログのレイアウト崩れたりしますが、それに中々気づかないというのは私もよくある事です。また分からない部分がありましたらいつでもコメント下さい。今後ともどうぞよろしくお願い致します。

  9. nozomi

    アドバイス、ありがとうございます!
    おっしゃる通りにやってみましたら、無事にできました!
    助かりました!どうもありがとうございます!
    しかし、本当に参考になるサイトですね。
    わかりやすいですし。
    今後もお世話になります!

  10. しげぞう 投稿作成者

    >nozomi様

    返信ありがとうございました。チェックしてみた所「テスト用」というコンテンツがきちんと右サイドバーにあります。これを左サイドに持ってくるとおかしくなるという事でしょうか?まちがってたらすみません。えっと、直接原因になるかどうかは不明ですが、右サイドバーの一番上に「右ナビ」を設置してますよね。これは多分自由形式で追加されたコンテンツだと思うのですが、「/div」で閉じられていないような気がします。

    この「右ナビ」の部分の最後をきちんと「/div」で閉じてみてもう一度試して頂けないでしょうか?

  11. nozomi

    早速のご連絡ありがとうございます。
    全くの初心者から手探りでやってるもので、面目ありません。。。

    こちらになります。
    左サイドバーから順に240、600、300 の巾としています。
    希望は300、540、300 程度で、左にも右と同じ書式を
    適用させたかったのですが、やってみますと、
    先のメールのようになってしまいます。。。

  12. しげぞう 投稿作成者

    >nozomi様

    コメントありがとうございます。私のブログでやってみたのですが、両サイドバーどちらでも大丈夫でした。原因がよく分からないのでお手数ですがURLを教えて頂けると助かります。コメント公開時にはURLは削除していますのでもし解決できない場合はURLを教えて下さい。みながら原因を探ってみたいと思います。

  13. nozomi

    すごく参考にさせてもらってます!
    このサイドバーに記事を作る件、
    左側のサイドバーにはうまい具合に出来たのですが、
    右側のサイドバーに自由形式を持ってくると、
    メインと左のサイドバーがちゃんと並ばずに、
    なぜか、左サイドバーの下にレイアウトされてしまいます。
    ちなみに合計セルpxは計算上問題ないですし、逆にすごく小さい値に
    しても同じ現象が起こります。。。なぜなんでしょうか?
    ベースは両サイドバーの「ルーズリーフ」です。

  14. しげぞう 投稿作成者

    >ジネティーヌ様

    コメントありがとうございます。クリック率を上げるのは細かい事の積み重ねなので工夫してやってみて下さいね。

  15. ジネティーヌ

    大変参考になります。
    ありがとうございます。

    クリック数をあげられるように頑張ります。