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

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

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

スポンサーリンク

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

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

株式会社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-imagetrouble_penguin_hover.pngになるように指定しています。

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

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

1コマ漫画的画像を「コミpo!」で作りました

その他1コマ漫画的画像を「コミpo!」で作りました。

「コミpo!」は漫画を書くソフトなので背景や、びっくりしたときの効果線などもたくさんあるのでちょっとした漫画的な素材を作るのに便利です。

私が持っているバージョンは

こちらで、ビジネススーツを着た人物などもあるのでWebサイトを作るときに時々利用しています(^^)/

まとめ:絵が描けなくてもなんとかなりますね

このようにフリー素材やCSSを使ったり、有料だけど「コミpo!」のように素人でも漫画が描けるようなソフトがあることで非デザイナーでも予算の関係とかで(^_^;、なんとかしなきゃいけないときはとりあえずなんとかなる、感じがします。

兎本美佳

ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

ゆうそうとITブログの更新通知が受け取れます!
スポンサー広告

cssデザインXOOPS Cubeインターネット無料素材
スポンサーリンク
ゆうそうとITブログの更新通知が受け取れます!
ゆうそうとITブログ

コメント

トップへ戻る

ゆうそうとについての説明

ゆうそうと とは東京都八王子市を中心として、WordPressによるWEBサイトの作成や、スポットでのIT相談を行ったり、年間契約でのIT顧問をなりわいとして活動しています。

特徴としては30年以上IT業界でプログラムを中心として仕事をしてきたものと、美大出身のデザイナーがワンストップで対応するため、幅広い対応が可能であることです。

IT相談は直接お会いしてのご相談の他、ZOOMによるオンライン相談も可能です。