カラー画像を「白黒」でモノクロに変換@photoshop

書籍の仕事で、カラー画像をモノクロ変換する際に、何となく自己流でやっていたのですが、良い方法を見つけたのでリンクしておきます。
「白黒」は知らなかった。photoshop使いこなせてないやん。。

[白黒]調整レイヤーでモノクロ画像に変換

1:[レイヤー]パネルで、下にある[塗りつぶしまたは調整レイヤーを新規作成]ボタンをクリックして、メニューから[白黒]を選択。

2:属性パネルのプリセット「初期設定」には一般的に対応できる数値があらかじめ設定されている。
右上の[自動補正]ボタンをクリックすると、画像に適した補正が自動的に行われ、各設定項目ごとに適正値が振り分けられる。

3:左上の「指先ツール」で、画像上をドラッグして直接操作できるモードに切り替わりり、感覚的に補正出来る。

4:デフォルト値では階調の変化が少なかった部分(カラフルな色)を、モノクロで表現できるように調整をする。

*バージョンCS3以上、画像は[RGBカラー]モードのみ対応

「炭プラスラボ」様のサイトを制作しました。

しばらく書かない内に年を越えてしまいましたw。今年も楽しくやっていきます!

20140205082132

さて、upしたのはもう去年の9月ですが「炭プラスラボ」様のサイトを作らせていただきました。
食べる炭を主体にしたサプリメントの会社で、炭の力は大層良いらしいそうです。確かに、古来から日本人は炭を非常に巧く生活に取り入れてましたよね。私も今飲ませていただいています♪
これはupまでの制作期間が短く、upした後も手を加えましたが、ティファニーカラーを基調に清潔感と誠実な会社イメージを心がけました。

SEO効果ですが一番力を入れた「炭サプリ」というキーワードが、4ヶ月後に1位になりました!
クライアント様に喜んでもらえて良かったです。
本当に基本的な対策をしているだけですが、学校で習った事がとても役に経っています。今の所、作成したサイトは、検索上位になっています。案外対策をしていないサイトも多いのかもしれませんね。SEO業者って割と法外な値段取ってますもんね〜。
後、キチンとしたコンテンツも大事だなあと思います。

.htaccessについて

今更だけど、.htaccessが今イチ分かっていなかったのでメモ。
●htaccess(ドットエイチティーアクセス)とは、ApacheなどのWebサーバで使用できる、Webサーバの動作をディレクトリ単位で制御するためのファイル。

Apacheではhttpd.confという設定ファイルでApacheの設定を行うが、Webサーバの要となる設定ファイルであるため、Webサーバの管理者でないと設定を変更することができない。.htaccesshttpd.confで.htaccessの利用を許可している場合、Webサーバ管理者のみならずウェブサイトの管理者レベルでApacheの一部設定を行えるようにしたものである。

●htaccessで行える設定は全てhttpd.confで行うことができ、パフォーマンスやセキュリティの観点からそれが推奨されている[1]が、実際はサーバー管理者も.htaccessを使うケースが多い。

●htaccessを特定のディレクトリに設置すると、.htaccess内に記述された内容が設置されたディレクトリとその下層のディレクトリに対して適用される。また、下層ディレクトリの設定が上層ディレクトリと設定が矛盾した場合は下層ディレクトリ側の設定が優先される。

用途

httpd.confに記述することができる設定のうちの多くは.htaccessにも記述することができる。その名前からアクセス制御が中心と思われがちだが、実際は関係ない。以下は主要なものを記述しているが、このほかにも様々な使われ方がある。

◉IDとパスワードによる制限 - Basic認証やDigest認証を用いて特定のIDとパスワードを用いてログインしないと閲覧できないようにする。
IPアドレスリモートホストによる制限 - 特定のIPアドレスリモートホストのアクセスのみを許可、あるいは拒否を行えるようにする。
◉エラーメッセージのカスタマイズ - IDとパスワードが違う、アクセスが禁止されている、ページが見つからない、サーバーでエラーが生じたといったエラーメッセージを独自のものに差し替えることができる。
MIMEタイプの指定 - MIMEタイプを用いてファイルが何の種類(JPEG、zipなど)であるか判別させることができる。

メールフォーム(CGI)設置の覚え書き

新規サイトのメールフォームの設置について、恥ずかしながら前回はロリポップのフォームを貼付けただけなので、かなり苦労したので覚え書き。
いろいろ調べたが、クライアントのWADAXサーバーが使用している「KENTWEB」に決定。
フォームのデザインは既に作り込んでいるので,それが作動すれば良い。。。。だけだったんだけど、大変でした!

1:サーバーから簡単インストールしてみたら「cgi-bin」フォルダに入る。

 動かしたいのは既に作ったフォームなので、外部フォルダのファイルからCGIを読み込もうとするがエラーで全く繋がらない。
ので、もっと簡単そうな「postmail-utf」を使う事にする。。。。

2:init.cgiのメールの送信先を変更

# 送信先メールアドレス
$cf{mailto} = '○○○@○○○.ocn.ne.jp';

3:.htaccess」が無かったので新規作成してCGIの実行を許可する。

