はぴらき合理化幻想

海外3年/西成ドヤ2年/沖縄2年/事故物件で寝袋3年目、ミニマリスト10年目でダンボール2箱の持ち物と保存食で大阪に定住中。

はてなブログ「続きを読む」の文字列変更や大きくするカスタム

はてなブログではテーマのHTMLを仕様上変更できないので、CSS編集だけで調整する方法。

デザインテーマ

この記事公開時に当ブログで利用しているデザインテーマ名は「Epic」。

このデザインテーマ以外ではカスタム方法に相違があるかもしれない。

「続きを読む」をカスタムするメリット

  • 「続きを読む」がデフォルトの小さいままだと、流し読みしている方に気付かれにくい。これを回避し、記事に続きがある旨をしっかりアピールできる。
  • デザインテーマのカスタム事始めにちょうどよい。コピペするだけだが、自分でカスタムできたという実感を持つことが大事。

CSSを編集する方法

次の記事で管理画面からCSS編集できる場所へのアクセス方法を図解している。

以下で述べる3種類のコードでお好みのものをコピペするだけ。必要に応じで値を変更すれば柔軟に対応可能。

文字サイズを変更するだけ

文字サイズや太さを変更するだけなら、追加するコードは次の通り短い。

/*
はてなブログ「続きを読む」の文字列変更や大きくするカスタム - はぴらき合理化幻想
http://hapilaki.hateblo.jp/entry-see-more
*/
.entry-see-more {
  font-size: 150%;/*文字サイズをさらに大きするなら150を200などに変更*/
  font-weight: bold;/*太字にしない場合は bold を normal に変更*/
}

「続きを読む」の前に矢印などを追加

content:の右にあるダブルコーテーションのペア内の文字列を調整する。

/*
はてなブログ「続きを読む」の文字列変更や大きくするカスタム - はぴらき合理化幻想
http://hapilaki.hateblo.jp/entry-see-more
*/
.entry-see-more {
  font-size: 150%;/*文字サイズをさらに大きするなら150を200などに変更*/
  font-weight: bold;/*太字にしない場合は bold を normal に変更*/
}
.entry-see-more:before {
  content:"\27A4\00A0";/*前に表示したい文字列を入れる*/
}

はてなブログの文字コードはutf-8なので、特殊文字をそのまま利用しても問題なし。ちなみに、「前に表示したい文字列」に\27A4\00A0とあるが、これは数値文字参照という。

「続きを読む」という文字列も変更

「続きを読む」の代わり表示させたい文字列をcontent:の右にあるダブルコーテーションのペア内に入れる。下記コードで\27A4\00A0もっと見るが入っている部分。

/*
はてなブログ「続きを読む」の文字列変更や大きくするカスタム - はぴらき合理化幻想
http://hapilaki.hateblo.jp/entry-see-more
*/
.entry-see-more {
  display:block;
  font-size: 150%;/*文字サイズをさらに大きするなら150を200などに変更*/
  font-weight: bold;/*太字にしない場合は bold を normal に変更*/
  height:2em;
  overflow: hidden;
}
.entry-see-more:before {
  content:"\27A4\00A0もっと見る";/*表示したい文字列に変更*/
  display:block;
}

上記コードの原理としては次の通り。

  1. 「続きを読む」の前に「表示したい文字列」を挿入
  2. 「続きを読む」を所定の場所から下部に移動させる
  3. 「続きを読む」が見えないように調整
  4. 「表示したい文字列」だけが見える

免責

  • 記載事項の正確性は無保証。
  • IE9以下など昔のブラウザでどのように表示されるのか未確認。
  • ブログのカスタマイズは自己責任。筆者は一切の責任を負わない。
てすとてすと