こんにちは。双子持ちパパです。

よくブログをやっていると、良質な記事を蓄積していくことがGoogle等の検索サイトでの検索順位を上げ、最終的には、収益に繋がっていくとよく耳にしますよね。

しかし、いくら良質な記事を蓄積しても、元となるブログが以下のような見づらいブログになっていると、ブログの第一印象が悪くなり、せっかく書いた良質な記事を読んでもらえません。

そこで、今回は、ブログを見やすくするため、下記３つの項目をChromeの拡張機能を使って、効率よくリライトし、ブログを見やすくする方法を紹介したいと思います。 

文字フォントの変更

まずは、文字フォントについてです。

文字フォントは、ブログをデザインをしていく中で大切な要素であり、デザインの質や効果を大きく左右します。

特に、フォントは、視覚的な要素が強いため、「見やすく、伝わりやすく、読みとりやすく」なければいけません。

双子

とは言っても、フォント選びって、悩みますよね。

ゆずる先生

そうですね。従来の文字フォントを先に選び、ブログに反映する手順の場合、以下のようなデメリットがあります。 

ゆずる先生

それに対し、今回紹介する気になるサイトやブログ内の使用フォントをまねて変更する方法の場合、以下のようなメリットがあります。

双子

これは便利ですね。詳細な手順を教えてもらえますか。

ゆずる先生

詳細な手順に関しては、下の記事で紹介しています。 

気になるブログやサイトの文字フォント種類・サイズを簡単に調べる方法

2019.11.02

サイトなどを見ていると「このフォント見やすい、何ていうフォントか知りたい」と思うことはないでしょうか？ そんな時に便利なChromeの拡張機能を使った使用フォントを簡単に調べる方法...

ゆずる先生

この記事を読むことにより、自分のブログにあった最適な文字フォントを短時間で見つけることができます。わたしも、この方法で、使用している文字フォントを選びました。

文字色・背景色の変更

次に、文字色・背景色についてです。

ブログを書いていると、目次の色・背景色、見出しの色・背景色など、いろんな所で自分のブログにあった色を選択する場面が数多く出てきます。

また、デザインをする上で色というのは、色の組み合わせ(配色)が重要であり、周りとのバランスが大切です。

特に、ブログやサイトなどのWebデザインでは、よくベースカラー・メインカラー・アクセントカラーの３つの基本カラーで極力まとめるのが一般的です。

そして、その色を使う比率は以下のような割合にすると美しい配色にすることができると言われています。

そのため、自分が好きな色ばかり使っていては周りとのバランスが崩れ、最終的には見にくくなってしまう可能性があります。

そこで、文字色・ 背景色に関しても、文字サイズ・フォント同様、事前に「マネしたい」と思えるサイトやブログを探し、Chromeの拡張機能を使って、効率よく変更する手順を紹介します。

詳細な手順に関しては、下の記事で紹介しています。 

気になるブログやサイトの文字色・背景色を簡単に調べる方法

2019.11.02

ブログをしていると「この色のカラーコードを知りたい」と思うことはないでしょうか？ そんな時に便利なChromeの拡張機能を使ったカラーコードを簡単に調べる方法を紹介します。...

双子

でも、色は組み合わせが重要ということでしたが、マネしたいサイトの色をすべてマネしてしまうと、オリジナル性がなくなりますよね。

ゆずる先生

その通りですね。そこでおすすめしたいのは、合計3～4色使用するとした場合、下記のように配色することをおすすめしたいと思います。

なお、わたしが上記サイトをおすすめしている理由は、以下のような機能をもっているからです。

表記ゆれ及び文章校正 

最後に、表記ゆれ及び文章校正についてです。

ゆずる先生

先程紹介したフォントや色に関しては、人によって好みなどがあると思います。一方、表記ゆれ及び文章校正に関しては、どう思いますか。

双子

見直しができているかどうかの問題ではないでしょうか。

ゆずる先生

わたしもそう思います。
しかし、一字一句見直すというのは、特に自分で書いた文章の場合、きちんとできているだろうという思い込みから、見直しが甘くなる傾向があると思います。

双子

その通りだと思います。
自分で表記ゆれ及び文章校正をうまくチェックできる何かいい方法ありませんか。

ゆずる先生

チェックする際に手助けしてくれるツールならあります。
このツールを利用することにより、効率的に表記ゆれ及び文章校正を行うことができます。 詳細に関しては下の記事で紹介してください。

