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

2015年1月30日(金)
EC CUBEでの送料無料プラグイン

現在構築しているECサイトでメール便配送で送料無料商品がありましたが、

ご存知の方も多いでしょうが、メール便が3/31受付分をもって終了致します。(詳細記事はこちら
それにあたり、本来ならメール便対応でカスタマイズしますが今後どのような形で対応するかが未定でしたので
ひとまずこちらの送料無料対象商品プラグインを導入致しましたがわかりやすく使いやすいです。

ECcubeプラグイン

送料無料プラグイン

設定方法も非常にシンプルで導入後もスムーズに設定が出来ました!

メール便の代わりを探す必要もありますが、当分はこちらで対応させて頂こうと思います。。

2015年1月29日(木)
オブジェクトが地面に立ち上がっているように見せる方法

デザインをしている時、オブジェクトに立体感を持たせたい時、
テクスチャをかけたり、ドロップシャドウをかけたりしますよね。
でも、他より前に出ている用に見せたいから、とドロップシャドウだらけに
なってしまった・・・みたいなことはないでしょうか?
同じ影の付け方でも、ドロップシャドウとはまた違った立体感が
でる影の付け方をご紹介します。

まずはテクスチャなどの効果をつけたこちらのオブジェクト、
柔らかい雰囲気は出てますが、もうひと押し、という感じがします。
0129_1.jpg
そこで、何の変哲もない四角形を作ります。
幅はオブジェクトより一回り大きめにしておきます。
0129_2-01.jpg
ダイレクト選択ツールを使用し、下辺の幅をオブジェクトと同じに合わせます。
0129_3-01.jpg
そして、グレーから透明になるグラデーションをかけます。
グラデーションの加減はバックの色などによって調整してみてください。
0129_4-01.jpg
後はオブジェクトの下辺に合わせてれば、オブジェクトが地面に立っているように見えます!
背景が色付きの場合は、影は乗算にしてみても自然な感じが出ていいかもしれません。
0129_5-01.jpg

2015年1月28日(水)
和漢混植について

デザインをしながら悩むところなのですが、
見出し部分が同じような書体ばかりだと、見た目が単調になる傾向があります。

そんなときの対策のひとつが「和漢混植」。
漢字部分とかな部分で異なるフォントを使って文章を組むことで、
デザイン的に美しく目立つものを作ったり、読みやすいものにするテクニックです。

混植用のフォントがあれば、という条件付きですが、目立たない部分が活きてくると思います。

上が混植前、下が混植した例です。
見出しアンチゴチ実例
ゴシック体だけのものに比べると、ゴシック体とアンチック体の混植(通称アンチゴチ)は
ちょっと読みやすくなっていると思います。
細めのフォントでやると、「漫画のフキダシ」みたいな印象を与えるため、
なるべく太めのフォントにしておくとよいです。

合成フォントを使わなくても、多少の手間をかけるだけでうまく決まると思います。

2015年1月27日(火)
無料で使えるセキュリティソフト

無料で使えるおすすめのセキュリティソフトをご紹介します。


以前は無料のセキュリティソフトとして
ALYac(アルヤック)をおすすめしておりますが、
こちらが有料化となりましたので、新たなセキュリティソフトを模索。


そこでたどり着いたのがパンダセキュリティ。

パンダセキュリティ

精度の高いセキュリティソフトですので、おすすめです。


また、ホームページの更新作業を行う上では
以下のようなことも大切となります。


・FTPのパスワードを16ケタ以上にする。
・FTPソフトに設定情報を残さない。


さらに、このIPアドレスの人しかFTPに接続できない、というように
IPアドレスによるアクセス制限をかけると、
セキュリティはさらに強固なものになります。


ただ、通常IPアドレスというのは
インターネットのルーターの電源を切る度に変わるものですので、
固定のIPアドレスを取得することが必要となります。


固定のIPアドレスは月1,000円程度で契約できるところもありますので、
ウイルスにかかってしまった時のことを考えると、
社内で更新する場合には、よいのではないかと思います。


2015年1月26日(月)
イラレで簡単に作れるキラキラブラシ

今回は、デザインに役立つ、ブラシツールの使用方法についてご紹介します。
前にグラフィックスタイルで作った図形を使用してみます。前の記事へのリンクも置いておきますので、気が向いたらどうぞ。
→"グラフィックスタイルに作った効果を保存!"


では、早速ブラシを作っていきます。

下図のように、オブジェクトを掴んで、ブラシウィンドウに入れるだけです。
(表示されてない人はキーボードF5を押してみてください)
作成した画像をブラシウィンドウへ

「新規ブラシ」というウィンドウでブラシの種類を選択します。
今回はスタンプのように散りばめたいので「散布ブラシ」を選択します。
表示されるウィンドウ

続いて「オプション」が表示されるので、ブラシの大きさ、散布の度合いなどを設定していきます。
数値だけではわかりづらいので、適当に設定してパスへ適用後に、プレビューをみつつ調整するといいと思います。
ブラシの設定内容詳細

これで新しいブラシが作成されました。
ブラシウィンドウに追加されました

早速適用してみたいと思います。
ペンツールで適当にかいた曲線を選択します。
ペンツールで曲線を一本引いた様子

ブラシウィンドウから、先ほど追加したブラシをクリックすると、こんなかんじに。
ブラシで曲線を装飾した様子

ちょっとしたホームページの装飾に、ちょうどいいかもですね。
少しでもお役に立てば幸いです。

2015年1月23日(金)
ベジェ曲線で作成したイラストの線に強弱を付ける

趣味であれこれ作ったりするのでIllustratorでイラストを良く描きます。
色々なイラストソフトが有りますが、ザ・デジタル感を出す時はベジェ曲線で線を引くととてもデジタル感が出ます。
その線に強弱をつけるだけでかなり印象がかわります!

1.png

1)イラストを準備します

