ADVERTISING AND DESIGN tag:re-port.heteml.jp,2009-05-19:/report/aad//4 2011-03-03T02:25:57Z リ・ポート社員による、広告・グラフィックデザイン・WEBに関するあれこれ Movable Type 4.25 Googleのurl短縮サービスが便利 tag:re-port.heteml.jp,2011:/report/aad//4.232 http://re-port.heteml.jp/report/aad/2011/03/googleurl.html 2011-03-03 2011-03-03T02:25:57Z Googleからいつの間にかurl短縮サービスがリリースされていました。URLは... yanase
URLは
goo.gl
しゃれてます＾＾

使い方はいたって簡単。
URLを貼り付けて
「Shorten」ボタンを押すだけです。

goo_gl.gif

会社のGoogleMAPのURLも

http://maps.google.co.jp/maps?hl=ja&q=%E9%9D%99%E5%B2%A1%E7%9C%8C%E6%B5%9C%E6%9D%BE%E5%B8%82%E4%B8%AD%E5%8C%BA%E4%B8%AD%E5%A4%AE%E4%B8%80%E4%B8%81%E7%9B%AE3-6&ie=UTF8&hq=&hnear=%E9%9D%99%E5%B2%A1%E7%9C%8C%E6%B5%9C%E6%9D%BE%E5%B8%82%E4%B8%AD%E5%8C%BA%E4%B8%AD%E5%A4%AE%EF%BC%91%E4%B8%81%E7%9B%AE%EF%BC%93%E2%88%92%EF%BC%96&gl=jp&z=16&brcurrent=3,0x601ade6fa68508b7:0x649ab5535bf74cd3,0,0x601ade6fa4b587bf:0x9cefcc76032bffe0

↓↓↓↓↓↓↓↓

http://goo.gl/ti1Z4

こんなになってしまいましたw

しかもGoogleのアカウントでログインしていると
QRコードの作成やクリック数の計測などもできてしまいます。

goo_gl02.gif

トラフィックの計測ができるので、バナーやQRコードの効果測定などに使ってもいいかもしれませんね。
]]> Excelからtableを簡単に取り出す tag:re-port.heteml.jp,2010:/report/aad//4.230 http://re-port.heteml.jp/report/aad/2010/12/exceltable.html 2010-12-21 2010-12-21T02:34:13Z Officeな話題が続きますが、このアドインはコーディングのときにだいぶ助けられ... yanase 「XLS2HTMLTable」というアドインを使うことで、Excelの表をhtml化するときに余計なタグをいれずに簡潔なtable構造で取り出すことができます。

以下Excel2007での利用方です。

１．アドインのダウンロード
ダウンロードしたファイルは適当な場所に保存

２．アドインを読み込む
「Officeボタン」→「Excelのオプション」→「アドイン」→「設定」

excel2table01.gif

３．アドインを有効にする
「参照」でXls2Htmltableを選択

excel2table02.gif

４．テーブルを選択
「アドイン」→「Xls2Htmltable」

excel2table03.gif

５．アドイン実行
ｷﾀ━(ﾟ∀ﾟ)━!!!!!

excel2table04.gif


と言う感じで、大量の表をhtml化するときに非常に役立つアドインの紹介でした。

]]> docxからdocへ簡単変換 tag:re-port.heteml.jp,2010:/report/aad//4.229 http://re-port.heteml.jp/report/aad/2010/12/docx.html 2010-12-14 2010-12-21T02:27:58Z Wordのファイルをもらったけど、Word2007で作られた（拡張子がdocx）... yanase
そんな時はFileminxにアクセスしてみましょう。
操作はいたってシンプルでファイルを選択して変換したいファイル形式を選ぶだけ。

