ミセスGのブログ

海外ドラマ&映画の感想もガッツリ書いている国際結婚&アメリカ在住女のブログです。

誰でも使える、ブログ運営に役立つツール5選を紹介する

f:id:oclife:20170902033008j:plain

8月のPVは46万ほどでした。一番人気のウォーキング・デッド関連記事をしばらく書いていないことや、海外ドラマ全盛シーズンが秋冬であることを考えると、良い数字です。

本日はブログ記事作成に役立つツールを紹介します。

いずれも私がブログ記事を作成する際に使用しているツールです。

もちろんすべて無料のフリーソフトです。基本、モノグサなので、面倒なツールは使っていません。いつも数個を試してみて、一番簡単でいいと思ったものだけ使っています。

ブログ運営に役立つツール5選

画像圧縮アプリ

皆さん、画像を圧縮していますか?画像は必ず圧縮しましょう。私も50KBくらいとかだと、面倒になってそのまま貼り付けてしまっていますが、小さな差でも記事が増えて行けば大きい。

画像圧縮アプリはいろいろあります。いくつか試しましたが、比較して検証するほど大佐はありません。というわけで、私が使っている画像圧縮アプリはJPEGminiです。

JPEGmini - Your Photos on a Diet!

使い方は簡単。

UPLOADボタンを押して、画像をアップロードしてください。

ドラッグ&ドロップもできるので便利です。

圧縮が終わったら、左下の Download Full Res. ボタンを押してダウンロードします。

わずか2クリックで完成するお手軽さです。

元の画像と圧縮した画像の比較も簡単にできます。

この画像は88KB→64KBに圧縮できました。中央のラインをマウスで左右に動かすことで、元の画像と圧縮した画像を簡単に比較できます。といっても、違いはほとんどわかりません。

f:id:oclife:20170902011320j:plain

元の画像(88KB)

f:id:oclife:20170902011638j:plain

圧縮画像(64KB)

f:id:oclife:20170902011715j:plain

全然違いが判りませんが、サイズはしっかりダウンしています。

記事を書いていると、2クリックで済むといっても、けっこう面倒くさい処理だなと感じることはあるので、私もよくサボってしまうんですけど、サイトの読み込みが遅くなると、読者は去って行ってしまいますので、大事な作業ですね。

 

無料画像素材サイト

私は必ずトップに画像を入れていて、そのままアイキャッチ画像として使用しています。サムネイル一覧表示にしてもバランスが良いので、トップ画像は入れた方が良いと思います。

その画像は、だいたい pixabay を利用しています。最初に pixabay をチェックして、他をチェックするのですが、ほぼ pixabay で事足ります。

英語:Free Images - Pixabay

日本語:無料の写真 - Pixabay

あと、pixabayを含む全無料画像サイトから検索したい時はここで出来ます。

無料写真素材・フリーフォト検索|O-DAN(オーダン)

 

html / css のソースコードをblogに貼る方法

cssやhtmlコードを紹介したい時には、これを使用します。無料、登録不要、簡単にできます。

Create a new Gist · GitHub

コードを入力します。

f:id:oclife:20170902014138j:plain

右下の Create public gist をクリックします。

Embedの中にあるスクリプトをコピーして、html編集ページから好きな場所に貼り付けます。

f:id:oclife:20170902014638j:plain

このようにコードが表示されます。

f:id:oclife:20170902014925j:plain

 

css / html のソースコードテキストエディタ

はてなのコード編集画面は小さくて編集しにくいので、こちらを使用します。

Sublime Text: The text editor you'll fall in love with

使いやすいです。

サクラエディタを使っていましたが、こちらに切り替えました。

 

スマホやPCでブログの表示を確認するブラウザ

スマホやPCでの表示を確認するためのWeb製作用ブラウザは Blisk を使用しています。たまにエラーになることやタイムアウトで利用できない時もありますが、表示を確認するだけなのでちょこっちょこっと確認できて便利です。

Download Blisk - a browser for web developers

このように表示されます。

f:id:oclife:20170902025951j:plain

もう一つおススメは、browserling です。

Browserling - Live interactive cross-browser testing

こちらはインストールも不要で、オンラインで自分のサイトのurlを入力するだけで、各ブラウザでどのように見えるかが確認できます。

ただし、1回につき3分という制限時間付き。でも見え方を確認するだけなので、3分でも十分です。