2.png

2)全選択します

3.png

3)オブジェクト>パス>パスのアウトライン化します

4.png
4)アウトライン化することで■マークがついた部分が修正できるようになります

5.png

5)ペンツールを選択します

6.png


6)修正したい■にカーソルを持って行くと「ー」がつくのでアンカーを消します
 同じ手順で先端を尖らせていきます


7.png

8.png


7)次はアンカーを引っ張って線に強弱をつけます。ハンドルを引っ張ってでも強弱を付けることが出来ます




9.png

とても自己流ですが、Illustratorでイラストを描かれている方で線に味を出したい方は取り入れてみて下さい!

2015年1月22日(木)
画像を追加する時にテキストの横に配置させる方法

ブログを公開する時に、いつも画像の下にテキスト、また画像の下にテキスト...の繰り返しで
見た目が少しなぁ...画像の横にも文章を表示させたいなぁとお考えの方もいらっしゃると思います。


そこで、テキストの横に写真を載せてみようと思います。


早速タグでテキストの横に画像が出るように入れてみたものの...

<p><img src="photo01.jpg" width="200" height="auto">ここに本文を入れます。ここに本文を入れます。</p>

画像をブログに投稿しようとするとありがちな場面

このように、あまりかっこよくない見た目になってしまいます。


回り込み機能を活かそう!

画像を左に表示させて、テキストも画像の先頭に合わせて表示した方が見た目が良いですよね。


その場合は画像に回りこみのタグ「align="left"」を入れると回り込みが簡単にできます。

<p><img src="photo01.jpg" width="200" height="auto" align="left">ここに本文を入れます。ここに本文を入れます。</p>

テキストに対して左寄せにした画像


そのままでは画像とテキストの間隔があいていなくて窮屈なので、イメージに対して以下のように
マージンをかけると文字が読みやすくなりますね。

<p><img src="photo01.jpg" width="200" height="auto" align="left" style="margin:0 10px 10px 0;">ここに本文を入れます。ここに本文を入れます。</p>

マージンを付けて画像とテキストの間隔を調整する


align="right"」にすれば画像を右側に寄せられます。

<p><img src="photo01.jpg" width="200" height="auto" align="right" style="margin:0 0 10px 10px;">ここに本文を入れます。ここに本文を入れます。</p>

画像を右寄せにする場合


画像の回り込みを活かして、以下のように複数の画像を使うとブログ記事の見た目も楽しくなります。