テキスト、画像、動画、音声なんでもかんでも変換できます。
list.gif
う～ん充実してますね！
これから何かと利用しそうな感じです。
]]> HamazoのBlogをカスタムしました tag:re-port.heteml.jp,2010:/report/aad//4.227 http://re-port.heteml.jp/report/aad/2010/10/hamazoblog.html 2010-10-28 2010-10-28T04:27:17Z 御前崎ライオンズクラブ様のBlog開設のお手伝いをさせていただきました。ホスト先... yanase 御前崎ライオンズクラブ様のBlog開設のお手伝いをさせていただきました。

omaezakilions.gif


ホスト先は浜松のブロガー御用達のHamazoです。地元に密着したBlogなので浜松、西遠で活動やサービスを行っている方にはお勧め！
無料Blogですので、カスタムできる範囲は限られていますが、メインイメージや背景画像、タイトルバーなどは変更できました。
]]> Adobe RGBに変換して肌色をキレイに tag:re-port.heteml.jp,2010:/report/aad//4.217 http://re-port.heteml.jp/report/aad/2010/07/photoshop.html 2010-07-13 2010-07-13T07:43:21Z WEBのデザインでは少数派のソフトFireworksを使っています。（Photo... yanase Fireworksで画像を読み込んだとき、なんかイメージの色とちがうなぁ（特に肌色）と感じたことはありませんか？

Fireworksで色の調整をしてもよいのですが、Photoshopでカラープロファイルを変換することによって、色調を変えることができます。簡単に肌の色や空の色が鮮やかになったりするので試してみてください。

まずPotoshopで画像を読み込みます。画像にカラープロファイルが埋め込まれていなければそのまま開きます。
「イメージ」→「モード」→「プロファイルの指定」で「プロファイル」で希望のプロファイルを選んでください。下の例ではAdobe RGB（1998）を選択しています。

toadobe.jpg

次に「イメージ」→「モード」→「プロファイルに変換」で変換後のスペースを作業用RGBにしてOK。

tosrgb.jpg

sRGBで開いたのを、Adobe RGBにしてさらにsRGBに変換して保存したことになるのでしょうか。
色調の豊かさはsRGBよりAdobe RGBのほうが優れているらしいです。
sRGBに戻したら一緒なような気もしますが、どうやら普通のPCモニタ上では再現が難しいAdobe RGBを擬似的に再現しているらしいです。実際、上記の操作で画像の色調はだいぶ変わりました。

サンプル：元画像↓
yukata-srgb.jpg

サンプル：カラープロファイル変換画像↓
yukata-adb.jpg

全体に黄味が増した印象で、肌の色が鮮やかになり、空の青も良い感じになりました。
変換後のデータをFireworksで開けばPhotoshopと同じ色合いの画像を使うことができます。
人の肌や食べ物の色はなかなか調整が難しいですが、適宜プロファイルを使い分けると良いかもしれませんね。


design80_15.gif
↑↑↑応援よろしくお願いします

]]> GooglemapのリンクでHTML Validatorのエラーを回避 tag:re-port.heteml.jp,2010:/report/aad//4.206 http://re-port.heteml.jp/report/aad/2010/05/googlemaphtml-validator.html 2010-05-06 2010-05-06T10:36:45Z yanase
Googlemapのリンクは大変便利ですが、コードをそのままコピペしてHTML Validatorでチェックすると大量にエラーになります。原因はリンク先のアドレスに「&」が入っているからです。「&」は「&」と記述しないとダメなので。
別に動作はするのでそのままでも良いのですが、このサイトはウエブ標準とか謳っているとそうもいかないので...

やり方は簡単で、DW（会社はCS3です）のプロパティのリンクにGooglemapのリンクをコピペして直ぐに保存するだけです。

dwcs3.gif

DWがリンク先の「&」を「&」に自動で変換してくれます。更新ボタンを押したりちょっとしたことで、リンクのURLが変わってしまうので注意してくださいね～。これで「×」の山から開放されて「レ」になります＾＾；
]]> ie6でメイリオが表示されない tag:re-port.heteml.jp,2010:/report/aad//4.203 http://re-port.heteml.jp/report/aad/2010/04/ie6.html 2010-04-13 2010-04-13T03:16:54Z 先日フキの皮を大量に剥いたて、まだツメの先が黒いやなせです。font-fami... yanase
font-familyにメイリオを指定しているにもかかわらず、ie6だけメイリオで表示されないという事態に遭遇しました。
いろいろ調べるとhtmlの属性にlang="ja"が入っていないことが原因ということが分かりました。

