ホームページ制作Fの業務を月ごとにご紹介

2014年11月28日(金)
Illustratorで異体字を使いたい

漢字には同じ意味で形の違う文字(異体字、異字体)が存在します。

例えば、「高」という字には「髙(はしごだか)」と呼ばれる異体字が存在します。
「髙(はしごだか)」なら通常の変換でも出せるのですが、
通常の変換では出ない漢字も少なくありません。

そんな時、字形パレットから選ぶと簡単に異体字を入力することができます。

まず、「書式」の「字形」で字形パレットを開きます。

字形パレットメニュー

変えたい文字を選択すると、字形パレットでその文字が選ばれます。
選ばれた文字に小さい▶がついていれば、異体字が存在します。

字形を変える前

高をしばらくクリックしていると、異体字の一覧が表示されます。

字形パレット

あとは変えたい異体字を選択すれば、異体字が入力できます。

字形を変えた後

また、字形パレットで記号なども入力することができます。

字形パレットで記号入力

読み方の分かりにくい記号などを入力する時に便利です。

2014年11月27日(木)
Illustratorで複数のオブジェクトの色替えを同時に行う方法

Illustratorで作成した、こちらの色付き文字
Illustratorで作成したオブジェクト
色相を変えずに色替えしたい、すべての色を同時に色替えしたいと思うことがあると思います。
今回は、その動作を簡単に行える方法をお伝えします。


1,まず、色を変えたいオブジェクトを全て選択し、
「編集」→「カラーを編集」→「オブジェクトを再配色」をクリックします。
2014112702-01.jpg
もしくは、メニューバーの下にある虹色の円をクリックします。
2014112703-01.jpg

2,出てきたポップアップの「編集」をクリックします。
2014112704-01.jpg

3,右下の離れた鎖のようなアイコンをクリックしすると、つながったようなアイコンに変わるので、
その状態のまま円をドラッグしたり下のスライダーで色を変えると、色が変わります。
2014112705-01.jpg
目視しながら変更できるので、「ここだけ別の色にしたいな・・・」という場合は、
鎖を最初の状態にし、変更したい色の円をクリックすると色を変えることが出来ます。

4,変更して、「OK」をクリックすると、色が変わりました!
2014112706-01.jpg

この方法は、グラデーションを作成した時に色替えしたい時にとても便利な方法なので、
是非ご利用してみてください!!

2014年11月26日(水)
デザインが苦手でもCSSなら3ステップでボタンが作れる

ホームページでよくある「くわしくはこちら」などのボタンを用意する時、
PhotoshopやIllustratorなど画像編集ソフトを使って作成すると思います。

Illustratorで作成したボタンの例

しかし画像でボタンを作成した場合、今後ボタンの色を緑から紫に変えたい、
大きさも変えたいし中の文字も変えたいとなると、何か変更する度に
画像編集ソフトを立ち上げて修正して、画像を保存しなおす必要があります。


そんな煩わしさを解消できる上に、デザイン素人でもCSSを使って
簡単にボタンの作成、変更ができる方法がありますのでご紹介します。


CSSだけでここまで出来る!イラレ顔負けの機能たち
 先にご覧になりますとこれからの手順がより分かりやすいと思います
※今回はGoogleChromeで見た時に表示されるCSSで説明しています


まずはボタンにしたい土台を用意

ボタンにしたい土台

まずはhtmlでボタンにしたいリンクタグを設置します。

<div class="dl"><a href="dl.html">無料ダウンロード</a></div>


次に、リンクタグがボタンとして押せるようにCSSで四角形にしていきます。

div .dl {
width: 250px;
background: #00cc33;
}


div .dl a {
display: block;
font-size: 20px;
font-weight: bold;
padding: 20px 40px;
color: #fff;
text-align: center;
text-decoration: none;
}

でもこれだけだと、まだボタンだと分かりにくいですね。


ボタンの角を丸くする

ボックス要素の角を丸くする

次にボタンらしさを出すために、端っこの角を丸くします。


CSSではdiv.dlを以下のようにしました。少し、ボタンっぽくなってきました。

div .dl {
width: 250px;
background: #00cc33;
-webkit-border-radius:5px;  ←追加したCSS
}


ボタンの色をグラデーションにする

更に「押せる」感じを出すために、ボタンの色をグラデーションにします。

