ホームページ作成をするホームページ制作Fが更新する情報を月ごとに紹介-2014年11月

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

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

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

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

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

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

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

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

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

Illustratorで作成した、こちらの色付き文字

色相を変えずに色替えしたい、すべての色を同時に色替えしたいと思うことがあると思います。
今回は、その動作を簡単に行える方法をお伝えします。

１，まず、色を変えたいオブジェクトを全て選択し、
「編集」→「カラーを編集」→「オブジェクトを再配色」をクリックします。

もしくは、メニューバーの下にある虹色の円をクリックします。

２，出てきたポップアップの「編集」をクリックします。

３，右下の離れた鎖のようなアイコンをクリックしすると、つながったようなアイコンに変わるので、
その状態のまま円をドラッグしたり下のスライダーで色を変えると、色が変わります。

目視しながら変更できるので、「ここだけ別の色にしたいな・・・」という場合は、
鎖を最初の状態にし、変更したい色の円をクリックすると色を変えることが出来ます。

４，変更して、「OK」をクリックすると、色が変わりました！

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

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

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

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

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

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

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

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

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

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;
}

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

ボタンの角を丸くする

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

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

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

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

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

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

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

ボタンに影を付ける

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

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

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

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

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

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

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

弊社ではEC CUBEにてショッピングサイトを複数構築していますが、
あるECの管理画面でだけ、バージョンアップ後、
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って結構管理画面上でちょこちょこ設定ができるよなあと思い、
マスターデータ管理とか、パラメーター設定のあたりを確認。

す、すると！！！！ありました！！！！
絶対１００％問題と思われるものが！！

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

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

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

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

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

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

しかし中には、すっかり色あせてしまったものもあり・・・・

こういった写真を鮮やかに蘇らせる一番簡単な方法が、
Photoshopの「イメージ」＞「色調補正」で、「彩度」を上げる方法です。
彩度を上げて、明度とコントラストを少々上げると

鮮やかになります！
もちろんやりすぎたら不自然になりますが、所要時間30秒ほどです。
ちなみにこの写真も少々やりすぎました。
でもちょちょっといじってこんな鮮やかになるなら、この手間を惜しむのは少々もったいないと思います！

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

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

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

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

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

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

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

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

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

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

影（ドロップシャドウ）をつける

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

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

グラデーションを入れる

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

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

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

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

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

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

任意の名前を入れて「記録」を押すと、
ここから行った操作のを全て記録していきます。（一部、記録されない操作があります）

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

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

ボタン一つで同じ作業を繰り返すことができました。

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

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

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

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

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

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

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

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


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

赤くなったボタンがそうです。

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


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


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



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



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


さて、本題はここからです。
先ほど切り抜いた画像を拡大します。
（わかりやすいように背景に赤を入れました）

境界に白いものが残っているのがお分かりでしょうか。

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


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



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


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


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

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

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

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

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

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