Options ExecCGI //CGIを実行できる領域に設定

●動かないのでCGIを「cgi-bin」の外に設置して、一つのフォルダにカスタマイズしたファイルも全部入れ込んでみる。

cgi-bin」の外にフォルダをおきたい時には、以下を書き込む。

Options +ExecCGI 
AddHandler cgi-script .cgi //cgi-bin以外でのCGI実行許可

※後で知ったが、WADAXはCGIをどこに置いてもOK。
コントロールパネルにログインし、画面左側[WEB管理]--[.htaccess設定]から編集可能。

4:パーミッション(アクセス権)をサーバー指定に変更。

WADAXのパーミッションに変更。cgiが設置されているディレクトリのパーミッションを「705」に設定。
(私が使用している「File Zilla」の場合だと、右クリックで出て来る画面の一番したで変換出来る)

5: sendmailのパス【サーバパス】が違ったので変更。

プロバイダの指定を確認のこと

$cf{sendmail} = '/usr/sbin/sendmail';


6:「check.cgi」でチェックする。

okが出たので、第一歩クリア!エラー続きだったけど、やっと送信成功しました〜。
という事で大変だったけど,勉強になりました。

参考

●入力必須項目を強制指定する(半角スペースで複数指定可)
ラジオボタンチェックボックス対策
name値を「need」、value値を「必須項目1 + 半角スペース +必須項目2 + 半角スペース ...」
(例)

●2つの入力内容が同一かをチェックする
name値を「match」、value値を「項目1 + 半角スペース + 項目2」
(例)

<form action="./postmail.cgi" method="post">
<input type="hidden" name="need" value="name email 問合せ種別 メッセージ" />
<input type="hidden" name="match" value="email email2" />

商用利用可のピクト The Noun Project

DTPのお仕事の方で、時々ピクトを使用しています。
デザイン性の高いピクトだと、アクセント的にも使用出来て便利。
自分で作るのも大変なので,良くネットから拾ってますが、ここが気に入っています。
facebookアカウントからログイン出来ます。
ただ一つ一つダウンロードが必要だけどね。自分用にメモ。
20131022145743

ヘアーインベスト様のwebを作成しました

20130718072329

upしたのは3月ですが、(株)ヘアーインベスト様のサイトを制作させていただきました。
水素サプリ用に、水素サンゴパウダーの原料を提供している会社のサイトです。製薬会社の様なイメージでとのご注文で、水素の要素と原料のサンゴのイメージも取り入れた、清潔感のあるサイトにしました。
水素は、白髪・育毛・美容・健康に良いらしいですよ!
SEO的には、キーワード検索で、社名や商品名では当然1位ですが、「水素育毛」「水素白髪」でもGoogleで1位になっています。
育毛関係にチカラを入れている会社なので、良い検索結果が出てひとまずホッとしています。
正しいコードを書くのが、やはり大切なんですね。

webは紙媒体と違い、一度印刷すれば終わりではなく、upしてからそのサイトをいかに育てるかも大切ですよね。
気になる箇所もまだあるので、少しづつ修正して行こうと思います。

CSS3をInternet Explorer5.5から8でも使用できるようにする

久々のサイト作りで、当方のMacでは綺麗な組みもIE7以下では、崩れてしまっていたのが発覚。。。(泣)
どうすればいいんでしょう。。。?ああ、古いIEなんてもう捨ててしまいたい。
IEがらみで、便利そうなのでメモっとく。

CSS3をInternet Explorer9以前のバージョン(IE5.5〜8)でも扱えるようにする方法

Javascriptライブラリで提供されているIE9.jsを読み込む。

<!--[if lte IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->

擬似クラスの対応
属性セレクタの対応
透過PNGの対応
position fixedの対応
margin autoの対応(margin: 0 auto;でコンテンツを中央揃え)
max-heightやmin-heightの対応
その他バグ修正 など

HTML5の新要素にInternet Explorer8以前も対応させる

html5.jsを読み込ませる

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

section・・・汎用的セクションを表す
article・・・独立して配信可能な情報を表す
header・・・セクションのヘッダーを表す
footer・・・セクションのフッターを表す
aside・・・補助的な情報を表す
nav・・・主要なナビゲーションを表す
hgroup・・・h1〜h6の見出し要素をまとめる
figure・・・文章中の図を表す

透過PNGのデータを背景画像に配置したとき、IE6で表示させる方法

以前も書いた気がするけど、まとめておきます。

DD_belatedPNG
このminiの方をダウンロード

<!--[if IE 6]> /* IE6にのみスクリプトを実行するという宣言 */
<script src="js/DD_belatedPNG_0.0.8a-min.js" type="text/javascript"></script> /* jsファイルの場所を記述 */
<script>
DD_belatedPNG.fix('img, .png_bg'); /* 'img, .png_bg' の部分にスクリプトを反映させる要素名、id名、クラス名を記述 */
</script>
<![endif]--> /* IE6にのみスクリプトを実行するという宣言 */

●透過PNGや角丸などをIE6や7でも実装出来るJavaScriptのメモ