2016/05/25: ブログ記事をデザインするためのChromeの拡張機能 - とほほの初めてのメルマガアフィリ

RSSホーム



2016/05/25: ブログ記事をデザインするためのChromeの拡張機能

【本日のオススメ無料レポート】

★ 1. 『ブログで月収200万円以上を稼ぐテクニックを限定公開』

 ⇒ http://mail.omc9.com/l/01wqEf/20rPFbrb/


たった1つのサイトを運営して月収260万円を達成!

累計報酬2500万円を
アドセンスで稼いだノウハウを今だけ限定公開!

資産ブログを構築する為に必要な◯◯を暴露します!



★ 2. 『『ネットビジネスやるなら必須』
 稼ぎの“桁”を増やしたい人は他にいませんか?
 あなたの収入を青天井にする
 メールマガジンの3つの秘訣を徹底解説!!』

 ⇒ http://mail.omc9.com/l/01wqEf/sSgkp6nd/


稼ぎの桁を増やしたい人は他にいませんか?

もしもあなたがこれから

 「さらに稼いでいきたい」
 「安定して稼いでいきたい」

と考えているのであれば、
このレポートをきっかけに
メルマガを始めることをオススメします。

今後、ネットビジネスは二極化がさらに進み、
現在、Am○zonやGoo○leに頼り切っている方は、
稼げな…(→続きを読む)





。°+°。°+ °。°。°+°。°+ °。°。°+°。°+ °。°+ °。°


こんばんは、どっといがです。

いつも読んでいただいてありがとうございます。



きょうは、ブログ記事をデザインする時に便利な
Chromeの拡張機能をいくつか紹介します。

デザインしたページを作成するには、
ツール無しでは非効率です。


Chromeの拡張機能は無料で使用できるものがほとんどです。

まず、どんな機能のものか試してみて、
便利なものが見つかれば

それを参考に
有料になってしまうかもしれませんが
もっと高級なツールを探すための
お試し版としても利用できます。



なお、使わない拡張機能は、
次のようにしてくださいね。

 1. アンインストールする

 2. または、下に示す拡張機能で、
普段は無効にしておき、
使うときだけ有効にする。

 《Extensions Manager (aka Switcher)》
 ⇒ http://mail.omc9.com/l/01wqEf/UYPGXh1e/

Googleの拡張機能は有効のままにしておくと、
使わなくともメモリを消費してしまいます。

非力なパソコンでは、
他のアプリの実行速度低下を招きます。

特にWordは影響が顕著です。



本記事は、次のWebページの記事を元に、
ブロガーには必要のない余分な情報は省いて
編集し直しています。

⇒ http://mail.omc9.com/l/01wqEf/YS4TqUm0/

元記事を読まれたい方は、
上記ページをご覧ください。



1.】Page Ruler

⇒ http://mail.omc9.com/l/01wqEf/NohJrtzL/

ホームページ内の任意の場所の幅と高さを、
ドラッグ&ドロップで計測することができる拡張機能です。

レイアウトを調整したり、
画像を掲載する際のサイズを検討する際などに便利です。


ボックス領域を生成する時などは、
あるととっても便利です。



2.】ColorZilla

⇒ http://mail.omc9.com/l/01wqEf/WTiclpQW/


ホームページ上の要素のカラーコードを
スポイトで取得することができる拡張機能です。

取得したカラーコードは履歴に残るので、
後から確認することも可能です。


デザインの参考にしたいホームページなどで
どのような色を使用しているのか簡単に調べられますので、
特にホームページ制作時には重宝します。



3.】WhatFont

⇒ http://mail.omc9.com/l/01wqEf/mLQi5Pem/


開いているホームページで
使用されているフォントを調べることができる拡張機能です。

調べたいテキストの上にカーソルを合わせるだけで、
フォントやサイズをすぐに確認できます。


さらに、
CSSではどのように指定しているのかも教えてくれますので、
使い始めると重宝します。



4.】Firebug Lite for Google Chrome

⇒ http://mail.omc9.com/l/01wqEf/7KIM48MH/


コード修正の補助をしてくれる拡張機能です。

画面の下半分にHTMLとCSSが表示されますので
コードを修正すると、
リアルタイムで画面上半分に表示されているページを
確認することができます。


ただし、
ホームページの改ざん防止のために、
確認ができるだけで変更内容がそのまま適応されるわけではありません。

この拡張機能を利用して変更箇所と変更内容が決まったら、
自社のホームページのコード部分でHTML・CSSを変更してください。



5.】Image Downloader

⇒ http://mail.omc9.com/l/01wqEf/BBV2pQLr/


ホームページ上にある画像を
簡単にダウンロードすることができる拡張機能です。

ページ上の画像をひとつだけダウンロードするなら
ドラッグ&ドロップでも保存可能ですが、
この拡張機能を利用すれば複数の画像を一度にダウンロードすることができます。



6.】Window Resizer

⇒ http://mail.omc9.com/l/01wqEf/AfbrpS0N/


ブラウザの画面サイズを
特定の大きさに変更してくれる拡張機能です。