画像の回り込みを複数使った例


ブログ記事を投稿する際に画像の投稿はSEO的にも良いので、いつものブログを楽しく見せたい、
ちょっと工夫したい...などなどお悩みの方は是非お試しください!

2015年1月21日(水)
illustratorから超巨大jpgファイルを書きだす方法

illustratorで「Webおよびデバイス用に保存」を使う時、
巨大なファイルを「JPG形式」で保存しようとすると「メモリが足りません」「エラーです」
と表示され、作業が中断してしまう...という事態が起こります。
インターネットでこの手のトラブルについて調べたところ
「『Webおよびデバイス用に保存』の画面で『アートボードサイズでクリップ』のチェックを外す」
などの対処法がありますが、それでもだめな場合の対策を書きます。
あくまで、個人的な対策ということでご覧ください。

まず、「Webおよびデバイス用に保存」で書き出せなかった場合、
「書き出し」を選び「JPG形式」で保存します。これで終われば問題ありません。
file_menu.png
これでもダメな場合、「JPG形式」でなく「BMP形式」で保存します。
file_type.png
時間はかかるし、大容量のファイルができますが、書き出しはできます。

そして「BMP形式」のファイルをPhotoshopで開き、「JPG形式」で保存します。
容量を一気に圧縮できるうえ、処理速度も速くて確実です。

段階を踏むことになりますが、うまくいく確率は高いです。

2015年1月20日(火)
斜めにツヤっとしたボタンの作り方

ボタンを作成する時、いつものようにただの単調なグラデーションを使っていると
とても物足りなさを感じたので斜めにツヤっとしたボタンを作成してみました。
とても楽です!

まず普通に角丸、ややグラデーションをかけたボタンを作成します。
いつもは上下にグラデーションをかけますが今回は左右に、横にかけました。
bottun012001.jpg
枠線が結構重要で、外側に1pxの濃い線とその内側に白めの1pxの線を置くのがミソです。
これだけでもボタンに見えますが、ここに斜めに円弧がかかるように、
このボタンの上に黒い楕円を置きます。不透明度はオーバーレイの30%にしました。
bottun012002.jpg
そして、ボタン型に黒い楕円をクリッピングマスクかけると・・
bottun012003.jpg
斜めにツヤの入ったかっこいいボタンができました!
単なるグラデーションに飽きた方は是非お試しください。ピシっとデザインがキマります!

2015年1月19日(月)
URLを変えずにリニューアル

現在制作中の方からも本日お問合せがあったのですが、
リニューアルの際、
「今のURLを継続して使うことはできますか?」という
質問をいただくことがよくあります。


もちろん、これは可能です。
URLはドメイン会社、サーバー会社の2つの会社か、
ドメイン・サーバー両方を管理する1つの会社によって管理されているものですが、
リニューアルの際にドメイン・サーバー会社を変えても変えなくても
今のURLを維持することは可能です。


このドメインで取得しているメールアドレスも継続して使うことができますが、
サーバー会社を変えると、Windows LiveメールやOutlookに
設定しているメールアドレスの設定情報は変更する必要があります。


ドメイン・サーバー会社を変える場合、
変更前のサーバーの契約を残したままの状態で
新しいサーバーでの準備を整えて切り替え作業をするなど、
きちんとした手順をふまなければホームページやメールアドレスが
使えなくなってしまうことにつながってしまいますので、注意が必要です。

ikan.jpg

弊社でリニューアルさせて頂いた場合には
この移動作業は制作費用内でさせていただいており、
移行作業のみの代行も行っております。


また、「ドメインを変えるけど、今見てる人に見てもらえるようにしたい」
という場合には、.htaccessを使ってリダイレクトという設定を行います。


この設定を行うことで、
旧ドメインにアクセスしてもすぐに新ドメインに切り替わるようになります。
SEO的にも、このリダイレクトによってサイトの力を7~8割引き継ぐと言われており、
順位やアクセスも基本的に引き継げるようになっております。


旧ドメインにおけるリダイレクトの設定は半年から1年程続けた方がよいので、
ドメインを変える場合にも、古いドメインの契約を少なくとも半年以上は
継続することが必要となります。

