はてなブログの記事本文を省略し、モバイルレイアウトに最適化するCSS

はてなブログには「目次記法」と呼ばれる機能があり、個別記事のリード文下に[:contents]を挿入すれば、以降の本文を省略することができます。

 

しかし、[:contents]上の文字数は記事ごとによって異るもの。PCとモバイルをそれぞれ別のソースで管理している場合は別ですが、レスポンシブを採用しワンソースで管理していると、この文字数のせいでトップページのレイアウトがガタガタになってしまうこともあります。いやまあ、少し前のこのブログのことなんですけど……。今回は、そんなトップページ・記事一覧ページの「本文はみ出ちゃう問題」をCSSで対処してみました。

はじめに

当ブログは現在、トップページを記事一覧ページ（アーカイブページ）と同じレイアウトにしています。記事一覧ページをトップにリダイレクトしているブログもよく見かけますが、このブログの場合は個別記事のアイキャッチ画像にクラス名を振り、CSSでリサイズする方法を採用。読み込み速度を落としたくないのと、トップページに表示する記事数は１０～１５個に収めたい、あと、無駄なスクロールは徹底的に減らしたい！という願望の結果こうなりました。カスタマイズするにあたり、参考にさせて頂いたのは以下の記事です。

 

▼参考サイト

トップページの記事画像を CSS だけでアーカイブページ風のサムネイルに変更するカスタマイズ - MoonNote

 

ただ、トップページを記事一覧ページと同じレイアウトにしても、[:contents]より上の文字数を省略しないとスマホ端末での見映えが悪いんですよね。以下画像は少し前のブログトップページですが、最新記事は３行、下の記事は２行はみ出ています。

 

 

複数行の文字を「...」で省略するCSSもありますが（こちら）、IEやFirefoxに未対応なのが不便。そこで当ブログの場合はCSSで表示領域を指定し、無理矢理文字数を省略しているように見せることにしました。

文字数を省略するカスタマイズのやり方

まず、CSSで文字を省略する以前のレイアウトを確認。以下の画像は、当ブログのトップページ・記事一覧ページのキャプチャです。パソコン表示は問題ありませんが、スマホ表示の場合は本文がアイキャッチより下にはみ出てますよね。このままだと見映えが悪いし、無駄なスクロールも発生してしまう！

パソコン表示

 

パソコン表示の場合は、十分な余白があるので本文がアイキャッチより上に収まっています。よって、レイアウトが崩れることもありません。

スマホ表示（トップページ）

 

ディスプレイ幅が狭いスマホ表示の場合は、ご覧の通り、アイキャッチ画像の下に本文が数行はみ出します。記事ごとにはみ出る行数も異なるので、無駄な余白が発生し、レイアウトもごちゃごちゃして見えるはず。

スマホ（記事一覧ページ）

 

トップページだけでなく、記事一覧ページも同じように文字がはみ出ています。はてなのモバイルデザインを使用せず、ワンソースで管理すると大体こうなる。無駄な余白・スクロールが多いとユーザーに離脱されやすくなるため、内部SEO的にも良くありません。というわけで、CSSでサクッと隠してしまおう！

表示領域を指定するCSS

CSSで表示領域を指定すると、ぱっと見、文字を省略しているように見えます（本当はしてないけど）。やり方はとても簡単で、以下のCSSをコピーし、はてなブログの設定画面にあるデザインCSSに追加するだけ。コードは以下のサイトを参考にしています。

 

▼参考サイト

指定幅以上の文字列を省略して…つけるCSS【複数行も可】

 

スマホ表示の場合だけ表示領域を指定したかったので、導入に際してはコードを以下のようにカスタマイズしました。

 

@media screen and (max-width:960px){
.page-index .entry-content p {
font-size: 0.8em;
　　color: #333;
height: 7.2em;
overflow-wrap: break-word;
}}
@media screen and (max-width:960px){
.page-archive p{
font-size: 0.8em;
　　color: #333;
height: 7.2em;
overflow-wrap: break-word;
}}

 

これは、メディアクエリで「ディスプレイ幅960px以下の場合の表示領域」を指定しています。スマホ端末で閲覧した場合、CSSで指定した領域のみが表示され領域外の文字は非表示になるという仕組みですね。文字そのものを省略するわけではありませんが、Chrome、FireFox、IEなどの主要ブラウザにも対応済みなので、三点リーダーを使うよりも手軽にレイアウトを整えることができます。

 

 

CSSで表示領域を指定した結果、以下画像のように見た目をスッキリさせつつ、無駄なスクロールも排除できました。今のところ問題はなさそうなので、当分これでいこうと思います。

 

カスタマイズ後のスマホ表示１（トップページ）

カスタマイズ後のスマホ表示２（記事一覧ページ）