フラッシュと違いロールオーバーはソフトで作った物をそのまま貼り付ければ良いので比較的簡単に出来ます。
手順① ダウンロードし、解凍する。
ロールオーバー画像が出来る無料ソフトをダウンロードしてください。
ちなみに私は何個かダウンロードして試してみましたが、HomuPage Writer が使い勝手が良かったので現在使用中です。
ダウンロードが完了したら解凍してください。
※ windows上にインストールする必要が無いので、不要になればフォルダごと削除しちゃえばOKです。
手順② 載せたい画像をブログに一旦、挿入する。
通常の記事を書くようにロールオーバーさせたい画像を2枚、記事内に挿入します。
「HTML」の編集を選択し、画像がダウンロードされているhttpで始まるアドレスを確認しておく
※ 画像を記事挿入時には2枚の画像サイズは揃えておく事（画像の縦幅、横幅をメモしておく）
手順③ hpwriter を起動させる。
フォルダ内のhpwriter をダブルクリックすれば起動開始です。
中央付近の「画像アイコン」をクリックし ImageFome を起動させ
1. 1枚目（始めに表示させる）の画像URLをコピーし貼り付ける。
2. width＝画像の幅
3. height＝画像の高さ
4. border＝画像の枠サイズ（私は使っていません）0のまま
5. alt＝画像の内容(検索用)
6. 「ロールオーバー画像を設定する」に、チェックを入れ
7. 2枚目の画像URLをコピーし貼り付ける。
8. 「OKボタン」を押す。
手順④出来上がったソースをコピーする。
③で出来上がったソースをコピー（コピーする部分を反転させて「Ctrl ＋Ｃ」を押す）する。
手順⑤ コピーしたソースを貼り付ける。
Bloggerの「HTMLの編集」画面にて挿入したい位置に貼り付けし、「保存ボタン」を押す。
その後、不要な画像を消す。
ほんでもって下記の画像の記述は
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8shzX_j6mGaHq7-VxBkRpWY2t8USKqg9Skb2Fz6m-2At1wD_85F38ie9q-kPS7Pjs-DL-Pn8yVsJDdwOAL-g2kTy86QrwriD67gpStke9qcczKVACzuViLMaTk75QR-BljaEjNTjn6ZI/s1600/R0019323-2.jpg" width="480" height="360" border="0" alt="ロールオーバー画像" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhM14Jx7-AkbmbDe-upGkk9G_hwKWvWxNgJYEzPv4twqwJ9TLoc9S4OdehwuxlFyC0s9uPJzkWsUxQM55bvuJYI98hhHgxjd4qBoRvkcWC7ZXY-yrsXDopZ8EZ4FRmG-o1SsGxWrVLhRMo/s1600/R0019329-2.jpg'" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8shzX_j6mGaHq7-VxBkRpWY2t8USKqg9Skb2Fz6m-2At1wD_85F38ie9q-kPS7Pjs-DL-Pn8yVsJDdwOAL-g2kTy86QrwriD67gpStke9qcczKVACzuViLMaTk75QR-BljaEjNTjn6ZI/s1600/R0019323-2.jpg'">
またソフトを使わなくても挿入させる事は可能です。
手順②の作業をしていただき下記の記述をコピーし貼り付ける
<img onmouseover="this.src='2枚目の画像URL'" onmouseout="this.src='1枚目の画像URL'" height="縦幅" alt="画像のお題" src="1枚目の画像URL" width="横幅" border="0" />
Bloggerの方ならアドバイス出来るかもしれません。
その他のブログの方は無理です💦ブログの仕様が解りません(*_ _)人ゴメンナサイ
0 件のコメント:
コメントを投稿
コメントは承認制です。
記入者が「匿名」投稿の場合承認されませんのでご注意ください。
※メールアドレスが公開されることはありません。