2015年1月16日(金)
Photoshopで画像を切り取る

初歩的な方法ですが、「ペンツール」を使って画像を切り取る方法をご紹介します。
20150116_1.jpgこのタイヤの銀色の部分のみを切り取ってみたいと思います。
20150116_2.jpgペンツールを選択します。
20150116_7.jpg銀色の部分の外側をなぞるようにアンカーをうっていきます。
一周つなぎ合わせると上のように薄い線が引かれます。
ポイントは少し内側に入ってもいいので、黒い部分が入らないように選択することです。
20150116_8.jpg画面上で右クリックし、「選択範囲を作成」を選択します。
20150116_3.jpg外周に沿って選択範囲を作る事が出来ました。
20150116_4.jpg次に、上のように選択します。
20150116_5.jpgそうすると背景が消えます。
同じ要領で中の空洞の部分を切り抜いていきます。
20150116_6.JPG銀色の部分だけ切り取ることが出来ました!
ペンツール非常に奥が深く操作に慣れるまではうまく扱えないかと思います。
私もまだ全然扱いきれていません。早くバシバシ切り取れるように勉強していきます!!

2015年1月15日(木)
複数のオブジェクトを組み合わせる

グラデーションは色の段階を細かく分けることでオブジェクトにかっこいい効果をつけることも出来ますが、
自分では調整などがなかなかうまく行かなくて難しい...という方も多いのではないでしょうか。
実は私もグラデーションをかっこよく作るのはあまり得意ではありません。
そこで今回は、単純なグラデーションを使って
いつもより少しかっこいいデザインを作る方法をご紹介します。


まずはこちらのオブジェクトですが、白背景に馴染むように青いグラデーションをけています。
色の段階は白、中間、濃い青ととても簡単なものです。
1227_1.jpg
このままでも決して悪くはないのですが、やはりグラデーションをかけっぱなしな感じがしてしまいます。

そこで、円ツールで横長の円を作成します。
サイズはあとで調整するので、適当で構いません。
1227_2-01.jpg
この円にもグラデーションをかけます。
中心が白で外に向かって透明になる、とても簡単なグラデーションです。
(わかりやすいようにグレーの四角を敷いています)
1227_3.jpg
あとは、円形のグラデーションを青いグラデーションの上の方にかぶせるだけです!
1227_4-01.jpg
劇的に変わる!というわけではありませんが、
グラデーションが弧を描いたため印象がやわらかくなり、
背景とのつながりがより自然に見えるようになったのではないでしょうか。

単純なものでもちょっとの工夫次第でクオリティが違って見えることがよくあります。
ぜひ試してみてくださいね。

2015年1月14日(水)
テクスチャが写真に与える効果

写真やイラストを加工していて、色味を整えたり雰囲気を良くしたいと思った時に
テクスチャが便利です。

花の写真
今回はこちらの花の写真を、
3枚のテクスチャ
この3枚のボケテクスチャを使って加工してみます。
すべて、オーバーレイ100%で重ねています。

1番のテクスチャ
テクスチャの元の黄色が、ひだまりに咲いた花のような感じでとてもふんわりとした優しい雰囲気になりました。


2番のテクスチャ
元のテクスチャがはっきりした色だったので、少しピンクがかって強調された部分がでて、
これはこれで面白い加工になりました。


3番のテクスチャ
元のテクスチャが白黒だったので、コントラストのはっきりした写真になりました。
手前の花の白い部分と黒くなっている部分が木陰のように見えます。。


1番と2番のテクスチャ
余談ですが、①と②のテクスチャを合わせてみました。
ちょっと色が飛んでいますが、、ガーリーな雰囲気にあっているかなあと思います。

テクスチャには、元の写真との相性もあるので、色々とテクスチャを保存して
雰囲気に合わせた写真加工を行ってください!
加工に慣れるととても楽しいです。

2015年1月13日(火)
グラフィックスタイルに作った効果を保存!

デザインする時、同じパーツがいくつも必要になることってありませんか?
今回は、イラレのグラフィックスタイルについてご紹介します。
試しに、輝きを表現するとき便利な、キラキラ(なんて言うんだろう)したパーツを作ってみます。

