photo credit: Michele Catania via photopin cc
ブログを書いていて、どのようにすれば意図する表示になるのかわからないことがあります。また、他の人のブログを見て、どのようにして表示しているのかと思うこともあります。ググったり、たまたま他の人が説明しているものを読んだりして、実現方法を見つけていますが、これまで、このブログで採用した方法をここにまとめておきます。
1.画像
(1)画面のキャプチャー
画面のキャプチャーは、「Jing」が便利です。Windows、Macの両方で利用できます。Macbook Pro Retina ディスプレイにも最近対応しました。「Jing」は、一度起動すると画面の端に常駐します。マウス操作でキャプチャーを開始し、開始点と終了点を指定します。あとから開始点や終了点を修正することもできます。ファイル名にはキャプチャーした日時が含まれますので、そのまま使えば重複することがありません。
iPhoneの画面キャプチャーは、ホームボタン(丸いボタン)を押しながらスリープボタン(右上のボタン)を押すだけです。キャプチャーした画像は、カメラロールに保存されます。
(2)モザイク
キャプチャーした画面に公開したくないものが表示されている場合、その部分を隠す必要があります。隠すためには、塗りつぶす方法もありますが、私はモザイクが好きです。塗りつぶすとその部分が不必要に強調されてしまいます。地の色と同じ色で塗りつぶすと、そこに隠したものがあることがわからなくなります。そのあたりの兼ね合いからモザイクを使っています。
モザイクを入れるためのソフトは、Windowsでは「JTrim」を使っています。窓の杜からダウンロードできます。Windows XPまでの対応となっていますが、Vistaでも動きます。Macでは「ToyViewer」を使いました。Mac App Storeからダウンロードできます。
どちらも、モザイクをかける範囲とモザイクの大きさを指定しますが、その兼ね合いで範囲がずれる場合があります。何回か試行錯誤が必要ですが、無料ソフトですから受け入れるべきでしょう。
(3)トリミング
トリミングには、「Photo editor online」を使っています。無料のオンラインサービスです。
トリミングしたい範囲を指定するだけで、トリミングができます。その他、一般的なフォトレタッチソフトにある機能はひととおりあります。
(4)リサイズ
リサイズ機能はどの画像ソフトにもあると思います。しかし、何回もリサイズすると画質が落ちますので、画像サイズの変更は、表示するときにHTMLで「width」パラメータをつけて調整すると、一番きれいに表示されます。実際に試した結果を次の記事に書いています。
2.リンク
(1)画面付リンク
画面とリンクを一緒に紹介するには、「kwout」が便利です。ブラウザが表示する画像を切り取り、リンクを付けられます。ブックマークレットとして登録できます。
(2)ページタイトルにリンク
Webページのタイトルにリンクをつけるために、ブックマークレットを利用しています。ブックマークレットは、『My Utility-Make Link ジェネレータ』で生成しました。
(3)アマゾン等へのリンク
ヨメレバは、オンライン書店の横断的紹介リンクを生成するサービスです。カエレバは、オンラインショップの横断紹介リンクを生成します。ポチレバは、iTunesで配布・販売されているアプリやコンテンツの紹介リンクを生成します。
書籍紹介ブログパーツ ヨメレバ
商品紹介ブログパーツ カエレバ
iPhoneアプリ紹介ブログパーツ ポチレバ
3.プログラムのソースコード
プログラムのソースコードをブログにそのまま書くと、ソースコードの内容が、ブログの表示などに影響を及ぼす可能性があります。そのため、ソースコードを記述するためには、特別な記述が必要です。
WordPressのプラグインに「SyntaxHighlighter Evolved」というものが、あります。次のリンクから入手するか、WordPressのプラグイン管理画面で検索、有効化します。
WordPress ? SyntaxHighlighter Evolved ≪ WordPress Plugins
1行の文字数が多い時は、自動的に左右へのスクロールバーがつきます。行番号の表示もでき、強調したい行にハイライトをかけたり、行番号の開始番号を指定することもできます。
以上、ツール類を使うものを紹介しました。ブログを書き始めたときは、知らずに苦労したものです。