メディア作成

読みにくいブログはこうすれば改善する!ワードプレスの編集方法まとめ

こんにちわ、ヒダリーです
今日は「見やすい記事の書き方」についてです。

 

今まで色んなブログを見てきましたが「見やすい記事」というのは、意外と意識されていません

意外とっていうか、全くと言っていいかもしれません。

 

記事が見にくいと、せっかくいい内容の文章を書いても読まれなくなってしまいます

行間もミッチミチ、文字にメリハリもない記事とか、
石版みたいで読んでてキツクなりますよね。

 

「記事を見やすくする」だけでPVが上がったり、商品の購入率が上がったりは普通にあることです

どうせ記事を書くのであれば、やれることはやっておきましょう

と、いうわけで見やすい記事とはなにか?
どうすれば見やすくなるのか?

を考えていきたいと思います。

 

見にくい記事の3つの要素

個人的に感じる「見にくい記事」には3つの要素があります

・エディタを有効活用する気がない
・秩序がない
・PC、スマホの両方に対応していない

主にこの3つ。

 

エディタを有効活用していない

TwitterやFacebookには投稿画面にエディタ的機能なるものはありませんが、ワードプレスやHP作成ソフトならば必ずついています

エディタでできることは「文字を大きく」したり「赤く」したり「太文字」にしたりです

いわゆる文字装飾ですね
これをないがしろにしてる人がおまりにも多い。

 

リンク貼り付けたり、動画や画像貼り付けるだけではもったいないですよ

 

秩序がない

次によくあるのが「エディタは有効活用しているが思いつきで文字装飾している」という状態

ルールや秩序のない文字装飾はうるさいだけです

文字装飾はちゃんと自分の中で、ルールや法則を決めて使うほうがキレイになります

 

PC、スマホの両方に対応していない

これが一番ありがち、しかも本人が気づかないものです

「PCからは見やすいが、スマホで見たら超見にくい」ということがあります。

 

僕はブログの更新や観覧はPCでしかしません

その場合、ついついPCから見える画面ばかりを気にして、文章を書いてしまうんですね

PCから見やすいからといって、スマホでも見やすいというわけではありません。

 

ブロガーの場合はPCから記事投稿すると思いますので、スマホからどう見えるか?も常にチェックしておきましょう。

 

では、

・エディタを有効活用する気がない
・秩序がない
・PC、スマホの両方に対応していない

見にくい文章の3つの要素を理解した所で、実際にどう対処すればいいのかの話にいきましょう

読みやすい文字装飾の作法

ワードプレスの文字装飾はいろいろありますが、僕が使うのは

・文字の大小
・赤文字
・太文字
・背景色

の4つだけです

使うものを限定するとルールになり、秩序が保たれ、統一感が出ますね。

 

文字装飾をすると文章にリズムとメリハリが出て読みやすくなります

重要な部分などに装飾しておけば、読者の理解度も上がります。

 

文字装飾を一切していないブログはめちゃ多いのですが、手を抜かずにしっかりやっておきましょう

装飾がないとスマホでみた時に石版のようになります。

 

Active Previewというプラグインを使えばリアルタイムで記事編集ができます

いちいちプレビューボタンを押すのは億劫なので、入れておくと文章の編集がはかどりますよ。

 

・文字の大小

目立たせたい所は大きく、逆は小さくするのが基本的な使い方ですね

しかし今はあまり使わないようにしています

文字の大きさが違うと、個人的にはあまりキレイに見えないなーと感じるからです

スマホから見たときになんというか、もてあます感じがあるんですよね。

 

・赤文字

重要だと思う部分に使いますが、多用するとうるさくなるので注意してます

 

・太文字
目立たせたい所に使います

 

・背景色
背景色は黄色を使っています
太文字よりも目立たせたい所に使います

こちらも多用するとうるさくなるので注意してます。

 

・句読点
次に、や。などの句読点です

句読点のない文章もメリハリがなくなるので、適切な位置でいれると良いです

文の切れ目、文の意味の切れ目で入れるのが一般的ですが、これも自分の中でルール化しておくと入れ忘れたり、変な位置で入れるのを防ぐことができます

僕らは国語の先生になりたいわけではないので、学術的な細かいことはどーでもいいです

細かいこと気にせず、自分なりのルールを決めておきましょう。

 

僕の場合であれば、

、は口で読んだ時に息を吸いたくなりそうな所
。は2行改行する前

に入れています。

 

。は文章の終わりに入れるのが一般的なようですが。が多いと視覚的になんかウザいので、話が変わる前に入れるようにしてます

、はまあなんか感覚ですね(笑)

PCでもスマホでも読みやすい改行

文章の見やすさで一番重要なのが「改行」です
適切な所で改行されていない文章はマジで読みにくい