まず丸を書きます
本当に適当でいいです。

色をおこのみで付けて下さい
これ①番にすればよかったと反省。

パンク効果を適用します
今回やることはこれだけ。
アピアランスパネルが無いぞって人は、
「メニュー」→「ウィンドウ」→「アピアランス」
もしくはシフトキー+F6を。
効果をつけるには、下段に見える「fx」をクリック!

作ったスタイルを登録します
ドラッグ&ドロップ、どこに?というかた、大体矢印の先端くらいでOKです。
グラフィックスタイルウィンドウは、
シフトキー+F5でも呼び出せるのでお試し下さい。
ショートカット系は覚えてなかったり、存在すら把握してない事も多いので、
こんな風にブログに書くのもまた勉強になりますね。

一度登録したスタイルは使い放題です
あとは色を変える、大きさを変える、やり放題です。
適用したオブジェクトのアピアランスに、保存したアピアランスが適用されます。

自分のグラフィックスタイルを作れば、
自分だけのデザインの引き出しがどんどん増えていきますね。

少しでもお楽しみいただけていれば幸いです。

2015年1月 9日(金)
Photoshopで画像を"くっきり"させる

いつもIllustratorばかり使っていましたが、近頃画像を編集することが多くなりPhotoshopを使いだしました。
そこで、覚えたての「アンシャープマスク」という機能を紹介します!
この機能は画像をくっきりさせたいな...と思ったときに重宝します。
20150109_2.jpg
20150109_3.jpg
上の画像のように選択するとダイアログボックスが開かれます。
各項目の説明については以下の通りです。
・量...シャープ化の強度が設定できます。
・半径...シャープ化される輪郭周辺の画素数を決めることになる値を設定します。
・しきい値...輪郭がシャープ化を受けるかどうかを示す画素の値の最小差異を設定できます。
言葉で説明してもわかりにくいと思いますので、画像を使って試してみようと思います。
まず、元画像です。
20150109_9.jpg
次に数字を極端に上げてみます。
20150109_6.jpg
すごくパリッとした画像になりました。
しかし、これでは何がなんだかよくわかりません。
ちょうどいい感じに調整してみます。
20150109_10.jpg
ちょっとくっきりさせるぐらいがちょうどいいのかなと感じました。
金属系のものと相性抜群の機能なのでぜひお試しください!

2015年1月 8日(木)
Illustratorのレイヤー機能を使って1つのファイルに違うパターンのデザインをする方法

Illustratorでデザインをしていく時に、一部だけ違うデザインにしたい場合、
そのパターン分データを作ると、共通部分に修正が発生した時に
増やしたパターン全てを修正しなくてはいけなくなってしまいます。

2つくらいならまだしも4つも5つもあると修正も大変で、
モレや間違いが発生しやすくなります。

そこで便利なのがレイヤー機能です。
可変部分を別のレイヤーに分けておいて、
レイヤーの表示・非表示で切り替えられるようにしておけば、
ベースとなるデザインに修正が入った場合でも1つのデータを修正するだけですみます。

「仕分け」という名前のレイヤーを表示
仕分けレイヤーを表示した状態

「梱包」という名前のレイヤーを表示
梱包レイヤーを表示した状態

「積込」という名前のレイヤーを表示
積込レイヤーを表示した状態

このように、レイヤーの目のマークで表示・非表示を切り替えれば、
1つのファイルで複数のパターンのデザインをすることができます。

レイヤーパネル

因みに、上のように部品によってレイヤーを分けて修正しない所にロックをかけておけば、
間違って動かしてしまうという危険も回避できます。

レイヤー機能をうまく活用すれることで、スムーズに作業を行うことができます。

2015年1月 7日(水)
アピアランスで文字を装飾

新人の櫻井です。
アピアランスに関してですが...
前回「効果→形状に変換→長方形」を使うと、文字数に応じて長さが変わるバナーができる、というのをやりました。
前回の結果
今回はさらに
・効果→パス→パスのオフセット(オフセットは、指定した数値で形状を太らせる機能です)
・効果→パスの変形→変形
この2つの効果を活用して、装飾的な文字を作ります。

