最新情報

  • 2020/07/18
    ブログを更新しました。
    2018/04/30
    冷やし中華...じゃなかった、Twitterはじめました。

このサイトに関して



当サイトご利用上の注意

  • 記事へのリンクはご自由になさって結構です。
    但し、画像等、記事内のコンテンツの無断転載、画像への直接リンクによるまとめサイト等他サイトへの転載は固くお断りします。

    2019/04/14現在、コメント欄の認証方法やNGワード設定等、時々変更しています。メールアドレスの入力が求められる場合、とりあえずメールアドレスの形をしていれば(@の前は適当でも)OKです。

    上記に関し、詳しくは下記バナーから「当サイトについて」をお読み下さい。



    このブログの趣旨など。コメント欄はゲストブックとしてご利用下さい。


    記事についてご不明な点などはメールでは回答しかねますので、各記事のコメント欄にお願いします。




特設コーナー

  • Banner_wuhanvirus2

    banner_kunimori01


















外部サイト(その他)

  • 台湾の名前で東京オリンピック参加を!署名活動


    憲法改正を実現する1,000万人ネットワーク 美しい日本の憲法をつくる国民の会









管理人ポータル

大師小同窓会関連












  • 画像を提供、あるいはオリジナル写真を貸して下さる方は管理人までご連絡ください。


我が町!大師の情報

  • 大師の歴史・町名の由来

各種ノウハウ集



私家版スクラップブック

  • ブログ主の個人的スクラップブック集です。

    100円ショップの木箱やディスプレイケースなどを利用したドールハウスのまとめページです。

    メンテナンス中のため一時アクセスを制限しています。

友達の輪・お薦めSHOP

  • CHITIのボディデザイン
    魅せるボディデザイン/カラダ作りの本質とは!?
    川崎市在住のインストラクターが近隣のスポーツ施設や公園・ご自宅でのパーソナルトレーニング受け付けます。




    かわさき楽大師

    ファッション・雑貨の店 「+R」

    ヘアーサロンE'(イーダッシュ)


【niftyココログ】画像をオンマウスで拡大するCSSとhtmlタグ

サンプル

サンプル マウスを重ねると画像が拡大されます。

サンプル追加

サンプル マウスを重ねると画像が拡大されます。「onclick="return false;"」指定により、クリックしても別ウィンドウに画像が表示されません。

本来の画像の大きさはこちら↓。width="222" height="159" です。

サンプル

これを、ココログのカスタムcssを追加して、約1/4のサイズにしています。(適当な画像を使ったので、縦横を1/2にするため、width: 111px; height: 79px; としていますが、これでは汎用性がないので、cssを適用する画像は、縦横比がほぼ同じものと決めておき、サムネイルの縦横比をあまり崩さないようにするべきです。(せいぜい、横長の画像用と縦長の画像用で2種類のclassを用意しておき、使い分けるとか。)

カスタムcssの記述は以下の通りです。class名はここではthumbnail_newとしました。marginなども、好みで変えて下さい。

a.thumbnail_new {
    display: block;
    float: left;
    margin: 0.5em 10px 0.5em 0;
}
a.thumbnail_new img{
    position: absolute;
}
a.thumbnail_new,
a.thumbnail_new img{
    width: 111px;
    height: 79px;
}
a.thumbnail_new:hover {
    border: none;
    cursor: default;
}
a.thumbnail_new:hover img {
    width: auto;
    height: auto;
}

htmlの記述は以下の通りです。画像のURLは適宜変えて下さい。

<p><a class="thumbnail_new" href="http://daishi100.cocolog-nifty.com/upload_images/ajisai_small.gif" ><img width="222" height="159" alt="サンプル" src="http://daishi100.cocolog-nifty.com/upload_images/ajisai_small.gif" /></a> マウスを重ねると画像が拡大されます。</p>

余談ですが、サムネイルを記述した段落のあとの改行が上手くいかないので、苦肉の策(?)で、下記のようなspacerタグを入れて、横10px、高さ80pxのスペースを入れてあります。
<p><spacer width="10" height="80" type="block"></spacer></p>

追記:<spacer>タグはFirefoxでは有効ですが、Google Chrome、IE8では無視されるようです。また、あくまでも当方のココログ上での表示確認しかしておらず、他の方のココログでは上手く動作しないという報告がありました。

 


コメント

コメントを書く

(ウェブ上には掲載しません)

counter since 2018/12/25

  • Flag Counter

    FLAG Counterのロゴをクリックすると、更に詳しい分析結果が表示されます。
    ココログのアクセス解析よりは少ない数字になるようです。
サイト内検索
ココログ最強検索 by 暴想
2020年8月
            1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31          

sponsored link


ドールハウス工作おすすめ参考図書

カテゴリー

無料ブログはココログ