こんにちは。
こちらは、初級者の方にホームページのデザインをご紹介するブログです。
記事に表示した画象にロールオーバーを自動で設定【実践編】
こんにちは。
ホームページ講座のゴトウです。
では、記事に表示した画象にロールオーバーを自動で設定 で紹介した効果の実施手順を書いてみます。
１．スクリプトの設置
以下のスクリプトを、
<head> </head>の間に貼り付けます。
アメブロの場合は、ブログを書く＞サイドバーの設定＞フリープラグイン＞
に貼り付けます。
<script type="text/javascript">
$(document).ready(function() {
$(".fadeimg").fadeTo(1,0.9)
.hover(
function(){// マウスオーバー時
$(this).fadeTo(100, 0.5);
},
function(){// マウスアウト時
$(this).fadeTo(300, 1.0);
}
);
});
</script>
２．記事の作成
画像を貼り付けます。
HTMLタグを表示のモードに切り替えます。
<img>タグに、class="fadeimg" を追記します。
例：変更前
<img src="http://stat.ameba.jp/user_images/20101212/22/unique-blog/3c/ab/p/t02200307_0517072110914268127.png" alt="$ホームページがおしゃれになるデザイン入門講座99TIPS-ユアーズガーデン様" width="220" height="307" border="0" />
変更後
<img class="fadeimg" src="http://stat.ameba.jp/user_images/20101212/22/unique-blog/3c/ab/p/t02200307_0517072110914268127.png" alt="$ホームページがおしゃれになるデザイン入門講座99TIPS-ユアーズガーデン様" width="220" height="307" border="0" />
３．保存します
どうでしょうか。
記事を表示して、マウスをのせると、
透明度が変化して、ロールオーバーのような動きがでてきます。
プラグインに設置しておけば、
今後は、記事に画像をアップしてから、
HTMLタグを表示にして、 class="fadeimg" を追記するだけで、効果が設定できます。
試してみてください。
ホームページ講座のゴトウです。
では、記事に表示した画象にロールオーバーを自動で設定 で紹介した効果の実施手順を書いてみます。
１．スクリプトの設置
以下のスクリプトを、
<head> </head>の間に貼り付けます。
アメブロの場合は、ブログを書く＞サイドバーの設定＞フリープラグイン＞
に貼り付けます。
<script type="text/javascript">
$(document).ready(function() {
$(".fadeimg").fadeTo(1,0.9)
.hover(
function(){// マウスオーバー時
$(this).fadeTo(100, 0.5);
},
function(){// マウスアウト時
$(this).fadeTo(300, 1.0);
}
);
});
</script>
２．記事の作成
画像を貼り付けます。
HTMLタグを表示のモードに切り替えます。
<img>タグに、class="fadeimg" を追記します。
例：変更前
<img src="http://stat.ameba.jp/user_images/20101212/22/unique-blog/3c/ab/p/t02200307_0517072110914268127.png" alt="$ホームページがおしゃれになるデザイン入門講座99TIPS-ユアーズガーデン様" width="220" height="307" border="0" />
変更後
<img class="fadeimg" src="http://stat.ameba.jp/user_images/20101212/22/unique-blog/3c/ab/p/t02200307_0517072110914268127.png" alt="$ホームページがおしゃれになるデザイン入門講座99TIPS-ユアーズガーデン様" width="220" height="307" border="0" />
３．保存します
どうでしょうか。
記事を表示して、マウスをのせると、
透明度が変化して、ロールオーバーのような動きがでてきます。
プラグインに設置しておけば、
今後は、記事に画像をアップしてから、
HTMLタグを表示にして、 class="fadeimg" を追記するだけで、効果が設定できます。
試してみてください。
ロマンティックな素材
手描き風、優しい感じ、柔らかい色合い、の雰囲気を出したい時に、便利な素材集です。
ブログやネットショップの見出し作成やワンポイントに最適。
この記事の見出し画象も、素材集の中の布地＋パターン＋リボンで、作成しています。
デザインパーツブック ロマンティック/MdN Design
￥2,415
Amazon.co.jp
プロフィール
ヒトイロウェブ
代表 後藤達也
●資格
・上級Webクリエイター（サーティファイ）
・中小企業診断士（経済産業省）
・認定コーチ（生涯学習開発財団）
●所属団体など
・神奈川県中小企業家同友会 横浜支部 会員
・横浜ベンチャーポート
（横浜市創業支援・成長促進事業）
Web戦略分野専門アドバイザー登録
・シックス・アパート社
MovableType構築のパートナー企業 ProNet会員
●プロフィール
法人向けシステム製品を扱う企業でマーケティング部門（販売促進、製品企画）、新規事業推進の職務を経験。また経営全体を理解するために中小企業診断士の資格を取得。この経験・知識を生かし、経営者の視点を持ちながら、機能的で、独自色を出せるホームページの作成を始める。
ホームページ制作を経営の仕組みづくりの一つとしてとらえ、横浜のお客様のホームページ運営の仕組みづくりを推進するホームページ作成会社としてスタート。現在、横浜の企業さんを中心に実績を積む。（手描き子供服あっか様、焼き菓子お取り寄せカフェリコ様、神奈川県歯科技工士会様など実績多数）
●大事にしていること
「ホームページの成否は、立ち上げ後の運用管理で決まる！」という考えのもと、更新しやすいレイアウト、ブログ型（MovableType）の採用、 SEM/SEOの実践、コンテンツの作り方など、新規公開後にも使いやすいサイトを実現するための工夫に日々取り組んでいる。
代表 後藤達也
●資格
・上級Webクリエイター（サーティファイ）
・中小企業診断士（経済産業省）
・認定コーチ（生涯学習開発財団）
●所属団体など
・神奈川県中小企業家同友会 横浜支部 会員
・横浜ベンチャーポート
（横浜市創業支援・成長促進事業）
Web戦略分野専門アドバイザー登録
・シックス・アパート社
MovableType構築のパートナー企業 ProNet会員
●プロフィール
法人向けシステム製品を扱う企業でマーケティング部門（販売促進、製品企画）、新規事業推進の職務を経験。また経営全体を理解するために中小企業診断士の資格を取得。この経験・知識を生かし、経営者の視点を持ちながら、機能的で、独自色を出せるホームページの作成を始める。
ホームページ制作を経営の仕組みづくりの一つとしてとらえ、横浜のお客様のホームページ運営の仕組みづくりを推進するホームページ作成会社としてスタート。現在、横浜の企業さんを中心に実績を積む。（手描き子供服あっか様、焼き菓子お取り寄せカフェリコ様、神奈川県歯科技工士会様など実績多数）
●大事にしていること
「ホームページの成否は、立ち上げ後の運用管理で決まる！」という考えのもと、更新しやすいレイアウト、ブログ型（MovableType）の採用、 SEM/SEOの実践、コンテンツの作り方など、新規公開後にも使いやすいサイトを実現するための工夫に日々取り組んでいる。
映像情報士協会様のホームページ事例
協会、というと固くなりがちなところを、実際の講座の風景や参加者の笑顔な表情などの写真選びに時間をかけました。
フィルム、ガチンコなど、映像をイメージさせるパーツを一部に取り入れながらも、かっちりとした雰囲気のホームページとしてデザインしています。
