メディア作成

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

こんにちは、美容室経営&美容師引退を目指してる齋藤(@flickerei_xyz)です

僕のプロフィール美容師引退の理由はこちらから読めます。

 

今日は「見やすい記事の書き方」についてです

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

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

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

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

 

「記事を見やすくする」だけで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. メディア作成

    ブログ100記事達成後にやっておきたいメンテナンスと戦略の見直しマニュアル

    このブログもはじめて1年ほど経ちました。記事数も先日チェックしてみたら…

  4. メディア作成

    ノウハウ型記事の書き方実例!要素と圧縮で自由自在に文章を書くコツとは?

    今日は前回、文字数の関係で紹介できなかった「ノウハウ型記事の書き方実例…

  5. メディア作成

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

    早速ですが、前に書いた記事の補足をしていこうと思いますこの記事…

  6. メディア作成

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

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

コメント

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

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

      ぜひぜひ~

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

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

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

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

特集記事

 

 

 

おすすめ記事

  1. 念能力系統図
  1. 次世代のビジネス

    美容室開業を成功させるファミコン理論【ハード編】
  2. 次世代の思考&哲学

    仕事をやめたい、現状に不満がある、なにかにチャレンジしたい人への処方箋
  3. 次世代の思考&哲学

    年収800万の美容室経営者がアフィリエイトで美容師を辞める理由とは?
  4. メディア作成

    ワードプレスのテーマを変更したら超めんどくさかった話【テーマ変更前に知っておきた…
  5. 美容室開業の手順&経営

    美容室開業手順がわからない人必見!おおまかな流れをリアルな事例で詳しく解説 【そ…
PAGE TOP