ホームページ更新その17（カーソル変更・他）

カーソルを前回とは別の画像に変更しました。

カーソルの画像変更

カーソルの画像変更は、style.cssに以下のように書きます。
html { cursor: url(画像のパスとファイル名), auto; }
html全体のカーソルをオリジナルの画像にします。
autoとしているので、ボタン（リンク）の上では指の形に、文字の上ではIビーム（縦棒）に変わります。

html { cursor: url(画像のパスとファイル名), default; }
とすると、html全体のカーソルの普通の矢印の形をオリジナルの画像にします。

html { cursor: url(画像のパスとファイル名), auto; }
で、カーソルを変えましたが、一部普通の矢印のカーソルになりました。

html { cursor: url(画像のパスとファイル名), default; }
と組み合わせましたが、普通のカーソルになるところがあったので、defaultで設定しました。

その他

Illustrator

他の同じ大きさのアートボードを作成するには、アートボードタブでコピーしたいアートボードを選択して、「＋」アイコンでコピーできます。

書いたイラストにアートボードのサイズを合わせるには、イラスト（オブジェクト）を選択して、「オブジェクト」メニューから「アートボード」、「選択オブジェクトに合わせる」を選択します。

画像書き出すときに「スクリーン用に書き出し」を使うと便利です。
以前からあった「Web用に保存（従来）」の新しいバージョンです。

「スクリーン用に書き出し」は、アートボード毎に画像を書き出します。
ひとつのファイルに複数のアートボードがあるときにまとめて書き出すことができます。
また、アートボードの名前が書き出すファイル名になるので、あらかじめアートボード名を書き出したいファイル名にしておくと、毎回ファイル名を指定する手間がなくなります。
「フォーマット」を選択し、「書き出し先」を指定して、「アートボードを書き出し」で書き出します。

デザイン

トップの画像に関して、PCの画面は横長ですが、スマホの画面は縦長です。
PCとスマホで同じ画像を使う場合、スマホはPC用の画像を縦横比を維持したまま横幅いっぱいに表示するので結果的に小さくなってしまいます。

PC用とスマホ用に別々の画像を用意して切り替えることもできるので、次回やってみましょう。

SAInoLESSON（サイのレッスン） Macの使い方講座、詳しい情報はこちら。

ホームページ更新 その17（カーソル変更・他）