非デザイナーがフリー素材を使ってロールオーバーする画像リンクを作ってみた

この記事は最終更新日から8年経過しています。内容が古い可能性があります。

誤解されることが多いのですが私はデザイナーではなくてプログラマーなんです。ということで、デザインは全然できません。けれどもサイトの作成をするにあたって画像を加工したりCSSで色々やってみたりはしています。今回「株式会社RYUS XOOPSサービス」のサイトをプチリニューアルするときもフリー素材を使ったり、CSSを使ってロールオーバーしてみたりと色々やってみたのでそれについて書きます(^^)/

絵が描けなければフリー素材を探せばいいじゃない！？
ロールオーバー画像ボタンを作る
1コマ漫画的画像を「コミpo!」で作りました
まとめ:絵が描けなくてもなんとかなりますね

絵が描けなければフリー素材を探せばいいじゃない！？

ということでサイトに載せるような絵は全然描けません。といってもやはり画像があるとインパクトが違うので画像を入れたい、外注するほどの予算も無し…ということでフリー素材を探してみました。

株式会社RYUSはペンギン好きなのでとにかくペンギンの素材を探してみました。そしてこちらでペンギンの素材を見つけました。

シルエットデザイン

ここにある検索に

ペンギン　と入力して検索します。

このようにいくつかのかわいいポーズをしたペンギンの素材を見つけました。DOWNLOADをクリックします。

penguin1.zip

というファイルがダウンロードされますので解凍します。

penguin1.ai

というファイルがあるのでこれをFirefoxで開きます。

横幅が467ピクセルなのであまり大きくないのですが、

クリックするとこのようなベクター素材だということがわかります。ベクター素材なので拡大しても縮小してもきれいなままなので好きな大きさにすることができます！

素材はこのペンギンを使いました。

吹き出しは

小樽総合デザイン事務局　【商用OK】漫画風フリー素材ふきだし編40個【無料】

のものを使わせていただきました(^^)/

そしてフォントは、

ラノベPOPフォントは可愛くて印象的なフリーフォントです！

でご紹介した ラノベPOPフォント を使わせていただきました(^^)/

ロールオーバー画像ボタンを作る

ロールオーバー画像ボタンとは画像の上にマウスを載せたときだけ別の画像が表示される画像ボタンです。

まず、通常表示される画像を上記の素材を使って作りました。

こんな感じで　trouble_penguin.png　という名前で作ってみました。そしてそれをコピーして trouble_penguin_hover.png　という名前の画像を作ります。マウスが載ったときにちょっとだけ変えてみます

ペンギンのポーズと吹き出しの背景色を変えました。

あとはHTMLとCSSでロールオーバーの動きを指定します。

HTML

                <div id="xoops_banner_1" alt="トラブル対応サービス XOOPSレスキュー"><a href="<{$xoops_url}>/modules/service/index.php?content_id=13"></a></div>

CSS

#xoops_banner_1 a {
    margin-top: 10px;
    margin-bottom: 10px;
    float:left;
    width: 293px;
    height: 150px;
    margin-right: 3px;
    background-image: url(images/trouble_penguin.png);
}
#xoops_banner_1 a:hover {
    background-image: url(images/trouble_penguin_hover.png);
}

xoops_banner_1　というidを持つdivの表示をCSSで指定します。画像はbackground-imageで指定して通常はtrouble_penguin.pngを表示します。a:hover はリンクされている部分にマウスが載った時の指定となります。その際、background-imageがtrouble_penguin_hover.pngになるように指定しています。

これでマウスを載せたときに、別の画像が表示されるようになります。

実際の動作は　注文の多いXOOPS屋　こちらから確認してみてください(^^)/
３つある画像ボタンがそれぞれ違う動きをしますよ～