今回はSeesaaブログのサイドバーに自作の人気記事一覧を追加してみようかと思います。サムネイル画像付きの記事一覧を自作します。
Seesaaブログには普通の人気記事のパーツもあるのですが、これは自動でPV（ページビュー）などで集計されたホントの人気記事。
人気記事を自作するメリットとしては自分が読んで欲しい記事を自分で選択して誘導できるという点です。
こんな感じになります。
人気記事一覧の設置手順
まず、先に必要になるのが「表示したい記事のURL」とそれぞれの「画像のURL」なので調べておいて下さい。
スタイルシートにコードを記述
Seesaaブログの管理画面からデザイン⇒CSS/HTML編集⇒適応中のデザイン名⇒スタイルシートの編集。
で、スタイルシートの一番下にコードを追加していきます。
.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編集」⇒「コンテンツ」をクリック。
サイドバーにメニューから「自由形式」をドラッグ＆ドロップして追加。
で、自由形式の「設定マーク」をクリック。
タイトルの所に「人気記事」、内容の部分に以下のコードを追加。
<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を入れて、タイトルなどを書き換え。
こんな感じです。
書き換えできたら保存を忘れずに。
このままだと「自由形式のタイトル」部分が反映されませんので、自由形式のHTMLも編集していきます。
今度は同じく自由形式の「コンテンツHTML編集」をクリック。
HTMLが表示されます。1行目に以下のような記述があります。
<section class="module module--free">
これの直後に以下のコード1行を追加。
<h3 class="module__heading"><% parts.title -%></h3>
こんな感じになります。保存を忘れずに。
自由形式に「このコンテンツは独自にHTML編集されています」と表示されていればOK。ここも保存。これで自由形式のタイトルが反映されるようになります。
自由形式の画面を閉じるとコンテンツ一覧画面に戻るのでここでも念のため保存。
後はブログを表示させて設置した人気記事一覧が表示されているかチェック。
以上Seesaaブログのサイドバーに自作の人気記事一覧を追加する方法でした。
ブログを収益化するならWordPress利用がおすすめ
無料ブログでは利用規約の変更やアカウント停止、サービス終了などのリスクがあります。
また、表示速度も重く、スマホのページには消す事のできない広告が多いためブログでの収益化を考えているならWordPressの利用が圧倒的におすすめです。
WordPressと無料ブログの違いや必要な料金などは以下記事でまとめてます。
コメント
＞しげぞう様
補足の説明をありがとうございます。気になった項目をピックアップしてコピペしてCSSを編集していたので、仕組みについて理解ができて大変参考になりました。
なるほど。一から勉強なされてそれをすぐにアウトプットしているので、このサイトはわかりやすいのだと思いました。
これからもこちらのサイトを参考にさせていただきます。
私もより良いレイアウトや運営ができるように頑張りたいと思います。
本当にありがとうございました。
＞田中山様
返信ありがとうございます。上手く反映されて良かったです。田中山様のブログの場合はサイドバーの文字の大きさを別に設定されていたので、今回のようなバラバラの大きさになったのだと思われます。通常の場合は全体のbody要素で本文、それからサイドバー、全体を含むフォントを変更しているので文字の大きさはバラバラにはなりません。但し全部の文字の大きさが統一されるというデメリットがあります。今回の場合はサイドバーに既にフォントサイズを指定されていましたので、サイドバーの要素を揃える必要があったのだと思います。
私自身HTMLやCSSを勉強したのは最近の事です。まだ一年も経っていません。昨年たまたまホームページを作る依頼があって、それまでまったく知識の無かったホームページを１から作成した事である程度の知識がつきました。人間追い込まれると結構何でもできますね（笑）。その依頼がなければ今頃まだHTMLやCSSもほとんど初心者だったと思います。そこで勉強した内容をこうやって還元できているので非常にありがたい事です。
＞しげぞう様
素早い対応に感謝します。
アドバイスいただいた通りに変更したところ、うまく表示されました。
HTMLやCSSをちゃんと勉強していないので、このような基本的な事でお手数かけて申し訳ありません。
このサイトの説明がわかりやすいため少しずつカスタマイズに対する知識が増えています。
今はまだコピペですが、少しずつ勉強して自分でもカスタマイズできるようになりたいと思います。
本当にありがとうございました。
＞田中山様
返信ありがとうございます。確認してみましたが、おそらく原因は人気記事だけクラス名が揃っていないためだと思われます。
これを他のサイドバーの項目と揃えるのであれば自由形式の人気記事の部分を「.side」というクラスで統一する必要があります。対処方法としてはシーサーブログの管理画面⇒デザイン⇒コンテンツと進み、人気記事を設置している「自由形式」をクリックします。
そして自由形式の「コンテンツHTML編集」をクリックして次のように書き換えて下さい。
他のサイドバーとクラス名を統一させる事で解決できると思います。一度お試し下さい。
＞しげぞう様
お早い返信ありがとうございます。
２.の違うブラウザは普段使ってないクロームで試してみましたが
普段のサファリと同様でした。
１.に関してはどこを調べたら良いのかもよくわかってないのですが、これからもう少し見直そうと思います。
ブログは２つあるのですがどちらも同じ症状です。おそらく１.のうまく設置されていない状態なのだとおもいます。
サイトＵＲＬはこちらです。
よろしくお願いします。
＞田中山様
コメントありがとうございます。原因で思いつく事が幾つかありますので書き出してみます。
１．人気記事一覧だけサイズが変わらないというのはおそらく「人気記事一覧」だけサイドバーに上手く設置できていない事が考えられます。これは単純に人気記事がサイドバーに含まれていないという事ですので、おそらく「/div」の閉じ忘れ等があるかも知れません。
２．ブラウザのキャッシュが残っているかも知れません。一度別のブラウザで確認して見る事をおすすめします。もし別のブラウザで反映されていれば時間がたてば解決するかもしれません。
いづれにしても原因を探すのは結構大変ですので、もし良かったらブログのURLを教えていただけたら確認してみます。もちろんコメント公開時にはURLは削除しますのでよろしくお願い致します。
いつも参考にさせていただいています。ありがとうございます。
こちらの記事を参考に人気記事一覧を作成し、サイドバーに設置しました。
別の記事を参考にフォントサイズなどを変更しているのですが
なぜか人気記事一覧だけ適用されません。
サイドバーのサイズを大きくしようと変更している時に一度適応されました。
サイドバーのサイズが小さかったから文字が大きくならなかったのかななどと
楽観的に考え、別の作業を進めているといつからかまた適用されなくなっていました。
なにか思い当たる節がありましたら返信いただけると幸いです。
いろいろと検索して調べてはいるのですが、こちらのサイト以上にわかりやすく豊富に情報が載っているサイトが見つかりません。
そういったこともあり、今回コメントで質問させていただきました。
どうかお力添えよろしくお願い致します。
＞nozomi様
返信ありがとうございます。反映されてよかったです。ちょっとした事でブログのレイアウト崩れたりしますが、それに中々気づかないというのは私もよくある事です。また分からない部分がありましたらいつでもコメント下さい。今後ともどうぞよろしくお願い致します。
アドバイス、ありがとうございます！
おっしゃる通りにやってみましたら、無事にできました！
助かりました！どうもありがとうございます！
しかし、本当に参考になるサイトですね。
わかりやすいですし。
今後もお世話になります！
＞nozomi様
返信ありがとうございました。チェックしてみた所「テスト用」というコンテンツがきちんと右サイドバーにあります。これを左サイドに持ってくるとおかしくなるという事でしょうか？まちがってたらすみません。えっと、直接原因になるかどうかは不明ですが、右サイドバーの一番上に「右ナビ」を設置してますよね。これは多分自由形式で追加されたコンテンツだと思うのですが、「/div」で閉じられていないような気がします。
この「右ナビ」の部分の最後をきちんと「/div」で閉じてみてもう一度試して頂けないでしょうか？
早速のご連絡ありがとうございます。
全くの初心者から手探りでやってるもので、面目ありません。。。
こちらになります。
左サイドバーから順に240、600、300 の巾としています。
希望は300、540、300 程度で、左にも右と同じ書式を
適用させたかったのですが、やってみますと、
先のメールのようになってしまいます。。。
＞nozomi様
コメントありがとうございます。私のブログでやってみたのですが、両サイドバーどちらでも大丈夫でした。原因がよく分からないのでお手数ですがURLを教えて頂けると助かります。コメント公開時にはURLは削除していますのでもし解決できない場合はURLを教えて下さい。みながら原因を探ってみたいと思います。
すごく参考にさせてもらってます！
このサイドバーに記事を作る件、
左側のサイドバーにはうまい具合に出来たのですが、
右側のサイドバーに自由形式を持ってくると、
メインと左のサイドバーがちゃんと並ばずに、
なぜか、左サイドﾊﾞｰの下にレイアウトされてしまいます。
ちなみに合計セルpxは計算上問題ないですし、逆にすごく小さい値に
しても同じ現象が起こります。。。なぜなんでしょうか？
ベースは両サイドバーの「ルーズリーフ」です。