ミニボートの楽しさを伝えたいと思い、作ったサイトです 2018 秋の絵 ブログ上部用

テキストにマウスを乗せると画像が出るようにする方法(リンクも可能) 

その他
02 /13 2018
CSSとHTMLだけをいじって、テキスト(文字)の上にマウスをのせると、画像が出るようにしました。(ipad web版の動作も確認できました)




このようにテキストにマウスオーバー(マウスの矢印を上に乗せること)で画像が出るようにできます。このサイトのプラグインのカテゴリー1,2も、同じようにしてマウスオーバーで画像が出るようにしました。上記の場合、画像を文字の左側に出していますが、

画像を出す位置は上下、右左変更可能で、画像の大きさも変えられます。FC2ならプラグインにも適用できました。

を参考にしました。しかし、私はCSSやHTMLの変換はど素人なので、一応これでできたという内容を記載してます。すべてのサイトにできるかはわかりませんので、ご了承ください。やり方は2つのステップを踏みます。


目次
1.①CSSを入れる
2.②HTMLを入れる
3.画像の位置を変える
4.画像の大きさを変える




①CSSを入れる
CSSですが、下記の通りです。これをコピーして、CSSに挿入します。

a.p:hover {     position: relative;     text-decoration: none; } a.p span {     display: none;     position: absolute;     top: 1em;     left: 0; } a.p:hover span {    border: none;     display: block;   margin-top: 0px;
margin-bottom: 0px; margin-right: 0px; margin-left: 0px ;  width: 300px;    }

私のサイトはFC2なので、このCSSをコピーして【設定>テンプレート管理>スタイルシート(CSS)編集】の文字列中の、

/* Hyper text
------------------------------------------------- */

のすぐ下にコピペしました。(正直どこに入れて良いかわからなかったのですが、ここでできました)
ポイント 少しでも文字が違うと機能しないので、コピーこぼしにご注意ください。



②HTMLを入れる
FC2では記事を編集するときにHTML編集ができるので、それを利用しています。
↓のところです。
2018-02-13_114851.png 
↓をコピーし、記事を書くときにHTML表示にして、ペースト(貼り付け)します。

<a href="①サイトのURL" class="p">②ここにテキストを入力<span>③画像のHTML</span></a>

このとき、変えれる箇所は以下の3つです。

①サイトのURL=リンクしたいURLを書けます。クリックすれば、飛びたいURLに飛びます。

②ここにテキストを入力=表示させたい文字を書きます。大文字にしたり、太字にすることも可能。

③画像のHTML=画像を記事に載せた状態で、HTML表示にしてその記号を③の場所にコピペします。


画像のHTMLは例えばこんな感じのものです↓

<img src="https://blog-imgs-120.fc2.com/b/o/a/32afas.jpg" alt=
"サムネ" border="0" width="300" height="200">

これを見たつけたら、コピーして③の画像HTMLにコピペします。普通の画像、サムネイルどちらも可能でした。<>も必要なのでここもしっかりコピーしてください。

実際のHTMLはこんな感じになります。

<a href="ttps://admin.blog.fc2.com/" class="p">この文字の上にマウスを乗せてね<span><img src="https://blog-s.jpg" alt="サムネ" border="0" width="300" height="200"></span></a>

これを表示させるとこうなります。


という感じでできます。文字の色や、大きさは変えられます。実際にやる時は、この3つを変更することで挿入します。





画像の位置を変える
この状態では、画像を好きな場所に表示させることができません。なので、CSSを少し変更します。


a.p:hover {     position: relative;     text-decoration: none; } a.p span {     display: none;     position: absolute;     top: 1em;     left: 0; } a.p:hover span {    border: none;     display: block;   margin-top: 0px;
margin-bottom: 0px; margin-right: 0px; margin-left: 0px ;  width: 300px;    }

↑の色の部分を変えます。ここは、画像の位置を変更する文字列です。
margin-top:0pxは、topに○○px移動してください、という意味です。数字を変更することで、画像が上にいったり右にいったりします。

FC2で試したところ、
margin-bottom: 0px
margin-right: 0px
は、変更しても変わらなかったので、

margin-top: 0px
margin-left: 0px
を変更します。このとき、数字以外はいじりません。0pxを20pxにするとか、132pxにするだけです。なお、この数字は+,ーに対応していて、

top:-100pxで↑に100px移動
left:-50px  で←に50px移動

という移動の仕方をします。+,ーを駆使して移動したいところにやってみてください。例えば、私のサイトでは、↓のようにしてます。上へ100px、左へ320pxです。


a.p:hover {     position: relative;     text-decoration: none; } a.p span {     display: none;     position: absolute;     top: 1em;     left: 0; } a.p:hover span {    border: none;     display: block;   margin-top: -100px;
margin-bottom: 0px; margin-right: 0px; margin-left: -320px ;  width: 300px;    }


と、こんなで作って、CSSにコピぺするといいです。
デメリットとしては、個別に画像の位置を変えるのができないことです。多分classの特定?をすればできるのですが、私にその技術がなく、断念。調べればたぶんいろんなとこに、自在に画像の位置が変えられます。



画像の大きさを変える
↓の赤部分を変更します。こちらはCSSではなくHTMLで変更します。

<a href="ttps://admin.blog.fc2.com/" class="p">この文字の上にマウスを乗せてね<span><img src="https://blog-imgs-120.fc2.com/b/o/a/432afas.jpg" alt="サムネ" border="0" width="300" height="200"></span></a>

ここの数字を変更すれば大きさが変えられます。
width=横の長さpx    height=縦の長さpx


が、これを変えると画像がぼやけたり横長になってしまうので、画像をfc2にアップロードする際に、pxをあらかじめ決めてやったほうが良いかもです。あらかじめ決めていれば、普通の画像サイズでも、サムネイルでも綺麗に表示できました。

以上、画像をのせる方法でした。他にもCSSを使わずに画像を載せる方法もあるので、そちらは↓に載せておきます。

こちらもご参照ください。
HTMLだけで画像をポップアップする→オンマウス画像タグ

関連記事
スポンサーサイト





このエントリーをはてなブックマークに追加

コメント

非公開コメント