特に気をつけないといけないのが、PCで見た時とスマホで見た時に一番違って見えるのが改行です

PCだといい感じでもスマホで見たら変な所に改行が入って文章がガッタガタ

というのがよくあります。

 

実際に見てみましょう

クリックで拡大 PC

 

僕の美容室のブログですが、まずこちらはPCから見た時に見やすくなるように書いた状態です

横に長くなると目線を動かす範囲が増えて読みにくいので、改行を入れて文章を折り返しています

文章の横幅に統一感があって読みやすいですよね。

 

しかしこれをスマホでみたらガタガタになります

クリックで拡大 スマホ

 

見にくくないですか?

PCとスマホだと表示される横幅に差があるので起きる現象ですが、PCで見たら見やすいのにスマホだとクソ見にくいわけです

読みにくいと頭に入ってきませんし、読む気が失せます。

 

近年はスマホでネットする人が大半です
このブログも8割はスマホからのアクセスですからね

スマホからの見え方を無視するわけにはいきません。

 

というわけでPC、スマホどちらでも見ても見やすいように編集してみます

 

クリックで拡大 PC修正版

 

先程よりか見にくくなりましたが、許容範囲かと思います
これをスマホでみてみるとこんな感じに見えます

クリックで拡大 スマホ修正版

 

さっきと比べるとずいぶん見やすくなりましたね。

 

もう1つ例を見てみましょう。PCの画面です

クリックで拡大 PCその2

 

先程よりも長いものにしてみました
見やすいですよね

 

これをスマホで見るとこうなります

クリックで拡大 スマホその2

 

歯抜けな文章ですね。文句なくこれは読みにくい

 

スマホから見た時に見やすくなるように修正してみます

クリックで拡大 PCその2修正版

 

やや見にくくなりますが、スマホを意識するとこうなるのだから仕方がない

読みにくいってことはないでしょう。

 

スマホから見るとこうなります

クリックで拡大 スマホその2修正版

 

修正前と比べるとずいぶん見やすくないでしょうか?

PCから見た時とスマホで見た時の表示には、かなりの差があるので注意しましょう

スマホ優先するくらいでもいいですよ。

スマホを意識した見やすい改行のコツ

では改行の仕方です

スマホを意識してPCで編集するってクソめんどくさく感じますが、実際はそんなにめんどうでもありません。

 

改行に関しては2つ、気をつければ十分です

・改行はエンター1回かエンター2回で行う
・文章の途中で改行しない

この2つを意識しておけば大丈夫です。

 

・改行はエンター1回か、エンター2回で行う

改行がバラバラだと文章がかなり読みにくくなるので、統一しておきましょう

これだけでかなり読みやすくなります。

 

僕の場合は、

「話が続いてるなら改行1回」
「話が変わるなら改行2回」

という基準です。

 

・文章の途中で改行しない

PCで見たらいい感じだけどスマホだとクソ
この原因は「文章の途中で改行すること」です

改行は一文が終わった所で入れましょう。

 

ダメな例を見ればわかりますが、途中で改行入れてるからスマホで見た時に歯抜けになるんですね

もし途中で改行したい場合は、や。を入れた位置で改行すると良いです

一文が長い場合はスマホだと何度も折返しが入って、それはそれで見にくいですからね。

内部リンク

文章のきれいさとは関係ないですが、ついでなのでこれも書いておきます

記事内に内部リンクもしっかり貼っておきましょう

全く貼ってないブログとかあってビビります
もったいないですよ。

 

内部リンクとはこーいうの

→ここをクリック

ブログ内の他の記事へリンクを貼ることです
字そのまんま。

 

無理やり貼る必要はないですが、記事を書くということはなんらかの話題があるということ

その話題に関連する記事があればリンクしておきましょう。

 

ブログっていうのは読まれるほどいいわけですし、単純に親切ですよね

記事がある程度たまってきたら内部リンクを貼り直したり、まとめページ作ってサイトマップにしたりなどしておきましょう

プラグインとグーグルクロームで確認

ワードプレスの編集画面は、実際に投稿された時にどう見えるか?ちょっとわかりにくいですよね

最近追加された機能のGutenbergはその問題を解決したものですが、AddQuicktagなどのエディタ系プラグインが機能しなくなるので僕は使ってません

Gutenbergを使ってる人はそれで確認できるので問題ないですが、使ってない人はActive Previewを使うと良いです。

 

プラグインの事はこちらの記事で解説しています

 

Active Previewは古いプラグインですし、使いやすいものでもないですがリアルタイムプレビューのプラグインって少ないみたいで、僕が知ってる限りではこれが一番使いやすいです

行間や文字装飾の見え方はこれを使って別窓で表示しながら書くと、いちいちプレビューボタン押さなくてすみます。

 

文字装飾や行間の調節が終わったら、次はスマホでの見え方を確認しましょう