lang="ja"は「このHTMLファイル内の文章は日本語です」という意味。ブラウザの表示には影響しないとの情報もありましたが、今回のケースでは表示にバッチリ影響した訳です。

今後<html>は↓のように書くようにします
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
]]> floatしているboxの高さを揃える tag:re-port.heteml.jp,2010:/report/aad//4.200 http://re-port.heteml.jp/report/aad/2010/04/floatbox.html 2010-04-08 2010-04-08T11:00:21Z 今週末お花見に行こうと思っているので、それまで散らないで欲しいと思っているやな... yanase 今週末お花見に行こうと思っているので、それまで散らないで欲しいと思っているやなせです。

boxをfloatして横並びにするとboxの高さが内容によって凸凹してしまいます。調べてみるとcssを少し付け加えるだけで揃えることができました！

box1の内容box1の内容box1の内容box1の内容
box2の内容box2の内容box2の内容box2の内容box2の内容box2の内容box2の内容box2の内容
box3の内容box3の内容

3つのboxの高さを揃えるには...
floatしているそれぞれのboxに
padding-bottom: 32767px;
margin-bottom: -32767px;
その親boxに
overflow:hidden;
を加えればOK。
加えると↓

box1の内容box1の内容box1の内容box1の内容
box2の内容box2の内容box2の内容box2の内容box2の内容box2の内容box2の内容box2の内容
box3の内容box3の内容

簡単に揃えることができました～。
最後にサンプルのhtmlとcssコードです。親ボックスのwidht指定はie6対応です。 
<div id="suihei">
<div class="box1">
box1の内容box1の内容box1の内容box1の内容
</div>
<div class="box2">
box2の内容box2の内容box2の内容box2の内容box2の内容box2の内容box2の内容box2の内容
</div>
<div class="box3">
box3の内容box3の内容
</div>
</div>

#suihei {
	overflow:hidden;
	height: auto;
	width: 360px;   
	padding-bottom:10px;
}
#suihei .box1 {
	float: left;
	width: 100px;
	background-color: #B0E6FF;
	padding: 10px 10px 32767px 10px;
	margin-bottom:-32767px;
}
#suihei .box2 {
	float: left;
	width: 100px;
	background-color: #FFC1DD;
	padding: 10px 10px 32767px 10px;
	margin-bottom:-32767px;
}
#suihei .box3 {
	float: left;
	width: 100px;
	background-color: #FFD6B0;
	padding: 10px 10px 32767px 10px;
	margin-bottom:-32767px;
}
]]> favorite icon略してfavicon（ファビコン）を表示させる tag:re-port.heteml.jp,2010:/report/aad//4.196 http://re-port.heteml.jp/report/aad/2010/03/favorite-iconfavicon.html 2010-03-24 2010-04-08T11:03:49Z ブラウザでサイトを閲覧したときアドレスバーやお気に入りなどに表示される小さなア... yanase faviconimg.jpg

ブラウザでサイトを閲覧したときアドレスバーやお気に入りなどに表示される小さなアイコンのことをファビコンといいます。Yahoo!なら「Y!」といった感じで、文字だけでなく視覚的にサイトを認識できるというメリットがあります。

今回自社サイトでファビコンの表示を試してみました。会社のロゴ（渦巻きっぽいやつ）はあるもののファビコンとして表示させるにはアイコン（.ico）というファイルをサイズ16×16で作成する必要があります。手順としては、

（１）PhotoshopやFireworksで元ファイルを用意

（２）透明部分がなければjpgまたはgifで、
　　　透明部分があれば透明gifまたはpng32で保存

