Q&A
ソースコードの部分を code タグで囲ってください。
###前提・実現したいこと
wordpressでjqueryを使ってマウスオーバーの機能をつけようとしています。
###発生している問題・エラーメッセージ
githubのhttps://github.com/alanphoon/jquery-live-previewこのページを参考にしたいのですが、wordpress内にこのページのCSS,JS,HTMLを書き込んでも作動しませんでした。どのテキストを使えばいいのか、githubの正しい活用法を教えていただきたいです。
###該当のソースコード
<!DOCTYPE html> <html> <head> <title>Jquery Live Preview Quick Example</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> <script src="js/jquery-live-preview.js"></script> <link href="css/livepreview-demo.css" rel="stylesheet" type="text/css"><style> /*** Styles for Live Preview Window ***/ #livepreview_iframe { box-shadow: inset 5px 5px 10px #666; -moz-box-shadow: inset 5 5px 10px #666; -webkit-box-shadow: inset 5 5px 10px #666; } #livepreview_dialog { padding:0px; height:200px; width:300px; background-color:#fff; background-image:url('/images/icon_loading.gif'); background-repeat:no-repeat; background-position:center center; position:absolute; border:solid 5px #666; border-radius:5px; -moz-border-radius: 5px; -webkit-border-radius:5px; } #livepreview_dialog:after, #livepreview_dialog:before { border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } #livepreview_dialog.bottom:after, #livepreview_dialog.bottom:before { bottom: 100%; left: 50%; } #livepreview_dialog.bottom:after { border-color: rgba(255, 255, 255, 0); border-bottom-color: #ffffffff; border-width: 20px; margin-left: -20px; } #livepreview_dialog.bottom:before { border-color: rgba(102, 102, 102, 0); border-bottom-color: #666666; border-width: 26px; margin-left: -26px; } #livepreview_dialog.top:after, #livepreview_dialog.top:before { top: 100%; left: 50%; } #livepreview_dialog.top:after { border-color: rgba(255, 255, 255, 0); border-top-color: #ffffffff; border-width: 20px; margin-left: -20px; } #livepreview_dialog.top:before { border-color: rgba(102, 102, 102, 0); border-top-color: #666666; border-width: 26px; margin-left: -26px; } #livepreview_dialog.right:after, #livepreview_dialog.right:before { right: 100%; top: 50%; } #livepreview_dialog.right:after { border-color: rgba(255, 255, 255, 0); border-right-color: #ffffffff; border-width: 20px; margin-top: -20px; } #livepreview_dialog.right:before { border-color: rgba(102, 102, 102, 0); border-right-color: #666666; border-width: 26px; margin-top: -26px; } #livepreview_dialog.left, #livepreview_dialog.left:before { left: 100%; top: 50%; } #livepreview_dialog.left:after { border-color: rgba(255, 255, 255, 0); border-left-color: #ffffffff; border-width: 20px; margin-top: -20px; } #livepreview_dialog.left:before { border-color: rgba(102, 102, 102, 0); border-left-color: #666666; border-width: 26px; margin-top: -26px; } </style><script type="text/javascript"> $(document).ready(function() { $(".livepreview").livePreview(); }); </script> </head> <body>
</html><div style="text-align:center;"> <h3>Jquery Live Preview Quick Example</h3> <p> </p> <p><a href="http://www.bing.com" target="_blank" class="livepreview" data-position="bottom">Hover over to preview, bottom positioned click to link!</a></p> <p><a href="http://www.cnn.com" target="_blank" class="livepreview" data-position="left">Hover over to preview another link positioned to the left inline, click to link!</a></p> <p><a href="http://www.bing.com" target="_blank" class="livepreview" data-position="right">Hover over to preview, link positioned to the right!</a></p> <p><a href="http://www.cnn.com" target="_blank" class="livepreview" data-position="top">Hover over to preview another link positioned to the top inline, click to link!</a></p> <p><a href="http://www.abcnews.com" target="_blank" class="livepreview" data-trigger="click" target="_blank">Click to preview right, then click again to link!</a></p> <p><a href="http://www.bbcnews.com" target="_blank" class="livepreview" data-position="left" data-trigger="click">Click to preview left, then click again to link!</a></p> </div> </body>
まずはご自身でトライしてみてください（英語が読めません！は無しの方向で）。
あなたの回答
tips
プレビュー
