今回はコメントでリクエストがあったので、Seesaaブログの「最新の記事」のタイトルや抜粋文の部分の文字色や大きさなどのカスタマイズ、それから画像を表示させない方法も紹介していきます。
このサイドバーで「最新の記事」で表示される部分は「記事タイトル」と「その記事の抜粋文」が表示されますが、ここに表示される文字数は初期値が設定されていて、それ以上の文字数になると省略されるので、これも一緒に変更できるようにしていきます。
画像を見てもらうと分かるように長いタイトルは省略されていますよね。これが省略されないように初期値の文字数設定も変更する手順も一緒に解説していきます。
最新の記事の文字色や文字の大きさの変更
まずは「最新の記事」の文字色や文字の大きさをカスタマイズ。必要な部分だけをスタイルシート（CSS）に追加して下さい。
Seesaaブログの管理画面から「デザイン」⇒「CSS/HTML編集」⇒「適応中のデザインタイトル」をクリックして、「スタイルシート編集」のタブを選択します。
スタイルシートの一番下に次のコードを追加。
/* 最新の記事タイトル部分 */
.recent-entry__title {
color: #000; /* 文字色 */
font-size: 14px; /* 文字の大きさ */
}
/* 最新の記事抜粋文 */
.recent-entry__body {
color: #0066cc; /* 文字色 */
font-size: 14px; /* 文字の大きさ */
}
文字の大きさはそのまま変更したくない場合には「font-size」の部分の1行は削除してもOKですし、文字色も好きなカラーコードに変更して下さい。
後はこれで「保存」してブログを表示させて確認。反映されていない場合には「Ctrl」と「F5」を一緒に押してリロードして確認して下さい。
最新の記事のタイトルや抜粋文の文字数の設定を変更する
前述したように「最新の記事」の部分のタイトルや抜粋文は表示させる文字数が設定されていて、あまり長いタイトルなどは省略されます。タイトルが省略されると何の記事だか分からない場合もあるので、この表示させる文字数の設定も変更してみます。
Seesaaブログの管理画面から「デザイン」⇒「CSS/HTML編集」と進み、適応中のデザインタイトル⇒「コンテンツHTML編集」をクリック。
この「コンテンツHTML」を編集する必要がありますので、念のため先にここの記述を全部コピーしてメモ帳などに貼り付けておきましょう。上手く行かなかった時にすぐに元に戻せるようにしておけば失敗しても元に戻せるので安心。
準備ができたら「コンテンツHTML編集」の中の次の記述を探します。デザインによって違うかもしれませんが、デフォルトで24行目付近にあると思います。
<h4 class="recent-entry__title"> <% if:article.first_image -%> <% article.subject | tag_strip | shorten(26) -%> <% else -%> <% article.subject | tag_strip | shorten(36) -%> <% /if -%> </h4>
これが最近の記事の「タイトルを表示させる文字数の設定」部分。ここに「shorten(数字)」という記述が2箇所ありますね。
1番目の「shorten」は画像がある場合。2番目の「shorten」は画像が無い場合の設定です。
数字は何文字表示させるか？という数字で、半角で計算されます。つまり、最初のshortenは26になってるので、半角で26文字、全角では半分の13文字表示されるという事です。
なので、ここの数値を変更することで記事タイトルの文字数を変更する事ができる訳です。なので、この部分の数値をお好みで変更。30とか40とか自分のブログのタイトルの長さで調整して下さい。一応両方の数値を変更しておく方がいいかな。
変更したら保存し、ブログを表示させ、「Ctrl」と「F5」を一緒に押してリロードして確認。
また、先ほどの記述のちょっと下に次の記述があります。
<p class="recent-entry__body"> <% if:article.first_image -%> <% article.body | tag_strip | shorten(58) -%> <% else -%> <% article.body | tag_strip | shorten(74) -%> <% /if -%> </p>
こっちは「抜粋文の文字数」の設定。これが本文抜粋部分で同じく「shorten」が使われているので、数値を変更することで表示させる文字数を変更できます。先ほど説明したように、最初の「shorten」は画像がある場合。2番目の「shorten」は画像が無い場合の設定です。
数値は半角での文字数なので、58となっている場合は全角では29文字という感じの設定になっています。表示したい文字数を計算してここの数値を変更して保存。
本文の抜粋が必要ないという場合にはこの部分をまるごと削除してもOK。
最新の記事に画像を表示させたくない場合
Seesaaのサイドバーの最近の記事の画像表示をしたくない場合もあるかと思うので追記。
Seesaaブログの管理画面からデザイン⇒デザイン設定⇒適応中のデザイン名をクリックして、「コンテンツHTML編集」のタブに切り替えます。大体初期状態であれば21行目付近に次のようなコードがあります。
<p class="recent-entry__thumbnail"><img src="<% article.first_image.page_url_thumbnail -%>" alt="" /></p>
これが「最近の記事」の部分に画像を出力するコードになるのでこの部分を削除して確認。後は保存してブログを確認してみて下さいね。
以上Seesaaブログの「最新の記事」の文字色や文字の大きさ、それとタイトルや抜粋文の文字数の設定変更のカスタマイズ完了。
ブログを収益化するならWordPress利用がおすすめ
無料ブログでは利用規約の変更やアカウント停止、サービス終了などのリスクがあります。
また、表示速度も重く、スマホのページには消す事のできない広告が多いためブログでの収益化を考えているならWordPressの利用が圧倒的におすすめです。
WordPressと無料ブログの違いや必要な料金などは以下記事でまとめてます。
コメント
はじめまして、永山と申します。
こちら様の「最新の記事に画像を表示させたくない場合」の記事で、問題を解決することが出来ました。本当にありがとうございます。
seesaaブログを始めたばかりで、複数記事をアップしたら、最新記事欄の記事の一つに画像が出ていて、どうしてそうなったのかもさっぱりわからなくて、ヘルプを見ても解決の手立てが分からず、いろいろ探して、あるサイト様の記事のとおりにHTML編集欄のある部分の記述を削除しても表示が消えず、途方にくれておりました。そんなこんなで、やっとこちら様に辿り着けて解決し、本当に感謝しております。ありがとうございました。
スギ様
コメントありがとうございます。サイドバーの人気記事の画像（サムネイル）を消すという事でいいのでしょうか？違ったらすみません。どちらにしても実際にサイトを見てみないと原因も分かりませんので、まずはサイトのURLと、どこをどのようにしたいのか？具体的に伝えてもらえるとありがたいです。コメント公開時にサイトのURLは削除しますのでどうぞよろしくお願い致します。
はじめまして！いつも拝見させて頂いており、大変参考にさせて頂いております。
私、スギと申します。
初めてコメントさせて頂きますが、今回seesaaブログのカスタマイズで1点ご教示頂きたいと思います。
コンテンツにおいて、「人気記事」のウィジェットを使用しているのですが、その人気記事一覧の見出し画像についてです。
現在いくつかブログがあるのですが、1つのブログだけ人気記事一覧に記事の見出し画像が表示されるようになってしまったのです。
最近の投稿も同様で同じタイミングで見出し画像が表示されるようになりました。
この「最近の投稿一覧」に関しては、こちらの記事を参考にして消すことができたのですが、「人気記事」のみどうしても解決できません。javascriptの内容を変更すればよいのか、はたして違う方法なのかがわからず、ご教示願いたい次第です。
この1つのブログだけなってしまった原因として考えられるのは、ヘッダーの画像を設定しようと思って一度ファイルマネージャーに画像をアップロードしたからなのかなとも感じています。
使用しているテンプレートはルレアのリプラとなっております。
お手数をおかけしますが、宜しくお願い致します。