Seesaaブログの「最新の記事」のタイトルや抜粋文のカスタマイズ【新システム】

今回はコメントでリクエストがあったので、Seesaaブログの「最新の記事」のタイトルや抜粋文の部分の文字色や大きさなどのカスタマイズ、それから画像を表示させない方法も紹介していきます。

このサイドバーで「最新の記事」で表示される部分は「記事タイトル」と「その記事の抜粋文」が表示されますが、ここに表示される文字数は初期値が設定されていて、それ以上の文字数になると省略されるので、これも一緒に変更できるようにしていきます。

画像を見てもらうと分かるように長いタイトルは省略されていますよね。これが省略されないように初期値の文字数設定も変更する手順も一緒に解説していきます。

著作情報

この記事を書いた人

sigezo

WEBエンジニア11年目。これまでに100を超えるサイトの立ち上げや運営に携わり、2017年に法人化。カスタマイズ、デザイン、ツール作成、サイト移転まで何でもこなします。

sigezoをフォローする

最新の記事の文字色や文字の大きさの変更

まずは「最新の記事」の文字色や文字の大きさをカスタマイズ。必要な部分だけをスタイルシート（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と無料ブログの違いや必要な料金などは以下記事でまとめてます。

• ⇒WordPressを始めるのに必要な物や料金
• ⇒WordPressブログの始め方と使い方まとめ！【初心者向け】
• ⇒Seesaaブログカスタマイズまとめ【新システム版】