（３）アイコン（.ico）に変換
　　　ソフトで変換→@icon変換
　　　ブラウザで変換→アイコン（icon）変換ツール

（４）デスクトップに持ってきて確認→OKならアイコンが表示される

（５）head内にコードを書いてアイコンと一緒にアップロード
<link rel="icon" href="http://yourURL.com/favicon.ico" type="image/x-icon" />
<link rel="Shortcut Icon" href="http://yourURL.com/favicon.ico" type="img/x-icon" />

です。

３）の変換のするサービスは検索するとたくさんでてきますが、変換結果は方法によってだいぶ異なりました。pngからの変換だと劣化（カクカウ）してしまう印象です(>_<)
そんななか、アイコン（icon）変換ツールはかなり良い感じでアイコン（.ico）に変換してくれました。

アイコン（.ico）への変換さえ上手くいけばお手軽にサイトの差別化が図れます！
]]> Firefoxでリンクを別ウィンドウで開く tag:re-port.heteml.jp,2010:/report/aad//4.195 http://re-port.heteml.jp/report/aad/2010/03/firefox-1.html 2010-03-18 2010-03-18T00:53:20Z 前回の投稿から3ヶ月以上たっています。普段サイトは更新しましょうと言っている立... yanase
リハビリがてらにFirefoxの小ネタです。
リンクをクリックしたとき別ウィンドウで開きたい時って結構ありませんか？
そんなときはリンクの上で右クリックして...
「リンクを新しいタブで開く」をクリックすればOK。
もっと手っ取り早くやるにはCtrl＋左クリックでもOKです。

元ページを残して移動したい場合に使えるFirefoxの小ネタでした。
]]> MTOSでサイトを作成しました tag:re-port.heteml.jp,2009:/report/aad//4.182 http://re-port.heteml.jp/report/aad/2009/11/mtos.html 2009-11-27 2009-11-27T04:43:13Z MOVABLE TYPE 5が昨日リリースされました。4を使いこなす前にバージョ... yanase MOVABLE TYPE 5が昨日リリースされました。4を使いこなす前にバージョンがアップししまった...

さてそんなMT4で作成したサイトがあるのでご紹介したいと思います。MTといってもSixapartのサポートなどがなかわりに、フリーで利用できるオープンソースのMTOS4です。

omaezaki-event.gif
御前崎市イベント案内サイト

御前崎市のイベント案内サイトでイベント毎に内容がごそっと変わります。基本的には印刷物が先行してその内容をWEBに落とし込むというスタイルです。「ひとつのイベント＝ひとつのBLOG」として扱っているので、過去のイベントもそのまま残してあります。

MTやMTOSの特徴として「複数のBLOGの運営がしやすい」ということが上げられますが、まさにその特徴を利用しています。システムメニューのグローバルテンプレートを利用するとナビゲーションやフッターなどがそれぞれのBLOGで共通化できて、大変便利でした。

そんな御前崎市イベント案内サイトですが...週末（11/28・29）は
「御前崎市大産業まつり」が開催されますw
楽しくてお得なイベント満載ですが、個人的にオススメは「お餅投げ」！すごい量のもちが四方八方から飛んでまいります＾＾；
この週末は御前崎市役所へ行ってみてはいかがでしょうか。

2007omaezaki_movie.jpg　
↑もち投げの様子（動画）
]]> IE8・IE7・IE6・IE5.5を同時にチェック出来るIETester tag:re-port.heteml.jp,2009:/report/aad//4.179 http://re-port.heteml.jp/report/aad/2009/11/ie8ie7ie6ie55ietester.html 2009-11-06 2009-11-06T06:59:55Z 前回の投稿から1ヶ月もたってしまいました＾＾；IE8・IE7・IE6をそれぞれス... yanase
IE8・IE7・IE6をそれぞれスタンドアローンで起動する方法をご紹介しましたがもっと手軽にIE8・IE7・IE6をチェックする方法があったので紹介します。