パソコン上での表示だけではなく、
スマートフォンやタブレットなどでの表示を
確認することができますので、
レスポンシブレイアウトのテストを行う際に便利です。



7.】Adobe Edge Inspect CC

⇒ http://mail.omc9.com/l/01wqEf/V6QbUGuO/


こちらも、
スマートフォンやタブレットでの表示確認ができる拡張機能です。

Adobe Edge Inspect CCでは、
現在表示しているページを
自分が使用しているスマートフォンと同期し、
ライブプレビューすることができます。



8.】Check My Links

⇒ http://mail.omc9.com/l/01wqEf/MtT8KyV8/


ページ内にリンク切れがないかを
チェックすることができる拡張機能です。

正常にリンクが作動しているものは緑色になり、
リンク切れの場合は赤色で表示されます。

チェックする際に
すべてのURLをクリックする必要がなくなるので、
作業時間が大幅に短縮できます。



9.】Clear Cache

⇒ http://mail.omc9.com/l/01wqEf/KfnQ4iNX/


ブラウザのキャッシュを、
ワンクリックで削除することができる拡張機能です。


たとえば、
サーバーでブラウザキャッシュが効く設定にしている場合、
CSSや画像の変更が反映されない場合があります。

このような場合にClear Cacheを使用すると、
アイコンが緑色になってキャッシュがクリアされ、
すぐに反映されるようになります。



10.】Awesome Screenshot

⇒ http://mail.omc9.com/l/01wqEf/bZbceyNy/


いわずと知れた、
スクリーンショットを撮影することができる拡張機能です。

この拡張機能をインストールしておけば、
選択したエリアのスクリーンショットを撮影できるだけではなく、
自動スクロールしてページ全体を撮影することができます。

さらに、
保存前に枠線を入れたり
テキストを挿入したりなどの画像編集も可能です。



11.】BuiltWith Technology Profiler

⇒ http://mail.omc9.com/l/01wqEf/JLvuTsZU/


現在開いているホームページが、
どのような技術やサービスが使用されているのかを
確認することができる拡張機能です。

バックエンドの技術はもちろん、
使用されているプラグイン名などの
フロントエンドの技術も知ることができますので、
ホームページを制作する際に役立ちます。



12.】The QR Code Extension

⇒ http://mail.omc9.com/l/01wqEf/43GMO5Wd/


ホームページのURLを
QRコードに変換してくれる拡張機能です。

デザインする中でQRコードをつけたい場合に
作成ツールをわざわざ開く必要がなくなりますので、
作業時間の短縮になります。



13.】Search by Images

⇒ http://mail.omc9.com/l/01wqEf/JP3mOPgO/


Google内での画像検索を、素早く行ってくれる拡張機能です。

たとえば、
ホームページデザインの参考にするために
さまざまなホームページを閲覧している際に、
イメージに合う写真があって二次利用したい場合などに便利です。


二次利用するためには
クレジット表記を入れる必要がありますが、
わざわざGoogle画像検索メニューから検索するのは面倒です。

この拡張機能を利用すればすぐに検索可能ですので、
すぐに画像に関する情報を把握できます。



15.】CSSViewer

⇒ http://mail.omc9.com/l/01wqEf/tdJKqhv0/


画像やフォントなどにマウスオーバーをするだけで、
その箇所に使用されているCSSプロパティを
リアルタイムで表示することができます。

フォントサイズや余白、画像の幅、高さなどが
すべて丸裸になりますので、
余程複雑な箇所でない限りは
デペロッパーツールを起動する必要がなくなり、
手間を省くことができます。





昨日(5月24日16年)のメルマガで
アクセスがたくさん集まるページの作成技法として、
「インフォグラフィック」を使用することを
挙げました。


「インフォグラフィック」を掲載するには、
これら拡張機能の機能が必要になってきます。


まずは、
無料のChrome拡張機能から入り
不足を感じたら
有料のツールを購入するようにすれば
良いでしょう。



それでは、このへんで。


本日も最後までお読みいただき

ありがとうございました。




。°+°。°+ °。°。°+°。°+ °。°。°+°。°+ °。°+ °。°

【どっといがの無料レポート】

★ 『【WordPress: All in One SEO Pack】
 “All in One SEO Pack”で適切なSEO対策を施せるよう、
 使い方を詳しくお伝えします。』

 ⇒ http://mail.omc9.com/l/01wqEf/cKELU41K/


下に示すURLで、
この無料レポート全ページを閲覧することができます。


 ⇒ http://mail.omc9.com/l/01wqEf/TIJRWEWf/



★ その他、どっといがが作成した無料レポートはこちら↓

 ⇒ http://mail.omc9.com/l/01wqEf/Rz1Zpsy1/


ほとんどの無料レポートが、
閲覧できるようになっています。

2015-05-25 | Comment(0) | TrackBack(0) | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。

この記事へのトラックバック
スポンサーリンク
Copyright © とほほの初めてのメルマガアフィリ All Rights Reserved.
当サイトのテキストや画像等すべての転載転用・商用販売を固く禁じます
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。