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

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

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

最近の記事カスタマイズ-1

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

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

まずは「最新の記事」の文字色や文字の大きさをカスタマイズ。必要な部分だけをスタイルシート(CSS)に追加して下さい。

Seesaaブログの管理画面から「デザイン」⇒「デザイン設定」⇒「適応中のデザインタイトル」をクリックして、「スタイルシート編集」のタブを選択します。

新デザインパンくず-3

スタイルシートの一番下に次のコードを追加。

/* 最新の記事タイトル部分 */
.recent-entry__title {
  color: #000;  /* 文字色 */
  font-size: 14px;  /* 文字の大きさ */
}

/* 最新の記事抜粋文 */
.recent-entry__body {
  color: #0066cc;  /* 文字色 */
  font-size: 14px;  /* 文字の大きさ */
}

文字の大きさはそのまま変更したくない場合には「font-size」の部分の1行は削除してもOKですし、文字色も好きなカラーコードに変更して下さい。

後はこれで「保存」してブログを表示させて確認。反映されていない場合には「Ctrl」と「F5」を一緒に押してリロードして確認して下さい。

最新の記事のタイトルや抜粋文の文字数の設定を変更する

前述したように「最新の記事」の部分のタイトルや抜粋文は表示させる文字数が設定されていて、あまり長いタイトルなどは省略されます。タイトルが省略されると何の記事だか分からない場合もあるので、この表示させる文字数の設定も変更してみます。

Seesaaブログの管理画面から「デザイン」⇒「デザイン設定」と進み、適応中のデザインタイトルをクリック。

新デザインパンくず-1

それで、タブの切り替えができるので、「コンテンツHTML編集」をクリック。

Seesaa新デザインアドセンス-5

この「コンテンツ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ブログの「最新の記事」の文字色や文字の大きさ、それとタイトルや抜粋文の文字数の設定変更のカスタマイズ完了。

※入院生活から復活しました!!またできるだけ返信しますのでよろしくお願いします(^^)

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