まずふち文字を作ります。テキストを入力します。
1段階目

ここでふちを作るとき、線を使わずに...
塗りを作り「効果→パス→パスのオフセット」でふちを作成します。
(オフセット:2px、角の形状:マイター、角の比率:4)
2段階目オフセット
2段階目オフセット説明

線を使ったとき。見た目は変わりません。(線:4px)
2段階目線
2段階目線説明.jpg

線と「パスのオフセット」の違いは、グラデーションが適用できる点にあります。
ふち部分にグラデーションを適用します。見た目がちょっと豪華になります。
注意:この記事はAdobe illustrator CS5に対応しています。
CS6以降のバージョンでは、線に直接グラデーションを適用できます。
3段階目
3段階目説明

さらにふち部分の項目を複製、「効果→パスの変形→変形」をします。
ここではふち部分を右下に(水平方向:1px、垂直方向:2px)動かしました。ほんのり立体感ができました。
4段階目
4段階目説明

ついでに「効果→形状に変換→角丸長方形」を使いました。
(値を追加:幅・高さともに6px、角丸の半径:4px)
バナーっぽい四角と線ができました。(線:1px)
5段階目
5段階目説明

手の込んだものになってきました。

2015年1月 6日(火)
Illustratorで手彫り木板の雰囲気を出す

新年あけましておめでとうございます!
年末年始の休業は本当にくつろぐことができ、というか堕落しきってしまい、
仕事始めで仕事をしている自分がとてもイキイキしていて驚きました。
ただいま!!という感じでした。今年もよろしくお願い致します。

和テイストのホームページのデザインをしていると、
雰囲気づくりにこだわるために様々なパーツを作成する必要がありました。
その中で木の板に文字を彫ったような加工が簡単にできましたので、紹介します。

まずは普通に四角を描き、木目のテクスチャで塗って、文字を置きます。
mokuhen01.jpg
木のテクスチャのおかげで、この時点でもかなり「木」感はありますが
この木を手で彫ったように見せていきます。

木を掘るともちろんへこみますので、へこんだように見えるよう、ドロップシャドウを左上にかけます。
ついでに文字の色も白から、削った木の色に変更します。
mokuhen02.jpg
へこんだようになってきました!
でも欲を言うと、なんだか削ったはずの文字の部分が滑らかすぎて、キレイすぎる・・・
ので、この文字の上に、レンガのテクスチャを不透明度30%でのせてみます。
mokuhen03.jpg
二枚目と大差はないですが、少し手彫り感が出てきたのではないでしょうか?
木板の切り口もキレイすぎたので、ちょっとギザギザにしてみました!
全辺ギザギザにするのではなく、上下だけギザギザとかでもいい味が出そうです。
是非お試しください!

2015年1月 5日(月)
CSSを使ってボタンオンマウス時に凹凸感を出すテクニック

ボタンやメニューでリンクを貼った画像がオンマウスで色が変わったら
「これは押せるもの!」と分かりやすいですよね。


当社ホームページでもメニューやバナーで至る所でその小技を駆使しています。

ホームページ制作Fで使われているメニューのオンマウス切り替え例

ちなみにこちらのメニューはオンマウス前(通常表示)の画像とオンマウス時の画像2つを用意し、
CSSでカーソルが来たら画像を切り替える、という指示を設定しています。


javascriptを使って2つの画像をオンマウス時に切り替える方法もありますが、
CSSでもjavascriptでも画像を使って切り替える場合、わざわざ画像を2種類用意して、
更にhtmlやCSSの記述が必要になりちょっと手間がかかります。


そこで今回は、CSSで作成したボタンを使って、
オンマウスした時にボタンを押したかのように見えるようにする方法をご紹介します。


以前CSSのみを使って3ステップで作成したこちらのボタンで実装してみます。


まずはボタン作成のおさらい

htmlはシンプルに

<div class="dl"><a href="dl.html">ダウンロードはこちら</a></div>


CSSはグラデーション+ドロップシャドウをきかせたボタン

