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

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

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

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

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

こんな感じになります。

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

人気記事一覧の設置手順

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

こんな感じです。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

最終更新日:2018/05/17

Seesaaブログのサイドバーにサムネイル付き人気記事一覧を自作する方法”に13件のコメントがあります。

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

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

  1. 田中山

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

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

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

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