Seesaaブログのサイドバーにサムネイル付き人気記事一覧を自作する方法

Seesaaブログのサイドバーにサムネイル付き人気記事一覧を自作するSeesaaブログアフィリエイトとカスタマイズ

今回はSeesaaブログのサイドバーに自作の人気記事一覧を追加してみようかと思います。サムネイル画像付きの記事一覧を自作します。

Seesaaブログには普通の人気記事のパーツもあるのですが、これは自動でPV(ページビュー)などで集計されたホントの人気記事。

人気記事を自作するメリットとしては自分が読んで欲しい記事を自分で選択して誘導できるという点です

こんな感じになります。

Seesaaブログに人気記事一覧を設置する方法-1

人気記事一覧の設置手順

まず、先に必要になるのが「表示したい記事のURL」とそれぞれの「画像のURL」なので調べておいて下さい。

Seesaaブログの画像URLを調べる方法

スタイルシートにコードを記述

Seesaaブログの管理画面からデザイン⇒CSS/HTML編集⇒適応中のデザイン名⇒スタイルシートの編集。

Seesaaブログスタイルシート編集画面

で、スタイルシートの一番下にコードを追加していきます。

.popular {
  margin-left:0px !important;
  padding-left:0px !important;
}

.popular li{
  list-style-type:none;
  list-style-image:none;
  clear: both;
  margin-left: 0px !important;
  padding: 5px 0 5px 0;
  border-bottom: none !important;
}

.popular img{
  margin-right: 10px;
  padding:0px;
  float: left;
  max-width: 70px !important;
  height: 70px;
}

.popular li a {font-weight: bold !important;}

ul.popular:after {
  content: "";
  display: block;
  clear: both;
}

サムネイル画像のサイズを70pxにしてます。追加できたら保存。

サイドバーに自由形式を追加してカスタマイズ

「デザイン」⇒「CSS/HTML編集」⇒「コンテンツ」をクリック。

Seesaaブログのデザインコンテンツ

サイドバーにメニューから「自由形式」をドラッグ&ドロップして追加。

Seesaaブログに人気記事一覧を設置する方法-3

で、自由形式の「設定マーク」をクリック。

Seesaaブログに人気記事一覧を設置する方法-4

タイトルの所に「人気記事」、内容の部分に以下のコードを追加。

<ul class="popular">
<li><a href="#"><img src="" />人気記事タイトル1</a></li>
<li><a href="#"><img src="" />人気記事タイトル2</a></li>
<li><a href="#"><img src="" />人気記事タイトル3</a></li>
</ul>

#の部分は消して飛ばしたい記事のそれぞれのURLを入力。「img src=””」の「””」の間にそれぞれの画像のURLを入れて、タイトルなどを書き換え。

こんな感じです。

Seesaaブログに人気記事一覧を設置する方法-5

書き換えできたら保存を忘れずに。

このままだと「自由形式のタイトル」部分が反映されませんので、自由形式のHTMLも編集していきます。

今度は同じく自由形式の「コンテンツHTML編集」をクリック。

Seesaaブログに人気記事一覧を設置する方法-6

HTMLが表示されます。1行目に以下のような記述があります。

<section class="module module--free">

これの直後に以下のコード1行を追加。

<h3 class="module__heading"><% parts.title -%></h3>

こんな感じになります。保存を忘れずに。

Seesaaブログに人気記事一覧を設置する方法-11

自由形式に「このコンテンツは独自にHTML編集されています」と表示されていればOK。ここも保存。これで自由形式のタイトルが反映されるようになります。

Seesaaブログに人気記事一覧を設置する方法-9

自由形式の画面を閉じるとコンテンツ一覧画面に戻るのでここでも念のため保存。

Seesaaブログに人気記事一覧を設置する方法-10

後はブログを表示させて設置した人気記事一覧が表示されているかチェック。

Seesaaブログに人気記事一覧を設置する方法-1

以上Seesaaブログのサイドバーに自作の人気記事一覧を追加する方法でした。

ブログを収益化するならWordPress利用がおすすめ

無料ブログでは利用規約の変更やアカウント停止、サービス終了などのリスクがあります。

また、表示速度も重く、スマホのページには消す事のできない広告が多いためブログでの収益化を考えているならWordPressの利用が圧倒的におすすめです。

WordPressと無料ブログの違いや必要な料金などは以下記事でまとめてます。

コメント

  1. 田中山 より:

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

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

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

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

  2. しげぞう より:

    >田中山様

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

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

  3. 田中山 より:

    >しげぞう様

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

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

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