当レポートについて
はじめまして、ナカタと申します。 ブログを始めたが、知らないことだらけ。 でも、調べ方がわからない・・・？ そんな方の為に、 ブログで知らないと困るツール・ノウハウというものをオムニバス的にまとめてみました。 使う使わないはご判断にお任せしますが、 これらを一通り知識として持っていれば、 もっとブログが楽しくなる気がします。 楽しめないと、続きませんしね。 というわけで、どちらかというとビギナー向けな内容なので もしかしたら知っている内容も多々飛び出すかもしれませんが、 一つでも知らないことがあれば、ラッキー。そういうことにして頂ければ幸いです。 では、ご覧くださいませ。エディターとショートカット
レポート内の解説で必要なので、念の為のご紹介です。 ご存知の方は読みとばしてください。 ■便利なショートカットキー(windows)早見表 http://www.geocities.jp/kagemusyamk1/index2.html OS やブラウザによって若干の仕様の違いはあるかもしれませんが、 一応、特に使用頻度が高そうなショートカットキーを下にまとめておきました。 ---Ctrl + A 全体を選択 F5 更新 Ctrl + X 切り取り F6 選択切り替え Ctrl + C コピー F7 全角カナ変換 Ctrl + V 貼り付け F8 半角カナ変換 Ctrl + Z 元に戻す F9 全角英数字変換 Ctrl + Y 元に戻す を戻す F10 半角英数字変換 Ctrl + N 新規作成 F11 全画面表示・ツールバーを非表示 Ctrl + S 保存 Prt Scr 画面キャプチャ Ctrl + O ファイルを開く Alt + Prt Scr アクティブなウィンドウのみ画像キャプチャ Ctrl + F ファイル内検索 Ctrl + B お気に入りの表示 Ctrl + L アドレスバー選択---■テキストエディター テキストエディターは、 メモ帳の進化版のようなもので、ブログを利用 する際には必須と言っても良いツールです。 ブラウザ上でそのままブログを書いていると突 如画面がクラッシュしたり、リンクをクリック したせいでページが遷移し、今まで書いたもの が全て消えてしまったということがあります。 HTML や CSS をカスタマイズする際は、様々な 便利機能が付いているテキストエディターでの編 集が最適です。バックアップをとる時も同様です。 そんな便利なフリーエディタをご紹介します。 有料（シェアウェア）だと秀丸が有名ですが、フリーでも似たような機能を持つエディターがあります。 ・TeraPad （ http://www.vector.co.jp/soft/win95/writing/se104390.html ） ・MKEditor（ http://www.vector.co.jp/soft/win95/writing/se083554.html ）
簡単に、テキストエディターの活用方法を一部記載しておきますのでご参考程度にどうぞ。 ※解説に MKeditor を使ってますが、TeraPad もだいだい同じ操作でいけますよ。 【画面分割】 上下２つに画面を分割することが出来ます。 HTML や CSS を編集する時に、同時に違う場所を編集出 来たりするので便利な機能です。 メニューの「ウィンドウ」→「ウィンドウ分割」 【置換】 文書内の文字を置きかえる機能です。 文書内に数十カ所「トマト」という言葉があったとして、 それを全て「ピーマン」に置き換えたいという場合、全部 を手動でやると大変です。この機能は、自動で置き換える ことが出来ます。 ショートカットキー「Ctrl」+「R」 で 置換のウィンドウが出ます。 【矩形選択】 長方形のように選択することが出来ます。 選択した後に、一括で空白を削除したり追加したり、でき ます。 「Alt」キーを押しながら、矢印キーやマウスなどで選択範 囲を広げる。
【元に戻す】 メモ帳では味わえない、テキストエディターならではの機能。 メモ帳ですと１回分しか元に戻せませんが、テキストエディターですとさらに回数を遡って元に戻すことが 出来ます。（戻せる回数は、環境オプションで変更可） Ctrl + Z で元に戻し、 Ctrl + Y で取り消す。 【検索】 こちらもショートカットキーで触れましたが、文書内検索を行います。 膨大な文字量の場合、探すのに苦労するので役立つ機能です。 Ctrl + F で検索ウィンドウが開く。 主要な操作と言えばこのくらいでしょうか。 もっと詳しく知りたい方は検索などで調べられてください。 利用環境で、エディタの設定を変えてやるとさらに便利になりますよ。 それと、レポート内にはブログの HTML や CSS の編集にも触れられていますが、 その際は必ずバックアップをとるようにしてください。 バックアップをとるのは癖づけた方が良いかもしれません。
個別ページのタイトルを「記事名→ブログ
名」へ
これは、お気に入りのキャプチャ画像です。あなたはどちらの方が見やすく感じますか？ 左側は、記事の中身が分かりやすいのですが、 右側は、サイトタイトルが先に表示されていて、中身が想像しにくくなっています。 これは、 左側が、「記事名+ブログ名」 になっているのに対し、 右側が、「ブログ名+記事名」 となっているからです。 次に、検索結果も見てみましょう。やはり「記事名+ブログ名」の方が読み手に伝わりやすいです。ソーシャルブックマークの新着エントリーなどでもだいたい同じです。 ブログ名が 4 文字程度なら影響も少ないですが、10 数文字ならスペースがもったいない。。。 この差がアクセスに差を生むんですね。 SEO 的に有利という論理はひとまず置いておいて、 ユーザー目線で見れば、個別記事ページは「記事名+ブログ名」とする方が好ましいと言えます。 もし、あなたのブログテンプレートの個別ページが、 ブログ名が先に表示されるようなら早速変更をかけてみましょう。 では、その解説です。 ・ブログの管理画面から HTML を呼び出して、その中の <title>～</title> の箇所を探します。（上の方にあります） 見つからなければ、サイト内検索（「Ctrl」+「F」）でさがしてくださいね。
・FC2
<title><!--not_index_area--><%sub_title> | <!--/not_index_area--><%blog_name></title> ・livedoor
<title><$ArticleTitle ESCAPE$> | <$BlogTitle ESCAPE$></title> ・Seesaa
<title><% if:extra_title %><% extra_title %> | <% /if %><% blog.title %></title>
MT や WP などを使っている方は、上のコードとは少し異なりますが、
要は、<title>～</title> 内の記事名とブログ名の順番を入れ替えるだけですので、 それに合うように変数を変更するだけです。
Google Analytics を埋め込む
本項目の内容 ・ Google Analytics の導入方法 ・自分の IP アドレスを除去設定 ■アクセス解析ツール Google Analytics について Google Analytics での導入方法を解説します。まず、以下に Analytics の主なメリットをまとめました。 ・直帰率、平均サイト滞在時間、新規セッション率、セッション、PV、平均 PV 別の計測 ・広告非表示 ・コンバージョン率測定 ・コンテンツサマリー（どこをクリックしたか、離脱ページ、遷移ページの解析 etc） ・豊富な環境別の解析結果（ブラウザ, OS, 画面の色, 画面サイズ, 言語, 利用ネットワーク etc） ・新規ユーザー、リピーター別の詳細な解析データ（訪問頻度、滞在中の PV 数 etc） 詳細なデータをフィードバックできるかどうかは、ブログのこれからの改善率に関わることです。 その点、Analytics は痒いところまでサービスが行き届いています。 では、導入手順は以下をご参考ください。 今までに Gmail や YouTube などのグーグルアカウントをお持ちの方は、そのまま利用できます。 ・「Analytics にアクセス」をクリックし、メールとパスワード欄を埋めてログインしてください。 google アカウントの取得方法は割愛しますが、新規アカウントをとる場合は、 右上の図の「今すぐお申し込み」から順に追っていくと良いでしょう。
・「プロファイルを追加」→ 「新しいドメインのプロファイルを追加」 → サイト URL、タイムゾーンを入力 → 「完了」 ・解析するドメインを選び、右下に出たコードを HTML の</body>上部に貼り付けます。 ちなみに、HTML の場所はブログサービスによって違うので、探して頂きたいのですが、 「テンプレート」「デザインのカスタマイズ」（？）と言ったメニューから入れることが多いです。 その中の </body> は、HTML の中でもかなり下の方にあります。 探しても</body>が見つからない場合は、「Ctrl」+「F」キーでサイト内検索をかけてみてください。
■IP アドレスの除外 次に、ご自身のアクセス数を解析結果から除外します。 これをやっておかないと解析を入れる意味が無いので、必ず設定しておきましょう。 ・「Analytics 設定」画面から 「編集」→「フィルタを追加」 除外する IP アドレスを入力するのですが、自分の IP アドレスが分からない場合は 確認君（ http://www.ugtop.com/spill.shtml ）で調べておいてください。 ・フィルタ名を分かりやすく「IP 除外」とし、 除外したい IP アドレスを入力して変更を保存すれば完了です。 除外したいアドレスが複数ある場合は、新たにフィルタを追加しましょう。 以上です。
■Cookie から除外する方法 http://www.google.com/support/forum/p/adsense/thread?tid=3d377e777d10f2b5&hl=ja IP アドレスが動的な場合、IP 除外設定をしても意味がありません。 そういう人は Cookie からアクセス数を除外する方法がありますので、その参考にどうぞ。 ■リアルタイムで解析結果を知りたい方へ Google Analytics はリアルタイムの解析ツールではありませんので、 リアルタイムで結果を知りたい方は、以下をご参考ください。 ・Woopra http://toshiiy.blog22.fc2.com/blog-entry-38.html
ブログにファビコンを設置しよう！
ファビコンとは、お気に入りやアドレスバーの横に表示されるアイコンのことです。 ファビコンを設置すると、 ・ブックマークに入れた時、ユーザーが探しやすくなる ・サイトを覚えて貰いやすくなる といった効果が期待できます。 簡単なので、設置がまだの方はぜひやってみてください。 【設置までの手順】 １．ファビコンの元となる正方形の画像を作成 ２．ファビコン（.ico）に変換する ３．Web 上にアップし、HTML にソースを書き加える。<link rel="shortcut icon" href="http://ドメイン/image/favicon.ico" /> ・アイコンの作り方などは、こちらをご参考ください。
ブログ影響力をチェックするツール
ブログ影響力や SEO の物差しになりそうなツールをいくつかご紹介します。 これらのツールで出た結果が全てと思わない方が良いですが、何らかの指標くらいにはなるかと思います。 ■TopHatenar （ http://tophatenar.com/ ） 「購読者数」と「ブックマーク数」の 2 つの指標から影響力を計測することがで きるランキングサイト。 ブクマ数推移やブログを土地と想定した ビジュアルブログ検索エンジンがユニー クです。 右図のように、どの記事で人気が出たか、 といった推移も見れます。 うまく活用すればトップブロガーのノウハウを盗むことも可能ですね。 参考程度にどうぞ。■WEB スカウター （ http://ja.webscouter.net/ ） ページランク、ブックマーク数、被リンク数、インデックス、キャッシュページ、など 粋な情報まで取得してくれます。 ■フィードメーター （ http://feedmeter.net/ ） RSS フィードの購読者数と、他の RSS フィードからそのサイトに張られているリンクの数で そのサイトの人気度を計算しています。 ■GTmetrix （ http://gtmetrix.com/ ） Google は 2010 年、ウェブページの表示速度を検索順位の変動に加味する （参照： http://web-tan.forum.impressrd.jp/e/2010/04/13/7753 ）としていますが どの程度影響するかは知りませんが、念のためサイトパフォーマンスを測定する ツールは知っておいた方が良いかもしれません。その時｢GTmetrix｣はとても役立ちます。 使い方は、URL を入力するだけです。 測定結果の各項目をクリックしていくと、不要なパーツなど原因も見えてきますので、 よろしければご参考ください。
タグの正確性をチェックするには、以下のようなツールを利用すると分かりやすいです。 ■Another HTML-lint gateway（ http://htmllint.itc.keio.ac.jp/htmllint/htmllint.html ） HTML 構文をチェックしてくれるサービス
■CSS Validation Service（ http://jigsaw.w3.org/css-validator/validator.html.ja ） CSS 構文をチェックしてくれるサービス ■バックリンクを検索エンジンでチェックする方法 バックリンクをチェックする方法は、検索エンジンを使うやり方が一番好ましいようです。 チェックしたいサイトの URL の前に link: と入れて検索するだけです。 link:［検索したい URL］ Google、Yahoo!JAPAN、Yahoo!(US) 、Baidu の 4 つでチェックするのが良いようです。 http://ascii.jp/elem/000/000/511/511526/
Ping 送信先一覧
Ping 送信とは、更新情報を各種サイトに送ることなのですが、 初期設定でもいくつか設定されているかと思います。 たくさん設定すれば良いものでもないですが、 主要 Ping 送信先は押さえておいても良いかもしれません。 ということで一覧をコピペでそのままお使いください。 ※現時点（2010 5/13）でエラーはありません。 ---http://api.my.yahoo.co.jp/RPC2 http://blog.goo.ne.jp/XMLRPC http://ping.blog360.jp/rpc http://rpc.reader.livedoor.com/ping http://www.blogpeople.net/ping/ http://rpc.technorati.jp/rpc/ping http://blog-search.net/up.php http://ping.rss.drecom.jp http://j-ranking.com/ping.cgi http://ping.speenee.com/xmlrpc http://ping.ask.jp/xmlrpc.m http://blogstyle.jp/xmlrpc/ http://ping.bloggers.jp/rpc/ http://ping.namaan.net/rpc/ http://blogsearch.google.com/ping/RPC2 http://www.bloglines.com/ping http://rpc.weblogs.com/RPC2 http://audiorpc.weblogs.com/RPC2 http://rpc.icerocket.com http://ping.blo.gs/ http://api.moreover.com/RPC2 http://api.my.yahoo.com/RPC2 http://rpc.technorati.com/rpc/ping http://services.newsgator.com/ngws/xmlrpcping.aspx http://rpc.blogrolling.com/pinger/---ブックマークアイコンの設置
ソーシャルブックマークとは、オンラインでお気に入りを共有できるサービス ことです。 あなたの記事が読者にブックマークされると、 再訪問してくれる確率が少しアップします。 また、nofflow ではないソーシャルブックマーク（はてな、Buzzurl など）ですと、 被リンク効果も多少期待できるかもしれません。（ほとんどのブクマサイトは nofflow 設定ですが） あとは、何百人からブックマークされるような人気記事ともなると、 ブックマークがブックマークを呼び、アクセスが一晩で何十倍と膨れ上がることもあります。 勿論、記事の内容がつまらなければ誰もブックマークしないので ブックマークアイコンをブログに設置しただけでそうなるわけではないですが、 付けておくとユーザーにとっても便利だと思います。 というわけで、以下の設置方法をご参照ください。 一つのアイコンにまとめて設置するタイプと、アイコンを分けて設置するタイプ、２通りです。 ■Add Clips （ http://www.addclips.org/ ）一つのボタンで 20 のソーシャルブックマークと 12 の RSS リーダーに対応しています。 お手軽なサービスですね。
テーブルタグを自動生成
ブログに簡単な表を貼りつけたりすることもあるかと思いますが、 その時、面倒に感じるのが<table>タグの表記です。 そこで、直感的に表を作成することが出来るツールをご紹介します。 ・エクセルシートを HTML テーブルに変換しちゃう君 (ββ) http://styleme.jp/tool/xls2html/#close エクセルで下図のように書いて、赤で囲った部分をそのままサイトに貼り付けるだけです。 すると、ソースが生成されますので、それが使いたい部分にコピペするだけです。 もう少しシンプルな方が良い、と言う方はこちらもどうぞ。 ・TABLEIZER! http://tableizer.journalistopia.com/ このツールは、簡単な表を作る為のものなので、 複雑な表を作る場合は、自分でソースを書くしかないですけどね。 でも、便利ではあります。特殊文字変換ツール
例えば、以下の文章をブログの記事に“そのまま”載せたい時、どうしますか？ <a href="URL" title="特殊文字を反映させたい">URL</a>
エディターに書き込んで投稿した場合、下のように表示されてしまうのは目に見えています。 （リンクとして変換される） URL 言っていることが、伝わりましたでしょうか？＾＾； どうしても、ソースをそのまま読者に見せたい時もありますよね？ でも、ブログのエディターにそのまま書いても、 HTML として変換されてしまい、そのまま書くことが出来ません。 そこで必要となるのが、HTML における特殊文字（&、"、<、>）を マークアップ文字（&、"、<、>）に変換する作業です。 ちょっとわかりにくいですね、実際にやってみましょう。
■HTML 特殊文字変換ツール （ http://www.hamusuta.net/openbbs/pc/html.php ） 「変換する文字列」のところに、先ほどの一つ目のタグをコピペしてください。
すると以下のような新しい文字列が生成されました。これがマークアップ文字です。
<a href="URL" title="特殊文字を反映させたい">URL</a>
これをブログのエディタなどに入れて更新すると、見事にそのまま表示させることが出来ると言うわけです。 地味に便利な代物です。
ブログパーツについて
ブログパーツは、サイトを重たくする原因となりやすいので、 なるべく設置しないにこしたことはないのですが、 設置するのであれば、どうしても必要な機能にのみ絞ると良いかと思います。 （たくさん設置すれば得するわけではない、ということ） 必要なブログパーツは、ブログによって様々ですので これがオススメというのはありませんが、 それではおもしろくないのでいくつかご紹介しておきます。 ■あわせて読みたい（ http://awasete.com/ ） ご存知の人も多いですかね。 あなたのブログ読者が読んでいるブログを表示するサービスです。・自分の読者層がどのようなブログを読んでいるかを知ることが出来る ・比較的、重くない ・nofollow ではないので、被リンク効果が期待 ・アクセスアップにつながる 以上の４点でしょうか。 特に１番目の、読者層を知る仕組みは 意味が大きい人にとっては重宝します。 ■リツイートボタン ツイッターで記事の「つぶやかれ数」を表示するブログパーツです。これは意外に便利です。 ・ツークリックでリツイートできるのでユーザーが便利。 ・誰につぶやかれたか知ることが出来るので、ブログ管理者も便利。 こんな感じでしょうか。 時に、アクセス爆発装置ともなるパーツです。 設置方法は、以下の記事をご参照ください。（とても分かりやすいです） http://www.heartlogic.jp/archives/2009/11/twitter_count_widget.html
■ブログ背景の左右にツイッターリンクバナーを表示させるツール
ブログの左右どちらかに、ツイッターのバナーを貼り付けることが出来るサービスです。 ・Twitter "Follow" Badge for your site/blog
http://www.go2web20.net/twitterFollowBadge/
項目を埋めて、「UPDATE CODE」をクリックすると、
記事に小見出しを付ける
ブログやメルマガなどで とても長い文章に出くわした時、 読むのが嫌になったことはありませんか？ 「読みやすさ」 というのはサイトを作る上でとても重要なことです。 長文であっても、サクサクと読めて まとまりのある文章にする為には、 以下のような小見出しは欠かせません。 見出しは、h1～h6 などの見出しに使う時のタグです。 今回は、記事の中の小見出しということで、 一般的な例として、h3,h4 としましたが、 サイトによっては構成が変わってきますので、h2 でも h5 でも構いません。ここでは、例として CSS のソースを公開しておきます。 クラス(class)名やフォントサイズなどは適宜、ご自分のブログに合うように追加、変更をお願いします。 ■まずは、よくあるタイプの見出し ---border-bottom:1px solid #6c6c6c; border-left:5px solid #6c6c6c; padding: 5px 10px;
font: bold 1.0em 'arial', sans-serif; color: #494949; text-align: left; ---■見出しの上下に横線を入れるタイプ ---padding: 10px 10px; border-top: 1px dotted #6c6c6c; border-bottom: 1px dotted #6c6c6c; color: #494949;
font: bold 1.2em 'arial', sans-serif; text-align: left;
---背景画像を作る
ブログの背景色は、CSS の body 部分から変更できます。 ■色で指定したい場合は・・・ body { background-color: #000000; } 「#000000」の部分には、背景色に指定したいカラーコードを入力します。 （カラーコード一覧表 http://www.finitojapan.com/cltable.html ） ■画像で指定したい場合は・・・body{ background-image: url (【画像の URL】); }
この body というのは、ブログの CSS の（たいてい）上の方にあります。 見つからなければ、ショートカットキー「Ctrl」+ 「F」で探してみましょう。 （この時、CSS を丸ごと、テキストエディターにコピペすると編集もしやすいかと思います。） 詳しくはこちらをご覧いただければわかりやすいと思います。 http://www.dspt.net/stylesheet_css/004.html さて、本題に入りますが、 この背景画像を作成するジェネレータをご紹介します。 簡単な画像でしたら、これらのツールで瞬時に作れますので、宜しければご利用ください。
■ColourLovers（ http://ja-jp.colourlovers.com/patterns/add ）
かわいい感じの背景画像が作れます。
■patterncooler（ http://www.patterncooler.com/ ）
膨大にあるパターンから選び、それをカスタマイズすることが出来る ■Stripe Generator2.0（ http://www.stripegenerator.com/ ）
ストライプな背景のジェネレータ
■PIXELKNETE（ http://www.pixelknete.de/dotter/ ）
リンク切れをチェックする
リンク先が閉鎖されているなどのリンク切れの症状はなるべく減らしたいもの。 でも、ブログの記事数が増えてくると常時メンテナンスするのは大変です。 そこで、リンク切れがあるかどうかを簡単に調べられるツールをご紹介します。 ■Deadlink.tv（ http://deadlink.tv/ ） 使い方はものすごく簡単。調べたい URL を入力して、「チェック開始」ボタンを押すだけです。■W3C Link Checker（ http://validator.w3.org/checklink ）
高機能リンクチェッカー。
もし、リンク切れを発見した場合、
ブラウザチェック
ブラウザって何？という方はあまりいないと思いますが、 知らない人はこちらをご参照ください。 参照： http://d.hatena.ne.jp/keyword/%A5%D6%A5%E9%A5%A6%A5%B6 要は、IE とか Firefox とかがそうです。 ブラウザチェックと言うのは、ブラウザによってサイトの見え方が若干変わる場合があるので、 それぞれ見え方をチェックしましょう、ということです。 例えば、 IE では正常に見えているのに、Firefox だとサイドバーがガタンと下に落ちている、 というブログはまずまず見かけますよね。 最低限、主要ブラウザ（IE,firefox,GoogleChrome,Opera）の チェックだけはやっておく必要があります。 その為には主要ブラウザで見れる状態にしなければなりませんので、以下からインストールしておいてくださいね。特に Firefox と Google Chrome は必須です。 ■Firefox
http://mozilla.jp/ ■Google Chrome
では、今からそのチェックを楽にするツールをご紹介します。
■IETester（ http://www.my-debugbar.com/wiki/IETester/HomePage ）
歴代の IE5.5/6/7/8 のチェックが同時に行えるツール。
■ADOBE BROUSERLAB（ https://browserlab.adobe.com/ ）
会員登録（Adobe 製品のユーザー ID でも可）はいるけど、かなり高機能。 ここは早めに登録しておいた方が良いような気がします。
■BrowserShots（ http://browsershots.org/ ）
マイナーなブラウザにも対応しているところが嬉しい。
スクリーンショットを身に付けよう
スクリーンショット（キャプチャ）は、「PrtScr」キーでできます。 アクティブなウィンドウのみであれば、 「Alt」+「PrtScr」 では、画面に見えている部分だけでなく、 フルサイズでキャプチャしたい場合、どうすればいいか？（こんなの→ 今から紹介する便利ソフトでできます。 ■Google Chrome 拡張機能を利用する方法 【手順】 １．Google Chrome（ブラウザ）をインストールする （こちらからインストールhttp://www.google.com/chrome/intl/ja/landing.html?hl=ja&hl=ja
） ２．Webpage Screenshot をインストールする Chrome を PC にインストールしていない方は、 上のリンクからインストールしてくださいね。Chrome をインストールができたら、次は Webpage Screenshot です。 以下のサイトにアクセスしてください。 https://chrome.google.com/extensions/detail/ckibcdccnfeookdmbahgiakhnjcddpki?hl=ja ※ブラウザは Google Chrome を使ってください。 ・手順に従い、インストールしてください。 すると、アドレスバー横のところにカメラのアイコンが現れます。 これをクリックして、メニューの中から実行するショット方法を選択します。 「ページ全てをスクリーンショット」でフルページキャプチャ出来ます。
■ついでに、もう一つ紹介！ ・Explain and Send Screenshots
https://chrome.google.com/extensions/detail/mdddabjhelpilpnpgondfmehhcplpiin?hl=en-US こちらのソフトは、キャプチャした瞬間から、その画像を編集することが出来る優れものです。 Pixlr というフォトショップのような編集画面でラクに画面を切り取ったり、色を付けたりできます。 早速インストールしてみましょう。 インストールすると、以下のようなアイコンが現れます。 そして、基本的には下の２つの機能を多く使用すると思います。（一番下は画像アップロード） では、上のどちらかのコマンドを選択して、 実際にキャプチャ画像をとってみましょう。
こんな簡易編集画面が現れるのですが、右上の方に「Advanced editing in Pixlr」というリンクがあります。 ここをクリックすると、フォトショップのような編集画面に遷移します。
（キャプチャ画像を完成させたい時は、「Done」をクリック）
その他、ブラウザに依存しない高機能キャプチャソフトは 以下からお好みのものをどうぞ。 ■消費リソース零!「キャプラ」 http://www.vector.co.jp/soft/win95/art/se118008.html ■ＦＳＣａｐｔｕｒｅ http://useful.sarashi.com/FSCapture.html ■ＷＥＢサイトキャプチャーツール http://www.picolix.jp/ Firefox アドオン ■Abduction! https://addons.mozilla.org/en-US/firefox/addon/3408/
他ブログのソースを見る方法
サイトのソース（HTML,CSS）はブラウザ上から閲覧することが出来ます。 CSS ソースを見たことが無い方には理解しづらいものがあるかもしれませんが、 サイト検証など色々と使うことが多いノウハウなので覚えておくと良いですよ。 【操作手順】 １．ソースを見たいサイトを開く ２．右クリック→「ソースの表示」 HTML の表示 ３．HTML ソース中にあるスタイルシートの記述から表示 CSS の表示 これで HTML と CSS のソースを表示させることが出来ます。■ HTML ソース中の CSS の記述から表示
では、日刊ウェブログ式（ http://toshiiy.blog22.fc2.com/ ）を例に解説しましょう。
日刊ウェブログ式の HTML ソース（右クリック→「ソースの表示」）の冒頭は以下のようになっています。
↓例えば、こんなの・・・
<?xml version="1.0" encoding="euc-jp"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head>
<meta http-equiv="Content-type" content="text/html; charset=euc-jp" /> <meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta name="author" content="nakata" />
<meta name="description" content="ホームページやブログオーナー向けのアイデアマガジン" />
<title>日刊ウェブログ式</title>
<link rel="stylesheet" type="text/css" href="http://toshiiy.blog22.fc2.com/template/yoko1000/style.css" />
<link rel="alternate" type="application/rss+xml" href="http://toshiiy.blog22.fc2.com/?xml" title="RSS" />
で、どれが CSS の URL なの？
ということですが、赤字の部分です。
これをアドレスバーにコピペして、エンターキーを押してください。 CSS のソースが華麗に表示されるでしょ？
ちなみに、ソースを見ることは何ら問題ではありませんし、 WEB 関連のお仕事をされている方なら日常的に見ていることなのですが、 ソースを丸ごとパクるのはやめましょう。著作権侵害に当たります。 ■FireBug もう一つ、ソースを見る方法をご紹介しておきます。 伝説的に有名なデバックツール「FireBug」です。 Firefox のアドオンですので他のブラウザでは使えないのですが、 このツールがあるから Firefox を使ってるというユーザーも多いのではないでしょうか。 これで、より効果的なソースの編集・シュミレートが可能となります。 ・Firefox のアドオン「FireBug」 https://addons.mozilla.jp/firefox/details/1843 Firefox にインストールしましょう。
アイコンが現れますのでそちらをクリックしてみてください。 すると、ブラウザの下部に HTML と CSS ソースが現れます。 ソースの知識が皆無であれば、使いこなすというのは難しいかもしれません。 ただ、ソースの勉強には打ってつけだと思います。 ぜひ、サクサク使いこなして頂ければと思います。 （FireBug の使い方を説明すると本が一冊出来てしまうのでこの辺にしておきますね） 一応、参考になりそうなサイトを貼り付けておきます。 ・Firebug の使い方 http://7go.biz/moba3/archives/2007/0319155421.html ・Firebug の使い方：(X)HTML と CSS の確認・修正方法のまとめ http://www.koikikukan.com/archives/2009/07/22-015555.php
あとがき
いかがでしたか？？ ブログ初心者が最低限知っておいた方が良い知識集の一部をまとめました。 少しでもお役に立てたならハッピーです。 運営者のこういうスキルの蓄積は、 ブログのアクセスにも必ず役立ちます。 なぜなら、こういうテクニックを熟知している人の方が、 様々な表現が使えるからです。 例えば、同じ文章、同じ記事でも、 もっとおもしろく、もっと魅力のある表現に変えることが出来るからです。 これって、実はむちゃくちゃ大きいことなんですね。 だから、そういうことを少しでも多くの方に知って頂けたら！ と思ってこのレポートを書きました。 これからもスキルの蓄積、頑張ってください！どうぞご覧になってくださればと思います。 http://toshiiy.blog22.fc2.com/ http://twitter.com/milkcoffee1 http://www.mag2.com/m/0000249193.html なお、当レポートで使用した画像は全て以下の方法で作られています。 http://0yen-creater.com/top/ ■WordPress テーマ http://design-plus1.com/tcd-w/theme001 最後までお読み頂きありがとうございました。 株式会社デザインプラス ：中田俊行 メール 0yen.creater@gmail.com 【著作権について】 この製品は著作権法で保護されている著作物です。 著作権者の許可なく、このレポートの全部又は一部を いかなる手段においても複製、転載、流用、転売等することを禁じます。