やり方はプラグイン使ったりでもできますが、プラグインはできれば入れたくないので(ブログの表示が重くなるし、バグの原因になる)

僕はGoogleChromeのデベロッパーツールとよばれるものでチェックしています。

 

画面を右クリックして一番下の「検証」というところを押せば使えます

スマホでの見え方もここでチェックできます

iPhone7や8などの機種選択もできますので、プラグインなくてもこれで十分ですね。

 

細かいやり方は「GoogleChrome 検証」などで検索して見てください

すぐ出ますよ。検索しなくてもすぐわかると思いますが。

 

今回説明した、

文字装飾
句読点
改行
内部リンク
プラグインとchromeでチェック

というのは僕が記事をきれいに編集する時にチェックしている部分です。

 

同じ部分を気にしてもらえば、僕と同じようなブログの見え方にはなりますよ

もし気に入ったブログがあれば、編集の仕方も真似してみるといいです

僕はあまり凝った編集が好きではなく、シンプルなのが好きなので今の形に落ち着いています。

 

自分なりの編集の仕方を決めるとブログ全体の統一感もでてきれいですし、読まれやすいブログになります

ぜひぜひこだわってほしいポイントですね。

 


ブログランキングに参加しています。おもしろいと思ったらクリック!

にほんブログ村 小遣いブログへ 

ピックアップ記事

  1. 無料で受講できる「成功するための全知識が学べる次世代起業家セミナー」を詳しく解説…
  2. 実践型コンテンツで毎月3万円のアフィリエイト報酬を得るまでの戦略まとめ
  3. 【開幕】美容師引退&店を畳むまでの物語【美容師引退記】
  4. 年収800万の美容室経営者になったけど絶望。アフィリエイトで成功し、美容室を閉店…
  5. ブログアフィリエイトの収入が2倍以上にアップする「理想世界の提示」とは?

関連記事

  1. メディア作成

    「専門性の組み合わせ」で読まれるブログを書くためのライティング術

    こんにちは、ヒダリーです最近は美容室の開業や経営に関す…

  2. メディア作成

    ブログ運営を成功させるためのブログ改善マニュアル

    こんにちは、ヒダリーです今日はブログ運営について、非常に重要な話を…

  3. メディア作成

    ブログ作成5ヶ月後のアクセスアップ戦略【美容師引退記録:7】

    こんにちはヒダリーですさて、今月もこのブログの成長度合いを公開した…

  4. メディア作成

    ブログのアクセスとPVを倍増させる「ブログのテコ入れ」テクニック

    こんにちはヒダリーです今月も先月と同じく、あまり記事更新できていま…

  5. メディア作成

    「文章が書けない!」スランプを脱出するためのヒントと対策

    このブログは4月から記事を入れだしたので、開始してはや4ヶ月毎…

  6. メディア作成

    月3万円のアフィリ報酬を得るために準備しておくもの【知識編】

    こんにちは、ヒダリーです早速ですが、前に書いた記事の補足をしていこ…

コメント

  1. こんにちは。
    ブログランキングからきました。
    読みやすい文章のコツとても勉強になります。
    ブログ見直してみます。
    また拝見させていただきます。

      • ヒダリー
      • 2018年 11月 02日

      ぜひぜひ~

  2. お早うございます。
    読みやすい文章のブログの説明とてもわかりやすいです。
    ブログを書く時、重要な単語や括弧書きの文章には文字を太くしたり色を付けたりと文字飾りを何気なくしていましたが文字飾りは大事なのですね。文章を途中で改行したブログを見るとパソコンでは形は整っていてもスマホではガタガタなんてことがあって形を整えたブログを作るのは難しいと感じましたが「話が続いてるなら改行1回」「話が変わるなら改行2回」という基準で考えてブログを作る方法はとてもわかりやすいです。ぜひ参考にさせて頂きます。情報公開有難うございます。

      • ヒダリー
      • 2018年 11月 13日

      chromeで検証するのが一番はやいですけどね(笑)

  1. この記事へのトラックバックはありません。

ブログランキング参加中!

にほんブログ村 小遣いブログへ  

 

このブログが面白いと思ったらクリックして拡散してくれると嬉しいです。

 

おすすめ記事

Twitter

  1. メディア作成

    ブログ作成5ヶ月後のアクセスアップ戦略【美容師引退記録:7】
  2. 美容師引退&廃業するまでの物語

    ブログ立ち上げ3ヶ月後の戦略【美容師引退記:5】
  3. 次世代のビジネス

    無料で受講できる「成功するための全知識が学べる次世代起業家セミナー」を詳しく解説…
  4. メディア作成

    機械オンチでもWordPressでブログを作る方法まとめ
  5. 次世代のビジネス

    「仕事の奴隷」になる「時給型ビジネス」から脱出するたった1つの方法
PAGE TOP