div .dl {
width: 280px;
background:-webkit-linear-gradient(#C5E021, #00CC33);
-webkit-border-radius:5px;
-webkit-box-shadow:#999 0 4px 5px;
}

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


これに、カーソルをのせた時、背景色が変わる...という指示を追加すれば良いのです。


オンマウス時、背景を変える方法

テキスト・画像問わずリンクが貼ってあるものにカーソルをのせた時変化を付けたい時は
a:hover」という記述をCSSで設定する必要があります。


今回の例だと[div .dl a:hover]と記述します。

div .dl a:hover{※カーソルをのせた時に見せたい色などを書く}


それでは早速、CSSの記述を追加してみます。

div .dl a:hover{
background:-webkit-linear-gradient(#00CC33, #C5E021);
-webkit-border-radius:5px;
}


すると、通常表示とオンマウス時で、このように切り替わります!

CSSのみを使ってボタンの背景色を変化させた例


実際に動いているデモページも用意しました。


ここでポイントは、背景色のグラデーションの部分です。


グラデーションを設定する際、backgroundで色を2種類設定しますが、
オンマウスした時の色を上下入れ替えただけでも凹凸感が出てきます。

通常の設定 background:-webkit-linear-gradient(#C5E021, #00CC33); }


オンマウス時の設定
background:-webkit-linear-gradient(#00CC33, #C5E021);  ←色の指定を左右入れ替えただけ
}


見本の色だとちょっと分かりにくいかもしれませんが...
白とグレーでグラデーションをした時は凹凸感がかなり出てきます。


CSSもほんの少し追加するだけなので、画像を2種類用意して...といった手間もかかりません!
CSSを使ってボタンやメニューの見た目を良くしたい、動きを付けたいという方は是非お試しください。

2015年1月 4日(日)
画像の解像度のお話

イラストレーターなどに画像を貼り付けた時、同じピクセル数なのに画像の大きさが違う場合があります。
それは画像の解像度が違うためにおこる現象です。

解像度の違う画像を貼り付けた比較

解像度というのは簡単に言うと画像の細かさです。
単位はppi(ピクセルパーインチ)もしくはdpi(ドットパーインチ)です。
つまり、1インチの中にピクセル(ドット)が何個入ってるかということです。
なので、解像度が高いほど1ピクセルの大きさは小さくなります。

比較してみるとこれだけ違います。

ピクセルの大きさを比較

高い解像度の画像はピクセルの一つ一つが小さくなっているので、
同じピクセル数の画像を貼り付けても小さくなってしまうのです。

フォトショップで開いて画像解像度のパネルで確認すると
大きさの違いがよくわかります。

フォトショップのパネル1

フォトショップのパネル2

ピクセル数は同じでも解像度が違うので幅と高さが違います。

72ppiの画像

余談ですが、Webではモニターで見るので、解像度は72ppiあればいいのですが、
印刷物になると色々な条件があるのですが、一般的にモノクロであれば250~300dpi。
カラーであれば300~350dpiあれば十分です。

解像度に関してもそれほど気にしなくても、印刷会社やWeb会社で処理してくれるので
まかせっきりでも大丈夫ですよ。

2015年1月 3日(土)
CSS3を使ってかっこいい見出しを作る

ホームページでテーマごとに話を区切ったり項目ごとに付けたりなどで重宝する見出しですが、
見出しのデザインに困る方もいらっしゃるのではないかと思います。


面倒だと、とりあえず背景色を塗りつぶして見出しっぽく見せています。
ださい見出しの例


勿論、フリー素材でかっこいい見出し画像を配布しているサイトも沢山ありますが、
画像だとCSSで読み込むのが手間だと感じることも。


そこで今回はCSS3だけで簡単にかっこよく、特に企業サイトに最適な見出しの作り方をご紹介します。


まずは土台となる見出しの現状を確認

■html

<h2 class="title">ホームページ作成の最新情報</h2>


■CSS。見出しとは思えないシンプルさ。

.title{
font-size:16px;
line-height:16px;
color:#333;
letter-spacing:2px;
padding:12px 12px 8px 12px;
background:#0FF;
}


htmlは触らずに、CSSにどんどん設定を増やして見出しを作っていきます。


見出しの背景色を大幅チェンジ

まずは見出しの色をグラデーションにして印象を大きく変えました。
(色が薄めなので少し分かりにくいかもしれません...)
グラデーションを付けた見出し


CSSはbackgroundの記述を変更しただけ。

.title{
font-size:16px;
line-height:16px;
color:#333;
letter-spacing:2px;
padding:12px 12px 8px 12px;
background: -webkit-linear-gradient(#ffffff, #F6F6F6);
}


上に色の付いた線を付ける

次に、見出しっぽさを出すために上に実線を付けます。
劇的に見出しっぽくなった

これだけでも、かなり見出しっぽくなってきました。


CSSにはborder-topの記述を追加しただけ。

.title{
font-size:16px;
line-height:16px;
color:#333;
letter-spacing:2px;
padding:12px 12px 8px 12px;
background: -webkit-linear-gradient(#ffffff, #F6F6F6);
border-top: 3px solid #023793;
}


下線を付けて見出し感をプラス


ワンポイント付けて見出しのデザインをおしゃれに

CSSには更にborder-bottomの記述を追加しただけ。

.title{
font-size:16px;
line-height:16px;
color:#333;
letter-spacing:2px;
padding:12px 12px 8px 12px;
background: -webkit-linear-gradient(#ffffff, #F6F6F6);
border-top: 3px solid #023793;
border-bottom: 1px solid #E0E0E0;
}


3ステップでかっこいい雰囲気の見出しが完成しました!


しかも今回も3ステップ!
むしろ以前投稿した"デザインが苦手でもCSSなら3ステップでボタンが作れる"よりも更に簡単です。


ホームページにかっこいい見出しを入れたいけど画像で用意するのも面倒だし、
でもそれなりにきちっと見せたい...などお悩みの方は是非お試しください。

2015年1月 2日(金)
Illustratorで三角形を描く

基本的な図形の三角形を簡単に描く方法を紹介します。
20150102_1.jpg
まず、「長方形ツール」を長押しし、「多角形ツール」を選択します。
20150102_2.jpg
次に「辺の数」を「3」にしてOKを選択します。
20150102_3.jpg
簡単に正三角形を描く事が出来ました。
ぜひお試しください!

2015年1月 1日(木)
文字数に合わせて長さの変わるバナー

新人の櫻井です。
今回はアピアランスについて勉強しましたので、この場で紹介させていただきます。
まずテキストを入力します。
工程1前半
工程1前半のアピアランス

アピアランスで、テキストの下に「新規塗りを追加」を二回使います。
ここでは上下の色を変えています。上がテキスト、下がバナーの塗りになります。
工程1後半
工程1後半のアピアランス

下の塗りに「効果→形状に変換→長方形」を適用します。
形状や数値は目的に応じて指定してください。
ここでは長方形:値を追加:8pxです。
工程2
工程2に適用する効果

テキストの文字数に応じて長さの変わるバナーができました。
工程3
工程3のアピアランス

作りこむと、凝ったバナーもできます。
これは「新規線を追加」して、その線に「効果→角丸長方形」を適用した例です。
もちろん「塗り」にも「効果→角丸長方形」を適用しています。
工程4
工程4のアピアランス

基礎が理解できてこその応用なので、他にも活用していく予定です。
末尾ではありますが、あけましておめでとうございます。

簡単無料お見積もり

お問合せ内容
  • 売上げアップ
  • 会社拡大
  • ブランド力を持ちたい
  • 新規事業参入したい
  • 単価を上げたい
  • 価格競争したくない
  • 社内環境を良くしたい
  • 経営者が楽になる
  • 社員を成長させたい
  • 良い求人が欲しい
  • 離職率を下げたい
  • 残業を減らしたい
  • 客層をよくしたい
  • 会社がうまく回るようにしたい
  • クレームを減らしたい
  • リピート、口コミを増やしたい
  • 無理なく持続する経営がしたい
  • 現状を維持しながら息の長い経営をしたい
  • リスクを回避するための線引きをしたい
  • ターゲットを絞りたい
  • 会社の方針を明確にしたい
  • SEO対策
  • 5~10万で自分でテンプレート形式で作る方法に興味がある
内容