ブログやサイトの文章校正・表記ゆれのチェックを効率的に行う方法

2019.09.22

こんにちは。40代双子持ちサラリーマンです。 文章において、その内容がいくら素晴らしい内容であっても、以下のような読みにくい文章だと誰も見てくれません。 誤字・脱字が多い 表記ル...

chromeを使用したブログを効率的にリライトするメリット（まとめ）

初めに書いたように、良質な記事を蓄積をしていくことがブログで収益を上げるための最善の近道です。

しかし、ブログを書くためにはデザインをする必要が出てきます。そういった記事を書く以外の部分を少しでも効率化する手助けをしてくれるのがgoole chromeの拡張機能だと思います。

そして、拡張機能を使うことにより、こういったメリットがあります。

みなさんも、goole chromeの拡張機能を使って、少しでも、効率よくリライトしてみてはいかがでしょうか。

最後に、この記事で書いている内容は、Webデザインに関して、あまり知らない人でも効率よくリライトすることができる内容となっていますが、もっとWebデザインのことを知りたいという方もおられると思います。

そういったかたにおすすめな記事を最後に紹介しておきます。わたしの記事ではないですが、Webデザインのことをもっと知りたいかた向けの記事となっています。

内容は、デザイン初心者向けの内容になっていますので、大変分かりやすい内容になっています。

こんにちは。双子持ちサラリーマンです。

ブログのカスタマイズや気になるサイトなどを見ていると、使用している文字や背景の「この色のカラーコードを知りたい」と思うことはないでしょうか？

ゆずる先生

そこで、今回はブログやサイトで使用している、文字や背景などの色をカラーコードで簡単に調べる方法を紹介します。

紹介するにあたり、ブラウザ「Google Chrome」の拡張機能を使用するため、「Google Chrome」を事前にインストールすることをオススメします。

「ColorPick Eyedropper」とは

「ColorPick Eyedropper」とは、Chromeの拡張機能の1つで、ブログやサイトのいろいろなところで使用している色（カラーコード）を1クリックで調べることができる機能です。

双子

この機能を使用すると、どんなことができるようになるんですか？

ゆずる先生

自分が気になったブログの文字色・背景色を知ることができるため、その情報をCSSに反映することにより、簡単に再現することができます。

双子

それは便利ですね。早く使ってみたいです

「ColorPick Eyedropper」インストール方法

chromeへの「ColorPick Eyedropper」インストール方法を紹介します。

• STEP1
  Chrome ウェブストアにアクセス
  Chrome ウェブストアの拡張機能「ColorPick Eyedropper」にアクセスする。
• STEP2
  Chromeに追加
  アクセスすると以下のような画面表示後、【Chromeに追加】ボタンをクリックする。

  

• STEP3
  拡張機能を追加
  ポップアップ画面（下記画面参照）が表示後、【拡張機能を追加】ボタンをクリックする。

  

• STEP4
  追加完了
  拡張機能が追加されると、URL入力の右横にColorPick Eyedropperアイコン（赤枠）が追加される。 その際、ポップアップ画面（下記画面参照）が表示される。

  ※ただし、表示後、実際に使用する前に一度、ブラウザを閉じることをオススメします。

  
  

「ColorPick Eyedropper」使用方法

追加した「ColorPick Eyedropper」の使用方法を紹介します。

• STEP1
  「ColorPick Eyedropper」アイコンクリック
  ColorPick Eyedropperアイコンをクリックすると、十字のカーソル（下記画面参照）が表示されます。

  

• STEP2
  色(カラーコード)を知りたい箇所をクリック
  「事前に探した文字や背景の色が気になるサイト」の色(カラーコード)を知りたい箇所にマウスをもっていき、クリックする。 すると、クリックした箇所のカラーコードが表示される。 

  ※今回は、YAHOO! JAPANの【Y】の部分にマウスをあてて、カラーコード（#FF0033）が表示されています。 

  

「ColorPick Eyedropper」削除方法

chromeからの「ColorPick Eyedropper」削除方法を紹介します。

1. chrome ウェブストアの拡張機能「ColorPick Eyedropper」にアクセス
   　
2. アクセスすると以下のような画面表示後、【Chromeから削除します】ボタンをクリックする

「ColorPick Eyedropper」対応ブラウザ

