Seesaaブログの新システムではトップページやカテゴリーページなど全てが「続きを読む」となっていているテンプレートが多いので、この「続きを読む」を削除して、ホームページ風？のトップページになるようにするカスタマイズする方法を紹介します。
これによってこのブログの「まとめページ」のような感じにもできます（目次ページみたいな）。また、カテゴリーページなどはそのまま「続きを読む」を設置しておくので、あくまで変更するのはトップページだけという感じです。それでは早速説明していきましょう。
HTMLの編集でトップページだけ全文表示に
まずSeesaaブログの管理画面から「デザイン」⇒「デザイン設定」⇒「適応中のデザインタイトル」をクリックし、「HTML編集」のタブに切り替えます。
「HTML編集」タブに切り替えたら表示されたHTMLから次の部分を探します。初期状態なら149行目付近。近くに「続きを読む」という部分があるのでその付近を探すといいかも。
<div class="article article--entry">
上記コードが見つかったらその下に次のコードを追加（まだ保存はしない）。
<% if:page_name eq 'index' -%> <% article.entire_body | bodyfilter(article_info,blog) | mark_raw -%> <% /if -%> <% unless:page_name eq 'index' %>
まだコードを追加するので保存はしないで下さい。こんな感じになりますよ。
追加できたらその下の方に「続きを読む」という部分があります。そのさらに下に「/div」という部分があるので、その下に次の1行を追加。
<% /unless %>
これでOK。ちなみに追加した部分を全部みておくとこんな感じになります。
追加したコードの意味としては「もしトップページなら」続きを読むではなく「全文表示」。それ以外は元のまま「続きを読む」を設置するという感じです。
ここまでできたら「保存」。保存できたら次にブログの設定でトップページの表示記事数を設定していきましょう。
トップページに表示させる記事数を設定
先ほど追加したコードでトップページだけは「続きを読む」がなくなって全文表示になっていますが、トップページには全文表示の記事が複数並ぶ事になるので、ブログの設定でトップページに表示する記事数を「１」にしておけばホームページ風のトップページになります。
Seesaaブログの管理画面から「設定」⇒「ブログ設定」と進み、「トップページ表示件数」を「１」に変更し「保存」。
これでトップページの表示件数は１件になるので、一番最新の記事がトップページに全文表示されるという事です。
なので、トップページに表示させたい記事（目次ページなど）を作成したのであれば記事の公開日付を一番最新の日付にして公開すればそれがトップページになります。
ブログを収益化するならWordPress利用がおすすめ
無料ブログでは利用規約の変更やアカウント停止、サービス終了などのリスクがあります。
また、表示速度も重く、スマホのページには消す事のできない広告が多いためブログでの収益化を考えているならWordPressの利用が圧倒的におすすめです。
WordPressと無料ブログの違いや必要な料金などは以下記事でまとめてます。
コメント
なべ様
返信ありがとうございます。動画はiframに対してmax-width:100%としてあるようなので、画像に対して以下を追加でどうでしょうか？
img { max-width: 100%; }これで一度試してみて下さい。確認する場合にはキャッシュ（以前のデータ）が残っている場合がありますので再読込み（リロード）もしてみて下さいね！
それからindex-2,3,4と続くのは確かに個別ページと重複しますが、間違ってトップページの削除やnoindexをするとトップページが検索に全くヒットしない状態になる可能性があるため注意です。
しげぞう様
ご連絡ありがとうございます。
テンプレートはこちらと同じ「シンプルA.ホワイト右カラム」です。
TOPページ記事下の
index-2.html・3・4と続く.htmlも投稿記事と重複する為、
削除した方が良いのかなと考えていますが、問題なければ、
残しておきたいと思っています。
よろしくお願いいたします。
なべ様
コメントありがとうございます。一度確認してみますので、使っているデザイン名を教えてもらえますか？チェックして修正してみますね！
初めまして。
TOPページ(固定記事)からindex-2.htmlに続く全てのページ画像が
レスポンシブにならず、縮小されませんです。
投稿記事URLでの表示は問題ないのですが、
TOPページの固定だけでもレスポンシブ表示になるようにしたいです。
よろしくお願い致します。
出来ました。有難うございます。
なんか思ったよりも大変そうなコードを書いて頂いて恐縮です。
非常に解りやすかったので、少し改造も出来ました。
重ねて御礼申し上げます。
さちえ様
返信ありがとうございます。あれこれ試してみたんですが、コメント欄はできるのですが、SNSボタンなどはやは個別記事でないと設置できませんでした。
なので、一応「コメントを書く」だけ設置する方法になります。失敗したら元に戻せるように事前に今のHTMLはコピーしてメモ帳などで保存しておいて下さい。
全文表示にするために追加したコード（153行目付近に追加したコード）ですが、これの以下の部分にさらにコメント用のコードを差し込む必要があります。
「ここにコードを入れる」という部分を消して次のコードをいれます。
<% if:article.accept_comment_show -%> <div id="comments" class="module module--comments"> <h3 class="module__heading">この記事へのコメント</h3> <div class="module__body"> <div class="comments"> <ul class="comments__list"> <% loop:list_article_children -%> <li class="comments__item"> <article> <p class="comments__user-name"> <% if:comment.homepage -%> <a href="<% comment.homepage | tag_strip -%>" target="_blank" rel="nofollow"><% comment.writer | tag_strip -%></a> <% else -%> <% comment.writer | tag_strip -%> <% /if -%> </p> <div class="comments__content"> <% comment.body | tag_strip | nl2br | clickable('target="_blank" rel="nofollow"') | mark_raw -%> </div> <footer class="comments__meta"> <% comment.createstamp | date_format('%Y年%m月%d日 %H:%M') -%> </footer> </article> </li> <% /loop -%> </ul> <% if:article.accept_comment_catch -%> <div class="comments__leave"> <a href="<% article.post_comment_relative_url -%>" rel="nofollow">コメントを書く</a> </div> <% /if -%> </div> </div> </div> <% /if -%>かなり長いですがこれでOKでした。
返信ありがとうございます。
早いレスポンスに返答が遅れて申し訳ありません。
使っているのはシンプルA.パステルブルー 右カラムです。
お手数おかけいたします
さちえ様
コメントありがとうございます。最近のSeesaaブログは新、旧両方のデザインが混じっている感じなので、もし良かったら使っているデザイン名を教えて下さい。デザインによって多分対処方法が違ってくる感じがしてますので、どうぞよろしくお願い致します。
始めまして。
記事を読んで全文を表示することはできたん出来たんですが、
全文を表示することにより、
記事下のコメントを書くへのリンクその他が表示されなくなりました。
記事タイトルをクリックすれば通常通りコメントを書くへのリンクが出るんですが、
トップページの記事の下にリンクを出すにはどうしたらいいでしょうか？
HTMLには記事へのコメント<a hre～の文字があるんで、
これを表示させればいいような気がするんですが。
よければ教えてください
しげぞう様
ご返答ありがとうございます。
やはり個人では難しいのですね。。。
まだまだアフィリエイトでわからないことばかりですので、わからない点があればまた質問させていただきます！
ご丁寧にありがとうございました。
翔様
コメントありがとうございます。無料ブログの場合はブログの設定などで、ブログ自体の説明文を設定する事ができます。ここで設定した説明文がdescriptionで使われますが、必ずしも設定した説明文が使われるという事ではありません。
検索された方が入力したキーワードって結構人によって違います。その検索されたキーワードによって設定した説明文が表示される場合もありますし、文中からの抜粋が表示される場合もあります。なので、説明文を設定していなくても検索されたキーワードによってGoogleが自動で最適化して表示する仕組みになってますので、自力でどうにかできる物ではないと思います（泣）。できるのはブログの説明文の設定をする事くらいです。
WordPressなどの場合にはプラグインなどを使って、個別記事にもそれぞれに説明文（description）を設定する事ができますが、これもかならず設定された物が表示される訳ではありませんが、個別記事それぞれに説明文を設定してあるので、それが表示される可能性は無料ブログよりも高いと思います。
それと検索結果のブログタイトルと記事タイトルなんですが、これもGoogleが自動で表示しますし、時々タイトルがちょっと違う物になってたり、省略されたりするようなケースもあると思いますが、対処は難しいかなと思います。
あくまで私個人の意見なので、もしかしたら間違っている部分はあるかもしれませんが、一応私の認識しているのは上記の部分です。もし間違いや疑問があればいつでもまたコメント下さいませ。
しげぞう様
初めまして。翔と申します。
まだアフィリエイトを初めて一か月程で、
主にa8の広告でサイトを作っているのですが、
収益は未だ０円です。。。中々難しいものですね。
現在は主に無料ブログのシーサーをメインに使っているので、
こちらで紹介していただいている全文表示であったり
パンくずの設置、背景色の変更、見出しタグの装飾等、
非常に参考にさせていただいております。
有料でもおかしくないほどのコンテンツをこうして
公開していただき、本当にありがとうございます。
早速の質問で申し訳ないのですが、シーサーや忍者、
はてなブログで作ったブログを検索で確認してみた際、
タイトル下の説明欄のところが単語の羅列のようになってしまい、
どんな内容なのかわかりにくい状態になっています。
調べた所、metaのdescriptionを変更する必要があるのは
分かったのですが、何度やっても上手く改善できません。
正直今の状態だとかなり損をしている気がするので、
できる限り上手く表示したいのですが、何か方法は
ありますでしょうか。
それと、検索結果で普通は記事タイトルが最初にきて
その後ろにブログタイトルで表示されると思うのですが、
たまに逆に表示されているブログがあります。
これらが気になって仕方ないのですが、調べてもイマイチ
対策が打てません・・・
ご教授いただけますと幸いです
匿名様
わざわざありがとうございます。参考になって良かったです。また何か分からない部分などありましたら気軽にコメント頂けると嬉しいです。今後もどうぞよろしくお願い致します。
助かりました＾＾
無事、全文表示することができました。
ありがとうございます。
しげぞう様
なるほど…そういう事なんですね！
いまちょうどドキドメでwordpressの勉強をしていたところです。これは何かの思し召しですね。
スマホ表示は気にせず、とりあえずここを全て読破してブログを頑張って上位を目指します！
忙しいのに本当にいつもいつもありがとうございます。
たこやき様
コメントありがとうございます。SeesaaブログはPC版とスマホ版のHTMLは別になっていて、スマホ版のHTMLが編集できない仕様になってます。そのため、PC版では反映されていてもスマホ版ではそのままという状態になります。そのため、スマホ版では続きを読むタイプの記事一覧表示になるかと思います。
何かいい方法があれば良いのですが、スマホ版はHTMLが編集できないのでいい方法が思いつきません。それも無料ブログのデメリットの１つなんですが、どうしてもという場合にはSeesaaからWordPressなどに引っ越しをしてスマホ版も自由にカスタマイズする事も考えてみても良いと思います。
私もSeesaaブログでブログをたくさん作成しますが、ある程度集客できるようになったブログに関してはすぐにWordPressへ移行しております。
しげぞう様
本当にいつもお世話になっております。
この教えの通りPCでやっておりましてPCの方は問題ないのですが、スマホだと同じようにならずに困っております。
ブログタイトルをタップしますと「記事数１」の「続きを読むタイプ」のトップページになってしまいます。何か妙案はございませんでしょうか。
あとついでに…スマホの方だとが表示されません。自分で頑張って調べつくしてアレコレやってみたのですが、全然ダメです。
スマホのデザインはbasicです。
お手すきの際にでもまたよろしくお願い致します。
しげぞう様
返信ありがとうございます。
外部連携を解除したら解決しました。ありがとうございます。
fuku様
返信ありがとうございます。Seesaaブログの設定から「外部連携」をクリックして、Twitterとの連携という項目があるので、それがどのようになっているか確認して見てください。もしTwitterと連携している場合にはこれを一度解除してみるといいかもしれません。私の場合はTwitterとの連携はほとんど使わないのでよく分からないのですが、もしかするとこの連携が原因かもしれません。
しげぞう様
トップページにツイートが表示されていないのは、昨日記事を投稿して以来ツイートしていないためだと思います。
最近の記事のことろにツイートが表示されていて、それをクリックしていただくとわかるのですが、ツイートが記事のように表示されます。
そもそもツイートが記事扱いで投稿されているのがおかしいと思うのですがいかがでしょうか？
fuku様
返信ありがとうございます。ブログを拝見させて頂きましたが、トップページも個別記事同様にサイドバーだけにTwitterが表示されていました。特に問題はないと思いますが、トップページのサイドバーにTwitterのタイムラインを表示されないという事でしょうか？それとももう解決したのでしょうか？もし、自分のブラウザで上手く表示されていない場合には別のブラウザでも確認してみてください。ブラウザにキャッシュ（以前のデータ）が残っている場合もあります。
しげぞう様
返事が遅くなり申し訳ございません。fukuです。
サイトURLは以下です。
サイドバーにツイートを表示させることには成功しましたが、トップページにもツイートが表示されて困っています。
よろしくお願いします。
fuku様
コメントありがとうございます。Twitterはどのように設置されていますか？普通はサイドバーに設置すればサイドバーに表示されるはずですが、もしかすると編集時に他のHTMLのコードの一部を削除しているかもしれません。もし良かったらURLを教えて頂けると助かります。どうぞよろしくお願い致します。
ちなみにサイドバーにTwitterのタイムラインを表示させるのは別記事で書いてます。
⇒https://affiliate150.com/twitter-side
しげぞう様
コメントが遅れまして申し訳ございません。勘違いでした。。記事を更新するたびにトップページが変わっていました。
ただし、別の問題が発覚しました。
私はツイッターとブログを連携しているのですが、ツイッターでつぶやくとトップページがツイートになってしまいます。。これは上記コードの仕様でしょうか？
あくまでトップページはブログの記事とし、ツイートはサイドに表示させるなどの制御をしたいのですが、そういった制御ができるコードはありますでしょうか。
fuku様
コメントありがとうございます。Seesaaブログは今年新デザインシステムになり、現在もデザイン（テンプレート）が増えてきているのでデザイン（テンプレート）によって多少違う部分があるかもしれません。なので、現在適応中のデザインを教えて頂けると助かります。お手数ですが、よろしくお願い致します。
しげぞう様
いつも記事を参考にさせていただいております。fukuと申します。
先日この記事にあるコードを追記してみたのですが、新たに記事を投稿してもトップページが自動的に変わってくれません。何か追加でコードを書く必要があるのでしょうか？
ちなみにここで掲載されているコード以外は、トップページの設定を変更するようなコードは追記していません。
ご多忙とは思いますが、ご回答よろしくお願いします。
しげぞう様
そうだったんですね。
じゃあある程度頑張ったらWordPressでやってみようかなぁ…(。。)
わざわざ調べていただいてありがとうございます。
これからも応援してます！
toomo様
コメントありがとうございます。コメント欄を常時表示させるように色々試してみたのですが、エラーが出て上手くできませんでした。勉強不足ですみません。もう少し勉強してみて再挑戦してみたいと思います。またできたら記事にしてみますが、できなかった場合にはすみませんm(_ _)m
初めまして。
いつもseesaaブログで困ったことがあると参考にさせて頂いています。
そこで質問なのですが、記事のコメントフォームを常時表示させる場合htmlでどのような編集を行えば良いのでしょうか？
コメント部分に関してはいじっていないと思いますし、
記事の”続きを見る”のように”コメントをする”をクリックしてようやく表示される状態なのでこちらの記事にコメントをさせていただきました。
ご教授いただけたら嬉しいです。
りた様
了解しました。WordPressは最初の設置から設定までに時間がかかると思いますが、焦らずに１つ１つクリアできると思います。ドキドメ！でのコメントお待ちしております！