ボックス要素の背景色をグラデーションにする

CSSではdiv.dlを以下のようにしました。これだけでも、かなりボタンっぽくなりました!

div .dl {
width: 250px;
background:-webkit-linear-gradient(#C5E021, #00CC33);  ←変更したCSS
-webkit-border-radius:5px;
}


ボタンに影を付ける

最後にボタンに影を付けてより立体的に仕上げます。

ボックス要素にドロップシャドウを付ける

CSSではdiv.dlを以下のようにしました。

div .dl {
width: 250px;
background:-webkit-linear-gradient(#C5E021, #00CC33);
-webkit-border-radius:5px;
-webkit-box-shadow:#999 0 4px 5px;  ←追加したCSS
}

ボタン完成まで3ステップ!
角をもっと丸くしたいなど修正したい時もらくらくです。



実はFireFoxのダウンロードページでも同じCSSの技法が使われています。

FireFoxのダウンロードボタン

Firefoxダウンロードページ
https://www.mozilla.org/ja/firefox/new/



ホームページに沢山ボタンを設置したい、でもいちいち画像で作るのは面倒!
などなどお悩みのユーザー様、是非お試しください。

2014年11月21日(金)
Photoshopで画像を徐々に透過する方法

画像をグラデーションのようななめらかな透過にする方法です。

d3.jpg

d32.jpg

画像が背景の場合はレイヤー上で右クリックして「背景からレイヤーへ」を選択し、変換してください。

d33.jpg

レイヤーウィンドウ下のレイヤーマスクを追加をクリックします。

d34.jpg

ツールからグラデーションツールを選択します。


d35.jpg

あとは透過したい方向にカーソルをドラッグするだけです!

d36.jpg

透過できました!

d37.jpg

透過したことによって合成もしやすくなりました。
また、レイヤーも背景から変換しているので作業がしやすくなっています。

2014年11月19日(水)
EC CUBEの管理画面でPCレイアウトがスマホ版になる

弊社ではEC CUBEにてショッピングサイトを複数構築していますが、
あるECの管理画面でだけ、バージョンアップ後、
PCレイアウトがカラムなしになる現象が発生・・・・

PCレイアウトがスマホ版になる

最初はスマホ版のレイアウトを選択したのかと思ったけれど、
選択されているのはしっかりとPCレイアウト。
device_type_idもきちんと10になっていて、PCのものになっている。
もしかしたら管理画面上の表示がこうなってるだけで、
実際登録すればきちんと表示されるのかも、と思ってテストページを作成して
登録にチャレンジするも、見事に崩れてしまう。。


何かデータベースの移動の時にうまく
引き継げていないものがあるのか・・・・・


データベースのmtb_device_typeやdtb_blocpositionのあたりが
あやしいのではないかと探ってみるけれど、正常なデータベースと見比べて全く異常なし!

そこで、全くいじっていない同じバージョンのEC CUBE2.13.1ファイル一式を
サーバー上にアップして同じデータベースを参照して検証!


すると、レイアウトが正常に表示される!!

ファイルの問題なら結構大丈夫かもしれないと、
明るい気持ちになりながら管理画面のデザイン関連のこのあたりのファイルを
デフォルトのもので上書き。


/data/class/pages/admin/design/LC_Page_Admin_Design.php
/data/Smarty/templates/admin/design/index.tpl


いろんな記事を調べながら、それらしいものを試すもののうまくいかない。

ふと、EC CUBEって結構管理画面上でちょこちょこ設定ができるよなあと思い、
マスターデータ管理とか、パラメーター設定のあたりを確認。


す、すると!!!!ありました!!!!
絶対100%問題と思われるものが!!


DEVICE_TYPE_PC 端末種別: PCなるものにおいて 2 という数字が!!

パラメーター設定


今度こそ絶対解決と思い、自信をもって10に変更してみたところ、
無事に問題が解決!!!!


みんながカタカタと真面目に仕事をしているので、
さけびたい気持ちをぐっとこらえて、こっそりガッツポーズ。

解決できると本当にうれしい!けど、一体全体なぜこんなことに・・・・
バージョンアップは本当に慎重にしないと大変です。

2014年11月19日(水)
スマートフォン片手に紅葉狩り

11月中旬、大分は紅葉真っ盛りということで、週末に紅葉狩りに行ってきました!
デジカメを持って行こうかと迷ったのですが、
スマホのカメラの性能に期待したのと、紅葉にそこまで
熱い期待を寄せていなかったのでスマホだけを持って出かけました。


行ったのは、大分の岡城阯というところで、行ってびっくり!
とてつもなく広く、城跡と紅葉がマッチしてキレイでした。
そして撮った写真も、キレイ!!最近のスマホすごい!
こちらの2枚は色の調整、一切行っていません。
きれいに撮れた紅葉の写真一枚目
きれいに撮れた紅葉の写真二枚目


しかし中には、すっかり色あせてしまったものもあり・・・・
発色の悪い紅葉写真

こういった写真を鮮やかに蘇らせる一番簡単な方法が、
Photoshopの「イメージ」>「色調補正」で、「彩度」を上げる方法です。
彩度を上げて、明度とコントラストを少々上げると
紅葉が鮮やかになった写真
鮮やかになります!
もちろんやりすぎたら不自然になりますが、所要時間30秒ほどです。
ちなみにこの写真も少々やりすぎました。
でもちょちょっといじってこんな鮮やかになるなら、この手間を惜しむのは少々もったいないと思います!


せっかく撮った写真を、脳内の思い出そのままに生き返らせれたらいいですね。

2014年11月17日(月)
画像の一部分のみ暗くする方法

撮った写真を見たとき、
例えばペットの写真で背景が明るすぎて顔が暗すぎるですとか
室内で撮った写真で窓の外の光が強すぎるという場合があります。

そういった写真全体ではなく一部分のみ明るさを変えたいときの
調整方法の一つを紹介します。

電車の写真
こちらの写真の運転席の窓をもう少し暗くして落ち着かせたいと思います。


レイヤーパネル
まずレイヤーパネルで新規レイヤーを追加し、
モードを「通常」から「オーバーレイ」に変更します。


ブラシツールと描画色
ツールパネルよりブラシツールを選択し、描画色を黒にします。
そしてブラシのサイズを調整しながら、暗くしたい窓の部分を塗っていきます。
はみ出した部分は消しゴムツールで調整します。

不透明度.JPG
塗り終わったらレイヤーパネルの不透明度をちょうどいいバランスに変えます。

電車の写真完成
いかがでしょうか。光の反射が抑えられたようになりました。
今回は暗くしましたが、逆に明るくしたい場合には「描画色を白」にするだけです。
この方法も簡単にできますので利用してみてください。

2014年11月14日(金)
photoshopで画像を水平にする

建築物などで傾いているものがあるときに便利な修正方法です。

d20.jpg

水平にしたい画像を準備します。
赤線がまっすぐ引いた線です。だいぶ傾いています。

d21.jpg

ツール一覧のものさしツールを使用します!

d22.jpg
ものさしツールを使用して直線を引きます。
(わかりやすくするために画像を薄くしています)

d23.jpg
イメージ>画像の回転>角度入力から角度を入力します。

d24.jpg
画像の傾きが修正されました!
傾きを修正したぶん画像のまわりに余フチができましたので必要なサイズにトリミングしてください。


d25.jpg

ものさしツール以外でもガイドラインを使用することもできます。
画像の傾きを修正するだけで画像の雰囲気も変わる事が多いですので、
是非活用ください!

2014年11月11日(火)
CSSだけでここまで出来る!イラレ顔負けの機能たち

2年ほど前から CSSが2から3が登場してからというもの
えっ!こんなことまで出来ちゃうの!?という驚きの機能が登場しました。

ただ、出来たばかりというのもあってインターネットエクスプローラーで
表示ができないなどの問題がありましたが、近年マイクロソフトさんもやっと対応してくれて
取り入れる作り手さんもだんだん増えてきました。
今日はそのグラフィックソフト要らずの少しのコードで劇的変化する一例をご紹介致します。

影(ドロップシャドウ)をつける

dropshadow01.jpg


box-shadow: 5px 5px 5px #000; を指定


box-shadow: 0px 0px 5px #000 inset; insetを入れることで内側もできます。

グラデーションを入れる

grade.jpg


薄いグレーから濃いグレーにグラデーションを掛けました。

こんな風にcssだけで手の込んだ見出しなどを簡単に作ることができます!
画像ではないので、更新の時もテキストを変えるだけでラクラク変更が可能です!

一度コツを掴むのに少し時間がかかりますが、これからのHTMLにおいてマスターしておいて損はないので
是非是非チャレンジしてみてくださいませ!

2014年11月10日(月)
画像リンクが切れている時の確認方法

他の人からIllustratorのデータを受け取りファイルを開く時に、
次のような画面が出ることがあります。

1110_1.jpg

この場合、ファイルを移動したために、一時的に画像リンクが切れていて、
使用した画像が入っているォルダからリンクを繋ぎ直すことができれば問題ありません。

しかし次のような表示が出てしまうと...
1110_2.jpg

この場合は画像自体が存在しない場合があります。
このままではファイルが開けないので、とりあえず切れているリンクを「無視」して、
ファイルを開いてしまいます。

画像が数枚程度ならばどの画像リンクが切れているかすぐ見つけることが出来ますが、
数十枚ともなると探すだけでなかなか一苦労です。

そんな時は、メニューの「ウィンドウ」から「リンク」ウィンドウを表示させます。
そして、リンクウィンドウの右上のメニューから「見つからないリンク」にチェックを入れます。
そうすると、画像リンクが切れているファイル名だけが表示されます。

1110_3.jpg


そこから一つ選択して、下のバーの左から二番目にある
「リンクへ移動」をクリックすると、どの画像リンクが切れているのか一目瞭然です!

1110_4.jpg


これで、もしもアートボード外にある不要な画像であれば消してしまうことも出来ますし、
必要な画像はファルダをもらった相手に問い合わせればいいとういうわけです。

ファイルをやりとりするときはお互いに手間がかからないよう、
不備がないようにしっかり準備と確認をしておきましょう。

2014年11月 7日(金)
同じ操作を他のデータでも実行したいならアクションが便利

同じ操作を他のデータでも実行したい場合、いちから同じように操作するのは大変です。
そこで便利なのが「アクション」機能。

「アクション」とは行った操作を記録して、同じ操作を自動で実行できる機能です。
使い方は簡単。

アクションパネルの「▼≡」マークから「新規アクション」を選択します。
新規アクションのパネル

任意の名前を入れて「記録」を押すと、
ここから行った操作のを全て記録していきます。(一部、記録されない操作があります)
アクションを記録中

アクションパネルの「■」を押すと、記録を中止します。
記録を中止

記録したアクションは「▶」を押すと再生されて、
記録した操作を繰り返し実行していきます。
アクションを実行

ボタン一つで同じ作業を繰り返すことができました。
アクション実行後

このように便利なアクションも何十点、何百点も行うのは面倒です。
こんな時には「自動処理」の「バッチ」を使うことをオススメします。

バッチ処理はフォルダ内の全てのデータや現在開いているデータにアクションを実行していくという処理です。
「ファイル」→「自動処理」→「バッチ」を選択します。
バッチ処理のメニュー

実行したいアクションを選択して、「ソース」で「フォルダー」か「開いたファイル」を選択します。
・「フォルダー」は任意のフォルダを選択してその中にあるデータにアクションを実行します。
 フォルダは「選択」ボタンを押して選ぶことができます。
・「開いたファイル」は開いているデータ全てにアクションを実行します。

下にある4つのチェックは適宜使用してください。
・「開くコマンドを無視」はアクションに「開く」が記録されていても開くを実行しません。
・「サブフォルダをすべて含める」は選択したフォルダ内にあるフォルダも実行の対象になります。
・「開くダイアログを非表示」は「開く」のダイアログを表示しません。
・「カラープロファイル警告を非表示」はカラー環境が違うファイルを開いた時に警告を表示しません。

バッチ処理の画面

次に実行後の処理を選択します。
・「なし」はアクションに「保存」と「閉じる」コマンドが記録されている場合に選択します。
・「保存して閉じる」は上書き保存してファイルを閉じる処理をする場合に選択します。
・「フォルダー」は任意のフォルダに別名で保存する場合に選択します。
実行後の処理

あとは「OK」を押すと、自動でアクションを実行していきます。

これで全く同じ操作を大量のデータに実行するのが楽になることうけあいです。

2014年11月 6日(木)
クイック選択ツールについて

ホームページでよく見る、
人物だけ切り抜いた写真。


白い背景に人物だけ置くにしても、
他の写真と合成するにしても
とにかくやたらと多く使います。
そんな時に使いたくなるのが「クイック選択ツール」
quick.JPG
赤くなったボタンがそうです。

何をするものかというと、
「隣接した、色の近い範囲(ピクセル)を選択する」という
なんとも便利な機能です。


選択した箇所を切り取ってしまいさえすればおしまいなので、
これを使うと、ものの1分程度で切り抜きができちゃいます。


試しにやってみましょう。


kirinuki01.JPG
このフリー写真の女性を切り抜いてみます。
背景が入り組んでいないので、とても簡単です。


kirinuki03.JPG
ホントに1分足らずで出来ました。
このツールを使っていけば、背景に何があるかにもよりますが、
楽にどんどん切り抜きが出来ます!


さて、本題はここからです。
先ほど切り抜いた画像を拡大します。
(わかりやすいように背景に赤を入れました)
kirinuki04.JPG
境界に白いものが残っているのがお分かりでしょうか。

自動で切り抜けるとても便利な機能だからこその欠点なのですが、
細かいところの調整が苦手のようです。


デザイナーが写真を切り抜くときには、
「ペンツール」などを使用し、細かいところまで
きれいに形が出るようにするのが普通です。
kirinuki05.JPG


こちらは手動で範囲を指定するので、
余計な色が入り込むことはありません。
切り取りの際には、本来の輪郭の、やや内側を切り抜くよう心がけると、
外側との境界線が入り込むことなく、綺麗に切り抜くことが出来ます。


ペンツールはどう使うのかというと、
ちょっと長くなりそうなので別の機会にご紹介できればと思います。


まるで、「クイック選択はダメだ」のような記事になりかけてますが、
例えば自分でホームページを運営していて、
「ココにちょっと切り抜いた写真置いてみたいな」なんて時には
大変お手軽で心強い存在です。
欠点を補って余りある便利なツールなので、ぜひ一度お試しください。

2014年11月 4日(火)
フォルダを別ウィンドウで開く方法

この状況をなんと表現したらいいか迷うのですが、わかりやすく例をとってみますと
パソコン上で一つの【仕事】フォルダを開いており、
【仕事】>【案件】>【制作中】>【A企画様】>【デザイン】>【トップデザイン】
というフォルダを開いているとします。結構奥深くまで来ていますね。


そこで作業をしている時、
「【トップデザイン】のフォルダを開いたまま【A企画様】フォルダの中の【撮影写真】というフォルダも開きたい‥」
と、なることがあると思います。
そうなったら、普通にクリックしただけでは一つのウィンドウがどんどん進みながら開かれるので
今までまたデスクトップにわざわざ戻って【仕事】から開きなおしていました。
通常一つのウィンドウで開く"


それがずっと地味に煩わしく思っていたのですが、何と簡単な方法で別ウィンドウで開く方法がありました。
フォルダを開く時に、一緒に「Ctrlキー」を押す!のみです!
別ウィンドウで開くことができます

同じフォルダ内でデータの保存場所の階層を変更したい場合や重複して開きたい時、
フォルダ内を見比べたい時など、使用頻度はそこまで多いわけではないですがとても便利です。
この機能は私がフォルダを触っている時、どうしても何とかならないかと思ってかなりのだめ元で
当時隣に居た川野に「何とかならないですかね~!?」と持ちかけたのがきっかけです。いやあ、助かりました。


「こんなことできるわけない・・・」の思い込みが思わぬ作業の遅れを招いていることがあります。
色々な知識を積極的に取り入れて効果的に作業を行いましょう!

簡単無料お見積もり

問い合せ内容 見積り  相談  更新管理  PPC広告・SEO対策
  • 売上げアップ
  • 会社拡大
  • ブランド力を持ちたい
  • 新規事業参入したい
  • 単価を上げたい
  • 価格競争したくない
  • 社内環境を良くしたい
  • 経営者が楽になる
  • 社員を成長させたい
  • 良い求人が欲しい
  • 離職率を下げたい
  • 残業を減らしたい
  • 客層をよくしたい
  • 会社がうまく回るようにしたい
  • クレームを減らしたい
  • リピート、口コミを増やしたい
  • ターゲットを絞りたい
  • 会社の方針を明確にしたい
  • SEO対策
内容