Chrome以外のブラウザで「ColorPick Eyedropper」が対応しているブラウザは、調べたところ、Firefoxのみでここから追加できるようです。 

「ColorPick Eyedropper」まとめ

「ColorPick Eyedropper」を有効活用することにより、ブログを見やすくするためにかかせない、文字や背景の色選びを効率的にできるようになります。

ぜひ、ブログを見やすくするための一つの手段として、この拡張機能を有効活用していただけたらと思います。

こんにちは。双子持ちサラリーマンです。

ブログやサイトなどを見ていると「このフォント見やすい、何ていうフォントか知りたい」と思うことはないでしょうか？

ゆずる先生

そこで、今回は気になるブログやサイトの使用フォントを簡単に調べる方法を紹介します。

紹介するにあたり、ブラウザ「Google Chrome」の拡張機能を使用するため、「Google Chrome」を事前にインストールすることをオススメします。

「WhatFont」とは

「WhatFont」とは、Chromeの拡張機能の1つで、ブログやサイトで使用している文字フォントなどのフォント情報を簡単に調べることができる機能です。

双子

この機能を使用すると、どんなことができるようになるんですか？

ゆずる先生

自分が気になったブログやサイトのフォント情報を知ることができるため、その情報をCSSに反映することにより、簡単に再現することができます。

双子

それは便利ですね。早く使ってみたいです

「WhatFont」インストール方法

Chromeへの「WhatFont」のインストール方法を紹介します。

• STEP1
  Chrome ウェブストアにアクセス
  Chrome ウェブストアの拡張機能「WhatFont」にアクセス
• STEP2
  Chromeに追加
  アクセスすると以下のような画面表示後、【Chromeに追加】ボタンをクリックする。

  

• STEP3
  拡張機能を追加
  ポップアップ画面（下記画面参照）が表示後、【拡張機能を追加】ボタンをクリックする。

  

• STEP4
  追加完了
  拡張機能が追加されると、URL入力の右横にWhatFontアイコン（赤枠）が追加される。 その際、ポップアップ画面（下記画面参照）が表示されます。

  

「WhatFont」使用方法

「WhatFont」の使用方法を紹介します。

• STEP1
  「WhatFont」アイコンをクリック
  「WhatFont」アイコンをクリックし、【Exit WhatFont】ボタンが表示されることを確認する。

  

• STEP2
  フォントが気になる文字の上にマウスを移動
  「事前に探した文字フォントが気になるサイト」の気になる文字の上にマウスをもっていくと、その文字フォントが表示される。
  ※今回は、YAHOO! JAPANの【Y】の部分にマウスをあてて、【MS PGothic】が表示されています。

  

• STEP3
  表示された文字フォントをクリック
  さらに、【MS PGothic】の部分をクリックすると、詳細な情報が表示されます。

  

  具体的には以下のような情報を取得できます。

  フォントの種類：Family
  フォントのスタイル：Style
  フォントの太さ：Weight
  フォントのサイズ：Size
  行間：Line Height
  フォントのカラーコード：Color

「WhatFont」削除方法

chromeからの「WhatFont」削除方法を紹介します。

1. chrome ウェブストアの拡張機能「WhatFont」にアクセス
   　
2. アクセスすると以下のような画面表示後、【Chromeから削除します】ボタンをクリックする

「WhatFont」対応ブラウザ

Chrome以外のブラウザでの「WatFont」使用方法に関しては、下記サイトに載っているので、参照してみてください。 

以下のブラウザに対応しているようです。

「WhatFont」まとめ

「WhatFont」を有効活用することにより、ブログを見やすくするためにかかせない、フォント選びを効率的にできるようになります。

ぜひ、ブログを見やすくするための一つの手段として、この拡張機能を有効活用していただけたらと思います。

こんにちは。40代双子持ちサラリーマンです。

みなさん、画像のSEO対策に効果のある「ALT属性」は設定していますか？ 「ALT属性」のことは知ってるけど、

• どういう付け方をしたらいいか分からない
• 現在、自サイトでは何が設定されているのか分からない

という方もいるのではないでしょうか。

ゆずる先生

今回は、そういった方にオススメの「ALT属性」を簡単に調べる方法を紹介します。

紹介するにあたり、ブラウザ「Google Chrome」の拡張機能を使用するため、「Google Chrome」を事前にインストールすることをオススメします。

