生活に役立つWEBサービスの使い方を解説

ロボット君のWEB術

【アフィンガー】記事内文章の改行幅を変える方法

【アフィンガー】記事内文章の改行幅を変える方法

LOBO(@lobo88_web)です。

今回は、当サイトも使用しているアフィンガーの改行幅を変える方法を紹介します。

改行幅を広げることで、スッキリとした文章に見えるはずですので、アフィンガーの改行幅にこだわりを持ちたい方は参考にしてください。

WEB界で有名なマナブさんの「manablog」も改行幅を広くとって見やすい文章になっていますよね。とても参考させてもらってます。

下記のコードをコピペすれば、スッキリとした改行幅に変えられます。

コードを書き換えるため、変更する際は自己責任でお願いします。

【アフィンガー】記事内文章の改行幅を変える方法

改行幅を変える方法は、とてもシンプルです。

 CSS
p, .post h5 {
margin-bottom: 50px;
}

上記コードを子テーマに書き加えれば、文章毎の改行幅が変えられます。当ブログは50pxで統一しています。

ちなみに、アフィンガーのデフォルトは「margin-bottom: 20px;」になっているはずです。

Chromeの検証機能の使い方を知っている方は、確認してみてください。

改行を変える時の注意事項

改行幅を変える時、いくつか注意事項があります。

上記のコードだとh5の下部も広がる

【アフィンガー】h5の幅も広がる

コードに「 post h5」が入っているため当然と言えば当然なのですが、画像のようにh5の部分も広がります。

「検証してコード丸っと貼ればいいじゃん!」と思っている方は注意してください。

LOBO
私は、h5まで使わないので放置していますw

ボックス素材などと連動していない

アフィンガーには優れた素材がたくさんあります。

ボックスとか種類豊富で、ブログ運営者にとっては嬉しい素材ばかりです。

でも、文章の改行幅だけを変えてしまうと、それらの素材がダサく見えることがあります。

下記の図をご覧ください。

ボックス素材などと連動していない

このように、各要素または素材のボトム値を変えないとアンバランスなデザインになってしまいます。

分からない方は、Chromeの検証でコードを確認してください。

もし、検証の使い方が分からない場合はサルワカさんの記事が分かりやすいです。

初心者向け!Chromeの検証機能(デベロッパーツール)の使い方

行間と文字の大きさ

アフィンガーには、「文字の大きさ」と「行間の幅」を変えられる標準機能があります。

AFFINGER管理→デザイン→フォントのサイズ

上記の手順で各デバイス(PC・スマホ・タブレット)の数値を変えられます。

私の設定は下記の通りです。もし、お困りの方は参考にしてください。

  文字サイズ 行間
スマホ 16px 30px
タブレット 17px 30px
パソコン 17px 30px

改行幅を広げることのメリット・デメリット

メリット1.読みやすくなる(はず?)

人それぞれの感性はありますが、個人的に改行幅を広げることでスッキリで見やすい感じがします。

具体例として、私が運営している海外サッカーサイト「PLAYERs」のある文章はコチラ。

もっとも注目しなければならないディフェンダーはデ・リフトでしょう。19歳にして名門アヤックスのキャプテンを務め、18-19シーズンではチャンピオンズリーグベスト4に大きく貢献。2019年夏の移籍市場では、パリSGやバルセロナなどビッククラブが獲得に動いたが、ユベントスへ移籍が決定しました。守備といえばイタリアですので、これからの成長が大いに楽しみなDFです。

引用:刮目せよ!海外サッカー注目若手選手を11名ピックアップ【2019年版】

LOBO
クッソ読みずらいな...リライトしなきゃ...

もし、この文章をスッキリと読みやすくするなら、

もっとも注目しなければならないディフェンダーはデ・リフトでしょう。

19歳にして名門アヤックスのキャプテンを務め、18-19シーズンではチャンピオンズリーグベスト4に大きく貢献。

2019年夏の移籍市場では、パリSGやバルセロナなどビッククラブが獲得に動いたが、ユベントスへ移籍が決定しました。

守備といえばイタリアですので、これからの成長が大いに楽しみなDFです。

どちらが読みやすいかは人それぞれですが、改行含めた方が読みやすくないですか?

もし、読みやすいと感じた方は、今すぐ改行幅を広げてみましょう!広げてダメだったら、すぐに修正できますしおすし。

メリット2.自分の目に優しい。推敲しやすい

これは完全に私だけかもしれませんが、短文&改行多めはエディタ上でもスッキリするんです。

先の引用文を比べると一目瞭然です。

PLAYERsエディタ画面

PLAYERsのエディタ画面

【アフィンガー】改行幅が広い方が推敲しやすい

本記事の一文

文章量が違いすぎますが、圧倒的に読みやすいのは後者です。

運営者のメンタルにも優しいのが、短文&改行幅広い文章の大きな特徴ですね。

ただ、このメリットは私の自己満。あくまでユーザーファーストなので、サイトのジャンルに合わせて使い分けましょう。

デメリット1.あっさりしすぎて稚拙

人によりけりですが、短文&改行幅が広いのは稚拙さを感じるかもしれません。

正直、私も最初は「なんか薄っぺらい印象があるな〜」と思う部分がありました。

ですので、短文&改行幅が広い文章に稚拙さや安っぽさを感じる人にはオススメしません。

デメリット2.コードの修正がめんどくさい

先述していますがアフィンガーの場合、ボックスなど各要素ごとにマージンボトムを変える場合はメンドくさいです。

コードを1つ1つ探し出し、CSSを書き換えないといけません。

私は極度のメンドくさがり屋なので、すべての要素を整えず当ブログをスタートしました。

「まぁ、やっていくうちに出てきたら修正すればいいや」理論です(笑)

最初から完璧を求めすぎるのはアクション(行動)を妨げるので、ガッツリ使っている要素だけカスタマイズすれば良いと思います。

まとめ

アフィンガーの改行幅をカスタマイズする方法を紹介しました。

アフィンガーを現在使っている方や購入を検討している方は、ぜひ上記の方法を試してみてください。

LOBO
如何に読者が最後まで読んでもらえるかを考えながら設定してみましょう!ユーザーファーストだ!!!
  • この記事を書いた人
LOBO

LOBO

北海道在住のLOBOです。「新たな知識の提供」を心がけ発信しています。別ブログにはなりますが月間最高10万PV。実績は乏しいですが、ブログノウハウも発信しています。

-WordPress
-

Copyright© ロボット君のWEB術 , 2019 All Rights Reserved Powered by AFFINGER5.