Top Page > Seesaaブログ > 【Seesaaブログ新デザインシステム】サイドバー「最近の記事」(2)タイ…

【Seesaaブログ新デザインシステム】サイドバー「最近の記事」(2)タイトルと記事冒頭部分の文字数を変更する

Seesaaブログのサイドバー「最近の記事」を編集する
■Seesaaブログのサイドバー「最近の記事」を編集
■記事タイトルと記事冒頭部分の文字数を変更
■「コンテンツHTML」の「module module--recent-entry」を編集  

Seesaaブログのテンプレート「シンプルA. ホワイト 右カラム」のサイドバー「最近の記事」の、タイトルと記事冒頭部分の文字数を変更したいと思います。



前回の記事<■【Seesaaブログ新デザインシステム】サイドバー「最近の記事」(1)リンク設定とサムネイル画像サイズを編集する>では、リンクの設定とサムネイル画像サイズの変更について書いてきました。


現時点のイメージ
現時点の最近の記事


サムネイル画像のサイズに対して、記事タイトルと記事冒頭部分がはみ出ています。
「はみ出る」と書いても意味がわからないかもしれませんが、要するに、サムネイル画像の高さと同じ高さで文字が収まっていない、ということです。
こういうの、ちょっと気になってしまうんですよね。
なので、表示させる文字数を変更することで対応したいと思います。
(画像のサイズを変更せずに記事タイトルを1行に表示したい場合は、前回の記事ではなく最初からこちらのやり方でカスタマイズしてください)





サイドバー「最近の記事」の文字数を変更する


コンテンツHTML」を編集します。
Seesaaブログの「管理画面>デザイン」を開き、「デザイン設定」をクリックします。
使っているテンプレートの名前が表示されているので、クリックして開きます。
4つあるタブのうち「コンテンツHTML編集」タブをクリックしてコンテンツ編集画面に切り替えます。



「コンテンツHTML編集」画面で「module module--recent-entry」という単語を探します。
デフォルトのテンプレートでは13行目あたりに以下のコードがあると思います。


<13行目あたりのコード>
<% if:parts_name == 'recent_article' # START parts -%>
<section class="module module--recent-entry">



この一連のコードの下(24行目あたり)に、以下のコードがあると思いますので、数値を変更します。
分かれているところの上段が記事タイトルの文字数、下段が記事内容(記事冒頭)部分の文字数です。


最近の記事部分のコンテンツHTML編集画面


デフォルトのテンプレートでは、画像が入っている場合の記事タイトルは26バイト、画像が入っていない場合は36バイトという設定になっています。
記事内容(記事冒頭)は、画像が入っている場合は58バイト、画像が入っていない場合は74バイトという設定です。
これらの数字を変更することで、自分のテンプレートに表示する文字数を調整することができます。



HTMLコードの数値を変更する


以下は数値変更後のコードです。
変更するべき箇所を赤色の文字で表示していますので、お好きなように数値を変更してください。
私がどのように変更したのかは、下記で説明しています。


<数値変更後>
<h4 class="recent-entry__title">
<% if:article.first_image -%>
<% article.subject | tag_strip | shorten(26) | mark_raw -%>
<% else -%>
<% article.subject | tag_strip | shorten(36) | mark_raw -%>
<% /if -%>
</h4>
<p class="recent-entry__body">
<% if:article.first_image -%>
<% article.body | tag_strip | shorten(50) | mark_raw -%>
<% else -%>
<% article.body | tag_strip | shorten(70) | mark_raw -%>
<% /if -%>
</p>


●私のブログの場合は、前回の記事で画像サイズを小さくしましたので、上段の「記事タイトルの文字数」は変更しませんでした。デフォルトのままの「26バイト」と「36バイト」です。※注意事項をお読みください
●下段の「記事内容(記事冒頭)部分の文字数」は、画像が入っている場合は50バイト、画像がない場合は70バイトに設定しました。



【注意1】
上記のように、最初はデフォルトのテンプレートから変更せずに、記事タイトルの文字数を「26バイト」と「36バイト」にしていたんですよ。しばらくはそれでよかったんですが、ちょっと長めのタイトルとか英数字かな?カタカナだったかな?何かそういう文字でタイトルを表記したら、文字が入りきれなくて2行になってしまいました。
もしかしたら「26バイト」と「36バイト」のままでは、うまく収まらないかもしれません。
結果を書くと、私は「22バイト」と「32バイト」に変更しました。



【注意2】
このブログでは、サイドバーの「最近の記事」の表示について、最終的には記事内容(記事冒頭)部分の表示をやめて、記事タイトルとサムネイル画像だけを表示させるように変更しました。それに伴い記事タイトルの文字数を変更し、行間も変更しました。
詳細は、記事<■サイドバー「最近の記事」に画像とタイトルだけを表示する(記事冒頭部分は非表示)>でご確認ください。




数値を変更した後のサイドバー「最新の記事」


編集後のサイドバー最近の記事




次の記事の紹介

次の記事では、Seesaaブログのサイドバー「カレンダー」を調整します。


【Seesaaブログ新デザインシステム】サイドバー「カレンダー」の横幅を%表示に変更し、日付に背景色を付ける
サイドバーの「カレンダー」の横幅ですが、デフォルトのテンプレートではCSSで「260px」に固定されています。ブラウザを100%の横幅で表示させてブログを閲覧した時には何の問題もありませんが、ブラウザの幅を‥‥






posted by mameemon | Comment ( 0 ) | Category ( Seesaaブログ )
この記事へのコメント
コメントを書く
お名前:
コメント:
認証コード: [必須入力]

※画像の中の文字を半角で入力してください。