「Alt & Meta viewer」とは

「Alt & Meta viewer」とは、Chromeの拡張機能の1つで、サイトやブログの使用画像のALT属性やサイズ、また、ヘッダのTitle Meta情報を簡単に調べることができる拡張機能となっています。

双子

この機能を使用すると、どんな時に役に立ちますか？

ゆずる先生

こんな時に役に立ちます。

双子

それは便利ですね。早く使ってみたいです。

「Alt & Meta viewer」のインストール方法

chromeへの「Alt & Meta viewer」のインストール方法を紹介します。

• STEP1
  Chrome ウェブストアにアクセス
  Chrome ウェブストアの拡張機能「Alt & Meta viewer」 にアクセスする。
• STEP2
  Chromeへの追加
  アクセスすると以下のような画面表示後、【Chromeに追加】ボタンをクリックする。

  

• STEP3
  拡張機能を追加
  ポップアップ画面（下記画面参照）が表示後、【拡張機能を追加】ボタンをクリックする。

  

• STEP4
  追加完了
  拡張機能が追加されると、URL入力の右横にAlt & Meta viewerアイコン（赤枠）が追加される。 その際、ポップアップ画面（下記画面参照）が表示される。

  ※ただし、表示後、実際に使用する前に一度、ブラウザを閉じることをオススメします。

  

「Alt & Meta viewer」の使用方法

「Alt & Meta viewer」の使用方法を紹介します。
　※今回は、YAHOO! JAPANサイトを事前に表示しています。

Alt & Meta viewerアイコンをクリックすると下記二つの機能が表示される（下記画面参照）

それぞれの機能について、説明します。

画像のAlt表示機能

画像のAlt表示機能では、表示しているサイトの下記情報を表示します。

①  Alt属性の未設定画像の個数及びその画像一覧を表示

上記画像の青枠部分をクリックすると、Alt属性が設定されていない画像一覧が表示される。

  ② すべての画像に対して、下記情報を表示

Title Meta表示機能

画像のTitle Meta表示機能では、表示しているサイトのヘッダにおける下記情報を表示します。 

Titleタグ、Metaタグの内容

「Alt & Meta viewer」の削除方法

chromeからの「Alt & Meta viewer」削除方法を紹介します。

1. chrome ウェブストアの拡張機能「Alt & Meta viewer」 にアクセスする。
2. アクセスすると以下のような画面表示後、【Chromeから削除します】ボタンをクリックする。

「Alt & Meta viewer」まとめ

「Alt & Meta viewer」の有効活用により、使用画像のALT属性やサイズおよびサイトのヘッダにおけるTitle/Metaタグの情報を簡単に調べることができます。

ぜひ、ブログやサイトなどのリライト時の現状分析をすばやく行うための手段として、この拡張機能を有効活用していただけたらと思います。

こんにちは。40代双子持ちサラリーマンです。

文章において、その内容がいくら素晴らしい内容であっても、以下のような読みにくい文章だと誰も見てくれません。

そして、ブログやサイトの記事においても、同じことが言えるのではないでしょうか。

そこで重要になってくるのが、文章校正や表記ゆれをチェックすることです。

しかし、これらをチェックするためには、目視でブログを見直すといった作業が必要になってきます。

紹介するにあたり、ブラウザ「Google Chrome」の拡張機能を使用するため「Google Chrome」を事前にインストールすることをオススメします。

本来の文章校正や表記ゆれのチェックを行う方法

文章校正や表記ゆれを厳しい目でチェックを行う場合、本来、有識者にチェックをしていただくやり方が一番いい方法であると思います。

私も一度、コマーシャルで見かける、サービスを提供する「ココナラ」でブログの記事に対して校正をして頂きました。

coconala.com

正直、今まで校正をしていただいた経験がないため、どういったかたちで校正をして頂けるのか分かりませんでした。

実際、お願いしてみると以下のように記事を印刷し、丁寧に校正して頂いたうえにPDF化して送付してくれました。

また、相談にも親切に対応していただき、おかげで素人の私から見ても、校正前後で、大変読みやすい記事になったと思いました。

これが本来の文章校正と表記ゆれのチェックをするということだと認識しました。しかし、すべての記事に対して、有識者にお願いするわけにはお金の面もあるのでできません。

そこで、登場するのが今回紹介する文章校正と表記ゆれを自動で行うツールです。

