ゆうらり Happy Smile
ブログ 一行の文字数は何文字が最適? 記事を固定幅で中央に表示させる方法

ブログ 一行の文字数は何文字が最適? 記事を固定幅で中央に表示させる方法

FC2ブログ日記-カスタマイズの所感など
2020/10/21
胃がん_ブログ_ゆうらりHappySmile_管理人M_イラスト_アイコン_画像
M
#ブログ一行の文字数 #ブログ一行の文字数は何文字 #一行の文字数ルール #ほぼ日イトイ新聞 #ブログ記事を固定幅で中央表示 #フルブリードレイアウト #フルブリードレイアウトCSS #ウェブデザイン #ブログカスタマイズ #FC2ブログ日記

ブログ一行の文字数は何文字が最適?-記事を固定幅で中央に表示させる方法-トップ画像

こんにちは。FC2ブロガーのMです。

今回は、ブログの記事を中央に固定幅で表示させつつ、画像などは幅いっぱいまでフル表示させる方法についての話しをします。

いわゆる「フルブリードレイアウト」というやつですが、そもそも、これを実装しようと考えたのは、次の疑問がきっかけでした。

「ブログに表示される一行の最適な文字数は?何文字が読みやすいのだろう?」

スポンサードリンク

僕がブログ記事一行の文字数について悩み出したきっかけとは?

スマートフォンでインターネットを閲覧する様子

今やインターネットはスマートフォンを使って閲覧するのが主流です。したがって、ブログ一行の文字数って何のこと?と思う人がいるかも知れませんね。これは、PCでウェブサイトを閲覧した時の話しです。

僕がブログをはじめた当初は、一行の文字数なんて気にしたこともなかったんですけどね…。なぜかというと、FC2ブログのテンプレートは最初の頃に3カラムのものを使っていたから。左右にプラグインが並ぶので、記事幅が狭かったんですね(^^;)

Webサイト・ブログのテンプレート3カラムのイメージ画像

その後、ブログデザインのほうはレスポンシブが主流となり、僕のブログもレスポンシブデザインを採用しました。すると、これまで使ってきた3カラムのテンプレートは、ちょっと相性が悪いことに気付きまして…。

Webサイト・ブログのレスポンシブデザイン-responsive-イメージ画像

レスポンシブデザインですと、スマホ画面でブログを表示させた場合は左右のプラグインが下に切り替わり、長~く表示されるんです(汗)そこで僕は、ブログを2カラムのデザインに変更。そして現在は、1カラムのテンプレートを使用するに至った、というわけです。

左右のプラグインがなくなった結果、僕のブログ『ゆうらり』は、非常にスッキリとしたデザインになりました。しかし、記事幅が広くなったことで新たな悩みが生まれたのです。それが「一行の文字数」についてでした。

ブログに表示される「一行の最適な文字数」は何文字が正解?

Webサイト・ブログ-記事-コンテンツ-イメージ画像

実際のところ、ブログの記事に表示される「一行の最適な文字数」とは何文字が正解なのでしょうか?

これについて、さまざまなウェブサイトを調べてみたところ、何も共通性は得られずに終わりました(汗)主要なメディアはどれも皆、デザインにこだわっていないようです。2カラムで、記事幅いっぱいに表示させているサイトが多いみたい。一行の文字数は、だいたい40文字後半から50文字くらいといった印象をもちました。

ちなみに、僕のブログ『ゆうらりハッピースマイル』は、一行の文字数が56文字。これって、「ブログの読み易さ」としてはどうなんでしょうか?

一行の文字数については以前、たまたま観たテレビ番組で興味深いことが語られていました。

『ほぼ日イトイ新聞』は一行27文字以内。その理由とは?

TBSテレビの「がっちりマンデー!!」が『ほぼ日イトイ新聞』の話題を取り上げた放送回で、「ほぼ日」のサイトは、すべての文章が必ず27文字以下で改行されている「27文字ルール」を紹介。

「ほぼ日」が一行27文字以内でサイトを構成している理由は、目をあまり横に動かさなくても読める文字数が27文字以内だったということです。

ちなみに、このルールを生み出したのは、コピーライターの糸井重里さん。「27文字ルール」については、2017年10月1日(過去の放送内容):がっちりマンデー!!|TBSテレビという記事になっています。

糸井社長:頭を横に動かさない視界に入るギリギリの量が27文字かなあと思って。目をあまり動かさないで(スクロールしながら)ずっと見ることができますよね。フォーマットを考えるまで結構苦労して色々試した結果です。

「27」。実はこの数字、「ほぼ日」のサイト1行あたりの最大文字数で、「ほぼ日」では全ての文章が必ず27文字以下で改行されてるんです。
読む人が読み易いようにと、ほぼ日刊イトイ新聞がスタートした1998年からずっと続くルールで、これを全社員が徹底しているため社員同士のメールも必ず27文字以内なのだとか!
そして、もちろん記事の書き方にも独自のこだわりがありました!
「ほぼ日」の編集を担当する菅野さんにそのこだわりを伺うと…

