【2023年】これからブログを始める人へおすすめの書籍

Kissy

【2022年版まとめ】ブログで記事を書くなら入れておくべき。おすすめChrome拡張!

作成: 更新:
![Chrome拡張機能](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8cMJe2ukUDOBs57ZD37eRnkCswttLe5Ub5-S_MUzpJEWfyMVNdLL3AV8Qe-TejfXhtrJEYTcifftEW3abfJ5UZfoENqiaQpMygBdf3RBHq__kKVfbvxSIKL1WDw2fN7tLzy_CuHZtsdQX/s0/Chrome+%25E3%2582%25A6%25E3%2582%25A7%25E3%2583%2596%25E3%2582%25B9%25E3%2583%2588%25E3%2582%25A2+++%25E6%258B%25A1%25E5%25BC%25B5%25E6%25A9%259F%25E8%2583%25BD.png "Chrome ウェブストア 拡張機能.png") ブログで記事を書くときにあると便利なChrome拡張機能をまとめたいと思います。 これがあると記事の作成がはかどります。 ずっと使っている拡張機能だけを厳選してお届けします。 [toc] ## ブログ作成 ### StackEdit Markdown記法と呼ばれる、短い構文で文章が書けるエディタです。動作も軽くサクサク記事が書けます。 [StackEdit [extlink]](https://chrome.google.com/webstore/detail/stackedit/iiooodelglhkcpgbajoejffhijaclcdg) ![StackEdit](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgewIyPtNIurUPCKrltOzjSYMhMLnhyVayotubpsv98KlPACf8c4GRL6EnwHpi-g2N5yqJqd6fXnl7hMMzID5GrXhKUnFmMOXM2GdK4wpuG0gt4e_mL91D_tIbN9-bXwNEgTFFF7SwAPA8b/s0/stackedit.png "stackedit.png") ここがステキ! - プレビューを見ながら編集 - 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) ![Insert Text](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsmTmkq7s6uWOyErIqgQyp0bF9AL5O23YHORcfhRMzW4fEHpmOaGrYX_DFigLaI3cLB3DNQHEVcMRgWX0H8FICF2CI7K7H49MJkazQGYhGMWwH7mTNlODotVoIncj8-FloDxwhwokFZS7a/s0/Insert+Text+++Chrome+%25E3%2582%25A6%25E3%2582%25A7%25E3%2583%2596%25E3%2582%25B9%25E3%2583%2588%25E3%2582%25A2.png "Insert Text Chrome ウェブストア.png") ここがステキ! - 右クリックで定型文の登録・挿入が簡単! ### Awesome Schreenshot ウェブサイトのスクリーンショットを撮るChrome拡張です。 m[Awesome Schreenshot [extlink]](https://chrome.google.com/webstore/detail/awesome-screenshot-screen/nlipoenfbbikpbjkfpfillcgkoblgpmj) ![enter image description here](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKtiejRgLxVI2EUpkC_LDGFEUq-B15j_isNgFtJ-5K9DfyshZC7IoQ29m8VckIiH4n3uXY__pkVh2c5qnOL8tVAiQ5LrnyKQMGQetSRl1UsTnVFuiWAqGKBpkOHqgnPgXJblLfFtI5pMYJ/s0/awesome+screenshot.png "awesome screenshot.png") ここがステキ! - スクリーンショットを撮る - ページの見えてるところだけ撮る - ページ全体を撮る - 選択した範囲だけを撮る - 編集ができる - スクショをとってその場で編集 - コメントを追加 - ぼかし機能 - 一部を切り取る - 線や四角などを書く - ファイルの保存・読み込み ## ブログデザイン ### 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/) ![enter image description here](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigE_aQe5ziGRWjwi7cYE3egkKguisG3dEy0zZxzOjGoL5ruXg-boH8Ro58VD2bcOjvNmpWtRCeBTRGm14IDyjUEhoO0F-OfjuDvYGvfS5X_lR3JXk0Voe7OZg2zV3u5SHAtUQNcccHw3no/s0/Web+Maker+++Chrome+%25E3%2582%25A6%25E3%2582%25A7%25E3%2583%2596%25E3%2582%25B9%25E3%2583%2588%25E3%2582%25A2.png "Web Maker Chrome ウェブストア.png") ### Window Resizer ブラウザのウィンドウサイズをiPhone、iPad、Desktopなど様々なサイズにリサイズして表示してくれます。レスポンシブデザインの動作を見るときに便利です。 [Window Resizer [extlink]](https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh) ![Window Resizer](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLbHD17sz8wWRAF2u318c4O8JxyLMjxyj35LFSgDbHQUksiIyRPuEi4jJYTOgXZe-vxIdWbqUR1OYC7Ij5KUq7puUroZJOQxKqv2PlVAW2XliKprFkB2a3vWBpTRMGR0cPACM9AbH901Fi/s0/Window+Resizer+++Chrome+%25E3%2582%25A6%25E3%2582%25A7%25E3%2583%2596%25E3%2582%25B9%25E3%2583%2588%25E3%2582%25A2.png "Window Resizer Chrome ウェブストア.png") ### ピクセルの色を表示する ウェブ上をクリックしてクリックした位置の色を取得する拡張です。「この色の値が欲しい」って時に便利です。 [ピクセルの色を表示する [extlink]](https://chrome.google.com/webstore/detail/show-pixel-color/jkojbkpbbffiggegdjnkfkndffocgahl) ![enter image description here](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0mgLmymL0v9zUm4MT2bG8VxRUpZTaFPE3hteHitYyHi-VXqWbnc3GgxwPGI6l-oUQcywC7kMLcEXxT4i_YL5xylH5Qmh9ZibFDkoHkt1-AwrqFvvuDdrNG_cU3Sz8Y0zylMa1zo8eIRPM/s0/%25E3%2583%2594%25E3%2582%25AF%25E3%2582%25BB%25E3%2583%25AB%25E3%2581%25AE%25E8%2589%25B2%25E3%2582%2592%25E8%25A1%25A8%25E7%25A4%25BA%25E3%2581%2599%25E3%2582%258B+++Chrome+%25E3%2582%25A6%25E3%2582%25A7%25E3%2583%2596%25E3%2582%25B9%25E3%2583%2588%25E3%2582%25A2.png "ピクセルの色を表示する Chrome ウェブストア.png") ここがステキ! - マウスの場所を拡大表示 - 色のコードをコピーできる ### Dimensions ウェブサイト上にカーソルをのせた要素のサイズをはかる拡張です。 [Dimensions [extlink]](https://chrome.google.com/webstore/detail/dimensions/baocaagndhipibgklemoalmkljaimfdj) ![enter image description here](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiztJXx1D-tUDs4mz0ryR1libJBRrCb13RdxTNpFFc-q6zyHRhfjX0d2i2g69l5krjdoWCjIyZhc4OdmLjMl8Ayh8gfMAqNQXvWvLjCdnt8s3_Z4W-KW3u1cDwSIC5DNPQYMGSowRHuttWB/s0/Dimensions+++Chrome+%25E3%2582%25A6%25E3%2582%25A7%25E3%2583%2596%25E3%2582%25B9%25E3%2583%2588%25E3%2582%25A2.png "Dimensions Chrome ウェブストア.png") ここがステキ! - マウスをのせるだけ - 単色の要素の幅や高さを測る 同じ色の範囲を測るので、画像のような要素のサイズを測るのには向かないですね。 ### Web Maker HTML/JavaScriptをプレビューを見ながら編集できるエディタ。ウェブパーツのデザインを作るときに便利です。CodePenのようなもので、オフラインで使えます。 [Web Maker](https://chrome.google.com/webstore/detail/web-maker/lkfkkhfhhdkiemehlpkgjeojomhpccnh) ![enter image description here](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigE_aQe5ziGRWjwi7cYE3egkKguisG3dEy0zZxzOjGoL5ruXg-boH8Ro58VD2bcOjvNmpWtRCeBTRGm14IDyjUEhoO0F-OfjuDvYGvfS5X_lR3JXk0Voe7OZg2zV3u5SHAtUQNcccHw3no/s0/Web+Maker+++Chrome+%25E3%2582%25A6%25E3%2582%25A7%25E3%2583%2596%25E3%2582%25B9%25E3%2583%2588%25E3%2582%25A2.png "Web Maker Chrome ウェブストア.png") ## SEO ### Page load time ページの読み込み時間をはかる拡張です。テーマを変更したときなど、表示が遅くなっていないかチェックしましょう。 [Page load time](https://chrome.google.com/webstore/detail/page-load-time/fploionmjgeclbkemipmkogoaohcdbig) ![Page load time](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1j4835p0kqInj7LGaP9xkjVNZNAZiMMPP2SVbWftvP2NeeeUoeWtrfHFxPOS6-et6a13-rmjHm1ecaPQzzHCVpndbaRSJRqv3O0a2-x4GNDjUdBiMlFnFxieCFZ81hm7p1noinc_c8oEw/s0/Page+load+time+++Chrome+%25E3%2582%25A6%25E3%2582%25A7%25E3%2583%2596%25E3%2582%25B9%25E3%2583%2588%25E3%2582%25A2.png "Page load time Chrome ウェブストア.png") ## SEO ### Google Lighthouse 表示しているサイトの、パフォーマンス、アクセシビリティ、SEOなどを点数化してくれる拡張機能です。PageSpeed Insightも実はこのLighthouseの機能を使っています。 [Google Lighthouse](https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk?hl=ja) ![Lighthouse](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiVELpSSgR_AfzIgIEuuhgrFpRWhbE970RfL14dkaNKzzl5byEADLCzUkwrwjHjDGyMBPBKyFWalJC_kVgQu4AnWTbsLuaAN28ctXX5-uFfv-7vZu7R8RuIZq7cBJEhkZUbTrBsK8BnfM8/ "Lighthouse") ### Google Publisher Toolbar Googleアドセンスに登録したら入れるべき拡張機能です。 アドセンスにログオンしなくても、広告のクリック数や収益がツールバーから確認できるようになります。 アナリティクスとも連動できるので、PVもツールバーから確認できるようになります。 [Google Publisher Toolbar [extlink]](https://chrome.google.com/webstore/detail/google-publisher-toolbar/omioeahgfecgfpfldejlnideemfidnkc?hl=ja) ![Google Publisher Toolbar](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDy6Kv3yxej-oeIbQfUL7t1MgbZqXA-vyf-o6yeiGW6ZHHOVZn1kUim12GzxrOXBCG5ourEcDLA0r72UeDimh9OfZydW_QXMOt_DUrS3eQNe_MLE4f-Jd3-DNtuwJ0EbYhczsQWmeBnNOf/s0/Google+Publisher+Toolbar+++Chrome+%25E3%2582%25A6%25E3%2582%25A7%25E3%2583%2596%25E3%2582%25B9%25E3%2583%2588%25E3%2582%25A2.png "Google Publisher Toolbar Chrome ウェブストア.png") ## タスク管理 ### Toggle PCやスマホで作業をしていると、作業毎の作業時間を測り忘れることが多いです。作業時間を測ることは見積の根拠になりますし、どこに時間がかかっていて効率化が必要だとかを考えるための重要な情報です。 Toggleはブラウザ上でボタン一つでタイマーの開始と停止をできるため、簡単に測定できます。もちろん作業ごとに計測もできるので集計も簡単です。ToggleはiOSアプリ版もありスマホでも使えます。 [Toggle](https://chrome.google.com/webstore/detail/toggl-button-productivity/oejgccbfbmkkpaidnkphaiaecficdnfn?hl=ja) ![Toggle](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLdf23PiQAu7-QJWrV18xDXIMmdxBbrPjJDI0Cm3avYC0SQUzpboDWme5IyxA8VJm2tRHRMsZ6Cx3Bu5C6ezjYwWJFi-bVZIHHhxwjpgMuTZBh5gou4qfP9aneFN8c8cZ-3LGsQO5k6Q-Y/ "Toggle") ## 番外編 ブログの作成に直接関係しませんが、生産性アップに役立つものを徒然と書いておきます。 ### OneTab タブブラウザだと、ついついタブがいっぱいになってブラウザの動作が遅くなりがち。「OneTab」を使うとボタン一つで、一つのタブにまとめてくれます。これでメモリの95%を節約でき、動作も格段に軽くなります。 まとめたタブは、「OneTab」からワンクリックでタブを開きなおすことができます。 これ絶対入れておくべき拡張の一つです。 [OneTab [extlink]](https://chrome.google.com/webstore/detail/onetab/chphlpgkkbolifaimnlloiipkdnihall) ![OneTab](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0Lb1citWQwGhgo6d_bl0NmOLGUxtfK-cE9uAoDcIcIiIpypYQ6PIaETLQTxA2QO7ok1_KuJGWTu1x1vaqpJSsNNnHgFk2bGCs0jb1Vl8RXaz01yUGF9Sk4rN221tKItVnjRQjeHEB59t7/s0/OneTab+++Chrome+%25E3%2582%25A6%25E3%2582%25A7%25E3%2583%2596%25E3%2582%25B9%25E3%2583%2588%25E3%2582%25A2.png "OneTab Chrome ウェブストア.png") ここがステキ! - ボタン一つで動作を軽くできる - まとめたタブはワンクリックで開きなおせる 最後まで読んでいただきありがとうございます。 また読んでくださいませ。 そんじゃーね。

関連記事

SPONSORED LINK
SPONSORED LINK