方法はとても簡単でIETesterというソフトをインストールするだけ。IE8と同時に使用していますが、特に不具合はありません。それぞれをスタンドアローンでインストールするより手軽ですし、一度にIE5.5～8までチェックできるのでWEB担当者には便利です。

IEtest (beta)できちんとレンダリングされているかチェックしてみましたが、問題なさそうです。

ietester_ie6.gif
↑IETesterでIE6の画面を開いたところ、表示ページはIEtest (beta)
IE6だと全てNG。

ietester_ie8.gif
↑IETesterでIE8の画面を開いたところ、表示ページはIEtest (beta)
IE8だと全てOKになりました。
]]> パワーポイントをPDF化すると文字が消える？対策 tag:re-port.heteml.jp,2009:/report/aad//4.173 http://re-port.heteml.jp/report/aad/2009/10/pdf.html 2009-10-05 2010-12-21T02:30:04Z やなせです。みなさんパワーポイント使いこなしていますか？私はほとんど使ったことが... yanase
みなさんパワーポイント使いこなしていますか？私はほとんど使ったことがなく馴染みの薄いソフトなのです。先日パワーポイントの内容をPDF化する必要があったのですが、メニューの「Acrobat」からPDF化すると文字がごっそり消えてしまうという事態に直面してビックリしました。バグでしょうか？

Google先生に教えていただいた有効な対策を2つ紹介します。

（１）Acrobat Writerの設定を変えてみる（Acrobat Writerをインストールしてある場合）
「印刷」→「Adobe PDF」→「プロパティ」→「用紙／品質」→「詳細設定」から「PostScript オプション」で「エラーが低減するよう最適化」を選択してPDF化

setting-pdf.gif

これでほとんど解消したのですがひらがなの「が」が消えたままです(>_<)


（２）2007 Microsoft Office プログラム用 Microsoft PDF/XPSの利用
リンクからプログラムをダウンロード、インストール後「名前をつけて保存」→「PDFまたはXPS」を選択して保存

go-pdf.gif

この方法で文字が消えることなくPDF化できました。WordやExcelで文字が消えてしまったことは今までないんですけどね...上記のようなプログラムが配布されているのはやはりバグなんでしょうか。とりあずパワーポイントでもPDF化できて良かったです。

]]> ストリートビューのプライバシーについての動画がカワイイ tag:re-port.heteml.jp,2009:/report/aad//4.171 http://re-port.heteml.jp/report/aad/2009/10/post-12.html 2009-10-02 2009-10-02T05:58:10Z Googleで検索したり、Gmaiやリーダーなどを利用したりと日々Googleに... yanase 日々Googleに個人情報を提供しているやなせです。
※その分以上の見返りはうけていますが＾＾；

先日兵庫県尼崎市の地図を制作することがあったのですが、ストリートビューが既に利用可能になっていて地図の校正に役立ちました。私の住んでいる浜松市ではまだ利用できなかったです。

そんなストリートビューのステキなビデオがあったので紹介します。
デリケートなプライバシー問題にカワイク取り組んでいますよ～



う～ん、ひたむきに働くすがたにジーンときます。
これで訴えられる件数は減ったりするのでしょうか＾＾；

]]> Jordanのヒストリーサイトがすごい tag:re-port.heteml.jp,2009:/report/aad//4.170 http://re-port.heteml.jp/report/aad/2009/09/jordan.html 2009-09-11 2009-09-11T06:04:39Z Jordan : History of FlightFLASHサイトの紹介です... yanase jordan.jpg
Jordan : History of Flight

FLASHサイトの紹介です。ここまで凝ってるとため息しかでないですねぇ。
それぞれのページのクオリティーもすごいですが85年～09年までとボリュームもすごいです。
各ページにはいろいろとギミックがあり、いろいろなページを見て（触って）みたくなります。
制作はBLAST RADIUSです。

ちなみ私はAir Jordan一足ももっていません＾＾；
]]>