もちろん、有識者にチェックしていただくことに比べると精度は落ちますが、最低限のチェックはしてくれます。

それでは、ツールの説明をしていきたいと思います。

「文章校正と表記ゆれチェックツール」とは

双子

それは便利ですね。早く使ってみたいです

「文章校正と表記ゆれチェックツール」のインストール方法

「文章校正と表記ゆれチェックツール」のインストール方法を紹介します。

• STEP1
  Chrome ウェブストアにアクセス
  Chrome ウェブストアの拡張機能「文章校正と表記ゆれチェックツール」にアクセス
• STEP2
  Chromeへの追加
  アクセスすると以下のような画面表示後、【Chromeに追加】ボタンをクリックする。

  

• STEP3
  拡張機能の追加
  ポップアップ画面（下記画面参照）が表示後、【拡張機能を追加】ボタンをクリックする。

  

• STEP4
  追加完了
  拡張機能が追加されると、URL入力の右横にWhatFontアイコン（赤枠）が追加される。

  その際、ポップアップ画面（下記画面参照）が表示されます。

  

「文章校正と表記ゆれチェックツール」の使い方

「文章校正と表記ゆれチェックツール」の使用方法を紹介します。

• STEP1
  文章校正と表記ゆれチェックツールアイコンをクリック
  チェックしたいサイトやブログの記事のページに移動し、文章校正と表記ゆれチェックツールアイコンをクリックします。

  操作としてはこれだけです。
   

• STEP2
  チェック結果表示
  チェックが完了すると、以下のようなチェックした結果が表示されます。

  その結果をサイト上で見るのもよし、【copy】ボタンを押すと結果がコピーされるので、テキストに張り付けて確認することもできます。

  

「文章校正と表記ゆれチェックツール」の設定情報

「文章校正と表記ゆれチェックツール」では、どのようなルールでチェックをおこなうのかを個別に有効及び無効に設定したり、追加することができるので、紹介していきたいと思います。

ちなみに、私は現在、このツールを使用する際、特に設定情報は変更せずに使用しています。ですので、設定変更しなくてもある程度はチェックしてくれるので安心してください。

• STEP1
  【オプション】ボタンをクリック
  文章校正と表記ゆれチェックツールアイコンを右クリックすると、以下のようなメニューが表示されるので、【オプション】ボタンをクリックする。

  

• STEP2
  正誤表
  以下のような2つの正誤表のボタンが表示されます。

  

  この2つの正誤表の説明は以下の通りです。

  • プリセット正誤表
    編集はできないが各ルールの有効・無効のみ設定できるルールの一覧のこと
  • カスタム正誤表
    編集可能なルールの一覧のこと
• STEP3
  プリセット正誤表
  プリセット正誤表を選択すると、以下のような表が表示されます。

  ルールを変更したい場合は、表の一番上の有効と記載されている列を各ルールに対して、0（無効）および1（有効）に切り替えることができます。

  

• STEP4
  カスタム正誤表
  カスタム正誤表を選択すると、以下のような表が表示されます。

  ルールを編集する場合、今の設定をダウンロード（【ダウンロード】ボタンを使用）し、エディタなどを使って、編集後、ファイルを登録（【アップロード】ボタンを使用）することにより、ルールを変更することができます。
  少し、めんどくさい手順ではあります。

  

「文章校正と表記ゆれチェックツール」の削除方法

chromeからの「文章校正と表記ゆれチェックツール」削除方法を紹介します。

1. chrome ウェブストアの拡張機能「文章校正と表記ゆれチェックツール」にアクセス
   　
2. アクセスすると以下のような画面表示後、【Chromeから削除します】ボタンをクリックする

文章校正及び表記ゆれチェック まとめ

今回、文章校正及び表記ゆれのチェックを有識者にチェックしてもらう方法、ツールを使用する方法を紹介しました。

両方経験し分かったのは、文章を書くのがあまり得意ではない私みたいな者にとっては、両方を使い分けるのがベストであると感じました。

というのは、一度は有識者にチェックしていただき、そこで得た知識を活かしつつ、「文章校正と表記ゆれチェックツール」を使って、チェックを行い、読みやすい記事にしていくことが一番効率的な方法であると思ったからです。

ぜひ、みなさんのブログの記事を読みやすくするための一つの手段として、この拡張機能を有効活用していただけたらと思います。