【2023年】これからブログを始める人へおすすめの書籍
【2022年版まとめ】ブログで記事を書くなら入れておくべき。おすすめChrome拡張!
作成:
更新:

ブログで記事を書くときにあると便利なChrome拡張機能をまとめたいと思います。
これがあると記事の作成がはかどります。
ずっと使っている拡張機能だけを厳選してお届けします。
[toc]
## ブログ作成
### StackEdit
Markdown記法と呼ばれる、短い構文で文章が書けるエディタです。動作も軽くサクサク記事が書けます。
[StackEdit [extlink]](https://chrome.google.com/webstore/detail/stackedit/iiooodelglhkcpgbajoejffhijaclcdg)

ここがステキ!
- プレビューを見ながら編集
- Markdown記法で記事を高速に書ける
- クラウドに保存(CouchDB/DropBox/Google Drive)
- ブログに直接投稿(Blogger/WordPressなど)
- ファイルの読み込み・保存
- URLから読み込み
- HTMLからMarkdownへ変換
- 記事のテンプレートを作成・保存できる
### Insert Text
定型文の登録・挿入ができるChrome拡張です。
[Insert Text](https://chrome.google.com/webstore/detail/insert-text/abmgjcmmphkhndoahbfanhbgeekconmm?hl=ja)

ここがステキ!
- 右クリックで定型文の登録・挿入が簡単!
### Awesome Schreenshot
ウェブサイトのスクリーンショットを撮るChrome拡張です。
m[Awesome Schreenshot [extlink]](https://chrome.google.com/webstore/detail/awesome-screenshot-screen/nlipoenfbbikpbjkfpfillcgkoblgpmj)

ここがステキ!
- スクリーンショットを撮る
- ページの見えてるところだけ撮る
- ページ全体を撮る
- 選択した範囲だけを撮る
- 編集ができる
- スクショをとってその場で編集
- コメントを追加
- ぼかし機能
- 一部を切り取る
- 線や四角などを書く
- ファイルの保存・読み込み
## ブログデザイン
### Web Maker
HTML/JavaScriptをプレビューを見ながら編集できるエディタ。ウェブパーツのデザインを作るときに便利です。CodePenのようなもので、オフラインで使えます。
[Web Maker [extlink]](https://chrome.google.com/webstore/detail/web-maker/lkfkkhfhhdkiemehlpkgjeojomhpccnh)
[Web Maker (Web版) [extlink]](https://webmakerapp.com/app/)

### Window Resizer
ブラウザのウィンドウサイズをiPhone、iPad、Desktopなど様々なサイズにリサイズして表示してくれます。レスポンシブデザインの動作を見るときに便利です。
[Window Resizer [extlink]](https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh)

### ピクセルの色を表示する
ウェブ上をクリックしてクリックした位置の色を取得する拡張です。「この色の値が欲しい」って時に便利です。
[ピクセルの色を表示する [extlink]](https://chrome.google.com/webstore/detail/show-pixel-color/jkojbkpbbffiggegdjnkfkndffocgahl)

ここがステキ!
- マウスの場所を拡大表示
- 色のコードをコピーできる
### Dimensions
ウェブサイト上にカーソルをのせた要素のサイズをはかる拡張です。
[Dimensions [extlink]](https://chrome.google.com/webstore/detail/dimensions/baocaagndhipibgklemoalmkljaimfdj)

ここがステキ!
- マウスをのせるだけ
- 単色の要素の幅や高さを測る
同じ色の範囲を測るので、画像のような要素のサイズを測るのには向かないですね。
### Web Maker
HTML/JavaScriptをプレビューを見ながら編集できるエディタ。ウェブパーツのデザインを作るときに便利です。CodePenのようなもので、オフラインで使えます。
[Web Maker](https://chrome.google.com/webstore/detail/web-maker/lkfkkhfhhdkiemehlpkgjeojomhpccnh)

## SEO
### Page load time
ページの読み込み時間をはかる拡張です。テーマを変更したときなど、表示が遅くなっていないかチェックしましょう。
[Page load time](https://chrome.google.com/webstore/detail/page-load-time/fploionmjgeclbkemipmkogoaohcdbig)

## SEO
### Google Lighthouse
表示しているサイトの、パフォーマンス、アクセシビリティ、SEOなどを点数化してくれる拡張機能です。PageSpeed Insightも実はこのLighthouseの機能を使っています。
[Google Lighthouse](https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk?hl=ja)

### Google Publisher Toolbar
Googleアドセンスに登録したら入れるべき拡張機能です。
アドセンスにログオンしなくても、広告のクリック数や収益がツールバーから確認できるようになります。
アナリティクスとも連動できるので、PVもツールバーから確認できるようになります。
[Google Publisher Toolbar [extlink]](https://chrome.google.com/webstore/detail/google-publisher-toolbar/omioeahgfecgfpfldejlnideemfidnkc?hl=ja)

## タスク管理
### Toggle
PCやスマホで作業をしていると、作業毎の作業時間を測り忘れることが多いです。作業時間を測ることは見積の根拠になりますし、どこに時間がかかっていて効率化が必要だとかを考えるための重要な情報です。
Toggleはブラウザ上でボタン一つでタイマーの開始と停止をできるため、簡単に測定できます。もちろん作業ごとに計測もできるので集計も簡単です。ToggleはiOSアプリ版もありスマホでも使えます。
[Toggle](https://chrome.google.com/webstore/detail/toggl-button-productivity/oejgccbfbmkkpaidnkphaiaecficdnfn?hl=ja)

## 番外編
ブログの作成に直接関係しませんが、生産性アップに役立つものを徒然と書いておきます。
### OneTab
タブブラウザだと、ついついタブがいっぱいになってブラウザの動作が遅くなりがち。「OneTab」を使うとボタン一つで、一つのタブにまとめてくれます。これでメモリの95%を節約でき、動作も格段に軽くなります。
まとめたタブは、「OneTab」からワンクリックでタブを開きなおすことができます。
これ絶対入れておくべき拡張の一つです。
[OneTab [extlink]](https://chrome.google.com/webstore/detail/onetab/chphlpgkkbolifaimnlloiipkdnihall)

ここがステキ!
- ボタン一つで動作を軽くできる
- まとめたタブはワンクリックで開きなおせる
最後まで読んでいただきありがとうございます。
また読んでくださいませ。
そんじゃーね。
関連記事