菅野さん:読むリズムや現場の雰囲気を出す為に、「ほぼ日」の記事は普通はカットする「ああ」とか「うん」などの相槌をわざと残して入れたりしています。

糸井さんは、一行27文字以内でサイト作りをすれば、横に目を動かさず、縦方向へとスムーズにスクロールさせつつ文章を読んでいけるのだと。その結果、より言葉が伝わるのだと考えたようです。

悩ましい「読み易さ」の具体化

「ほぼ日」の話しをテレビで観たこともあり、僕はブログに表示される一行の文字数がずっと気になっていました。

『ゆうらりハッピースマイル』が使用するFC2ブログのテンプレートは現在、1カラムで記事幅が900px。PC画面でブログ見ると、目が横に動いてかなり記事が読みにくい(汗)

何とか、一行の文字数を少なく表示することが出来ないものか?ただし、一行あたりの文字数が少なくなると、右側の余白が多くなってしまう…。したがって、記事は固定幅で中央に表示させるのが望ましい。でも、画像だけは幅いっぱいに表示させたい。

こんな感じの悩みを解決するために、これまで色々とカスタマイズを試みてきたんですけどねぇ…。結果的に「これだ!」と納得できる方法が見つからず現在に至っています(汗)

ところがつい先日、僕の探し求めていたカスタマイズ方法がGoogleニュースのおすすめ記事に表示されたんです。Googleさんは一体、どこまで僕の嗜好を把握してしまっているのでしょうか?!

記事は固定幅で中央に表示。画像は幅いっぱいに表示させる方法

Googleニュースのおすすめに表示されたのは、シンプルなCSSで実装できる!記事は中央に固定幅、画像は幅いっぱいに、フルブリードレイアウトを実装するテクニックという記事。くわしく読んでみたところ、僕の悩みは、この記事が紹介するカスタマイズ方法ですべて解決できることが分かりました(^^)

ブログ記事は固定幅で中央に表示、画像は幅いっぱいにフルブリードレイアウト表示したイメージ画像

ポイントとしては、min()を使用して記事幅を中央に固定。さらに、画像などは要素にfull-bleedというクラス名を追加すれば幅いっぱいに表示されるというものです。

さっそく試してみたところ、僕でもほとんどコピペで簡単に実装することが出来ました!注意点としては、mainをdivに変えたこと、h1はいらない、クラス名がテンプレートに既存のものと重複しないようにするくらい。min(65ch)の65という数値は、使用する文字の設定にもよるみたいで、単純に65≒65文字とはならなかった。画面を見ながら数値を増減させる必要があるみたいです。

最初は、「ほぼ日」流に一行を27文字に設定。しかし、僕のブログは記事幅が900pxもあるので、バランス的にすぐ断念(汗)なんだかんだと試行錯誤した結果、僕のブログには40文字くらいが最適なのかなぁ…という塩梅に落ち着きました。

また、画面いっぱいに表示させたい画像がある時は、IMGタグにクラス名のfull-bleedを記述すればOK。画像だけに限らず、見出し(hタグ)などにも使えます。

なお、FC2ブログには、テンプレートの本文と追記部分のそれぞれを別々にdiv(mainを変えたやつ)で囲う必要があるみたいです。それで上手くいきました。

【まとめ】結局、カスタマイズをやめた理由は…

というわけで今回、僕は今までの悩みを解決することが出来ました(^^)

ところが、すぐにカスタマイズは取り消して元に戻したんです…。記事だけのことを考えたら非常に素晴らしかったので残念(汗)

ブログカスタマイズを諦めてショックを受けたブロガーのイメージ画像

やめた理由は、ブログ全体をみた場合、バランス的にどうしても上手く調整が出来なかったからです。

僕のブログはGoogleアドセンスを貼っているので、それを固定幅に合わせるか、幅いっぱいに表示させるかどうか…。そのほか、多用するブログカードは固定幅に合わせると何か見栄えが悪いかも(汗)見出しもどっちに合わせるべきなのか、迷ったらキリがありませんでした。

要するに、ブログで色んなカスタマイズをやり過ぎているため、記事幅のデザインをいじってしまうとまとまりが付かなくなってしまうということなんですね( ̄▽ ̄;)

もっといろいろとやり出す前にカスタマイズのやり方を知っていたら良かったのに…残念。

したがって、あまりカスタマイズを加えていないシンプルなテンプレートで、バランス的に問題がない場合、一行の文字数が気になるブロガーさんにとってはかなりおすすめなカスタマイズ方法です。興味がおありの方はぜひ一度、試してみて下さい。

あわせて読みたい
data-matched-content-ui-type="image_card_stacked" data-matched-content-rows-num="6,2" data-matched-content-columns-num="1,5"
現在の人気記事ランキング
FC2ブログ日記-カスタマイズの所感など