エド・ ニコフ博士

ワードプレスで一行あける方法を解説!3分で読まれる記事にする方法

ワードプレス1行あける

今回は「記事を書いている時に、ワードプレスで1行だけ空ける方法」について説明しようと思います。

この記事を見ていただいた人はこんなことを思っているのではないでしょうか?

  • 大きく隙間を空けずに改行したい
  • 記事を読みやすくしたい
  • 記事をキレイな見た目にしたい

今回の記事はそういった方にオススメの内容になっていると思います。

 

ビジュアルエディターで「Shift+Enter」テキストエディターで「<br>」を入力

WordPress で記事を書いている時に多くの人が最初につまずく問題の一つです。ただブログのように改行をしたいだけなのにとっても大きな隙間が空いてしまう…これじゃあ読みやすいように改行したのに逆に読みにくい文章になってしまうじゃないか!…とそんな感じです。

この問題はすぐに解決することができます。下の参考画像を見てもらえば分かるのですがビジュアルエディターで執筆している時に改行したいタイミングで「Shift+Enter」入力すると大きな隙間を空けずに改行することができます。

ちなみにテキストエディターの場合はどうするかと言うと、改行したいタイミングで<br>タグを入力するだけです。下の参考画像のように1行だけうまく改行できたかと思います。

[st-mybox title=”注意ポイント” fontawesome=”fa-exclamation-circle” color=”#ef5350″ bordercolor=”#ef9a9a” bgcolor=”#ffebee” borderwidth=”2″ borderradius=”5″ titleweight=”bold” fontsize=”” myclass=”st-mybox-class” margin=”25px 0 25px 0″]

何度か操作しているうちに改行が大きくあきだしてくる。

<br>タグがWordPressのテーマによってかき消されている恐れがあります。<br>タグではなく、<br class=””>タグに変えるとうまく動作する可能性がりますので、そちらも試してみてください。

[/st-mybox]

これで1行だけ改行したいという悩みは解決したと思うのですが、この記事を読まれている方はユーザーの人に読んでもらいやすいような文章を目指しているのではないでしょうか?ですので、次に読みやすい記事の書き方について説明させてもらおうと思います。

 

– 01 – Technique
記事を読みやすくするワザ「改行と段落の違い」

皆さんが最初このサイトに訪れた時、
改行と思ってエンターを押していたと思うのですが、
実はその方法は改行ではなく段落の変更だったのです。

記事が読みにくい原因の一つとして
改行と段落がうまく使えてない人が
多いように感じるのでここでは改行と段落の違い、
そしてそれぞれの使い方について
解説させてもらおうと思います。

改行

改行とは文章を読みやすくするために行を変えるということです。以下に例を載せたいと思います。

どうでしょうか凄く見やすくなったと思います。適切な位置に改行を入れることにより、

[st-mybox title=”ポイント” fontawesome=”fa-check-circle” color=”#FFD54F” bordercolor=”#FFD54F” bgcolor=”#FFFDE7″ borderwidth=”2″ borderradius=”5″ titleweight=”bold” fontsize=”” myclass=”st-mybox-class” margin=”25px 0 25px 0″]

  • 1行分隙間が開くのでスッキリして見える。
  • 文字だらけにならないので情報がはっきりと伝えられる。

[/st-mybox]

このような効果が得られます。これで改行についてなんとなくわかったかと思います。では次に段落の説明に入っていきましょう。

[st-mybox title=”注意ポイント” fontawesome=”fa-exclamation-circle” color=”#ef5350″ bordercolor=”#ef9a9a” bgcolor=”#ffebee” borderwidth=”2″ borderradius=”5″ titleweight=”bold” fontsize=”” myclass=”st-mybox-class” margin=”25px 0 25px 0″]

スマホで見た時にレイアウトが崩れる

パソコンでワードプレスを編集中にパソコンのレイアウトに合わせて改行を入れるとスマホで見た時に変な位置で改行されているという事が良く起こります。次のセクションでは

  1. そもそも改行を使わずにライティングする方法
  2. パソコンとスマホそれぞれ個別に改行を入れる方法

を順番に解説しているので、この問題が気になる人は引き続きご覧ください。

[/st-mybox]

 

段落

段落とは1つ内容で統一された文章の集まりのことで<p>タグ(パラグラフ)と呼ばれます。まずは以下の例をご覧ください。

[st-mybox title=”” fontawesome=”” color=”#757575″ bordercolor=”#ccc” bgcolor=”#ffffff” borderwidth=”2″ borderradius=”2″ titleweight=”bold” fontsize=”” myclass=”st-mybox-class” margin=”25px 0 25px 0″]

良い例 / パラグラフを意識した文章

りんごが赤い理由を説明します。りんごには アントシアンと言う色素群があり、 そのアントシアンが赤色をしているためにりんごが赤く見えるのです。

[/st-mybox]

パラグラフを意識した例を見てもらうと段落のどの部分を見ても「りんごが赤い理由」 について説明していますが、 以下のパラグラフを意識していない文章を見るとりんごが赤い理由から外れている文章も段落の中に含まれています。りんごが赤い理由以外のことも書かれていることを意識して悪い例をお読みください。

[st-mybox title=”” fontawesome=”” color=”#757575″ bordercolor=”#ccc” bgcolor=”#ffffff” borderwidth=”2″ borderradius=”2″ titleweight=”bold” fontsize=”” myclass=”st-mybox-class” margin=”25px 0 25px 0″]

悪い例 / パラグラフを意識していない文章

りんごが赤い理由を説明します。りんごにはアントシアンという色素群があります。 アントシアンというものは太陽の光を浴びれば浴びるほど大きくなっていく色素群です。このアントシアンはクランベリー やアサイーにも含まれており食用植物に普遍的に存在する物質です。アントシアンが赤色なのでりんごが赤く見えます。

[/st-mybox]

おわかりいただけたでしょうか?

りんごが赤い理由を説明している最中に途中で出てきたアントシアンについて詳しく書きたくなってしまい、りんごが赤い理由の段落の間にアントシアンの詳しい説明を書いてしまいました。段落は一つの内容で統一された文章の集まりなのでりんごが赤い理由とアントシアンの説明が混ざっています。ひとつの段落に二つの内容が入っているので読者からすると混乱しやすい文章になります。

ではりんごが赤い理由とアントシアニンの詳しい説明をしたい場合はどうすればよいのか?その場合は段落を二つに分けることで解決することができます。

[st-mybox title=”” fontawesome=”” color=”#757575″ bordercolor=”#ccc” bgcolor=”#ffffff” borderwidth=”2″ borderradius=”2″ titleweight=”bold” fontsize=”” myclass=”st-mybox-class” margin=”25px 0 25px 0″]

改善例 / 段落を意識した文章

■リンゴが赤い理由

りんごが赤い理由を説明します。りんごには アントシアンと言う色素群があり、 そのアントシアンが赤色をしているためにりんごが赤く見えるのです。

■アントシアンって?

アントシアンというものは太陽の光を浴びれば浴びるほど大きくなっていく色素群です。このアントシアンはクランベリー やアサイーにも含まれており食用植物に普遍的に存在する物質です。

つまり、りんごが赤い理由はアントシアンという色素群のせいで、太陽の光を浴びれば浴びるほど赤くなっていくということです。

[/st-mybox]

段落を意識するだけで読みやすい文章を作ることが可能です。改行の時と比べて情報がまとまって表示されやすくなるので読者からするとこちらの方が読みやすい場合が多いです。段落を使いこなして、 分かりやすい文章になるように心がけましょう。

 

[st-cmemo fontawesome=”fa-file-text-o” iconcolor=”#919191″ bgcolor=”#fafafa” color=”#000000″ iconsize=””]

まとめ

・段落を意識してライティングすれば自然と読みやすくなる

・改行は控えめに使う

[/st-cmemo]

 

記事をキレイにする必殺ワザ「PCとスマホで個別に改行する方法」

実は改行には大きな問題があります。それは PC とスマホで見た目が変わってしまうという点です。 パソコンで記事を書いているとき時を例にして説明させていただきます。以下の画像をご覧ください。

 

パソコンで改行

句読点が来るたびに改行をしてみました。確かにパソコンでは読みやすいですよね。今回はスマホで見た時を考慮せずにバシバシ改行していきました。しがし、スマホで見た場合はいったいどうなってるいるのか、一緒に見てみましょう。

 

スマホで見た時

 

[st-kaiwa-1356 r]・・・・・・・・・・・・・・・・[/st-kaiwa-1356]

[st-kaiwa-1375]おおーーー!すげー見やすいぞっ!![/st-kaiwa-1375]

[st-kaiwa-1387]素敵です♪やっぱり改行はどんどん使っていくべきですね♪[/st-kaiwa-1387]

[st-kaiwa-1369]いやいや!!(滝汗
今回はたまたま上手くいっただけで本当はもっとレイアウトが崩れるんですゾ!例えばこんな風になったりします![/st-kaiwa-1369]

 

[st-kaiwa-1390]せっかくいい事を言っているのにガタガタですぅー…[/st-kaiwa-1390]

[st-kaiwa-1378]おおーーー!すげー見にくいぞっ!![/st-kaiwa-1378]

[st-kaiwa-1356]今回は例として元プロ野球選手の野村克也さんの名言を改行してみました。改行はこのように予期せぬレイアウトになってしまうリスクがあるのデス![/st-kaiwa-1356]

 

なぜ改行するとレイアウトが崩れるの?

パソコンの1行の文字数とスマホの1行の文字数が違うために中途半端な位置で改行が行われています。 これでは非常に読みにくい文章になってしまいます。この現象を治すためにはパソコンだけに適用する改行とスマホだけに適用する改行の二つを用意する必要があります。 少し面倒なのですが意外と簡単に作成することができるのでお伝えしていこうと思います。

以下のコードをご自身の WordPress テーマのCSS部分に張り付けてください。

/*個別に改行設定*/
/*スマホ用の改行*/
@media only screen and (min-width:782px) {
  .br-sp{display:none!important;}
}
/* パソコン用の改行 */
@media only screen and (max-width:782px) {
  .br-pc{display:none!important;}
}

テキストエディターでのコードの書き方は以下のようになります。

スマホで改行する。<br class="br-sp" />パソコンで改行する。<br class="br-pc" />文章が入る。<br class="" />普通の改行が後ろに入っている。

 

パソコンで見た場合

 

スマホで見た場合

このように個別に改行を設定することができます。ただしこの方法はかなりしんどいので、力の入れた記事のみにする適用するかそもそも段落でのライティングに力を入れるかどちらかにした方が良いと思います。

いかがだったでしょうか?文章をただ改行するだけにしても十分に奥が深い事が分かってもらえたと思います。ただ、こういった段落を意識してのライティングや適切な改行位置は記事を執筆していく中で自然と体が覚えていくものですので、最初はわからなくても安心してください。

副業結社シシトウ団は副業を頑張る方の味方です。めげずにコンテンツ作成を一緒に頑張っていきましょう!

[st-kaiwa-1390]最後のはちょっと難しいですー!![/st-kaiwa-1390]

[st-kaiwa-1381]ただ改行したいだけなのに、えらく難しいなー!これならやりたくないぞ![/st-kaiwa-1381]

[st-kaiwa-1390]誰かに頼みたいですー…[/st-kaiwa-1390]

[st-kaiwa-1363 r]安心してください!そういった要望にお応えして私が代わりに設置するのをお手伝いさせていただこうと思っていますゾ![/st-kaiwa-1363]

[st-kaiwa-1375]じゃあお願いしたいぞ!ありがとう博士!![/st-kaiwa-1375]

[st-kaiwa-1387]博士ステキー(#^^#)(チョロいです♪)[/st-kaiwa-1387]

 

やり方がわからないなら博士に聞いてみよう!

記事をキレイに見せるために個別の改行の方法を試したいけど「コーディングが全然わからない!」という方もいらっしゃると思います。

そんな方は副業結社シシトウ団のエドニコフ博士宛に連絡をいただければ設置までのお手伝いを博士がさせていただこうと思います。これは副業結社シシトウ団の記事を最後まで読んでいただいた方へのお礼とさせていただくので、料金などは一切いただかないつもりです。

すぐにご連絡を返せるかはわかりませんが出来る限り毎日メール確認をしていますので是非一度お試しください。

エド・ニコフ博士にカスタマイズをお願いする